Normalize DOM structure of EuiFormControlLayoutCustomIcon.

elastic · Jun 4, 2018 · d3a21c4 · d3a21c4
1 parent c2c2568
commit d3a21c4
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +20,7 @@
 
 ## [`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.**
+**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,

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
@@ -59,25 +59,29 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      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"
+        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,26 +93,30 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon customClass"
+    <span
+      class="euiFormControlLayoutCustomIcon customClass"
       data-test-subj="myIcon"
-      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"
+        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>
 `;
@@ -120,25 +128,29 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
   <div
     class="euiFormControlLayoutIcons"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      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"
+        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>
 `;
@@ -150,25 +162,29 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
   <div
     class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
-    <svg
-      aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
-      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"
+        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>
 `;

diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.js b/src/components/form/form_control_layout/form_control_layout_custom_icon.js
@@ -22,26 +22,31 @@ export const EuiFormControlLayoutCustomIcon = ({
   if (onClick) {
     return (
       <button
-        className={classes}
         onClick={onClick}
+        className={classes}
         ref={iconRef}
         {...rest}
       >
         <EuiIcon
           className="euiFormControlLayoutCustomIcon__clickableIcon"
+          aria-hidden="true"
           type={type}
         />
       </button>
     );
   }
 
   return (
-    <EuiIcon
-      aria-hidden="true"
+    <span
       className={classes}
-      type={type}
+      ref={iconRef}
       {...rest}
-    />
+    >
+      <EuiIcon
+        aria-hidden="true"
+        type={type}
+      />
+    </span>
   );
 };