[Text] Rename color prop as tone (#10266)

Closes #10267 - [x] Change color to tone - [x] Map warning to caution
Shopify · Aug 29, 2023 · 22a51ea · 22a51ea
1 parent 1a10b94
commit 22a51ea
Show file tree

Hide file tree

Showing 43 changed files with 103 additions and 88 deletions.
diff --git a/.changeset/slow-experts-flash.md b/.changeset/slow-experts-flash.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `color` prop on Text to `tone`
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -85,5 +85,15 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 - Color
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Icon" --from="color" --to="tone"`
+
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Icon" --from="tone" --to="tone" --fromValue="warning" --toValue="caution"`
+
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Icon" --from="tone" --to="tone" --fromValue="highlight" --toValue="info"`
+
+**Text**
+
+- Color
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Text" --from="color" --to="tone"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Text" --from="tone" --to="tone" --fromValue="warning" --toValue="caution"`
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -66,7 +66,7 @@ export function AccountConnection({
   );
 
   const detailsMarkup = details ? (
-    <Text as="span" color="subdued">
+    <Text as="span" tone="subdued">
       {details}
     </Text>
   ) : null;

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -82,7 +82,7 @@ export function Item({
       <Text
         as="span"
         variant="bodySm"
-        color={active || disabled ? undefined : 'subdued'}
+        tone={active || disabled ? undefined : 'subdued'}
       >
         {helpText}
       </Text>

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({
     <div className={styles.Text}>
       <div className={contentOverflowStyle}>{contentText}</div>
       {helpText ? (
-        <Text color="subdued" as="span">
+        <Text tone="subdued" as="span">
           {helpText}
         </Text>
       ) : null}

diff --git a/polaris-react/src/components/Choice/Choice.tsx b/polaris-react/src/components/Choice/Choice.tsx
@@ -156,7 +156,7 @@ export function Choice({
         as="span"
         // `undefined` means color: inherit
         // the nearest ancestor with a specified color is .Descriptions in Choice.scss
-        color={disabled ? undefined : 'subdued'}
+        tone={disabled ? undefined : 'subdued'}
       >
         {helpText}
       </Text>

diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -47,7 +47,7 @@ export function FileUpload(props: FileUploadProps) {
   );
 
   const actionHintMarkup = actionHint && (
-    <Text variant="bodySm" as="p" color="subdued">
+    <Text variant="bodySm" as="p" tone="subdued">
       {actionHint}
     </Text>
   );

diff --git a/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx b/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -33,7 +33,7 @@ export function EmptySearchResult({
       <Text variant="headingLg" as="p">
         {title}
       </Text>
-      <Text color="subdued" as="span">
+      <Text tone="subdued" as="span">
         {descriptionMarkup}
       </Text>
     </LegacyStack>

diff --git a/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx b/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx
@@ -24,9 +24,9 @@ describe('<EmptySearchResult />', () => {
       <EmptySearchResult title="Foo" description="Bar" />,
     );
     const subdued = wrapper.findWhere(
-      (wrap) => wrap.is(Text) && wrap.prop('color') === 'subdued',
+      (wrap) => wrap.is(Text) && wrap.prop('tone') === 'subdued',
     );
-    expect(wrapper).toContainReactComponent(Text, {color: 'subdued'});
+    expect(wrapper).toContainReactComponent(Text, {tone: 'subdued'});
     expect(subdued).toContainReactText('Bar');
   });
 

diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
@@ -127,7 +127,7 @@ export function ContextualSaveBar({
           <div className={styles.MessageContainer}>
             <Icon source={CircleAlertMajor} />
             {message && (
-              <Text as="h2" variant="headingMd" color="text-inverse" truncate>
+              <Text as="h2" variant="headingMd" tone="text-inverse" truncate>
                 {message}
               </Text>
             )}

diff --git a/polaris-react/src/components/Labelled/Labelled.tsx b/polaris-react/src/components/Labelled/Labelled.tsx
@@ -66,7 +66,7 @@ export function Labelled({
       id={helpTextID(id)}
       aria-disabled={disabled}
     >
-      <Text as="span" color="subdued" breakWord>
+      <Text as="span" tone="subdued" breakWord>
         {helpText}
       </Text>
     </div>

diff --git a/polaris-react/src/components/Layout/Layout.stories.tsx b/polaris-react/src/components/Layout/Layout.stories.tsx
@@ -105,7 +105,7 @@ export function TwoColumnsWithEqualWidth() {
         <Layout.Section variant="oneHalf">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 455 units available
               </Text>
             </LegacyCard.Section>
@@ -167,7 +167,7 @@ export function TwoColumnsWithEqualWidth() {
         <Layout.Section variant="oneHalf">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 301 units available
               </Text>
             </LegacyCard.Section>
@@ -238,7 +238,7 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section variant="oneThird">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 455 units available
               </Text>
             </LegacyCard.Section>
@@ -300,7 +300,7 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section variant="oneThird">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 301 units available
               </Text>
             </LegacyCard.Section>
@@ -362,7 +362,7 @@ export function ThreeColumnsWithEqualWidth() {
         <Layout.Section variant="oneThird">
           <LegacyCard title="Minneapolis" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 1931 units available
               </Text>
             </LegacyCard.Section>

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx
@@ -189,7 +189,7 @@ class LegacyFiltersInner extends Component<CombinedProps, State> {
               <h3 className={styles.FilterTriggerTitle}>
                 <Text
                   as="span"
-                  color={
+                  tone={
                     this.props.disabled || filter.disabled
                       ? 'subdued'
                       : undefined
@@ -351,7 +351,7 @@ class LegacyFiltersInner extends Component<CombinedProps, State> {
           </Button>
         ) : (
           <div className={styles.EmptyFooterState}>
-            <Text color="subdued" as="span">
+            <Text tone="subdued" as="span">
               <p>{i18n.translate('Polaris.Filters.noFiltersApplied')}</p>
             </Text>
           </div>
@@ -426,7 +426,7 @@ class LegacyFiltersInner extends Component<CombinedProps, State> {
 
     const helpTextMarkup = helpText ? (
       <div id="FiltersHelpText" className={styles.HelpText}>
-        <Text color="subdued" as="span">
+        <Text tone="subdued" as="span">
           {helpText}
         </Text>
       </div>

diff --git a/polaris-react/src/components/LegacyFilters/tests/LegacyFilters.test.tsx b/polaris-react/src/components/LegacyFilters/tests/LegacyFilters.test.tsx
@@ -651,7 +651,7 @@ describe('<LegacyFilters />', () => {
         });
 
         expect(toggleButton!).toContainReactComponent(Text, {
-          color: 'subdued',
+          tone: 'subdued',
         });
       });
     });
@@ -688,7 +688,7 @@ describe('<LegacyFilters />', () => {
             });
 
             expect(toggleButton).toContainReactComponent(Text, {
-              color: 'subdued',
+              tone: 'subdued',
             });
           });
       });
@@ -708,7 +708,7 @@ describe('<LegacyFilters />', () => {
             });
 
             expect(toggleButton).toContainReactComponent(Text, {
-              color: undefined,
+              tone: undefined,
             });
           });
       });

diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -167,7 +167,7 @@ export function WithCustomOptions() {
               <Box width="100%">
                 <InlineStack gap="2" align="space-between">
                   {label}
-                  <Text as="span" color="subdued">
+                  <Text as="span" tone="subdued">
                     {`${subscribers} subscribers`}
                   </Text>
                 </InlineStack>

diff --git a/polaris-react/src/components/Listbox/components/Header/Header.tsx b/polaris-react/src/components/Listbox/components/Header/Header.tsx
@@ -20,7 +20,7 @@ export function Header({children}: HeaderProps) {
         paddingBlockEnd="2"
         paddingInlineEnd="4"
       >
-        <Text as="span" variant="headingXs" color="subdued">
+        <Text as="span" variant="headingXs" tone="subdued">
           {children}
         </Text>
       </Box>

diff --git a/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx
@@ -29,7 +29,7 @@ describe('Header', () => {
     expect(header.find(Box)).toContainReactComponent(Text, {
       as: 'span',
       variant: 'headingXs',
-      color: 'subdued',
+      tone: 'subdued',
     });
   });
 

diff --git a/polaris-react/src/components/Navigation/components/Section/Section.tsx b/polaris-react/src/components/Navigation/components/Section/Section.tsx
@@ -103,7 +103,7 @@ export function Section({
 
   const sectionHeadingMarkup = title && (
     <li className={styles.SectionHeading}>
-      <Text as="span" variant="bodySm" fontWeight="medium" color="subdued">
+      <Text as="span" variant="bodySm" fontWeight="medium" tone="subdued">
         {title}
       </Text>
       {actionMarkup}

diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -181,7 +181,7 @@ export function Header({
 
   const additionalMetadataMarkup = additionalMetadata ? (
     <div className={styles.AdditionalMetaData}>
-      <Text color="subdued" as="span" variant="bodySm">
+      <Text tone="subdued" as="span" variant="bodySm">
         {additionalMetadata}
       </Text>
     </div>

diff --git a/polaris-react/src/components/Pagination/Pagination.tsx b/polaris-react/src/components/Pagination/Pagination.tsx
@@ -160,7 +160,7 @@ export function Pagination({
     hasNext && hasPrevious ? (
       <span>{label}</span>
     ) : (
-      <Text color="subdued" as="span">
+      <Text tone="subdued" as="span">
         {label}
       </Text>
     );

diff --git a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx
@@ -151,7 +151,7 @@ describe('<Pagination />', () => {
       const pagination = mountWithApp(<Pagination label="test" />);
 
       expect(pagination).toContainReactComponent(Text, {
-        color: 'subdued',
+        tone: 'subdued',
       });
     });
   });

diff --git a/polaris-react/src/components/Select/Select.stories.tsx b/polaris-react/src/components/Select/Select.stories.tsx
@@ -170,7 +170,7 @@ export function WithSeparateValidationError() {
     }
 
     return (
-      <Text color="critical" as="span">
+      <Text tone="critical" as="span">
         <p>
           {`${weightError}${unitError} is required when weight based shipping rates are enabled. `}
           <Link>Manage shipping</Link>

diff --git a/polaris-react/src/components/Select/Select.tsx b/polaris-react/src/components/Select/Select.tsx
@@ -134,7 +134,7 @@ export function Select({
 
   const inlineLabelMarkup = labelInline && (
     <Box paddingInlineEnd="1">
-      <Text as="span" color="subdued" truncate>
+      <Text as="span" tone="subdued" truncate>
         {label}
       </Text>
     </Box>

diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
@@ -125,7 +125,7 @@ export function WithPrimitiveComponents() {
 
   const descriptionMarkup = (
     <BlockStack gap="4">
-      <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
+      <Text id={descriptionId} variant="bodyMd" as="p" tone="subdued">
         {description}
       </Text>
       {mdDown ? (
@@ -239,7 +239,7 @@ export function WithPrimitiveComponentsAndLongTitle() {
 
   const descriptionMarkup = (
     <BlockStack gap="4">
-      <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
+      <Text id={descriptionId} variant="bodyMd" as="p" tone="subdued">
         {description}
       </Text>
       {mdDown ? (

diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -470,7 +470,7 @@ export function WithSearchableListbox() {
                 marginBottom: 'var(--p-space-2)',
               }}
             >
-              <Text as="h3" variant="headingXs" color="subdued">
+              <Text as="h3" variant="headingXs" tone="subdued">
                 Action
               </Text>
               <Button
@@ -484,7 +484,7 @@ export function WithSearchableListbox() {
               <Text variant="headingMd" as="h2">
                 Look up customer segmentation membership
               </Text>
-              <Text color="subdued" as="span">
+              <Text tone="subdued" as="span">
                 Look up whether a customer is included in a segment.
               </Text>
             </TextContainer>

diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
@@ -44,7 +44,7 @@
   color: var(--p-color-text-critical);
 }
 
-.warning {
+.caution {
   color: var(--p-color-text-caution);
 }
 

diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx
@@ -85,31 +85,31 @@ export const WithFontWeight = () => (
   </LegacyStack>
 );
 
-export const WithColor = () => (
+export const WithTone = () => (
   <LegacyStack vertical>
-    <Text as="p" color="subdued">
+    <Text as="p" tone="subdued">
       Use to de-emphasize a piece of text that is less important to merchants
       than other nearby text. May also be used to indicate when normal content
       is absent, for example, “No supplier listed”. Don’t use only for aesthetic
       effect.
     </Text>
-    <Text as="p" color="success">
+    <Text as="p" tone="success">
       Use in combination with a symbol showing an increasing value to indicate
       an upward trend.
     </Text>
-    <Text as="p" color="warning">
+    <Text as="p" tone="caution">
       Use to denote something that needs attention, or that merchants need to
       take action on.
     </Text>
-    <Text as="p" color="critical">
+    <Text as="p" tone="critical">
       Use in combination with a symbol showing a decreasing value to indicate a
       downward trend.
     </Text>
   </LegacyStack>
 );
 
 export const WithInheritance = () => (
-  <Text as="p" variant="heading2xl" color="warning">
+  <Text as="p" variant="heading2xl" tone="caution">
     <Text as="span">This is a 2xl heading</Text>
     <br />
     <Text as="span">This is also a 2xl heading</Text>
@@ -130,7 +130,7 @@ export const WithTruncate = () => (
 );
 
 export const ParentWithChild = () => (
-  <Text as="p" variant="bodySm" color="subdued">
+  <Text as="p" variant="bodySm" tone="subdued">
     Parent Text component with{' '}
     <Text as="span" fontWeight="bold">
       bold