Break up SCSS into multiple files and improve class names.

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"

src/components/form/form_control_layout/_form_control_layout_clear_button.scss

@@ -0,0 +1,3 @@
+.euiFormControlLayoutClearButton {
+  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon');
+}

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;
+  }
+}

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;
-    }
-  }

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';

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>

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>

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} />
     );
   }
 }