TextField,Select prototype inside labels

Shopify · Apr 16, 2024 · 37dcf45 · 37dcf45
1 parent 46d5c63
commit 37dcf45
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 8 deletions.
diff --git a/.changeset/sweet-donkeys-shake.md b/.changeset/sweet-donkeys-shake.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Experimenting with TextField styles
diff --git a/polaris-react/src/components/Label/Label.tsx b/polaris-react/src/components/Label/Label.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {Text} from '../Text';
 import {classNames} from '../../utilities/css';
+import type {TextProps} from '../Text';
+import {Text} from '../Text';
 
 import styles from './Label.module.css';
 
@@ -14,13 +15,21 @@ export interface LabelProps {
   hidden?: boolean;
   /** Visual required indicator for the label */
   requiredIndicator?: boolean;
+
+  variant?: TextProps['variant'];
 }
 
 export function labelID(id: string) {
   return `${id}Label`;
 }
 
-export function Label({children, id, hidden, requiredIndicator}: LabelProps) {
+export function Label({
+  children,
+  id,
+  hidden,
+  requiredIndicator,
+  variant = 'bodyMd',
+}: LabelProps) {
   const className = classNames(styles.Label, hidden && styles.hidden);
 
   return (
@@ -33,7 +42,7 @@ export function Label({children, id, hidden, requiredIndicator}: LabelProps) {
           requiredIndicator && styles.RequiredIndicator,
         )}
       >
-        <Text as="span" variant="bodyMd">
+        <Text as="span" variant={variant}>
           {children}
         </Text>
       </label>

diff --git a/polaris-react/src/components/Labelled/Labelled.module.css b/polaris-react/src/components/Labelled/Labelled.module.css
@@ -26,6 +26,22 @@
   margin-bottom: var(--p-space-100);
 }
 
+.labelInline {
+  position: relative;
+}
+
+.labelInline .LabelWrapper {
+  position: absolute;
+  top: 6px;
+  left: var(--p-space-300);
+  right: var(--p-space-300);
+  z-index: var(--p-z-index-2);
+}
+
+.labelInline:not(.disabled) .LabelWrapper {
+  color: var(--p-color-text-secondary);
+}
+
 .HelpText {
   margin-top: var(--p-space-100);
 }

diff --git a/polaris-react/src/components/Labelled/Labelled.tsx b/polaris-react/src/components/Labelled/Labelled.tsx
@@ -33,6 +33,8 @@ export interface LabelledProps {
   disabled?: boolean;
   /** Labels signify a readOnly control */
   readOnly?: boolean;
+
+  labelInline?: boolean;
 }
 
 export function Labelled({
@@ -46,9 +48,11 @@ export function Labelled({
   requiredIndicator,
   disabled,
   readOnly,
+  labelInline,
   ...rest
 }: LabelledProps) {
   const className = classNames(
+    labelInline && styles.labelInline,
     labelHidden && styles.hidden,
     disabled && styles.disabled,
     readOnly && styles.readOnly,
@@ -85,6 +89,7 @@ export function Labelled({
         requiredIndicator={requiredIndicator}
         {...rest}
         hidden={false}
+        variant={labelInline ? 'bodyXs' : undefined}
       >
         {label}
       </Label>

diff --git a/polaris-react/src/components/Select/Select.module.css b/polaris-react/src/components/Select/Select.module.css
@@ -77,6 +77,17 @@
   text-overflow: ellipsis;
 }
 
+.tallSelect.labelInside .SelectedOption,
+.tallSelect.labelInside .Prefix {
+  padding-block-start: 24px;
+  padding-block-end: 4px;
+}
+
+.tallSelect .SelectedOption {
+  padding-block-start: 6px;
+  padding-block-end: 6px;
+}
+
 .Prefix {
   padding-right: var(--p-space-100);
 }
@@ -133,6 +144,9 @@
     border-color: var(--p-color-border-critical-secondary);
     background-color: var(--p-color-bg-surface-critical);
 
+    @media (--p-breakpoints-md-down) {
+      border-width: var(--p-border-width-050);
+    }
     /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
     &.hover,
     &:hover {
@@ -159,6 +173,21 @@
     outline-offset: var(--p-space-025);
   }
 }
+@media (--p-breakpoints-md-down) {
+  .Backdrop {
+    border-width: var(--p-border-width-025);
+  }
+
+  .Select:not(.error):not(.disabled):not(.toneMagic) .Input:hover,
+  .Input:focus-visible {
+    ~ .Backdrop {
+      border-color: var(--p-color-border-focus);
+      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 {

diff --git a/polaris-react/src/components/Select/Select.tsx b/polaris-react/src/components/Select/Select.tsx
@@ -9,6 +9,7 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import type {Error} from '../../types';
 import {useToggle} from '../../utilities/use-toggle';
+import {useIsMobileFormsInline} from '../../utilities/use-is-mobile-forms-inline';
 
 import styles from './Select.module.css';
 
@@ -102,13 +103,22 @@ export function Select({
   tone,
 }: SelectProps) {
   const {value: focused, toggle: toggleFocused} = useToggle(false);
-
+  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,
+    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)],
     disabled && styles.disabled,
@@ -198,6 +208,7 @@ export function Select({
       error={error}
       action={labelAction}
       labelHidden={labelHidden}
+      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
@@ -81,6 +81,12 @@
     @mixin no-focus-ring;
     outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-025);
+
+    @media (--p-breakpoints-md-down) {
+      border-color: var(--p-color-border-focus);
+      outline-width: var(--p-border-width-025);
+      outline-offset: 0;
+    }
   }
 }
 
@@ -90,6 +96,11 @@
   .Input:focus-visible ~ .Backdrop {
     border-color: var(--p-color-border-critical-secondary);
     background-color: var(--p-color-bg-surface-critical);
+
+    @media (--p-breakpoints-md-down) {
+      outline: var(--p-border-width-025) solid
+        var(--p-color-border-critical-secondary);
+    }
   }
 
   /* stylelint-disable-next-line -- set Backdrop styles */
@@ -103,7 +114,10 @@
   > .InputAndSuffixWrapper ~ .Backdrop {
     background-color: var(--p-color-bg-surface-critical);
     border-color: var(--p-color-border-critical-secondary);
-
+    @media (--p-breakpoints-md-down) {
+      outline: var(--p-border-width-025) solid
+        var(--p-color-border-critical-secondary);
+    }
     /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &::after {
       border-color: var(--p-color-border-focus);
@@ -186,6 +200,9 @@
   > .Backdrop {
     border: none;
     background-color: var(--p-color-bg-surface-disabled);
+    @media (--p-breakpoints-md-down) {
+      outline: var(--p-border-width-025) solid var(--p-color-icon-disabled);
+    }
   }
 
   svg {
@@ -312,6 +329,23 @@
   }
 }
 
+.tallInput .Input {
+  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: 30px;
+    padding-block-end: 10px;
+  }
+}
+
 .borderless {
   .Input,
   .Backdrop {
@@ -383,6 +417,9 @@
   border-top-color: #898f94;
   border-radius: var(--p-border-radius-200);
   pointer-events: none;
+  @media (--p-breakpoints-md-down) {
+    border-width: var(--p-border-width-025);
+  }
 }
 
 .Prefix,

diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -18,6 +18,7 @@ import {
   Link,
 } from '@shopify/polaris';
 import {
+  CalendarIcon,
   DeleteIcon,
   QuestionCircleIcon,
   SearchIcon,
@@ -750,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"
@@ -1066,3 +1069,35 @@ export function WithLoading() {
     />
   );
 }
+
+export function WithNumberStepperLikeProps() {
+  const [value, setValue] = useState('0');
+
+  return (
+    <TextField
+      label="Quantity"
+      value={value}
+      onChange={setValue}
+      type="number"
+      labelHidden
+      min={0}
+      max={10}
+      autoComplete="off"
+      suffix="/ 10"
+    />
+  );
+}
+
+export function WithDatePickerLikeProps() {
+  const [value, setValue] = useState('');
+
+  return (
+    <TextField
+      label="Date"
+      value={value}
+      onChange={setValue}
+      prefix={<Icon source={CalendarIcon} />}
+      autoComplete="off"
+    />
+  );
+}
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -20,6 +20,7 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {Spinner as LoadingSpinner} from '../Spinner';
 import {useEventListener} from '../../utilities/use-event-listener';
+import {useIsMobileFormsInline} from '../../utilities/use-is-mobile-forms-inline';
 
 import {Resizer, Spinner} from './components';
 import type {SpinnerProps} from './components';
@@ -211,7 +212,7 @@ export function TextField({
   helpText,
   label,
   labelAction,
-  labelHidden,
+  labelHidden: incomingLabelHidden,
   disabled,
   clearButton,
   readOnly,
@@ -262,6 +263,13 @@ export function TextField({
   const [height, setHeight] = useState<number | null>(null);
   const [focus, setFocus] = useState(Boolean(focused));
   const isAfterInitial = useIsAfterInitialMount();
+  const isMobileFormsInline = useIsMobileFormsInline();
+  const isTallInput = isMobileFormsInline && !verticalContent && !connectedLeft;
+
+  const labelInside = isTallInput && !incomingLabelHidden && !labelAction;
+
+  const labelHidden = labelInside ? value.length === 0 : incomingLabelHidden;
+
   const uniqId = useId();
   const id = idProp ?? uniqId;
 
@@ -308,6 +316,9 @@ export function TextField({
 
   const className = classNames(
     styles.TextField,
+    isTallInput && styles.tallInput,
+    labelInside && styles.labelInside,
+    Boolean(labelAction) && styles.labelAction,
     Boolean(normalizedValue) && styles.hasValue,
     disabled && styles.disabled,
     readOnly && styles.readOnly,
@@ -574,7 +585,7 @@ export function TextField({
     role,
     autoFocus,
     value: normalizedValue,
-    placeholder,
+    placeholder: labelInside ? placeholder || label : placeholder,
     style,
     autoComplete,
     className: inputClassName,
@@ -666,6 +677,7 @@ export function TextField({
       error={error}
       action={labelAction}
       labelHidden={labelHidden}
+      labelInline={labelInside}
       helpText={helpText}
       requiredIndicator={requiredIndicator}
       disabled={disabled}

diff --git a/polaris-react/src/utilities/use-is-mobile-forms-inline.ts b/polaris-react/src/utilities/use-is-mobile-forms-inline.ts
@@ -0,0 +1,6 @@
+import {useBreakpoints} from './breakpoints';
+
+export function useIsMobileFormsInline() {
+  const {mdDown} = useBreakpoints();
+  return mdDown;
+}