Mobile Textfield exploration minimal changes

.changeset/sweet-donkeys-shake.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Experimenting with TextField styles

polaris-react/.storybook/addons/global-controls-panel/manager.jsx

@@ -46,6 +46,12 @@ export const featureFlagOptions = {
     defaultValue: false,
     control: {type: 'boolean'},
   },
+  mobileInlineFormLabels: {
+    name: 'mobileInlineFormLabels',
+    description: 'Toggle Mobile Inline Form Labels',
+    defaultValue: false,
+    control: {type: 'boolean'},
+  },
 };
 
 export const gridOptions = {

polaris-react/src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Text} from '../Text';
 import {classNames} from '../../utilities/css';
+import {useIsMobileFormsInline} from '../../utilities/use-is-mobile-forms-inline';
 
 import styles from './Label.module.css';
 
@@ -22,6 +23,7 @@ export function labelID(id: string) {
 
 export function Label({children, id, hidden, requiredIndicator}: LabelProps) {
   const className = classNames(styles.Label, hidden && styles.hidden);
+  const isMobileFormsInline = useIsMobileFormsInline();
 
   return (
     <div className={className}>
@@ -33,7 +35,7 @@ export function Label({children, id, hidden, requiredIndicator}: LabelProps) {
           requiredIndicator && styles.RequiredIndicator,
         )}
       >
-        <Text as="span" variant="bodyMd">
+        <Text as="span" variant={isMobileFormsInline ? 'bodyXs' : 'bodyMd'}>
           {children}
         </Text>
       </label>

polaris-react/src/components/Labelled/Labelled.module.css

@@ -26,6 +26,19 @@
   margin-bottom: var(--p-space-100);
 }
 
+.labelInline {
+  position: relative;
+}
+
+.labelInline .LabelWrapper {
+  position: absolute;
+  top: 5px;
+  color: var(--p-color-text-secondary);
+  left: var(--p-space-300);
+  right: var(--p-space-300);
+  z-index: var(--p-z-index-2);
+}
+
 .HelpText {
   margin-top: var(--p-space-100);
 }
@@ -39,3 +52,7 @@
 .Action {
   flex: 0 0 auto;
 }
+
+.labelInline .Action {
+  margin-top: var(--p-space-200);
+}

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,19 +48,29 @@ export function Labelled({
   requiredIndicator,
   disabled,
   readOnly,
+  labelInline,
   ...rest
 }: LabelledProps) {
   const className = classNames(
+    labelInline && styles.labelInline,
     labelHidden && styles.hidden,
     disabled && styles.disabled,
     readOnly && styles.readOnly,
   );
 
-  const actionMarkup = action ? (
-    <div className={styles.Action}>
-      {buttonFrom(action, {variant: 'plain'})}
-    </div>
-  ) : null;
+  const actionMarkup =
+    !labelInline && action ? (
+      <div className={styles.Action}>
+        {buttonFrom(action, {variant: 'plain'})}
+      </div>
+    ) : null;
+
+  const actionPostMarkup =
+    labelInline && action ? (
+      <div className={styles.Action}>
+        {buttonFrom(action, {variant: 'secondary', fullWidth: true})}
+      </div>
+    ) : null;
 
   const helpTextMarkup = helpText ? (
     <div
@@ -99,6 +111,7 @@ export function Labelled({
       {children}
       {errorMarkup}
       {helpTextMarkup}
+      {actionPostMarkup}
     </div>
   );
 }

polaris-react/src/components/Select/Select.module.css

@@ -77,6 +77,16 @@
   text-overflow: ellipsis;
 }
 
+.labelInline .SelectedOption {
+  padding-block-start: 16px;
+}
+
+.labelOneLine.labelInline .SelectedOption,
+.labelInline.labelHidden .SelectedOption {
+  padding-block-start: 8px;
+  padding-block-end: 8px;
+}
+
 .Prefix {
   padding-right: var(--p-space-100);
 }

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,16 @@ export function Select({
   tone,
 }: SelectProps) {
   const {value: focused, toggle: toggleFocused} = useToggle(false);
-
+  const isMobileFormsInline = useIsMobileFormsInline();
   const uniqId = useId();
   const id = idProp ?? uniqId;
   const labelHidden = labelInline ? true : labelHiddenProp;
 
   const className = classNames(
     styles.Select,
+    isMobileFormsInline && styles.labelInline,
+    labelInline && styles.labelOneLine,
+    labelHidden && styles.labelHidden,
     error && styles.error,
     tone && styles[variationName('tone', tone)],
     disabled && styles.disabled,
@@ -198,6 +202,7 @@ export function Select({
       error={error}
       action={labelAction}
       labelHidden={labelHidden}
+      labelInline={isMobileFormsInline}
       helpText={helpText}
       requiredIndicator={requiredIndicator}
       disabled={disabled}

polaris-react/src/components/TextField/TextField.module.css

@@ -316,6 +316,17 @@
   }
 }
 
+.labelInline .Input,
+.prefixInline {
+  padding-block-start: 14px;
+  padding-block-end: 14px;
+}
+.labelInline.hasValue .Input,
+.labelInline.hasValue .prefixInline {
+  padding-block-start: 22px;
+  padding-block-end: 6px;
+}
+
 .borderless {
   .Input,
   .Backdrop {

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';
@@ -262,6 +263,7 @@ export function TextField({
   const [height, setHeight] = useState<number | null>(null);
   const [focus, setFocus] = useState(Boolean(focused));
   const isAfterInitial = useIsAfterInitialMount();
+  const isMobileFormsInline = useIsMobileFormsInline() && !connectedLeft;
   const uniqId = useId();
   const id = idProp ?? uniqId;
 
@@ -308,6 +310,7 @@ export function TextField({
 
   const className = classNames(
     styles.TextField,
+    isMobileFormsInline && styles.labelInline,
     Boolean(normalizedValue) && styles.hasValue,
     disabled && styles.disabled,
     readOnly && styles.readOnly,
@@ -325,7 +328,11 @@ export function TextField({
 
   const prefixMarkup = prefix ? (
     <div
-      className={classNames(styles.Prefix, iconPrefix && styles.PrefixIcon)}
+      className={classNames(
+        styles.Prefix,
+        iconPrefix && styles.PrefixIcon,
+        isMobileFormsInline && styles.prefixInline,
+      )}
       id={`${id}-Prefix`}
       ref={prefixRef}
     >
@@ -574,7 +581,7 @@ export function TextField({
     role,
     autoFocus,
     value: normalizedValue,
-    placeholder,
+    placeholder: isMobileFormsInline ? label || placeholder : placeholder,
     style,
     autoComplete,
     className: inputClassName,
@@ -665,7 +672,8 @@ export function TextField({
       id={id}
       error={error}
       action={labelAction}
-      labelHidden={labelHidden}
+      labelHidden={isMobileFormsInline ? value.length === 0 : labelHidden}
+      labelInline={isMobileFormsInline}
       helpText={helpText}
       requiredIndicator={requiredIndicator}
       disabled={disabled}

polaris-react/src/utilities/features/types.ts

@@ -1,5 +1,6 @@
 export interface FeaturesConfig {
   dynamicTopBarAndReframe?: boolean;
+  mobileInlineFormLabels?: boolean;
   [key: string]: boolean | undefined;
 }
 

polaris-react/src/utilities/use-is-mobile-forms-inline.ts

@@ -0,0 +1,9 @@
+import {useBreakpoints} from './breakpoints';
+import {useFeatures} from './features';
+
+export function useIsMobileFormsInline() {
+  const {mdDown} = useBreakpoints();
+  const {mobileInlineFormLabels} = useFeatures();
+
+  return mdDown || mobileInlineFormLabels;
+}