Simplify EuiFormControlLayout styles.

elastic · May 24, 2018 · f4fe254 · f4fe254
1 parent d622d46
commit f4fe254
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 87 deletions.
diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js
@@ -100,7 +100,6 @@ export default () => (
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
-      compressed
       isLoading
       clear={{ onClick: () => {} }}
       icon="search"

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,7 +15,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayout__icons euiFormControlLayout__icons--right"
   >
     <button
       class="euiFormControlLayout__clear customClass"
@@ -55,78 +55,90 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
 <div
   class="euiFormControlLayout"
 >
-  <svg
-    aria-hidden="true"
-    class="euiIcon euiIcon--medium euiFormControlLayout__icon euiFormControlLayout__icon--left"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
+  <div
+    class="euiFormControlLayout__icons"
   >
-    <g
-      fill-rule="evenodd"
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiFormControlLayout__icon"
+      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>
+  </div>
 </div>
 `;
 
 exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
 <div
   class="euiFormControlLayout"
 >
-  <svg
-    aria-hidden="true"
-    class="euiIcon euiIcon--medium euiFormControlLayout__icon euiFormControlLayout__icon--left customClass"
-    data-test-subj="myIcon"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
+  <div
+    class="euiFormControlLayout__icons"
   >
-    <g
-      fill-rule="evenodd"
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiFormControlLayout__icon customClass"
+      data-test-subj="myIcon"
+      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>
+  </div>
 </div>
 `;
 
 exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
 <div
   class="euiFormControlLayout"
 >
-  <svg
-    aria-hidden="true"
-    class="euiIcon euiIcon--medium euiFormControlLayout__icon euiFormControlLayout__icon--left"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
+  <div
+    class="euiFormControlLayout__icons"
   >
-    <g
-      fill-rule="evenodd"
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiFormControlLayout__icon"
+      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>
+  </div>
 </div>
 `;
 
@@ -135,7 +147,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayout__icons euiFormControlLayout__icons--right"
   >
     <svg
       aria-hidden="true"
@@ -165,7 +177,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
   class="euiFormControlLayout"
 >
   <div
-    class="euiFormControlLayout__icons"
+    class="euiFormControlLayout__icons euiFormControlLayout__icons--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
@@ -16,18 +16,6 @@
     pointer-events: none;
   }
 
-  .euiFormControlLayout__icon--left {
-    position: absolute;
-    top: $euiFormControlPadding;
-    left: $euiFormControlPadding;
-
-    @at-root {
-      .euiFormControlLayout--compressed#{&} {
-        top: $euiFormControlPadding--compressed;
-      }
-    }
-  }
-
   .euiFormControlLayout__icon--button {
     pointer-events: all;
     height: $euiSize;
@@ -51,9 +39,9 @@
 
   .euiFormControlLayout__icons {
     position: absolute;
-    right: $euiFormControlPadding;
     top: 0;
     bottom: 0;
+    left: $euiFormControlPadding;
     display: flex;
     align-items: center;
 
@@ -62,6 +50,11 @@
     }
   }
 
+  .euiFormControlLayout__icons--right {
+    left: auto;
+    right: $euiFormControlPadding;
+  }
+
   .euiFormControlLayout__clear {
     @include euiFormControlLayout__clear('.euiFormControlLayout__clearIcon');
   }

diff --git a/src/components/form/form_control_layout/form_control_layout.js b/src/components/form/form_control_layout/form_control_layout.js
@@ -5,12 +5,7 @@ import classNames from 'classnames';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 
-const iconSideToClassNameMap = {
-  left: 'euiFormControlLayout__icon--left',
-  right: '',
-};
-
-export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
+export const ICON_SIDES = ['left', 'right'];
 
 export class EuiFormControlLayout extends Component {
   render() {
@@ -77,7 +72,6 @@ export class EuiFormControlLayout extends Component {
 
       const iconClasses = classNames(
         'euiFormControlLayout__icon',
-        iconSideToClassNameMap[iconSide],
         iconClassName,
         {
           'euiFormControlLayout__icon--button': onIconClick,
@@ -133,32 +127,34 @@ export class EuiFormControlLayout extends Component {
       );
     }
 
-    // If the icon is on the right, it should be placed after the clear button in the DOM.
-    if (optionalIconSide === 'right') {
-      return (
+    let leftIcons;
+
+    if ( optionalIconSide === 'left') {
+      leftIcons = (
         <div className="euiFormControlLayout__icons">
-          {optionalClear}
-          {optionalLoader}
           {optionalIcon}
         </div>
       );
     }
 
-    let optionalRightIcons;
+    let rightIcons;
 
-    if (optionalClear || optionalLoader) {
-      optionalRightIcons = (
-        <div className="euiFormControlLayout__icons">
+    // If the icon is on the right, it should be placed after the clear button in the DOM.
+    if (optionalClear || optionalLoader || optionalIconSide === 'right') {
+      rightIcons = (
+        <div className="euiFormControlLayout__icons euiFormControlLayout__icons--right">
           {optionalClear}
           {optionalLoader}
+          {optionalIconSide === 'right' ? optionalIcon : undefined}
         </div>
       );
     }
 
+
     return (
       <Fragment>
-        {optionalIcon}
-        {optionalRightIcons}
+        {leftIcons}
+        {rightIcons}
       </Fragment>
     );
   }