[Feature Branch] Update compressed form control styles (#2174)

* Updated compressed visual style in mixin * Compressed updates to from control groups * Fix compressed state overrides * Reduce horizontal padding for compressed * Icons and button icons in input groups * Added a compressed option for from` euiFormControlLayoutPadding` * Added compressed padding for inputs with icons * Fix readonly & compressed input groups * Fix group heights * Update file picker with new compressed styles * Fix delimited compressed and fullwidth styles * Fixed EuiComboBox * Added reduced padding for EuiColorPicker * Fixed date pickers * Variables for border-radius
elastic · Aug 30, 2019 · 8294fa2 · 8294fa2
1 parent 73be151
commit 8294fa2
Show file tree

Hide file tree

Showing 27 changed files with 261 additions and 93 deletions.
diff --git a/src/components/color_picker/__snapshots__/color_picker.test.js.snap b/src/components/color_picker/__snapshots__/color_picker.test.js.snap
@@ -25,7 +25,7 @@ exports[`renders EuiColorPicker 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 type="text"
@@ -99,7 +99,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 type="text"
@@ -171,7 +171,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 placeholder="Transparent"
@@ -244,7 +244,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 placeholder="Transparent"
@@ -319,7 +319,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon euiFieldText--compressed"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 type="text"
@@ -393,7 +393,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 disabled=""
                 maxlength="7"
@@ -468,7 +468,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon euiFieldText--fullWidth"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--fullWidth"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 type="text"
@@ -542,7 +542,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
               <input
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
-                class="euiFieldText euiFieldText--withIcon"
+                class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
                 data-test-subj="colorPickerAnchor"
                 maxlength="7"
                 readonly=""

diff --git a/src/components/color_picker/_color_picker.scss b/src/components/color_picker/_color_picker.scss
@@ -1,10 +1,25 @@
+@import '../form/mixins';
 
 .euiColorPicker {
   position: relative;
   // 5 columns of swatches + margins + border
   width: ($euiSizeL * 5) + ($euiSizeS * 4);
+
+}
+
+.euiColorPicker__popoverAnchor {
+  // Nested needed for specificity of overriding .euiFieldText
+  .euiColorPicker__input {
+    @include euiFormControlWithIcon($isIconOptional: false, $side: 'right');
+
+    &[class*='--compressed'] {
+      @include euiFormControlWithIcon($isIconOptional: false, $side: 'right', $compressed: true);
+    }
+  }
 }
 
+
+
 // Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
 .euiSwatchInput__stroke {
   fill: none;

diff --git a/src/components/color_picker/color_picker.js b/src/components/color_picker/color_picker.js
@@ -208,6 +208,7 @@ export const EuiColorPicker = ({
             ]}>
             {([openLabel, closeLabel]) => (
               <EuiFieldText
+                className="euiColorPicker__input"
                 onClick={handleInputActivity}
                 onKeyDown={handleInputActivity}
                 value={color ? color.toUpperCase() : ''}

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -16,7 +16,7 @@
   }
 
   .euiComboBox__inputWrap {
-    @include euiFormControlStyle($includeStates: false, $includeSizes: false);
+    @include euiFormControlStyle($includeStates: false, $includeSizes: true);
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto, $includeAlternates: true);
     padding: $euiSizeXS $euiSizeS;
@@ -54,7 +54,7 @@
   .euiComboBox__input {
     // sass-lint:disable-block no-important
     display: inline-flex !important; /* 1 */
-    height: 32px; /* 2 */
+    height: $euiSizeXL; /* 2 */
     overflow: hidden; /* 5 */
 
     > input {
@@ -73,6 +73,10 @@
   &.euiComboBox-isOpen {
     .euiComboBox__inputWrap {
       @include euiFormControlFocusStyle;
+
+      &--compressed {
+        @include euiFormControlFocusStyle($borderOnly: true);
+      }
     }
   }
 
@@ -90,6 +94,7 @@
 
   &.euiComboBox--compressed {
     .euiComboBox__inputWrap {
+      // height: $euiFormControlCompressedHeight; /* 2 */
       line-height: $euiFormControlCompressedHeight; /* 2 */
       padding-top: 0;
       padding-bottom: 0;

diff --git a/src/components/combo_box/combo_box_input/_combo_box_pill.scss b/src/components/combo_box/combo_box_input/_combo_box_pill.scss
@@ -1,10 +1,22 @@
-// Overwrites the base styling of EuiBadge, to give it a larger size and margins
-// that make sense in the input wrap.
+/*
+ * 1. Overwrites the base styling of EuiBadge, to give it a larger size and margins
+ * that make sense in the input wrap.
+ */
 .euiComboBoxPill {
-  margin: $euiSizeXS !important; // sass-lint:disable-line no-important
+  height: $euiSizeL - 2px;
   line-height: $euiSizeL - 2px;
   vertical-align: baseline;
 
+  &,
+  & + & /* 1 */ {
+    margin: $euiSizeXS;
+  }
+
+  .euiComboBox--compressed &,
+  .euiComboBox--compressed & + & /* 1 */ {
+    margin: $euiSizeXS $euiSizeXS 0 0;
+  }
+
   &--plainText {
     @include euiFont;
     @include euiTextTruncate;

diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss
@@ -28,6 +28,10 @@
 // This is mostly here so that we can provide an inline version that doesn't have the
 // shadows and depth.
 .euiDatePicker {
+  .euiFormControlLayout {
+    height: auto;
+  }
+
   &.euiDatePicker--shadow {
     .react-datepicker-popper {
       @include euiBottomShadowMedium;

diff --git a/...er/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/...er/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiQuickSelectPopover is rendered 1`] = `
 <EuiPopover
+  anchorClassName="euiQuickSelectPopover__anchor"
   anchorPosition="downLeft"
   button={
     <EuiButtonEmpty
@@ -87,6 +88,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
 
 exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
 <EuiPopover
+  anchorClassName="euiQuickSelectPopover__anchor"
   anchorPosition="downLeft"
   button={
     <EuiButtonEmpty

diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -15,3 +15,7 @@
   // Override specificity from universal and sibiling selectors
   margin-right: $euiSizeXS !important;
 }
+
+.euiQuickSelectPopover__anchor {
+  height: 100%;
+}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -125,6 +125,7 @@ export class EuiQuickSelectPopover extends Component {
         isOpen={this.state.isOpen}
         closePopover={this.closePopover}
         anchorPosition="downLeft"
+        anchorClassName="euiQuickSelectPopover__anchor"
         ownFocus>
         <div
           className="euiQuickSelectPopover__content"

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'form_control_layout/variables';
+@import 'form_control_layout/mixins';
 
 @mixin euiPlaceholderPerBrowser {
   // sass-lint:disable-block no-vendor-prefixes
@@ -21,7 +22,6 @@
 }
 
 /**
- * 2. Account for inner box-shadow style border when in group
  * 3. Must supply both values to background-size or some browsers apply the single value to both directions
  */
 
@@ -37,7 +37,6 @@
   }
 }
 
-
 @mixin euiFormControlSize(
   $height: $euiFormControlHeight,
   $includeAlternates: false
@@ -56,25 +55,21 @@
       height: $euiFormControlCompressedHeight;
     }
 
-    &--inGroup:not(:read-only) {
-      height: $euiFormControlLayoutGroupInputHeight; /* 2 */
-    }
-
-    &--inGroup#{&}--compressed:not(:read-only) {
-      height: $euiFormControlLayoutGroupInputCompressedHeight; /* 2 */
+    &--inGroup {
+      height: 100%;
     }
   }
 }
 
-@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left') {
+@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
   @if ($isIconOptional) {
     @at-root {
       #{&}--withIcon {
-        @include euiFormControlLayoutPadding(1, $side);
+        @include euiFormControlLayoutPadding(1, $side, $compressed);
       }
     }
   } @else {
-    @include euiFormControlLayoutPadding(1, $side);
+    @include euiFormControlLayoutPadding(1, $side, $compressed);
   }
 }
 
@@ -172,25 +167,49 @@
   border-radius: 0;
   padding: $euiFormControlPadding;
 
+  @if ($includeStates) {
+    &:invalid { /* 4 */
+      @include euiFormControlInvalidStyle;
+    }
+
+    &:focus { /* 4 */
+      @include euiFormControlFocusStyle;
+    }
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
+  }
+
   @if ($includeSizes) {
     &--compressed {
-      padding-top: $euiFormControlCompressedPadding;
-      padding-bottom: $euiFormControlCompressedPadding;
+      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
     }
 
     &--inGroup {
       // sass-lint:disable-block no-important
       box-shadow: none !important;
+      border-radius: 0;
     }
   }
+}
+
+@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
+  @include euiFormControlDefaultShadow($borderOnly: true);
+  padding: $euiFormControlCompressedPadding;
+  border-radius: $euiFormControlCompressedBorderRadius;
 
   @if ($includeStates) {
     &:invalid { /* 4 */
       @include euiFormControlInvalidStyle;
     }
 
     &:focus { /* 4 */
-      @include euiFormControlFocusStyle;
+      @include euiFormControlFocusStyle($borderOnly: true);
     }
 
     &:disabled {
@@ -201,7 +220,6 @@
       @include euiFormControlReadOnlyStyle;
     }
   }
-
 }
 
 // Custom styles and states for checkboxes and radios
@@ -248,4 +266,4 @@
 @mixin euiCustomControlFocused {
   @include euiFocusRing;
   border-color: $euiColorPrimary;
-}
+}
diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -4,6 +4,7 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
+$euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default;
 
 $euiRadioSize: $euiSize !default;
 $euiCheckBoxSize: $euiSize !default;
@@ -21,5 +22,5 @@ $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
-$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
+$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
+$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%) !default;
diff --git a/src/components/form/field_number/_field_number.scss b/src/components/form/field_number/_field_number.scss
@@ -3,3 +3,7 @@
   @include euiFormControlWithIcon($isIconOptional: true);
   @include euiFormControlIsLoading;
 }
+
+.euiFieldNumber--withIcon.euiFieldNumber--compressed {
+  @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
+}
diff --git a/src/components/form/field_password/_field_password.scss b/src/components/form/field_password/_field_password.scss
@@ -2,4 +2,8 @@
   @include euiFormControlStyle;
   @include euiFormControlWithIcon($isIconOptional: false);
   @include euiFormControlIsLoading;
+
+  &.euiFieldPassword--compressed {
+    @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
+  }
 }
diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss
@@ -14,4 +14,8 @@
   &::-webkit-search-decoration {
     -webkit-appearance: none;  /* 1 */
   }
+
+  &.euiFieldSearch--compressed {
+    @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
+  }
 }
diff --git a/src/components/form/field_text/_field_text.scss b/src/components/form/field_text/_field_text.scss
@@ -10,3 +10,7 @@
     @include euiFormControlInvalidStyle;
   }
 }
+
+.euiFieldText--withIcon.euiFieldText--compressed {
+  @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
+}