Removing duplicate borders on text input and update caret color

Shopify · May 8, 2024 · 119c7d1 · 119c7d1
1 parent 02ccae7
commit 119c7d1
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -31,6 +31,13 @@
     .Loading:has(+ .ClearButton) {
       margin-right: 0;
     }
+
+    /* Ensure backdrop has no border when focused */
+    .Backdrop {
+      @media (--p-breakpoints-sm-down) {
+        border: none;
+      }
+    }
   }
 
   &:not(:focus-within) {
@@ -95,6 +102,12 @@
       outline-width: var(--p-border-width-025);
       outline-offset: 0;
     }
+
+    @media (--p-breakpoints-sm-down) {
+      border-color: var(--p-color-border-focus);
+      outline-width: var(--p-border-width-050);
+      outline-offset: 0;
+    }
   }
 }
 
@@ -294,7 +307,7 @@
   border: none;
   font-family: var(--p-font-family-sans);
   appearance: none;
-  caret-color: var(--p-color-text);
+  caret-color: var(--p-color-border-focus);
   color: var(--p-color-text);
   align-items: center;