refactor(input): use border instead of box-shadow (#11273)

* refactor(input): use border instead of box-shadow * improve prefix & suffix padding * fix lint errors * fix indigo error hover * use ::after pseudo-element Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · Mar 24, 2022 · d901c3d · d901c3d
1 parent c3e5a17
commit d901c3d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 29 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -515,6 +515,10 @@
                 &:hover {
                     @extend %form-group-bundle--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle--fluent--focus !optional;
+                }
             }
 
             @include e(bundle-main) {
@@ -565,24 +569,24 @@
                 @extend %fluent-input-disabled !optional;
 
                 &:hover {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
 
                 &:focus {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
             }
 
             @include e(file-input) {
                 @extend %fluent-input-disabled !optional;
 
                 &:hover {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
 
                 &:focus {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
             }
 
             @include e(label) {
@@ -605,11 +609,6 @@
         @include mx(focused, fluent) {
             @include e(bundle) {
                 @extend %form-group-bundle--focus !optional;
-
-                &:focus-within,
-                &:hover {
-                    @extend %form-group-bundle--fluent--focus !optional;
-                }
             }
 
             @include e(label) {
@@ -627,10 +626,13 @@
             @include e(bundle) {
                 @extend %form-group-bundle-success--fluent !optional;
 
-                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-success--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle-success--fluent--focus !optional;
+                }
             }
 
             @include e(label) {
@@ -642,10 +644,13 @@
             @include e(bundle) {
                 @extend %form-group-bundle-error--fluent !optional;
 
-                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-error--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle-error--fluent--focus !optional;
+                }
             }
 
             @include e(label) {
@@ -740,7 +745,7 @@
                 @extend %form-group-bundle-error--indigo !optional;
 
                 &:hover {
-                    @extend %form-group-bundle-error--fluent--hover !optional;
+                    @extend %form-group-bundle-error--indigo--hover !optional;
                 }
             }
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -477,6 +477,11 @@
         box-shadow: inset 0 -2px 0 0 var-get($theme, 'error-secondary-color');
     }
 
+    %form-group-bundle-error--indigo--hover {
+        border-color: var-get($theme, 'error-secondary-color');
+        box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');
+    }
+
     %form-group-helper--indigo--disabled {
         color: var-get($theme, 'disabled-text-color');
     }
@@ -728,7 +733,7 @@
     }
 
     %form-group-bundle-required--fluent {
-        &::after {
+        &::before {
             content: '*';
             position: absolute;
             top: rem(-8px);
@@ -738,7 +743,7 @@
     }
 
     %fluent-label + %form-group-bundle-required--fluent {
-        &::after {
+        &::before {
             display: none;
         }
     }
@@ -763,7 +768,15 @@
     %form-group-bundle--fluent--focus {
         caret-color: var-get($theme, 'focused-text-color');
         border-color: var-get($theme, 'focused-border-color');
-        box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color');
+
+        &::after {
+            pointer-events: none;
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 100%;
+            border: rem(1px) solid var-get($theme, 'focused-border-color');
+        }
     }
 
     %form-group-bundle--fluent--hover-disabled,
@@ -772,22 +785,28 @@
         background: var-get($theme, 'border-disabled-background');
     }
 
+    %form-group-bundle-error--fluent,
     %form-group-bundle-error--fluent--hover,
-    %form-group-bundle-error--fluent {
+    %form-group-bundle-error--fluent--focus {
         border-color: var-get($theme, 'error-secondary-color');
     }
 
-    %form-group-bundle-error--fluent--hover {
-        box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');
-    }
-
+    %form-group-bundle-success--fluent,
     %form-group-bundle-success--fluent--hover,
-    %form-group-bundle-success--fluent {
+    %form-group-bundle-success--fluent--focus {
         border-color: var-get($theme, 'success-secondary-color');
     }
 
-    %form-group-bundle-success--fluent--hover {
-        box-shadow: 0 0 0 1px var-get($theme, 'success-secondary-color');
+    %form-group-bundle-success--fluent--focus {
+        &::after {
+            border: rem(1px) solid var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %form-group-bundle-error--fluent--focus {
+        &::after {
+            border: rem(1px) solid var-get($theme, 'error-secondary-color');
+        }
     }
 
     %fluent-input {

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss
@@ -205,7 +205,7 @@ $light-input-group: extend(
 /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent.
 /// @prop {Map} disabled-border-color [color: ('grays', 100)] - The disabled border color for input groups of type border and fluent.
 ///
-/// @prop {Map} focused-border-color [color: ('info')] - The focused input border color for input groups of type border and fluent.
+/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
 /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state.
 ///
 /// @prop {Color} search-disabled-background [color: ('grays', 100)] - The background color of an input group of type search in the disabled state.
@@ -241,7 +241,7 @@ $fluent-input-group: extend(
         ),
 
         focused-border-color: (
-            color: ('info')
+            color: ('primary', 500)
         ),
 
         disabled-border-color: (