Simplifying form control styles

- Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes
cchaos · Jun 28, 2018 · c2e8a73 · c2e8a73
1 parent c5f0ab5
commit c2e8a73
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 108 deletions.
diff --git a/src/components/combo_box/_combo_box.scss b/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 */
 

diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss
@@ -1,27 +1,30 @@
+@import '../form/variables';
+@import '../form/mixins';
+@import '../form/form_control_layout/mixins';
+
 /**
- * 1. We don't want any of the animations that come inherited from the mixin.
- *    These should act like normal links instead.
+ * 1. Only add the border style drop shadow
  */
-.euiFilterButton {
-  @include euiButton;
 
-  line-height: 40px;
-  border-color: transparent;
-  background-color: transparent;
-  box-shadow: none;
-  transform: none !important; // 1
-  animation: none !important; // 1
+.euiFilterButton {
+  flex-grow: 0; // Shrink by default
 
   .euiFilterButton__content {
-    @include euiButtonContent;
-
-    padding: 0 $euiSizeS;
+    @include euiFormControlStyle($borderOnly: true, $includeStates: false);
+    width: auto;
+    max-width: none;
+    white-space: nowrap;
+  }
 
+  &:disabled .euiFilterButton__content {
+    @include euiFormControlDisabledStyle;
+    font-style: italic;
   }
 
   .euiFilterButton__textShift {
-    text-align: center;
     display: inline-block;
+    text-align: center;
+    vertical-align: middle;
 
     &::after {
       display: block;
@@ -33,35 +36,29 @@
     }
   }
 
-  &.euiFilterButton--iconRight {
-    .euiFilterButton__content {
-      @include euiButtonContent($isReverse: true);
-    }
+  .euiFilterButton__notification {
+    margin-left: $euiSizeS;
+    vertical-align: text-bottom;
   }
 
-  &:disabled {
-    color: $euiButtonColorDisabled;
-    pointer-events: none;
-
-    .euiFilterButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
+  &.euiFilterButton-isSelected,
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    .euiFilterButton__textShift {
+      text-decoration: underline;
     }
+  }
 
-    .euiFilterButton__icon {
-      fill: $euiButtonColorDisabled;
-    }
+  &.euiFilterButton-grow {
+    flex-grow: 1;
+    width: 100%;
 
-    &:hover, &:focus {
-      background-color: $euiColorEmptyShade;
-      text-decoration: none;
+    .euiFilterButton__content {
+      width: 100%;
+      text-align: left;
     }
   }
 
-  &.euiFilterButton-isSelected {
-    text-decoration: underline;
-  }
-
   &.euiFilterButton-hasActiveFilters {
     font-weight: $euiFontWeightBold;
   }
@@ -80,17 +77,18 @@ $buttonTypes: (
 @each $name, $color in $buttonTypes {
   .euiFilterButton--#{$name} {
     color: $color;
+  }
+}
 
-    .euiFilterButton__icon {
-      fill: $color;
-    }
-
-    &:hover {
-      background-color: transparent;
+// Icon padding
+.euiFilterButton--iconLeft {
+  .euiFilterButton__content {
+    @include euiFormControlLayout__padding(1, "left");
+  }
+}
 
-      @if ($name == 'disabled') {
-        cursor: not-allowed;
-      }
-    }
+.euiFilterButton--iconRight {
+  .euiFilterButton__content {
+    @include euiFormControlLayout__padding(1);
   }
 }
diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -1,3 +1,13 @@
+
+@function euiFormControlGradient($color: $euiColorPrimary) {
+  @return linear-gradient(to top,
+    $color,
+    $color ($euiSizeXS / 2),
+    transparent ($euiSizeXS / 2),
+    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;
@@ -82,45 +109,46 @@
 /**
  * 1. 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 { /* 1 */
+      @include euiFormControlInvalidStyle;
+    }
 
-  &:focus { /* 1 */
-    @include euiFormControlFocusStyle;
-  }
+    &:focus { /* 1 */
+      @include euiFormControlFocusStyle($borderOnly);
+    }
 
-  &:disabled {
-    @include euiFormControlDisabledStyle;
-  }
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
 
-  &[readOnly] {
-    @include euiFormControlReadOnlyStyle;
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
   }
+
 }
 
 //

diff --git a/src/components/form/_variables.scss b/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';
+}
diff --git a/src/components/form/file_picker/_file_picker.scss b/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);