fix(ui): remove error border from disabled and quiet primitive fields (…

…#4457) * fix(ui): removing red border from disabled text and select field with error * Create five-ghosts-hug.md
aws-amplify · Sep 18, 2023 · 6a5a4d7 · 6a5a4d7
1 parent ac3cfa8
commit 6a5a4d7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/five-ghosts-hug.md b/.changeset/five-ghosts-hug.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix(ui): remove error border from disabled and quiet primitive fields 
diff --git a/packages/ui/src/theme/css/component/_fieldControl.scss b/packages/ui/src/theme/css/component/_fieldControl.scss
@@ -71,16 +71,6 @@
     }
   }
 
-  // for disabled styles
-  &[disabled] {
-    color: var(--amplify-components-fieldcontrol-disabled-color);
-    cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-    border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-    background-color: var(
-      --amplify-components-fieldcontrol-disabled-background-color
-    );
-  }
-
   // variation styles
   &--quiet {
     border-block-start: var(
@@ -110,4 +100,14 @@
       }
     }
   }
+
+  // for disabled styles
+  &[disabled] {
+    color: var(--amplify-components-fieldcontrol-disabled-color);
+    cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+    border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+    background-color: var(
+      --amplify-components-fieldcontrol-disabled-background-color
+    );
+  }
 }