[Banner] Change status prop to tone (#10206)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10050

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Changes the status prop on banner to tone

Author: kyledurand

.changeset/olive-clouds-pretend.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Changed `status` prop on `Banner` to `tone`

documentation/guides/migrating-from-v11-to-v12.md

@@ -58,6 +58,10 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 // TODO - Boolean prop to tone, variant migration
 
+**Banner**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Banner" --from="status" --to="tone"`
+
 **Icon**
 
 - Backdrop is not a pattern in the new Polaris design language. If you must use a backdrop on your icon, use Box.

polaris-react/src/components/Banner/Banner.stories.tsx

@@ -43,7 +43,7 @@ export function WithFooterCallToAction() {
   return (
     <Banner
       title="Some of your product variants are missing weights"
-      status="warning"
+      tone="warning"
       action={{content: 'Edit variant weights', url: ''}}
       secondaryAction={{content: 'Learn more', url: ''}}
       onDismiss={() => {}}
@@ -62,7 +62,7 @@ export function Informational() {
       title="USPS has updated their rates"
       action={{content: 'Update rates', url: ''}}
       secondaryAction={{content: 'Learn more'}}
-      status="info"
+      tone="info"
       onDismiss={() => {}}
     >
       <p>Make sure you know how these changes affect your store.</p>
@@ -74,7 +74,7 @@ export function Success() {
   return (
     <Banner
       title="Your shipping label is ready to print."
-      status="success"
+      tone="success"
       action={{content: 'Print label'}}
       onDismiss={() => {}}
     />
@@ -86,7 +86,7 @@ export function Warning() {
     <Banner
       title="Before you can purchase a shipping label, this change needs to be made:"
       action={{content: 'Edit address'}}
-      status="warning"
+      tone="warning"
     >
       <List>
         <List.Item>
@@ -103,7 +103,7 @@ export function Critical() {
     <Banner
       title="High risk of fraud detected"
       action={{content: 'Review risk analysis'}}
-      status="critical"
+      tone="critical"
     >
       <p>
         Before fulfilling this order or capturing payment, please{' '}
@@ -139,7 +139,7 @@ export function InAModal() {
       >
         <Modal.Section>
           <TextContainer>
-            <Banner action={{content: 'Connect account'}} status="warning">
+            <Banner action={{content: 'Connect account'}} tone="warning">
               <p>
                 Connect your instagram account to your shop before proceeding.
               </p>
@@ -165,7 +165,7 @@ export function WithFocus() {
     <Banner
       title="High risk of fraud detected"
       onDismiss={() => {}}
-      status="critical"
+      tone="critical"
       ref={banner}
     >
       <p>
@@ -214,7 +214,7 @@ export function InALegacyCard() {
 
 export function WithEndJustifiedContent() {
   return (
-    <Banner status="critical">
+    <Banner tone="critical">
       <BlockStack gap="1">
         <InlineStack gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
@@ -233,7 +233,7 @@ export function WithEndJustifiedContent() {
 export function HideIcon() {
   return (
     <LegacyCard title="Edit customer" sectioned>
-      <Banner status="warning" hideIcon>
+      <Banner tone="warning" hideIcon>
         <Text as="p" fontWeight="semibold">
           Changing the phone number for this customer will unsubscribe them from
           SMS marketing text messages until they provide consent.
@@ -246,7 +246,7 @@ export function HideIcon() {
 export function CustomIcon() {
   return (
     <Banner
-      status="info"
+      tone="info"
       icon={DiscountsMajor}
       title="Choose a plan and your discount will be applied at checkout."
     />
@@ -408,25 +408,25 @@ function AllBanners(props) {
       />
       <Banner
         title="Info"
-        status="info"
+        tone="info"
         children={<Text as="p">Info status</Text>}
         {...props}
       />
       <Banner
         title="Success"
-        status="success"
+        tone="success"
         children={<Text as="p">Success status</Text>}
         {...props}
       />
       <Banner
         title="Warning"
-        status="warning"
+        tone="warning"
         children={<Text as="p">Warning status</Text>}
         {...props}
       />
       <Banner
         title="Critical"
-        status="critical"
+        tone="critical"
         children={<Text as="p">Critical status</Text>}
         {...props}
       />

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

@@ -32,7 +32,7 @@ import styles from './Banner.scss';
 import type {BannerHandles} from './utilities';
 import {bannerAttributes, useBannerFocus} from './utilities';
 
-export type BannerStatus = 'success' | 'info' | 'warning' | 'critical';
+export type BannerTone = 'success' | 'info' | 'warning' | 'critical';
 
 export interface BannerProps {
   /** Title content for the banner. */
@@ -42,7 +42,7 @@ export interface BannerProps {
   /** Renders the banner without a status icon. */
   hideIcon?: boolean;
   /** Sets the status of the banner. */
-  status?: BannerStatus;
+  tone?: BannerTone;
   /** The child elements to render in the banner. */
   children?: React.ReactNode;
   /** Action for banner */
@@ -59,7 +59,7 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
   props: BannerProps,
   bannerRef,
 ) {
-  const {status, stopAnnouncements} = props;
+  const {tone, stopAnnouncements} = props;
   const withinContentContainer = useContext(WithinContentContext);
   const {wrapperRef, handleKeyUp, handleBlur, handleMouseUp, shouldShowFocus} =
     useBannerFocus(bannerRef);
@@ -76,9 +76,7 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
         ref={wrapperRef}
-        role={
-          status === 'warning' || status === 'critical' ? 'alert' : 'status'
-        }
+        role={tone === 'warning' || tone === 'critical' ? 'alert' : 'status'}
         aria-live={stopAnnouncements ? 'off' : 'polite'}
         onMouseUp={handleMouseUp}
         onKeyUp={handleKeyUp}
@@ -100,7 +98,7 @@ interface BannerLayoutProps {
 }
 
 export function BannerLayout({
-  status = 'info',
+  tone = 'info',
   icon,
   hideIcon,
   onDismiss,
@@ -112,11 +110,11 @@ export function BannerLayout({
   const i18n = useI18n();
   const withinContentContainer = useContext(WithinContentContext);
   const isInlineIconBanner = !title && !withinContentContainer;
-  const bannerStatus = Object.keys(bannerAttributes).includes(status)
-    ? status
+  const bannerTone = Object.keys(bannerAttributes).includes(tone)
+    ? tone
     : 'info';
   const bannerColors =
-    bannerAttributes[bannerStatus][
+    bannerAttributes[bannerTone][
       withinContentContainer ? 'withinContentContainer' : 'withinPage'
     ];
 
@@ -130,7 +128,7 @@ export function BannerLayout({
     ) : null,
     bannerIcon: hideIcon ? null : (
       <span className={styles[bannerColors.icon]}>
-        <Icon source={icon ?? bannerAttributes[bannerStatus].icon} />
+        <Icon source={icon ?? bannerAttributes[bannerTone].icon} />
       </span>
     ),
     actionButtons:

polaris-react/src/components/Banner/tests/Banner.test.tsx

@@ -24,7 +24,7 @@ import {
   InlineIconBanner,
   WithinContentContainerBanner,
 } from '../Banner';
-import type {BannerStatus} from '../Banner';
+import type {BannerTone} from '../Banner';
 import type {BannerHandles} from '../utilities';
 
 window.matchMedia =
@@ -244,7 +244,7 @@ describe('<Banner />', () => {
           banner.current && banner.current.focus();
         }, []);
 
-        return <Banner ref={banner} status="critical" />;
+        return <Banner ref={banner} tone="critical" />;
       }
 
       const testComponent = mountWithApp(<Test />);
@@ -357,14 +357,11 @@ describe('<Banner />', () => {
       ['info', 'status'],
       ['warning', 'alert'],
       ['critical', 'alert'],
-    ])(
-      'aria role when status is %s',
-      (status: BannerStatus, role: 'string') => {
-        const banner = mountWithApp(<Banner status={status} />);
+    ])('aria role when status is %s', (tone: BannerTone, role: 'string') => {
+      const banner = mountWithApp(<Banner tone={tone} />);
 
-        expect(banner).toContainReactComponent('div', {role});
-      },
-    );
+      expect(banner).toContainReactComponent('div', {role});
+    });
   });
 
   describe('icon', () => {
@@ -373,8 +370,8 @@ describe('<Banner />', () => {
       ['info', InfoMinor],
       ['warning', RiskMinor],
       ['critical', DiamondAlertMinor],
-    ])('icon when status is %s', (status: BannerStatus, icon: any) => {
-      const banner = mountWithApp(<Banner status={status} />);
+    ])('icon when status is %s', (tone: BannerTone, icon: any) => {
+      const banner = mountWithApp(<Banner tone={tone} />);
 
       expect(banner).toContainReactComponent(Icon, {
         source: icon,

polaris-react/src/components/Banner/utilities.ts

@@ -13,7 +13,7 @@ import {useImperativeHandle, useRef, useState} from 'react';
 
 import type {IconSource} from '../../types';
 
-import type {BannerStatus} from './Banner';
+import type {BannerTone} from './Banner';
 
 interface BannerColorAliases {
   background: ColorBackgroundAlias;
@@ -27,7 +27,7 @@ interface BannerAttributes {
   icon: IconSource;
 }
 
-export const bannerAttributes: {[key in BannerStatus]: BannerAttributes} = {
+export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
   success: {
     withinPage: {
       background: 'bg-success-strong',

polaris-react/src/index.ts

@@ -66,11 +66,7 @@ export {
 export type {BadgeProps} from './components/Badge';
 
 export {Banner} from './components/Banner';
-export type {
-  BannerProps,
-  BannerStatus,
-  BannerHandles,
-} from './components/Banner';
+export type {BannerProps, BannerTone, BannerHandles} from './components/Banner';
 
 export {Bleed} from './components/Bleed';
 export type {BleedProps} from './components/Bleed';

polaris.shopify.com/pages/examples/banner-critical.tsx

@@ -7,7 +7,7 @@ function BannerExample() {
     <Banner
       title="High risk of fraud detected"
       action={{content: 'Review risk analysis'}}
-      status="critical"
+      tone="critical"
     >
       <p>
         Before fulfilling this order or capturing payment, please{' '}

polaris.shopify.com/pages/examples/banner-in-a-modal.tsx

@@ -27,7 +27,7 @@ function BannerInModalExample() {
       >
         <Modal.Section>
           <TextContainer>
-            <Banner action={{content: 'Connect account'}} status="warning">
+            <Banner action={{content: 'Connect account'}} tone="warning">
               <p>
                 Connect your instagram account to your shop before proceeding.
               </p>

polaris.shopify.com/pages/examples/banner-informational.tsx

@@ -8,7 +8,7 @@ function BannerExample() {
       title="USPS has updated their rates"
       action={{content: 'Update rates', url: ''}}
       secondaryAction={{content: 'Learn more'}}
-      status="info"
+      tone="info"
       onDismiss={() => {}}
     >
       <p>Make sure you know how these changes affect your store.</p>