Fixing form layout icon vertical alignment (#904)

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

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
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
@@ -65,7 +65,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
         focusable="false"
         height="16"
         viewBox="0 0 16 16"
@@ -101,7 +101,7 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
         focusable="false"
         height="16"
         viewBox="0 0 16 16"
@@ -136,7 +136,7 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
         focusable="false"
         height="16"
         viewBox="0 0 16 16"
@@ -171,7 +171,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
         focusable="false"
         height="16"
         viewBox="0 0 16 16"

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
@@ -1,13 +1,18 @@
 .euiFormControlLayoutCustomIcon {
   pointer-events: none;
+
+  .euiFormControlLayoutCustomIcon__icon {
+    transform: translateY(-1px);
+  }
 }
 
 .euiFormControlLayoutCustomIcon--clickable {
   pointer-events: all;
   @include size($euiSize);
 
-  .euiFormControlLayoutCustomIcon__clickableIcon {
+  .euiFormControlLayoutCustomIcon__icon {
     vertical-align: baseline;
+    transform: none;
   }
 
   &:focus {

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
@@ -28,7 +28,7 @@ export const EuiFormControlLayoutCustomIcon = ({
         {...rest}
       >
         <EuiIcon
-          className="euiFormControlLayoutCustomIcon__clickableIcon"
+          className="euiFormControlLayoutCustomIcon__icon"
           aria-hidden="true"
           type={type}
         />
@@ -43,6 +43,7 @@ export const EuiFormControlLayoutCustomIcon = ({
       {...rest}
     >
       <EuiIcon
+        className="euiFormControlLayoutCustomIcon__icon"
         aria-hidden="true"
         type={type}
       />