Simplifying form control styles

CHANGELOG.md

@@ -1,8 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- `EuiAccordion` use MutationObserver to re-calculate height when children DOM changes ([#947](https://github.com/elastic/eui/pull/947))
 - Add `inspect` type option to icon typedef file. ([#952](https://github.com/elastic/eui/pull/952))
+- Simplified form control styles. ([#954](https://github.com/elastic/eui/pull/954))
 
-- `EuiAccordion` use MutationObserver to re-calculate height when children DOM changes ([#947](https://github.com/elastic/eui/pull/947))
+**Deprecations**
+
+- Replaced the following SASS variables have been replaced `$euiFormControlHeight--compressed`, `$euiFormControlPadding--compressed`, `euiFormBorderColor--disabled`. ([#954](https://github.com/elastic/eui/pull/954))
 
 ## [`1.0.0`](https://github.com/elastic/eui/tree/v1.0.0)
 

src/components/combo_box/_combo_box.scss

@@ -8,7 +8,7 @@
    * 3. The height on combo can be larger than normal text inputs.
    */
   .euiComboBox__inputWrap {
-    @include euiFormControlStyle;
+    @include euiFormControlStyle($includeStates: false);
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto); /* 3 */
 

src/components/form/_mixins.scss

@@ -1,4 +1,14 @@
-/*
+
+@function euiFormControlGradient($color: $euiColorPrimary) {
+  @return linear-gradient(to top,
+    $color,
+    $color 2px,
+    transparent 2px,
+    transparent 100%
+  );
+}
+
+/**
  * 1. Ensure the icon padding remains when in readOnly mode
  */
 
@@ -36,35 +46,52 @@
   }
 }
 
-@mixin euiFormControlDefaultShadow {
-  box-shadow:
-    0 3px 2px -2px rgba($euiShadowColor, 0.2),
-    inset 0 0 0 1px transparentize($euiColorFullShade, .9),
-    inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor;
+@mixin euiFormControlDefaultShadow($borderOnly: false) {
+  background-color: $euiFormBackgroundColor;
+  background-repeat: no-repeat;
+  background-size: 0%;
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      0 1px 1px -1px rgba($euiShadowColor, 0.2),
+      0 3px 2px -2px rgba($euiShadowColor, 0.2),
+      inset 0 0 0 1px $euiFormBorderColor;
+  }
+
+  transition:
+    box-shadow $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in,
+    background-image $euiAnimSpeedFast ease-in,
+    background-size $euiAnimSpeedFast ease-in;
 }
 
-@mixin euiFormControlInvalidStyle {
-  box-shadow:
-    0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2),
-    inset 0 0 0 1px transparentize($euiColorFullShade, .84),
-    inset 0 0 0 0 $euiColorEmptyShade,
-    inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger;
+@mixin euiFormControlFocusStyle($borderOnly: false) {
+  background-color: tintOrShade($euiColorEmptyShade, 0%, 50%);
+  background-image: euiFormControlGradient();
+  background-size: 100%;
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+  } @else {
+    box-shadow:
+      0 1px 1px -1px rgba($euiShadowColor, 0.2),
+      0 4px 4px -2px rgba($euiShadowColor, 0.2),
+      inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+  }
 }
 
-@mixin euiFormControlFocusStyle {
-  background: tintOrShade($euiColorEmptyShade, 0%, 20%);
-  box-shadow:
-    0 4px 4px -2px rgba($euiShadowColor, 0.2),
-    inset 0 0 0 1px transparentize($euiColorFullShade, .84),
-    inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%),
-    inset 0 -2px 0 0 $euiColorPrimary;
+@mixin euiFormControlInvalidStyle() {
+  background-image: euiFormControlGradient($euiColorDanger);
+  background-size: 100%;
 }
 
-@mixin euiFormControlDisabledStyle {
+@mixin euiFormControlDisabledStyle() {
   cursor: not-allowed;
-  background: darken($euiColorLightestShade, 2%);
-  box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .92);
   color: $euiFormControlDisabledColor;
+  background: $euiFormBackgroundDisabledColor;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
   &::placeholder {
     color: $euiFormControlDisabledColor;
@@ -80,52 +107,52 @@
 }
 
 /**
- * 1. Override invalid state with focus state.
+ * 2. Override invalid state with focus state.
  */
-@mixin euiFormControlStyle {
+
+@mixin euiFormControlStyle($borderOnly: false, $includeStates: true) {
   @include euiFormControlSize;
-  @include euiFormControlDefaultShadow;
+  @include euiFormControlDefaultShadow($borderOnly);
 
   border: none;
   font-size: $euiFontSizeS;
   font-family: $euiFontFamily;
   padding: $euiFormControlPadding;
   line-height: 1em; // fixes text alignment in IE
   color: $euiTextColor;
-  background: $euiFormBackgroundColor;
-  transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in;
   border-radius: 0;
 
   &--fullWidth {
     max-width: 100%;
   }
 
   &--compressed {
-    padding-top: $euiFormControlPadding--compressed;
-    padding-bottom: $euiFormControlPadding--compressed;
-    height: $euiFormControlHeight--compressed;
+    padding-top: $euiFormControlCompressedPadding;
+    padding-bottom: $euiFormControlCompressedPadding;
+    height: $euiFormControlCompressedHeight;
   }
 
-  &:invalid { /* 1 */
-    @include euiFormControlInvalidStyle;
-  }
+  @if ($includeStates) {
+    &:invalid { /* 2 */
+      @include euiFormControlInvalidStyle;
+    }
 
-  &:focus { /* 1 */
-    @include euiFormControlFocusStyle;
-  }
+    &:focus { /* 2 */
+      @include euiFormControlFocusStyle($borderOnly);
+    }
 
-  &:disabled {
-    @include euiFormControlDisabledStyle;
-  }
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
 
-  &[readOnly] {
-    @include euiFormControlReadOnlyStyle;
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
   }
+
 }
 
-//
 // Custom styles and states for checkboxes and radios
-//
 
 @mixin euiCustomControl($type: null, $size: $euiSize){
 

src/components/form/_variables.scss

@@ -1,19 +1,42 @@
-$euiFormMaxWidth: 400px;
-$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
-$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade
+// Sizing
+$euiFormMaxWidth: $euiSizeXXL * 10 !default;
+$euiFormControlHeight: $euiSizeXXL !default;
+$euiFormControlCompressedHeight: $euiSizeXL !default;
+$euiFormControlPadding: $euiSizeM !default;
+$euiFormControlCompressedPadding: $euiSizeS !default;
 
-$euiRadioSize: $euiSize;
-$euiCheckBoxSize: $euiSize;
+$euiRadioSize: $euiSize !default;
+$euiCheckBoxSize: $euiSize !default;
 
-$euiSwitchHeight: $euiSize * 1.25;
-$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS;
-$euiSwitchThumbSize: $euiSwitchHeight;
-$euiSwitchIconHeight: $euiSize;
+$euiSwitchHeight: $euiSize * 1.25 !default;
+$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default;
+$euiSwitchThumbSize: $euiSwitchHeight !default;
+$euiSwitchIconHeight: $euiSize !default;
 
-$euiFormControlHeight: $euiSizeXXL;
-$euiFormControlHeight--compressed: $euiSizeXL;
+// Coloring
+$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%) !default;
+$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
+$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default;
+$euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
+$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
+$euiFormControlDisabledColor: $euiColorMediumShade !default;
 
-$euiFormControlPadding: $euiSizeM;
-$euiFormControlPadding--compressed: $euiSizeS;
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
 
-$euiFormControlDisabledColor: $euiColorMediumShade;
+@if variable-exists(euiFormControlHeight--compressed) {
+  $euiFormControlCompressedHeight: $euiFormControlHeight--compressed !global;
+  @warn '`$euiFormControlHeight--compressed` is deprecated. Please use `$euiFormControlCompressedHeight` instead';
+}
+
+@if variable-exists(euiFormControlPadding--compressed) {
+  $euiFormControlCompressedPadding: $euiFormControlPadding--compressed !global;
+  @warn '`$euiFormControlPadding--compressed` is deprecated. Please use `$euiFormControlCompressedPadding` instead';
+}
+
+@if variable-exists(euiFormBorderColor--disabled) {
+  $euiFormBorderDisabledColor: $euiFormBorderColor--disabled !global;
+  @warn '`$euiFormBorderColor--disabled` is deprecated. Please use `$euiFormBorderDisabledColor` instead';
+}

src/components/form/file_picker/_file_picker.scss

@@ -55,6 +55,7 @@
    * 1. Don't block the user from dropping files onto the filepicker.
    * 2. Put prompt on top of input, so the clear button can intercept the click.
    * 3. Ensure space for import icon and clear button (only if it has files)
+   * 4. Delay focus gradient or else it will only partially transition while file chooser opens
    */
   .euiFilePicker__prompt {
     @include euiFormControlDefaultShadow;
@@ -63,19 +64,19 @@
     position: relative; /* 2 */
     z-index: 1; /* 2 */
     display: block;
-    background: $euiColorLightestShade;
     padding: $euiSizeL;
-    background: $euiFormBackgroundColor;
     text-align: center;
+
     transition:
-      box-shadow $euiAnimSpeedNormal ease-in,
-      background $euiAnimSpeedNormal ease-in,
-      color $euiAnimSpeedNormal ease-in;
+      box-shadow $euiAnimSpeedFast ease-in,
+      background-color $euiAnimSpeedFast ease-in,
+      background-image $euiAnimSpeedFast ease-in,
+      background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 4 */
 
     @at-root {
       .euiFilePicker--compressed#{&} {
-        height: $euiFormControlHeight--compressed;
-        padding: $euiFormControlPadding--compressed;
+        height: $euiFormControlCompressedHeight;
+        padding: $euiFormControlCompressedPadding;
         @include euiFormControlWithIcon(); /* 3 */
         text-align: left;
       }
@@ -117,7 +118,11 @@
   // Hover and focus
   .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt,
   .euiFilePicker__input:focus + .euiFilePicker__prompt {
-    text-decoration: underline;
+    .euiFilePicker__promptText {
+      // Adding the underline to the prompt text ensures the underline
+      // color is the same as the current text color
+      text-decoration: underline;
+    }
 
     .euiFilePicker__icon {
       transform: scale(1.1);

src/components/form/select/_select.scss

@@ -14,12 +14,17 @@
   padding-bottom: 0; /* 2 */
 
   &--compressed {
-    line-height: $euiFormControlHeight--compressed; /* 2 */
+    line-height: $euiFormControlCompressedHeight; /* 2 */
     padding-top: 0; /* 2 */
     padding-bottom: 0; /* 2 */
   }
 
   &::-ms-expand {
     display: none;
   }
+
+  &:focus::-ms-value {
+    color: $euiTextColor;
+    background: transparent;
+  }
 }