Fix focus state regression of icons in EuiFormControlLayout. (#898)

* Fix focus state regression of icons in EuiFormControlLayout. * Refactor EuiFormControlLayout for readability and clarity. * Break up SCSS into multiple files and improve class names. * Normalize DOM structure of EuiFormControlLayoutCustomIcon.
elastic · Jun 5, 2018 · b78e76d · b78e76d
1 parent df5491e
commit b78e76d
Show file tree

Hide file tree

Showing 13 changed files with 390 additions and 287 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,11 @@
 - Added `restrictWidth` to `EuiPage` ([#896](https://github.com/elastic/eui/pull/896))
 
 **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))
 
 ## [`0.0.51`](https://github.com/elastic/eui/tree/v0.0.51)
 
@@ -16,10 +18,12 @@
 
 **Bug fixes**
 
-- Moved `EuiFieldSearch`'s and `EuiValidateControl`'s ref out of render into setClass methods. ([#883](https://github.com/elastic/eui/pull/883))
+- Moved `EuiFieldSearch`'s and `EuiValidateControl`'s ref out of render into `setRef` methods. ([#883](https://github.com/elastic/eui/pull/883))
 
 ## [`0.0.50`](https://github.com/elastic/eui/tree/v0.0.50)
 
+**Note: this release creates a minor regression to form controls containing icons, in which the icon blocks the user from clicking the control. This is fixed in `0.0.52`.**
+
 - Created `EuiToggle`, `EuiButtonToggle`, and `EuiButtonGroup` ([#872](https://github.com/elastic/eui/pull/872))
 - `EuiBasicTable` and `EuiInMemoryTable` now accept `rowProps` and `cellProps` callbacks,
 - Added `offine` and `online` icons ([#881](https://github.com/elastic/eui/pull/881))

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -110,7 +110,7 @@
         position: absolute;
         top: $euiSizeM/2;
         right: $euiSizeM;
-        @include euiFormControlLayout__clear('.euiFilePicker__clearIcon');
+        @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
       }
     }
   }

diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -15,15 +15,15 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons euiFormControlLayout__icons--right"
+    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
     <button
-      aria-label="Clear selections"
-      class="euiFormControlLayout__clear customClass"
+      aria-label="Clear input"
+      class="euiFormControlLayoutClearButton customClass"
       data-test-subj="clearButton"
     >
       <svg
-        class="euiIcon euiIcon--medium euiFormControlLayout__clearIcon"
+        class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
         focusable="false"
         height="16"
         viewBox="0 0 16 16"
@@ -58,28 +58,32 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayout__icon"
-      focusable="false"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -89,29 +93,33 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayout__icon customClass"
+    <span
+      class="euiFormControlLayoutCustomIcon customClass"
       data-test-subj="myIcon"
-      focusable="false"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -121,28 +129,32 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayout__icon"
-      focusable="false"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -152,28 +164,32 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons euiFormControlLayout__icons--right"
+    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayout__icon"
-      focusable="false"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="euiFormControlLayoutCustomIcon"
     >
-      <g
-        fill-rule="evenodd"
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-        />
-        <path
-          d="M7 6h1v5H7zM7 12h1v1H7z"
-        />
-      </g>
-    </svg>
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+    </span>
   </div>
 </div>
 `;
@@ -183,7 +199,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons euiFormControlLayout__icons--right"
+    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
     <div
       class="euiLoadingSpinner euiLoadingSpinner--medium"

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -6,52 +6,9 @@
 
   display: inline-block;
   position: relative;
+}
 
-  &.euiFormControlLayout--fullWidth {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .euiFormControlLayout__icon {
-    pointer-events: none;
-  }
-
-  .euiFormControlLayout__icon--button {
-    pointer-events: all;
-    height: $euiSize;
-    width: $euiSize;
-    @include size($euiSize);
-
-    .euiIcon {
-      vertical-align: baseline;
-    }
-
-    &:focus {
-      background: $euiColorPrimary;
-      border-radius: 100%;
-      color: $euiColorGhost;
-    }
-  }
-
-  .euiFormControlLayout__icons {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: $euiFormControlPadding;
-    display: flex;
-    align-items: center;
-
-    > * + * {
-      margin-left: $euiFormControlPadding;
-    }
-  }
-
-  .euiFormControlLayout__icons--right {
-    left: auto;
-    right: $euiFormControlPadding;
-  }
-
-  .euiFormControlLayout__clear {
-    @include euiFormControlLayout__clear('.euiFormControlLayout__clearIcon');
-  }
+.euiFormControlLayout--fullWidth {
+  width: 100%;
+  max-width: 100%;
 }
diff --git a/src/components/form/form_control_layout/_form_control_layout_clear_button.scss b/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
@@ -0,0 +1,3 @@
+.euiFormControlLayoutClearButton {
+  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon');
+}
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
@@ -0,0 +1,20 @@
+.euiFormControlLayoutCustomIcon {
+  pointer-events: none;
+}
+
+.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;
+  }
+}
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
@@ -0,0 +1,18 @@
+.euiFormControlLayoutIcons {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: $euiFormControlPadding;
+  display: flex;
+  align-items: center;
+
+  > * + * {
+    margin-left: $euiFormControlPadding;
+  }
+}
+
+.euiFormControlLayoutIcons--right {
+  left: auto;
+  right: $euiFormControlPadding;
+}
diff --git a/src/components/form/form_control_layout/_index.scss b/src/components/form/form_control_layout/_index.scss
@@ -1,2 +1,5 @@
 @import 'mixins';
 @import 'form_control_layout';
+@import 'form_control_layout_icons';
+@import 'form_control_layout_clear_button';
+@import 'form_control_layout_custom_icon';
diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
@@ -1,5 +1,6 @@
-@mixin euiFormControlLayout__clear($iconClass) {
+@mixin euiFormControlLayoutClearIcon($iconClass) {
   $clearSize: $euiSize;
+  pointer-events: all;
 
   @include size($clearSize);
   background-color: transparentize($euiColorMediumShade, .5);