Textfield styles update

Shopify · Apr 16, 2024 · 66fc984 · 66fc984
1 parent 07b0636
commit 66fc984
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 26 deletions.
diff --git a/polaris-react/src/components/Select/Select.module.css b/polaris-react/src/components/Select/Select.module.css
@@ -77,27 +77,21 @@
   text-overflow: ellipsis;
 }
 
-.labelInline .SelectedOption {
-  padding-block-start: 22px;
-  padding-block-end: 2px;
+.tallSelect.labelInside .SelectedOption,
+.tallSelect.labelInside .Prefix {
+  padding-block-start: 24px;
+  padding-block-end: 4px;
 }
 
-.labelOneLine.labelInline .SelectedOption,
-.labelInline.labelHidden .SelectedOption,
-.labelInline.labelAction .SelectedOption {
-  padding-block-start: 12px;
-  padding-block-end: 12px;
+.tallSelect .SelectedOption {
+  padding-block-start: 6px;
+  padding-block-end: 6px;
 }
 
 .Prefix {
   padding-right: var(--p-space-100);
 }
 
-.labelInline .Prefix {
-  padding-block-start: 22px;
-  padding-block-end: 2px;
-}
-
 .Icon svg {
   fill: var(--p-color-icon-secondary);
 }
@@ -182,16 +176,20 @@
   }
 }
 @media (--p-breakpoints-md-down) {
+  .Backdrop {
+    border-width: var(--p-border-width-025);
+  }
+
   .Input:focus-visible {
     ~ .Backdrop {
       border-color: var(--p-color-border-focus);
-      border-width: var(--p-border-width-025);
       background-color: var(--p-color-input-bg-surface-active);
       outline: var(--p-border-width-025) solid var(--p-color-border-focus);
       outline-offset: 0;
     }
   }
 }
+
 .toneMagic {
   .Content {
     color: var(--p-color-text-magic);

diff --git a/polaris-react/src/components/Select/Select.tsx b/polaris-react/src/components/Select/Select.tsx
@@ -106,13 +106,18 @@ export function Select({
   const isMobileFormsInline = useIsMobileFormsInline();
   const uniqId = useId();
   const id = idProp ?? uniqId;
+  const isTallSelect = isMobileFormsInline;
+  const labelInside =
+    isTallSelect && !labelHiddenProp && !labelAction && !labelInline;
   const labelHidden = labelInline ? true : labelHiddenProp;
 
   const className = classNames(
     styles.Select,
-    isMobileFormsInline && styles.labelInline,
-    labelAction && styles.labelAction,
-    labelInline && styles.labelOneLine,
+    isTallSelect && styles.tallSelect,
+    labelInside && styles.labelInside,
+    // isMobileFormsInline && styles.labelInline,
+    // labelAction && styles.labelAction,
+    // labelInline && styles.labelOneLine,
     labelHidden && styles.labelHidden,
     error && styles.error,
     tone && styles[variationName('tone', tone)],
@@ -203,7 +208,7 @@ export function Select({
       error={error}
       action={labelAction}
       labelHidden={labelHidden}
-      labelInline={isMobileFormsInline && !labelAction}
+      labelInline={labelInside}
       helpText={helpText}
       requiredIndicator={requiredIndicator}
       disabled={disabled}

diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -323,14 +323,19 @@
 }
 
 .tallInput .Input {
-  padding-block-start: 18px;
-  padding-block-end: 18px;
+  padding-block-start: 12px;
+  padding-block-end: 12px;
+}
+
+.tallInput.labelInside .Input {
+  padding-block-start: 20px;
+  padding-block-end: 20px;
 }
 .tallInput.labelInside.hasValue {
   .Input,
   .Prefix {
-    padding-block-start: 28px;
-    padding-block-end: 8px;
+    padding-block-start: 30px;
+    padding-block-end: 10px;
   }
 }
 
@@ -408,6 +413,10 @@
 }
 
 @media (--p-breakpoints-md-down) {
+  .Backdrop {
+    border-width: var(--p-border-width-025);
+  }
+
   .focus > .Input,
   .focus > .VerticalContent,
   .focus > .InputAndSuffixWrapper,

diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -751,12 +751,14 @@ export function All() {
           tone="magic"
         />
         <TextField
-          label="Prefix icon"
+          label="Search"
           type="search"
+          labelHidden
           value="Value"
           onChange={() => {}}
           prefix={<Icon source={SearchIcon} />}
           autoComplete="off"
+          connectedRight={<Button>Browse</Button>}
         />
         <TextField
           label="Prefix icon with magic"

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -264,8 +264,7 @@ export function TextField({
   const [focus, setFocus] = useState(Boolean(focused));
   const isAfterInitial = useIsAfterInitialMount();
   const isMobileFormsInline = useIsMobileFormsInline();
-  const isTallInput =
-    isMobileFormsInline && !connectedLeft && !(incomingLabelHidden && prefix);
+  const isTallInput = isMobileFormsInline && !verticalContent && !connectedLeft;
 
   const labelInside = isTallInput && !incomingLabelHidden && !labelAction;
 
@@ -586,7 +585,7 @@ export function TextField({
     role,
     autoFocus,
     value: normalizedValue,
-    placeholder: labelInside ? label || placeholder : placeholder,
+    placeholder: labelInside ? placeholder || label : placeholder,
     style,
     autoComplete,
     className: inputClassName,