chore: update badge props and tokens

Shopify · Sep 1, 2023 · 711dd9a · 711dd9a
1 parent 10d3c00
commit 711dd9a
Show file tree

Hide file tree

Showing 51 changed files with 244 additions and 254 deletions.
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -8,6 +8,10 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 ## Quick migration guide
 
+**Badge**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Text" --from="status" --to="tone"`
+
 **Layout.Section**
 
 - One third:

diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -553,7 +553,7 @@ export function DetailsPage() {
       fullWidth
       backAction={{content: 'Products', url: '/products/31'}}
       title={title}
-      titleMetadata={<Badge status="success">Success badge</Badge>}
+      titleMetadata={<Badge tone="success">Success badge</Badge>}
       primaryAction={{
         content: 'Save this page',
         onAction: () => console.log('save'),

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -93,7 +93,7 @@ export function Item({
 
   const badgeMarkup = badge && (
     <span className={styles.Suffix}>
-      <Badge status={badge.status}>{badge.content}</Badge>
+      <Badge tone={badge.tone}>{badge.content}</Badge>
     </span>
   );
 

diff --git a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
@@ -134,15 +134,15 @@ describe('<ActionList />', () => {
     const actionList = mountWithApp(
       <ActionList
         items={[
-          {content: 'Add discount', badge: {status: 'new', content: 'badge'}},
+          {content: 'Add discount', badge: {tone: 'new', content: 'badge'}},
         ]}
         onActionAnyItem={mockOnActionAnyItem}
         actionRole="option"
       />,
     );
     expect(actionList).toContainReactComponent(Badge, {
       children: 'badge',
-      status: 'new',
+      tone: 'new',
     });
   });
 

diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx
@@ -59,7 +59,7 @@ export function MappedAction({
 
   const badgeMarkup = badge && (
     <span className={styles.Suffix}>
-      <Badge status={badge.status}>{badge.content}</Badge>
+      <Badge tone={badge.tone}>{badge.content}</Badge>
     </span>
   );
 

diff --git a/...ris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx b/...ris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx
@@ -10,15 +10,15 @@ import {Icon} from '../../../../Icon';
 describe('MappedAction', () => {
   it('renders badge when provided', () => {
     const badge = {
-      status: 'new' as const,
+      tone: 'new' as const,
       content: 'new',
     };
     const mappedAction = mountWithListboxProvider(
       <MappedAction badge={badge} />,
     );
 
     expect(mappedAction).toContainReactComponent(Badge, {
-      status: badge.status,
+      tone: badge.tone,
       children: badge.content,
     });
   });

diff --git a/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx b/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -223,7 +223,7 @@ describe('<Autocomplete/>', () => {
             disabled: false,
             destructive: true,
             badge: {
-              status: 'new' as const,
+              tone: 'new' as const,
               content: 'new',
             },
           };
@@ -250,7 +250,7 @@ describe('<Autocomplete/>', () => {
             disabled: false,
             destructive: true,
             badge: {
-              status: 'new' as const,
+              tone: 'new' as const,
               content: 'new',
             },
           };

diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
@@ -23,7 +23,7 @@
   }
 }
 
-.statusSuccess {
+.toneSuccess {
   background-color: var(--p-color-bg-success);
   color: var(--p-color-text-success);
 
@@ -32,7 +32,7 @@
   }
 }
 
-.statusSuccess-strong-experimental {
+.toneSuccess-strong {
   color: var(--p-color-text-on-color);
   background-color: var(--p-color-bg-success-strong);
 
@@ -41,7 +41,7 @@
   }
 }
 
-.statusInfo {
+.toneInfo {
   background-color: var(--p-color-bg-info);
   color: var(--p-color-text-info);
 
@@ -50,7 +50,7 @@
   }
 }
 
-.statusInfo-strong-experimental {
+.toneInfo-strong {
   color: var(--p-color-text-info-strong);
   background-color: var(--p-color-bg-info-strong);
 
@@ -59,7 +59,7 @@
   }
 }
 
-.statusAttention {
+.toneAttention {
   background-color: var(--p-color-bg-caution);
   color: var(--p-color-text-caution);
 
@@ -68,7 +68,7 @@
   }
 }
 
-.statusAttention-strong-experimental {
+.toneAttention-strong {
   color: var(--p-color-text-caution-strong);
   background-color: var(--p-color-bg-caution-strong);
 
@@ -77,7 +77,7 @@
   }
 }
 
-.statusWarning {
+.toneWarning {
   background-color: var(--p-color-bg-warning);
   color: var(--p-color-text-warning-experimental);
 
@@ -86,7 +86,7 @@
   }
 }
 
-.statusWarning-strong-experimental {
+.toneWarning-strong {
   color: var(--p-color-text-warning-experimental);
   background-color: var(--p-color-bg-warning-strong-experimental);
 
@@ -95,7 +95,7 @@
   }
 }
 
-.statusCritical {
+.toneCritical {
   background-color: var(--p-color-bg-critical);
   color: var(--p-color-text-critical);
 
@@ -104,7 +104,7 @@
   }
 }
 
-.statusCritical-strong-experimental {
+.toneCritical-strong {
   color: var(--p-color-text-on-color);
   background-color: var(--p-color-bg-critical-strong);
 
@@ -113,7 +113,7 @@
   }
 }
 
-.statusNew {
+.toneNew {
   border: none;
   background-color: var(--p-color-bg-transparent-subdued-experimental);
   color: var(--p-color-text-subdued);
@@ -125,7 +125,7 @@
   }
 }
 
-.statusRead-only-experimental {
+.toneRead-only {
   color: var(--p-color-text-subdued);
   background-color: transparent;
 
@@ -134,15 +134,15 @@
   }
 }
 
-.statusEnabled-experimental {
+.toneEnabled {
   color: var(--p-color-text);
 
   svg {
     fill: var(--p-color-icon-success);
   }
 }
 
-.sizeLarge-experimental {
+.sizeLarge {
   padding: var(--p-space-1) var(--p-space-2);
 }
 
@@ -160,7 +160,7 @@
     vertical-align: top;
   }
 
-  .sizeLarge-experimental & {
+  .sizeLarge & {
     margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05));
   }