From c2c256845140b08052bdd3d4fd14b3cce13b78a3 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 4 Jun 2018 14:57:45 -0700
Subject: [PATCH] Break up SCSS into multiple files and improve class names.

---
 .../form_control_layout.test.js.snap          | 14 +++++------
 .../_form_control_layout_clear_button.scss    |  3 +++
 .../_form_control_layout_custom_icon.scss     | 20 +++++++++++++++
 .../_form_control_layout_icons.scss           | 25 -------------------
 .../form/form_control_layout/_index.scss      |  2 ++
 .../form_control_layout_clear_button.js       |  6 ++---
 .../form_control_layout_custom_icon.js        |  5 ++--
 .../form_control_layout_icons.js              |  7 ++----
 8 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 src/components/form/form_control_layout/_form_control_layout_clear_button.scss
 create mode 100644 src/components/form/form_control_layout/_form_control_layout_custom_icon.scss

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
index e5a1423805a2..25d86d36c042 100644
--- 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
@@ -18,12 +18,12 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
     class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
   >
     <button
-      aria-label="Clear selections"
-      class="euiFormControlLayoutIcons__clearButton customClass"
+      aria-label="Clear input"
+      class="euiFormControlLayoutClearButton customClass"
       data-test-subj="clearButton"
     >
       <svg
-        class="euiIcon euiIcon--medium euiFormControlLayoutIcons__clearButtonIcon"
+        class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
         height="16"
         viewBox="0 0 16 16"
         width="16"
@@ -61,7 +61,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutIcons__customIcon"
+      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -91,7 +91,7 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutIcons__customIcon customClass"
+      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon customClass"
       data-test-subj="myIcon"
       height="16"
       viewBox="0 0 16 16"
@@ -122,7 +122,7 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutIcons__customIcon"
+      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
       height="16"
       viewBox="0 0 16 16"
       width="16"
@@ -152,7 +152,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="euiIcon euiIcon--medium euiFormControlLayoutIcons__customIcon"
+      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon"
       height="16"
       viewBox="0 0 16 16"
       width="16"
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
new file mode 100644
index 000000000000..0dc57d566685
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..84a440577a7e
--- /dev/null
+++ 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
index 32ff67a24a5a..dd060e611c71 100644
--- a/src/components/form/form_control_layout/_form_control_layout_icons.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_icons.scss
@@ -16,28 +16,3 @@
   left: auto;
   right: $euiFormControlPadding;
 }
-
-  .euiFormControlLayoutIcons__clearButton {
-    @include euiFormControlLayoutClearIcon('.euiFormControlLayoutIcons__clearButtonIcon');
-  }
-
-  .euiFormControlLayoutIcons__customIcon {
-    pointer-events: none;
-  }
-
-  .euiFormControlLayoutIcons__customIcon--clickable {
-    pointer-events: all;
-    height: $euiSize;
-    width: $euiSize;
-    @include size($euiSize);
-
-    .euiIcon {
-      vertical-align: baseline;
-    }
-
-    &:focus {
-      background: $euiColorPrimary;
-      border-radius: 100%;
-      color: $euiColorGhost;
-    }
-  }
diff --git a/src/components/form/form_control_layout/_index.scss b/src/components/form/form_control_layout/_index.scss
index 7b5d3c748e0e..f5a9b5d33bc8 100644
--- a/src/components/form/form_control_layout/_index.scss
+++ b/src/components/form/form_control_layout/_index.scss
@@ -1,3 +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/form_control_layout_clear_button.js b/src/components/form/form_control_layout/form_control_layout_clear_button.js
index 7e29763fcbfc..14dc05191810 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.js
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.js
@@ -9,17 +9,17 @@ export const EuiFormControlLayoutClearButton = ({
   onClick,
   ...rest
 }) => {
-  const classes = classNames('euiFormControlLayoutIcons__clearButton', className);
+  const classes = classNames('euiFormControlLayoutClearButton', className);
 
   return (
     <button
       className={classes}
       onClick={onClick}
-      aria-label="Clear selections"
+      aria-label="Clear input"
       {...rest}
     >
       <EuiIcon
-        className="euiFormControlLayoutIcons__clearButtonIcon"
+        className="euiFormControlLayoutClearButton__icon"
         type="cross"
       />
     </button>
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
index 7dea1865c36b..cc2d8c4b16e0 100644
--- 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
@@ -12,10 +12,10 @@ export const EuiFormControlLayoutCustomIcon = ({
   ...rest
 }) => {
   const classes = classNames(
-    'euiFormControlLayoutIcons__customIcon',
+    'euiFormControlLayoutCustomIcon',
     className,
     {
-      'euiFormControlLayoutIcons__customIcon--clickable': onClick,
+      'euiFormControlLayoutCustomIcon--clickable': onClick,
     },
   );
 
@@ -28,6 +28,7 @@ export const EuiFormControlLayoutCustomIcon = ({
         {...rest}
       >
         <EuiIcon
+          className="euiFormControlLayoutCustomIcon__clickableIcon"
           type={type}
         />
       </button>
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.js b/src/components/form/form_control_layout/form_control_layout_icons.js
index 86dd6ca27d75..ab7fd14d30de 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.js
+++ b/src/components/form/form_control_layout/form_control_layout_icons.js
@@ -63,7 +63,7 @@ export class EuiFormControlLayoutIcons extends Component {
       ref: iconRef,
       side, // eslint-disable-line no-unused-vars
       ...iconRest
-    } = iconProps
+    } = iconProps;
 
     return (
       <EuiFormControlLayoutCustomIcon
@@ -93,10 +93,7 @@ export class EuiFormControlLayoutIcons extends Component {
     }
 
     return (
-      <EuiFormControlLayoutClearButton
-        aria-label="Clear selections"
-        {...clear}
-      />
+      <EuiFormControlLayoutClearButton {...clear} />
     );
   }
 }