From 71fb84e34b051beac823169a93562e975508b449 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 8 Mar 2023 09:06:48 +0100
Subject: [PATCH] fix: added missing select disabled styles (#360)

---
 .../01-elements/select/select-variations.hbs  |  2 +-
 .../select/select-variations~disabled.json    | 25 +++++++++++++++++++
 .../_patterns/01-elements/select/select.scss  | 10 ++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 source/_patterns/01-elements/select/select-variations~disabled.json

diff --git a/source/_patterns/01-elements/select/select-variations.hbs b/source/_patterns/01-elements/select/select-variations.hbs
index 2ad1f373ed..c942fef256 100644
--- a/source/_patterns/01-elements/select/select-variations.hbs
+++ b/source/_patterns/01-elements/select/select-variations.hbs
@@ -1,6 +1,6 @@
 <dl>
 {{#each variations}}
 	<dt>{{variant}}:</dt>
-	<dd>{{> elements-select }}</dd>
+	<dd>{{> elements-select disabled=../disabled }}</dd>
 {{/each }}
 </dl>
diff --git a/source/_patterns/01-elements/select/select-variations~disabled.json b/source/_patterns/01-elements/select/select-variations~disabled.json
new file mode 100644
index 0000000000..b4a2cc6993
--- /dev/null
+++ b/source/_patterns/01-elements/select/select-variations~disabled.json
@@ -0,0 +1,25 @@
+{
+	"variations": [
+		{
+			"variant": "semitransparent",
+			"id": "select05",
+			"label": "Devices"
+		},
+		{
+			"variant": "white",
+			"id": "select06",
+			"label": "Devices"
+		},
+		{
+			"variant": "solid",
+			"id": "select07",
+			"label": "Devices"
+		},
+		{
+			"variant": "outline",
+			"id": "select08",
+			"label": "Devices"
+		}
+	],
+	"disabled": true
+}
diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss
index e502c37a9e..ad6ffcd995 100644
--- a/source/_patterns/01-elements/select/select.scss
+++ b/source/_patterns/01-elements/select/select.scss
@@ -49,6 +49,16 @@
 		}
 	}
 
+	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
+	&:disabled,
+	fieldset:disabled & {
+		&,
+		& + .elm-label {
+			// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
+			opacity: 0.4;
+		}
+	}
+
 	// ### Style variations
 	&[data-variant="semitransparent"] {
 		@extend %form-element-semitransparent;