Fixing duplicate Form mixins

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Modifying drop shadow intensities and color. ([607](https://github.com/elastic/eui/pull/607))
+- Removed extraneous `global_styling/mixins/_forms.scss` file and importing the correct files in the `filter_group.scss` and `combo_box.scss` files. ([609](https://github.com/elastic/eui/pull/609))
 
 **Bug fixes**
 

src/components/combo_box/_index.scss

@@ -1,3 +1,6 @@
+@import '../form/variables';
+@import '../form/mixins';
+
 @import 'combo_box';
 @import 'combo_box_input/index';
 @import 'combo_box_options_list/index';

src/components/filter_group/_index.scss

@@ -1,3 +1,6 @@
+@import '../form/variables';
+@import '../form/mixins';
+
 @import 'filter_group';
 @import 'filter_button';
 @import 'filter_select_item';

src/components/form/_index.scss

@@ -1,155 +1,5 @@
-$euiFormMaxWidth: 400px;
-$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
-$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade
-
-@mixin euiFormControlSize {
-  max-width: $euiFormMaxWidth;
-  width: 100%;
-}
-
-@mixin euiFormControlWithIcon($isIconOptional: false) {
-  $iconPadding: $euiSizeXXL;
-
-  @if ($isIconOptional) {
-    @at-root {
-      #{&}--withIcon {
-        padding-left: $iconPadding;
-      }
-    }
-  } @else {
-    padding-left: $iconPadding;
-  }
-}
-
-@mixin euiFormControlIsLoading($isNextToIcon: false) {
-
-  @at-root {
-    #{&}-isLoading {
-      @if ($isNextToIcon) {
-        padding-right: $euiSizeXXL + $euiSize;
-      } @else {
-        padding-right: $euiSizeXXL;
-      }
-    }
-  }
-}
-
-@mixin euiFormControlDefaultShadow {
-  box-shadow:
-    0 2px 2px -1px rgba($euiShadowColor, 0.2),
-    0 0 0 1px transparentize($euiColorFullShade, .92),
-    inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor;
-}
-
-@mixin euiFormControlInvalidStyle {
-  box-shadow:
-    0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2),
-    0 0 0 1px transparentize($euiColorFullShade, .84),
-    inset 0 0 0 0 $euiColorEmptyShade,
-    inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger;
-}
-
-@mixin euiFormControlFocusStyle {
-  background: tintOrShade($euiColorEmptyShade, 0%, 20%);
-  box-shadow:
-    0 4px 4px -2px rgba($euiShadowColor, 0.2),
-    0 0 0 1px transparentize($euiColorFullShade, .84),
-    inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%),
-    inset 0 -2px 0 0 $euiColorPrimary;
-}
-
-@mixin euiFormControlDisabledStyle {
-  cursor: not-allowed;
-  background: darken($euiColorLightestShade, 2%);
-  box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92);
-}
-
-/**
- * 1. Override invalid state with focus state.
- */
-@mixin euiFormControlStyle {
-  @include euiFormControlSize;
-  @include euiFormControlDefaultShadow;
-
-  border: none;
-  font-size: $euiFontSizeS;
-  font-family: $euiFontFamily;
-  padding: $euiSizeM;
-  color: $euiTextColor;
-  background: $euiFormBackgroundColor;
-  transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in;
-  border-radius: 0;
-
-  &--fullWidth {
-    max-width: 100%;
-  }
-
-  &:invalid { /* 1 */
-    @include euiFormControlInvalidStyle;
-  }
-
-  &:focus { /* 1 */
-    @include euiFormControlFocusStyle;
-  }
-
-  &:disabled {
-    @include euiFormControlDisabledStyle;
-  }
-
-  &[readOnly] {
-    cursor: default;
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
-  }
-}
-
-// CUSTOM STYLES & STATES
-@mixin euiCustomControl($type: null, $size: $euiSize){
-
-  @if $size {
-    $size: $size - 2px; // subtract 2px from size to account for border size
-    padding: $size/2;
-  }
-
-  border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%);
-  background: $euiColorEmptyShade no-repeat center;
-  @include euiSlightShadow;
-
-  @if $type == 'round' {
-    border-radius: $size;
-  } @else if $type == 'square' {
-    border-radius: $euiBorderRadius;
-  }
-
-  transition: background-color $euiAnimSpeedFast ease-in,
-              border-color $euiAnimSpeedFast ease-in,
-              background-image 0s ease-out $euiAnimSpeedFast;
-}
-
-@mixin euiCustomControl--selected($type: null){
-  border-color: $euiColorPrimary;
-  background-color: $euiColorPrimary;
-
-  @if $type != null {
-    @include euiIconBackground($type, $euiColorEmptyShade);
-  }
-}
-
-@mixin euiCustomControl--disabled($type: null){
-  border-color: $euiColorLightShade;
-  background-color: $euiColorLightShade;
-  box-shadow: none;
-  @if $type != null {
-    @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);
-  }
-}
-
-@mixin euiCustomControl--focused(){
-  border-color: $euiColorPrimary;
-  @include euiFocusRing;
-}
-
+@import 'variables';
+@import 'mixins';
 
 @import 'checkbox/index';
 @import 'field_number/index';

src/components/form/_mixins.scss

@@ -0,0 +1,147 @@
+@mixin euiFormControlSize {
+  max-width: $euiFormMaxWidth;
+  width: 100%;
+}
+
+@mixin euiFormControlWithIcon($isIconOptional: false) {
+  $iconPadding: $euiSizeXXL;
+
+  @if ($isIconOptional) {
+    @at-root {
+      #{&}--withIcon {
+        padding-left: $iconPadding;
+      }
+    }
+  } @else {
+    padding-left: $iconPadding;
+  }
+}
+
+@mixin euiFormControlIsLoading($isNextToIcon: false) {
+
+  @at-root {
+    #{&}-isLoading {
+      @if ($isNextToIcon) {
+        padding-right: $euiSizeXXL + $euiSize;
+      } @else {
+        padding-right: $euiSizeXXL;
+      }
+    }
+  }
+}
+
+@mixin euiFormControlDefaultShadow {
+  box-shadow:
+    0 2px 2px -1px rgba($euiShadowColor, 0.2),
+    0 0 0 1px transparentize($euiColorFullShade, .92),
+    inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor;
+}
+
+@mixin euiFormControlInvalidStyle {
+  box-shadow:
+    0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2),
+    0 0 0 1px transparentize($euiColorFullShade, .84),
+    inset 0 0 0 0 $euiColorEmptyShade,
+    inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger;
+}
+
+@mixin euiFormControlFocusStyle {
+  background: tintOrShade($euiColorEmptyShade, 0%, 20%);
+  box-shadow:
+    0 4px 4px -2px rgba($euiShadowColor, 0.2),
+    0 0 0 1px transparentize($euiColorFullShade, .84),
+    inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%),
+    inset 0 -2px 0 0 $euiColorPrimary;
+}
+
+@mixin euiFormControlDisabledStyle {
+  cursor: not-allowed;
+  background: darken($euiColorLightestShade, 2%);
+  box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92);
+}
+
+/**
+ * 1. Override invalid state with focus state.
+ */
+@mixin euiFormControlStyle {
+  @include euiFormControlSize;
+  @include euiFormControlDefaultShadow;
+
+  border: none;
+  font-size: $euiFontSizeS;
+  font-family: $euiFontFamily;
+  padding: $euiSizeM;
+  color: $euiTextColor;
+  background: $euiFormBackgroundColor;
+  transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in;
+  border-radius: 0;
+
+  &--fullWidth {
+    max-width: 100%;
+  }
+
+  &:invalid { /* 1 */
+    @include euiFormControlInvalidStyle;
+  }
+
+  &:focus { /* 1 */
+    @include euiFormControlFocusStyle;
+  }
+
+  &:disabled {
+    @include euiFormControlDisabledStyle;
+  }
+
+  &[readOnly] {
+    cursor: default;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+// CUSTOM STYLES & STATES
+@mixin euiCustomControl($type: null, $size: $euiSize){
+
+  @if $size {
+    $size: $size - 2px; // subtract 2px from size to account for border size
+    padding: $size/2;
+  }
+
+  border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%);
+  background: $euiColorEmptyShade no-repeat center;
+  @include euiSlightShadow;
+
+  @if $type == 'round' {
+    border-radius: $size;
+  } @else if $type == 'square' {
+    border-radius: $euiBorderRadius;
+  }
+
+  transition: background-color $euiAnimSpeedFast ease-in,
+              border-color $euiAnimSpeedFast ease-in,
+              background-image 0s ease-out $euiAnimSpeedFast;
+}
+
+@mixin euiCustomControl--selected($type: null){
+  border-color: $euiColorPrimary;
+  background-color: $euiColorPrimary;
+
+  @if $type != null {
+    @include euiIconBackground($type, $euiColorEmptyShade);
+  }
+}
+
+@mixin euiCustomControl--disabled($type: null){
+  border-color: $euiColorLightShade;
+  background-color: $euiColorLightShade;
+  box-shadow: none;
+  @if $type != null {
+    @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);
+  }
+}
+
+@mixin euiCustomControl--focused(){
+  border-color: $euiColorPrimary;
+  @include euiFocusRing;
+}

src/components/form/_variables.scss

@@ -0,0 +1,3 @@
+$euiFormMaxWidth: 400px;
+$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
+$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade

src/components/key_pad_menu/_key_pad_menu.scss

@@ -28,7 +28,7 @@
 
   &:hover, &:focus {
     border-color: $euiBorderColor;
-    @include euiSlightShadowHover;
+    @include euiSlightShadow;
 
     .euiKeyPadMenuItem__icon {
       transform: translateY(0);