Shopify · ssetem · Apr 4, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 4, 2024
diff --git a/.changeset/angry-snakes-camp.md b/.changeset/angry-snakes-camp.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Reduced text size of helper, error, and footer text
diff --git a/.changeset/neat-bobcats-clean.md b/.changeset/neat-bobcats-clean.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add border to Banner on breakpoint-xs and change success icon to CheckCircleIcon
diff --git a/.changeset/polite-wombats-speak.md b/.changeset/polite-wombats-speak.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated LegacyCard title size to text `headingMg` to match `bodyMd` text size
diff --git a/.changeset/selfish-oranges-listen.md b/.changeset/selfish-oranges-listen.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `RadioButton` `border-width` to improve mobile consistency
diff --git a/.changeset/sharp-moose-act.md b/.changeset/sharp-moose-act.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated responsive text styles for mobile
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/postcss-mixins/text-style-input.css b/polaris-react/postcss-mixins/text-style-input.css
@@ -1,7 +1,12 @@
 @define-mixin text-style-input {
-  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-600);
   border: none;
   letter-spacing: initial;
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }
diff --git a/polaris-react/src/components/AppProvider/global.css b/polaris-react/src/components/AppProvider/global.css
@@ -53,13 +53,18 @@
 
 html,
 body {
-  font-size: var(--p-font-size-325);
-  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-font-size-400);
+  line-height: var(--p-font-line-height-600);
   font-weight: var(--p-font-weight-regular);
   font-feature-settings: 'calt' 0;
   letter-spacing: initial;
   color: var(--p-color-text);
   -webkit-tap-highlight-color: transparent;
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 html,
@@ -114,6 +119,7 @@ html {
   @media (--p-breakpoints-sm-down) {
     html {
       font: -apple-system-body;
+      -webkit-text-size-adjust: calc(100% * (16 / 17));
     }
   }
 }

diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx
@@ -76,7 +76,7 @@ export function MappedAction({
         {contentText}
       </Text>
       {helpText ? (
-        <Text as="p" variant="bodyMd" tone="subdued">
+        <Text as="p" variant="bodySm" tone="subdued">
           {helpText}
         </Text>
       ) : null}

diff --git a/polaris-react/src/components/Banner/Banner.module.css b/polaris-react/src/components/Banner/Banner.module.css
@@ -3,6 +3,12 @@
   position: relative;
   display: flex;
 
+  margin-inline: var(--p-space-300);
+
+  @media (--p-breakpoints-sm-up) {
+    margin-inline: var(--p-space-0);
+  }
+
   &:focus {
     outline: none;
   }
@@ -21,12 +27,17 @@
 }
 
 .withinPage {
-  @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-0);
-
   @media (--p-breakpoints-sm-up) {
     @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-300);
   }
 
+  @media (--p-breakpoints-xs-only) {
+    border-width: var(--p-border-width-025);
+    border-style: solid;
+    border-color: var(--p-color-border);
+    border-radius: var(--p-border-radius-300);
+  }
+
   + .Banner {
     margin-top: var(--p-space-400);
   }

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
@@ -23,7 +23,6 @@ import type {IconProps} from '../Icon';
 import {BannerContext} from '../../utilities/banner-context';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {classNames} from '../../utilities/css';
-import {useBreakpoints} from '../../utilities/breakpoints';
 import {useI18n} from '../../utilities/i18n';
 import {useEventListener} from '../../utilities/use-event-listener';
 import {BlockStack} from '../BlockStack';
@@ -81,6 +80,7 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
         onMouseUp={handleMouseUp}
         onKeyUp={handleKeyUp}
         onBlur={handleBlur}
+        style={{overflow: 'hidden'}}
       >
         <BannerLayout {...props} />
       </div>
@@ -198,21 +198,12 @@ export function DefaultBanner({
   dismissButton,
   children,
 }: PropsWithChildren<BannerLayoutProps>) {
-  const {smUp} = useBreakpoints();
   const hasContent = children || actionButtons;
 
   return (
     <Box width="100%">
       <BlockStack align="space-between">
-        <Box
-          background={backgroundColor}
-          color={textColor}
-          borderStartStartRadius={smUp ? '300' : undefined}
-          borderStartEndRadius={smUp ? '300' : undefined}
-          borderEndStartRadius={!hasContent && smUp ? '300' : undefined}
-          borderEndEndRadius={!hasContent && smUp ? '300' : undefined}
-          padding="300"
-        >
+        <Box background={backgroundColor} color={textColor} padding="300">
           <InlineStack
             align="space-between"
             blockAlign="center"

diff --git a/polaris-react/src/components/Banner/tests/Banner.test.tsx b/polaris-react/src/components/Banner/tests/Banner.test.tsx
@@ -1,10 +1,10 @@
 import React, {useEffect, useRef} from 'react';
 import {
   PlusCircleIcon,
-  CheckIcon,
   AlertTriangleIcon,
   InfoIcon,
   AlertDiamondIcon,
+  CheckCircleIcon,
 } from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
 
@@ -356,7 +356,7 @@ describe('<Banner />', () => {
 
   describe('icon', () => {
     it.each([
-      ['success', CheckIcon],
+      ['success', CheckCircleIcon],
       ['info', InfoIcon],
       ['warning', AlertTriangleIcon],
       ['critical', AlertDiamondIcon],

diff --git a/polaris-react/src/components/Banner/utilities.ts b/polaris-react/src/components/Banner/utilities.ts
@@ -7,7 +7,7 @@ import {
   AlertDiamondIcon,
   InfoIcon,
   AlertTriangleIcon,
-  CheckIcon,
+  CheckCircleIcon,
 } from '@shopify/polaris-icons';
 import {useImperativeHandle, useRef, useState} from 'react';
 
@@ -39,7 +39,7 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
       text: 'text-success',
       icon: 'text-success',
     },
-    icon: CheckIcon,
+    icon: CheckCircleIcon,
   },
   warning: {
     withinPage: {

diff --git a/polaris-react/src/components/Choice/Choice.tsx b/polaris-react/src/components/Choice/Choice.tsx
@@ -161,6 +161,7 @@ export function Choice({
     <div className={styles.HelpText} id={helpTextID(id)}>
       <Text
         as="span"
+        variant="bodySm"
         // `undefined` means color: inherit
         // the nearest ancestor with a specified color is .Descriptions in Choice.scss
         tone={disabled ? undefined : 'subdued'}

diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.tsx
@@ -18,7 +18,7 @@ export function FooterHelp({children, align = 'center'}: FooterHelpProps) {
 
   return (
     <div className={styles.FooterHelp} style={style}>
-      <Text as="p" variant="bodyLg">
+      <Text as="p" variant="bodySm">
         {children}
       </Text>
     </div>

diff --git a/polaris-react/src/components/FormLayout/components/Group/Group.tsx b/polaris-react/src/components/FormLayout/components/Group/Group.tsx
@@ -25,8 +25,10 @@ export function Group({children, condensed, title, helpText}: GroupProps) {
   if (helpText) {
     helpTextId = `${id}HelpText`;
     helpTextElement = (
-      <Box id={helpTextId} color="text-secondary">
-        {helpText}
+      <Box id={helpTextId}>
+        <Text as="p" variant="bodySm" tone="subdued">
+          {helpText}
+        </Text>
       </Box>
     );
   }

diff --git a/polaris-react/src/components/InlineError/InlineError.module.css b/polaris-react/src/components/InlineError/InlineError.module.css
@@ -2,6 +2,10 @@
   display: flex;
   color: var(--p-color-text-critical);
   fill: var(--p-color-text-critical);
+
+  & > span {
+    margin-top: var(--p-space-050);
+  }
 }
 
 .Icon {

diff --git a/polaris-react/src/components/InlineError/InlineError.tsx b/polaris-react/src/components/InlineError/InlineError.tsx
@@ -24,7 +24,7 @@ export function InlineError({message, fieldID}: InlineErrorProps) {
       <div className={styles.Icon}>
         <Icon source={AlertCircleIcon} />
       </div>
-      <Text as="span" variant="bodyMd">
+      <Text as="span" variant="bodySm">
         {message}
       </Text>
     </div>

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,19 @@
   margin-bottom: var(--p-space-100);
 }
 
+.labelInline {
+  position: relative;
+}
+
+.labelInline .LabelWrapper {
+  position: absolute;
+  top: 6px;
+  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);
 }

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,
@@ -66,7 +70,7 @@ export function Labelled({
       id={helpTextID(id)}
       aria-disabled={disabled}
     >
-      <Text as="span" tone="subdued" variant="bodyMd" breakWord>
+      <Text as="span" tone="subdued" variant="bodySm" breakWord>
         {helpText}
       </Text>
     </div>
@@ -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/LegacyCard/components/Header/Header.tsx b/polaris-react/src/components/LegacyCard/components/Header/Header.tsx
@@ -21,7 +21,7 @@ export function Header({children, title, actions}: LegacyCardHeaderProps) {
   const titleMarkup = isValidElement(title) ? (
     title
   ) : (
-    <Text variant="headingSm" as="h2">
+    <Text variant="headingMd" as="h2">
       {title}
     </Text>
   );

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx
@@ -427,7 +427,7 @@ class LegacyFiltersInner extends Component<CombinedProps, State> {
 
     const helpTextMarkup = helpText ? (
       <div id="FiltersHelpText" className={styles.HelpText}>
-        <Text tone="subdued" as="span">
+        <Text tone="subdued" as="span" variant="bodySm">
           {helpText}
         </Text>
       </div>

diff --git a/polaris-react/src/components/RadioButton/RadioButton.module.css b/polaris-react/src/components/RadioButton/RadioButton.module.css
@@ -111,7 +111,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-0165) solid var(--p-color-input-border);
+  border: var(--p-border-width-025) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-input-bg-surface);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out);