(Mostly) Form Fixes (#894)

elastic · Jun 5, 2018 · c4f7fd8 · c4f7fd8
1 parent ceb820c
commit c4f7fd8
Show file tree

Hide file tree

Showing 28 changed files with 210 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,13 +2,21 @@
 
 - Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
 - Added `restrictWidth` to `EuiPage` ([#896](https://github.com/elastic/eui/pull/896))
+- Added `resize` prop to `EuiTextArea` that defaults to ‘vertical’ (only height) ([#894](https://github.com/elastic/eui/pull/894))
+- Added multiple style-only adjustments to `EuiFormControlLayout` buttons/icons ([#894](https://github.com/elastic/eui/pull/894))
+- Shifted `readOnly` inputs to not have left padding unless it has an icon ([#894](https://github.com/elastic/eui/pull/894))
 
 **Bug fixes**
 
 - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892))
 - `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890))
 - `EuiIcon` no longer takes focus in Edge and IE unless `tabIndex` is defined as a value other than `"-1"` ([#900](https://github.com/elastic/eui/pull/900))
 - Fixed regression introduced in `0.0.50` in which the form control icons blocked users from clicking the control ([#898](https://github.com/elastic/eui/pull/898))
+- Fixed `EuiSwitch` background in case it’s been placed on a gray background ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed `EuiComboBox` hidden input focus styles ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed responsive widths of `EuiDescribedFormGroup` ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed descenders being cut off in `EuiSelect` ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed extra spacing applied by Safari to `EuiFieldSearch` ([#894](https://github.com/elastic/eui/pull/894))
 
 ## [`0.0.51`](https://github.com/elastic/eui/tree/v0.0.51)
 

diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
@@ -7,6 +7,8 @@ import {
 } from '../../components';
 
 import {
+  EuiBadge,
+  EuiCallOut,
   EuiCheckbox,
   EuiCheckboxGroup,
   EuiCode,
@@ -271,17 +273,26 @@ export const FormControlsExample = {
     }],
     text: (
       <Fragment>
+        <p>
+          <EuiBadge color={'warning'}>
+            Building block only
+          </EuiBadge>
+        </p>
+
         <p>
           <EuiCode>EuiFormControlLayout</EuiCode> is generally used internally to consistently style
           form controls, but it&rsquo;s published in case you want to create your own form control
           which matches those of EUI. The examples below demonstrate its various states.
         </p>
 
-        <p>
-          Note that the padding on the <EuiCode>input</EuiCode> itself doesn&rsquo;t take into account the presence
-          of the various icons supported by <EuiCode>EuiFormControlLayout</EuiCode>. Any input component
-          provided to <EuiCode>EuiFormControlLayout</EuiCode> is responsible for its own padding.
-        </p>
+        <EuiCallOut title="Additional padding required" color="warning">
+          <p>
+            The padding on the <EuiCode>input</EuiCode> itself doesn&rsquo;t take into account the presence
+            of the various icons supported by <EuiCode>EuiFormControlLayout</EuiCode>. Any input component
+            provided to <EuiCode>EuiFormControlLayout</EuiCode> is responsible for its own padding.
+          </p>
+        </EuiCallOut>
+
       </Fragment>
     ),
     props: {

diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
@@ -63,7 +63,7 @@ export const HomeView = () => (
                 This will provide symbols that match against their EUI component
                 counterparts."
             >
-              <EuiLink href="https://github.com/elastic/eui/releases/download/v0.0.25/eui_sketch_0.0.25.zip">
+              <EuiLink href="https://github.com/elastic/eui/releases/download/v0.0.51/eui_sketch_0.0.51.zip">
                 <strong>Sketch libraries</strong>
               </EuiLink>
             </EuiToolTip>

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -12,10 +12,10 @@
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto); /* 3 */
 
-    $padding: $euiSizeXS;
+    padding: $euiSizeXS;
     display: flex; /* 1 */
     flex-wrap: wrap; /* 1 */
-    padding: $padding $euiSizeXL*2 $padding $padding; /* 2 */
+    @include euiFormControlLayout__padding(2); /* 2 */
     align-content: flex-start;
 
     &:hover {

diff --git a/src/components/combo_box/_index.scss b/src/components/combo_box/_index.scss
@@ -1,5 +1,6 @@
 @import '../form/variables';
 @import '../form/mixins';
+@import '../form/form_control_layout/mixins';
 
 @import 'combo_box';
 @import 'combo_box_input/index';

diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -0,0 +1,10 @@
+.euiComboBox__input {
+
+  // Ensure that no input states are visible on the hidden input
+  input[aria-hidden="true"] {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+}
diff --git a/src/components/combo_box/combo_box_input/_index.scss b/src/components/combo_box/combo_box_input/_index.scss
@@ -1,2 +1,3 @@
+@import 'combo_box_input';
 @import 'combo_box_pill';
 @import 'combo_box_placeholder';
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js
@@ -161,6 +161,7 @@ export class EuiComboBoxInput extends Component {
       onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
       ref: toggleButtonRef,
       'aria-label': isListOpen ? 'Close list of options' : 'Open list of options',
+      disabled: isDisabled
     };
 
     return (

diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss
@@ -1,3 +1,5 @@
+@import 'form_control_layout/mixins';
+
 @import 'variables';
 @import 'mixins';
 

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -1,31 +1,36 @@
-@mixin euiFormControlSize($height: $euiSizeXXL) {
+/*
+ * 1. Ensure the icon padding remains when in readOnly mode
+ */
+
+@mixin euiFormControlSize($height: $euiFormControlHeight) {
   max-width: $euiFormMaxWidth;
   width: 100%;
   height: $height;
 }
 
-@mixin euiFormControlWithIcon($isIconOptional: false) {
-  $iconPadding: $euiSizeXXL;
-
+@mixin euiFormControlWithIcon($isIconOptional: false, $side: "left") {
   @if ($isIconOptional) {
     @at-root {
-      #{&}--withIcon {
-        padding-left: $iconPadding;
+      #{&}--withIcon,
+      #{&}--withIcon[readOnly] /* 1 */ {
+        @include euiFormControlLayout__padding(1, $side);
       }
     }
   } @else {
-    padding-left: $iconPadding;
+    &,
+    &[readOnly] /* 1 */ {
+      @include euiFormControlLayout__padding(1, $side);
+    }
   }
 }
 
 @mixin euiFormControlIsLoading($isNextToIcon: false) {
-
   @at-root {
     #{&}-isLoading {
       @if ($isNextToIcon) {
-        padding-right: $euiSizeXXL + $euiSize;
+        @include euiFormControlLayout__padding(2);
       } @else {
-        padding-right: $euiSizeXXL;
+        @include euiFormControlLayout__padding(1);
       }
     }
   }
@@ -59,13 +64,21 @@
   cursor: not-allowed;
   background: darken($euiColorLightestShade, 2%);
   box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92);
-  color: $euiColorMediumShade;
+  color: $euiFormControlDisabledColor;
 
   &::placeholder {
-    color: $euiColorMediumShade;
+    color: $euiFormControlDisabledColor;
   }
 }
 
+@mixin euiFormControlReadOnlyStyle {
+  cursor: default;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding-left: 0; // line up text with label
+}
+
 /**
  * 1. Override invalid state with focus state.
  */
@@ -89,7 +102,7 @@
   &--compressed {
     padding-top: $euiFormControlPadding--compressed;
     padding-bottom: $euiFormControlPadding--compressed;
-    height: $euiSizeXL;
+    height: $euiFormControlHeight--compressed;
   }
 
   &:invalid { /* 1 */
@@ -105,14 +118,14 @@
   }
 
   &[readOnly] {
-    cursor: default;
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
+    @include euiFormControlReadOnlyStyle;
   }
 }
 
-// CUSTOM STYLES & STATES
+//
+// Custom styles and states for checkboxes and radios
+//
+
 @mixin euiCustomControl($type: null, $size: $euiSize){
 
   @if $size {

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -10,5 +10,10 @@ $euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS;
 $euiSwitchThumbSize: $euiSwitchHeight;
 $euiSwitchIconHeight: $euiSize;
 
+$euiFormControlHeight: $euiSizeXXL;
+$euiFormControlHeight--compressed: $euiSizeXL;
+
 $euiFormControlPadding: $euiSizeM;
 $euiFormControlPadding--compressed: $euiSizeS;
+
+$euiFormControlDisabledColor: $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: $euiColorMediumShade;
+        color: $euiFormControlDisabledColor;
         cursor: not-allowed !important;
       }
 

diff --git a/src/components/form/described_form_group/_described_form_group.scss b/src/components/form/described_form_group/_described_form_group.scss
@@ -14,7 +14,8 @@
   }
 
   .euiDescribedFormGroup__fields {
-    min-width: $euiFormMaxWidth;
+    width: $euiFormMaxWidth;
+    max-width: 100%;
   }
 
   .euiDescribedFormGroup__fieldPadding {
@@ -39,12 +40,6 @@
   }
 
   @include screenXSmall {
-    max-width: $euiFormMaxWidth;
-
-    &.euiDescribedFormGroup--fullWidth {
-      max-width: 100%;
-    }
-
     .euiDescribedFormGroup__fields {
       padding-top: 0;
 

diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss
@@ -1,9 +1,16 @@
+/*
+ * 1. Fix for Safari to ensure that it renders like a normal text input
+ *    and doesn't add extra spacing around text
+ */
+
 .euiFieldSearch {
   @include euiFormControlStyle;
   @include euiFormControlWithIcon($isIconOptional: false);
   @include euiFormControlIsLoading;
-  // This is a hack, since in Safari the search boxes were ignoring
-  // padding. Get Dave Snider involved. It improves rendering significantly
-  // although the padding still looks a bit off.
-  -webkit-appearance: textfield;
+
+  -webkit-appearance: textfield; /* 1 */
+
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;  /* 1 */
+  }
 }
diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -65,7 +65,6 @@
     display: block;
     background: $euiColorLightestShade;
     padding: $euiSizeL;
-    //border-radius: $euiBorderRadius / 2;
     background: $euiFormBackgroundColor;
     text-align: center;
     transition:
@@ -76,9 +75,10 @@
 
     @at-root {
       .euiFilePicker--compressed#{&} {
-        padding: $euiSizeS $euiSize $euiSizeS $euiSizeXXL; /* 3 */
+        height: $euiFormControlHeight--compressed;
+        padding: $euiFormControlPadding--compressed;
+        @include euiFormControlWithIcon(); /* 3 */
         text-align: left;
-        height: $euiSizeXL;
       }
     }
   }
@@ -107,10 +107,10 @@
 
     @at-root {
       .euiFilePicker--compressed#{&} {
+        @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
         position: absolute;
         top: $euiSizeM/2;
         right: $euiSizeM;
-        @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
       }
     }
   }
@@ -136,7 +136,7 @@
   }
 
   &.euiFilePicker-hasFiles.euiFilePicker--compressed .euiFilePicker__prompt {
-    padding-right: $euiSizeXXL; /* 3 */
+    @include euiFormControlWithIcon(false, "right"); /* 3 */
   }
 
   // When the filepicker has files in it, but not in compressed mode

diff --git a/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss b/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
@@ -4,17 +4,18 @@
 
 .euiFormControlLayoutCustomIcon--clickable {
   pointer-events: all;
-  height: $euiSize;
-  width: $euiSize;
   @include size($euiSize);
 
   .euiFormControlLayoutCustomIcon__clickableIcon {
     vertical-align: baseline;
   }
 
   &:focus {
-    background: $euiColorPrimary;
-    border-radius: 100%;
-    color: $euiColorGhost;
+    @include euiFocusRing;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: $euiFormControlDisabledColor;
   }
 }
diff --git a/src/components/form/form_control_layout/_form_control_layout_icons.scss b/src/components/form/form_control_layout/_form_control_layout_icons.scss
@@ -8,11 +8,18 @@
   align-items: center;
 
   > * + * {
-    margin-left: $euiFormControlPadding;
+    margin-left: $euiFormControlPadding/2;
   }
 }
 
 .euiFormControlLayoutIcons--right {
   left: auto;
   right: $euiFormControlPadding;
 }
+
+
+// If the control is disabled, change the color of the icons
+*:disabled + .euiFormControlLayoutIcons {
+  cursor: not-allowed;
+  color: $euiFormControlDisabledColor;
+}