Gray out labels when disabled (#648)

* Gray out labels when disabled * Updated changelog
elastic · Apr 10, 2018 · bce21cf · bce21cf
1 parent 69f7c07
commit bce21cf
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Tweaked sizing, weights, color, line-heights, and added more levels to `EuiTitle` and `EuiText` ([#627](https://github.com/elastic/eui/pull/627))
 - Add TypeScript type defitions for `EuiPortal`, `EuiText` and `EuiTitle` as well as the `calculatePopoverPosition` service ([#638](https://github.com/elastic/eui/pull/638))
+- Grayed out labels for `disabled` controls ([#648])(https://github.com/elastic/eui/pull/648)
 
 **Bug fixes**
 

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -58,6 +58,11 @@
   cursor: not-allowed;
   background: darken($euiColorLightestShade, 2%);
   box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92);
+  color: $euiColorMediumShade;
+
+  &::placeholder {
+    color: $euiColorMediumShade;
+  }
 }
 
 /**

diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
@@ -38,7 +38,7 @@
       cursor: not-allowed !important;
 
       ~ .euiCheckbox__label {
-        color: $euiColorDarkShade;
+        color: $euiColorMediumShade;
         cursor: not-allowed !important;
       }
 

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -23,6 +23,9 @@
     &:hover:disabled {
       cursor: not-allowed;
     }
+    &:disabled ~ .euiFilePicker__prompt {
+      color: $euiColorMediumShade;
+    }
   }
 
   .euiFilePicker__icon {

diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss
@@ -32,7 +32,7 @@
       cursor: not-allowed !important;
 
       ~ .euiRadio__label {
-        color: $euiColorDarkShade;
+        color: $euiColorMediumShade;
         cursor: not-allowed !important;
       }
 

diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -108,7 +108,7 @@
     }
 
     + label {
-      color: $euiColorDarkShade;
+      color: $euiColorMediumShade;
     }
   }