polish input border and button styles

Shopify · Aug 27, 2024 · 4e24ec7 · 4e24ec7
1 parent 6170aeb
commit 4e24ec7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.module.css b/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.module.css
@@ -1,21 +1,18 @@
 .AddAsFilterAction {
-  padding-block: var(--p-space-050);
+  padding-block: var(--p-space-100);
   background: none;
   border: none;
   color: unset;
   cursor: pointer;
   border-radius: var(--p-border-radius-100);
+  transition: color var(--p-motion-duration-150) var(--p-motion-ease-in-out);
 
-  &:hover {
-    background-color: var(--p-color-bg-fill-transparent-hover);
-    color: var(--p-color-text-secondary);
+  &:hover,
+  &:active {
+    color: var(--p-color-text);
 
     svg {
       fill: var(--p-color-icon-secondary-hover);
     }
   }
-
-  &:active {
-    background-color: var(--p-color-bg-fill-transparent-active);
-  }
 }
diff --git a/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx b/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx
@@ -1,6 +1,7 @@
 import React, {useId, useState} from 'react';
 import {SearchIcon, ReturnIcon} from '@shopify/polaris-icons';
 
+import {Box} from '../../../Box';
 import {Icon} from '../../../Icon';
 import {TextField} from '../../../TextField';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
@@ -84,7 +85,9 @@ export function SearchField({
           {i18n.translate(
             'Polaris.IndexFilters.SearchField.action.addAsFilter',
           )}
-          <Icon source={ReturnIcon} tone="inherit" />
+          <Box borderRadius="100" background="bg-surface-tertiary-hover">
+            <Icon source={ReturnIcon} tone="inherit" />
+          </Box>
         </InlineStack>
       </UnstyledButton>
     ) : undefined;

diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -38,7 +38,7 @@
   }
 
   /* stylelint-disable-next-line selector-max-specificity -- set Backdrop styles */
-  &:not(.disabled):not(.error):not(.readOnly)
+  &:not(.disabled):not(.error):not(.readOnly):not(.borderless)
     > .Input:hover:not(:focus-visible) {
     /* stylelint-disable-next-line -- set Backdrop styles */
     ~ .Backdrop {
@@ -322,13 +322,25 @@
   }
 }
 
+/* stylelint-disable -- set secondary Backdrop styles */
 .borderless {
   .Input,
   .Backdrop {
-    border: none;
     min-height: var(--p-space-800);
+    border-color: transparent;
+
+    &:not(:active):not(:hover) {
+      border-color: var(--p-color-border-secondary);
+    }
+
+    &.Input:hover:not(:focus-visible) {
+      ~ .Backdrop {
+        background-color: var(--p-color-input-bg-surface-hover);
+      }
+    }
   }
 }
+/* stylelint-enable */
 
 .slim {
   .Input,