From d9a24831f41aef81b944f6b4e496b2a0fc71a223 Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@hey.com>
Date: Tue, 25 Aug 2020 13:50:05 -0700
Subject: [PATCH] Addressing review comments.

---
 src/global_styling/mixins/_form.scss          |  2 +-
 src/global_styling/variables/_form.scss       |  1 +
 .../global_styling/mixins/_form.scss          | 60 ++++---------------
 .../global_styling/variables/_form.scss       |  3 +-
 .../overrides/_form_control_layout.scss       | 13 ++--
 5 files changed, 22 insertions(+), 57 deletions(-)

diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index 4a9cc4cf0d37..50eef2064aca 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -216,7 +216,7 @@
   @include euiFormControlText;
 
   border: none;
-  border-radius: 0;
+  border-radius: $euiFormControlBorderRadius;
   padding: $euiFormControlPadding;
 
   @if ($includeStates) {
diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
index 92fe4fb63587..9dca17898e13 100644
--- a/src/global_styling/variables/_form.scss
+++ b/src/global_styling/variables/_form.scss
@@ -4,6 +4,7 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
+$euiFormControlBorderRadius: 0;
 $euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default;
 
 $euiRadioSize: $euiSize !default;
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
index 950f9cf1a642..cd43229b6757 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
@@ -25,54 +25,16 @@
   }
 }
 
-// 2. Override invalid state with focus state.
+@mixin euiFormControlFocusStyle($borderOnly: false) {
+  // sass-lint:disable-block indentation, empty-args
+  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  background-image: euiFormControlGradient();
+  background-size: 100% 100%; // 1
 
-@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
-  @include euiFormControlSize($includeAlternates: $includeSizes);
-  @include euiFormControlDefaultShadow;
-  @include euiFormControlText;
-
-  border: none;
-  border-radius: $euiBorderRadius;
-  padding: $euiFormControlPadding;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle;
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-
-    // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
-    &:-webkit-autofill {
-      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-
-      ~ .euiFormControlLayoutIcons {
-        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-      }
-    }
-
-  }
-
-  @if ($includeSizes) {
-    &--compressed {
-      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
-    }
-
-    &--inGroup {
-      // sass-lint:disable-block no-important
-      box-shadow: none !important;
-    }
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      inset 0 0 0 1px $euiFormBorderColor;
   }
-}
\ No newline at end of file
+}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
index a5b7429d21aa..3084f001bf92 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_form.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
@@ -1 +1,2 @@
-$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
\ No newline at end of file
+$euiFormControlBorderRadius: $euiBorderRadius;
+$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
index 97690febf1c2..e8fd6429d94e 100644
--- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
+++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
@@ -1,8 +1,9 @@
-$leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius;
-$rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0;
-$leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
-$rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
-
+.euiFormControlLayout {
+  $leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius;
+  $rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0;
+  $leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
+  $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
+}
 
 .euiFormControlLayout--group {
   border-radius: $euiBorderRadius;
@@ -76,4 +77,4 @@ $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCo
       border-radius: $rightSideRadiusSmall;
     }
   }
-}
\ No newline at end of file
+}