From c3b7e2d65b3f9be07cd993d417bd1435f6abed5c Mon Sep 17 00:00:00 2001
From: Sophie Schneider <thesophieschneider@gmail.com>
Date: Thu, 10 Aug 2023 16:21:36 +0000
Subject: [PATCH] Merge BannerExperimental with Banner

---
 .../src/components/Banner/Banner.scss         |  43 +++
 .../src/components/Banner/Banner.stories.tsx  |  13 +
 .../src/components/Banner/Banner.tsx          | 292 +++++++++++++++---
 .../BannerExperimental.scss                   |  41 ---
 .../BannerExperimental/BannerExperimental.tsx | 267 ----------------
 .../components/BannerExperimental/index.ts    |   1 -
 .../src/components/Banner/components/index.ts |   1 -
 polaris-react/src/components/Banner/index.ts  |   1 +
 .../components/Banner/tests/Banner.test.tsx   |  10 +-
 .../BannerExperimental => }/utilities.ts      |  46 ++-
 10 files changed, 361 insertions(+), 354 deletions(-)
 delete mode 100644 polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
 delete mode 100644 polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
 delete mode 100644 polaris-react/src/components/Banner/components/BannerExperimental/index.ts
 delete mode 100644 polaris-react/src/components/Banner/components/index.ts
 rename polaris-react/src/components/Banner/{components/BannerExperimental => }/utilities.ts (64%)

diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index 81c7d7de916..8d07c49126b 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/polaris-react/src/components/Banner/Banner.scss
@@ -46,3 +46,46 @@
     margin-top: var(--p-space-4);
   }
 }
+
+// stylelint-disable -- duplicate selectors to bump specificity for button svg color override
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector
+
+@mixin recolor-icon($fill-color: null) {
+  svg,
+  path {
+    fill: $fill-color;
+  }
+}
+
+.icon-on-color.icon-on-color.icon-on-color {
+  @include recolor-icon(var(--p-color-icon-on-color));
+}
+
+.icon-success-strong-experimental.icon-success-strong-experimental.icon-success-strong-experimental {
+  @include recolor-icon(var(--p-color-icon-success-strong-experimental));
+}
+
+.text-warning-strong.text-warning-strong.text-warning-strong {
+  @include recolor-icon(var(--p-color-text-warning-strong));
+}
+
+.icon-warning-strong-experimental.icon-warning-strong-experimental.icon-warning-strong-experimental {
+  @include recolor-icon(var(--p-color-icon-warning-strong-experimental));
+}
+
+.icon-critical-strong-experimental.icon-critical-strong-experimental.icon-critical-strong-experimental {
+  @include recolor-icon(var(--p-color-icon-critical-strong-experimental));
+}
+
+.text-info-strong.text-info-strong.text-info-strong {
+  @include recolor-icon(var(--p-color-text-info-strong));
+}
+
+.icon-info-strong-experimental.icon-info-strong-experimental.icon-info-strong-experimental {
+  @include recolor-icon(var(--p-color-icon-info-strong-experimental));
+}
+
+.icon-subdued.icon-subdued.icon-subdued {
+  @include recolor-icon(var(--p-color-icon-subdued));
+}
+// stylelint-enable
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index 2c4464a8e34..c36da8c4ee4 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -295,6 +295,19 @@ export function All() {
           </Text>
         }
       />
+      <Text as="h2" variant="headingMd">
+        No title with hidden icon
+      </Text>
+      <AllBanners
+        title={undefined}
+        hideIcon
+        children={
+          <Text as="p">
+            Changing the phone number for this customer will unsubscribe them
+            from SMS marketing text messages until they provide consent.
+          </Text>
+        }
+      />
       <Text as="h2" variant="headingMd">
         Only title
       </Text>
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index baeb758776c..f45459eff44 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/polaris-react/src/components/Banner/Banner.tsx
@@ -1,19 +1,36 @@
 import React, {
   forwardRef,
   useContext,
-  useImperativeHandle,
   useRef,
   useState,
+  useEffect,
+  useCallback,
 } from 'react';
+import type {PropsWithChildren} from 'react';
+import type {ColorTextAlias} from '@shopify/polaris-tokens';
+import {CancelMinor} from '@shopify/polaris-icons';
 
-import {classNames} from '../../utilities/css';
-import {BannerContext} from '../../utilities/banner-context';
 import type {Action, DisableableAction, LoadableAction} from '../../types';
+import {Text} from '../Text';
+import {VerticalStack} from '../VerticalStack';
+import type {HorizontalStackProps} from '../HorizontalStack';
+import {HorizontalStack} from '../HorizontalStack';
+import type {BoxProps} from '../Box';
+import {Box} from '../Box';
+import {Button} from '../Button';
+import {ButtonGroup} from '../ButtonGroup';
+import {Icon} from '../Icon';
 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 styles from './Banner.scss';
-import {BannerExperimental} from './components';
+import type {BannerHandles} from './utilities';
+import {bannerAttributes, useBannerFocus} from './utilities';
 
 export type BannerStatus = 'success' | 'info' | 'warning' | 'critical';
 
@@ -67,48 +84,249 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
         onKeyUp={handleKeyUp}
         onBlur={handleBlur}
       >
-        <BannerExperimental {...props} />
+        <BannerLayout {...props} />
       </div>
     </BannerContext.Provider>
   );
 });
 
-export interface BannerHandles {
-  focus(): void;
+interface BannerLayoutProps {
+  backgroundColor: BoxProps['background'];
+  textColor: ColorTextAlias;
+  bannerTitle: React.ReactNode;
+  bannerIcon: React.ReactNode;
+  actionButtons: React.ReactNode;
+  dismissButton: React.ReactNode;
 }
 
-function useBannerFocus(bannerRef: React.Ref<BannerHandles>) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [shouldShowFocus, setShouldShowFocus] = useState(false);
-
-  useImperativeHandle(
-    bannerRef,
-    () => ({
-      focus: () => {
-        wrapperRef.current?.focus();
-        setShouldShowFocus(true);
-      },
-    }),
-    [],
-  );
+export function BannerLayout({
+  status = 'info',
+  icon,
+  hideIcon,
+  onDismiss,
+  action,
+  secondaryAction,
+  title,
+  children,
+}: BannerProps) {
+  const i18n = useI18n();
+  const withinContentContainer = useContext(WithinContentContext);
+  const isInlineIconBanner = !title && !withinContentContainer;
+  const bannerStatus = Object.keys(bannerAttributes).includes(status)
+    ? status
+    : 'info';
+  const bannerColors =
+    bannerAttributes[bannerStatus][
+      withinContentContainer ? 'withinContentContainer' : 'withinPage'
+    ];
 
-  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.target === wrapperRef.current) {
-      setShouldShowFocus(true);
-    }
+  const sharedBannerProps: BannerLayoutProps = {
+    backgroundColor: bannerColors.background,
+    textColor: bannerColors.text,
+    bannerTitle: title ? (
+      <Text as="h2" variant="headingSm" breakWord>
+        {title}
+      </Text>
+    ) : null,
+    bannerIcon: hideIcon ? null : (
+      <span className={styles[bannerColors.icon]}>
+        <Icon source={icon ?? bannerAttributes[bannerStatus].icon} />
+      </span>
+    ),
+    actionButtons:
+      action || secondaryAction ? (
+        <ButtonGroup>
+          {action && (
+            <Button onClick={action.onAction} {...action}>
+              {action.content}
+            </Button>
+          )}
+          {secondaryAction && (
+            <Button onClick={secondaryAction.onAction} {...secondaryAction}>
+              {secondaryAction.content}
+            </Button>
+          )}
+        </ButtonGroup>
+      ) : null,
+    dismissButton: onDismiss ? (
+      <Button
+        plain
+        primary
+        icon={
+          <span
+            className={
+              styles[isInlineIconBanner ? 'icon-subdued' : bannerColors.icon]
+            }
+          >
+            <Icon source={CancelMinor} />
+          </span>
+        }
+        onClick={onDismiss}
+        accessibilityLabel={i18n.translate('Polaris.Banner.dismissButton')}
+      />
+    ) : null,
   };
 
-  const handleBlur = () => setShouldShowFocus(false);
-  const handleMouseUp = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.currentTarget.blur();
-    setShouldShowFocus(false);
-  };
+  if (withinContentContainer) {
+    return (
+      <WithinContentContainerBanner {...sharedBannerProps}>
+        {children}
+      </WithinContentContainerBanner>
+    );
+  }
 
-  return {
-    wrapperRef,
-    handleKeyUp,
-    handleBlur,
-    handleMouseUp,
-    shouldShowFocus,
-  };
+  if (isInlineIconBanner) {
+    return (
+      <InlineIconBanner {...sharedBannerProps}>{children}</InlineIconBanner>
+    );
+  }
+
+  return <DefaultBanner {...sharedBannerProps}>{children}</DefaultBanner>;
+}
+
+export function DefaultBanner({
+  backgroundColor,
+  textColor,
+  bannerTitle,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children,
+}: PropsWithChildren<BannerLayoutProps>) {
+  const {smUp} = useBreakpoints();
+  const hasContent = children || actionButtons;
+
+  return (
+    <Box width="100%">
+      <VerticalStack align="space-between">
+        <Box
+          background={backgroundColor}
+          color={textColor}
+          borderRadiusStartStart={smUp ? '3' : undefined}
+          borderRadiusStartEnd={smUp ? '3' : undefined}
+          borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
+          borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
+          padding="3"
+        >
+          <HorizontalStack
+            align="space-between"
+            blockAlign="center"
+            gap="2"
+            wrap={false}
+          >
+            <HorizontalStack gap="1" wrap={false}>
+              {bannerIcon}
+              {bannerTitle}
+            </HorizontalStack>
+            {dismissButton}
+          </HorizontalStack>
+        </Box>
+        {hasContent && (
+          <Box padding={{xs: '3', md: '4'}} paddingBlockStart="3">
+            <VerticalStack gap="2">
+              <div>{children}</div>
+              {actionButtons}
+            </VerticalStack>
+          </Box>
+        )}
+      </VerticalStack>
+    </Box>
+  );
+}
+
+export function InlineIconBanner({
+  backgroundColor,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children,
+}: PropsWithChildren<Omit<BannerLayoutProps, 'textColor' | 'bannerTitle'>>) {
+  const [blockAlign, setBlockAlign] =
+    useState<HorizontalStackProps['blockAlign']>('center');
+  const contentNode = useRef<HTMLDivElement>(null);
+  const iconNode = useRef<HTMLDivElement>(null);
+
+  const handleResize = useCallback(() => {
+    const contentHeight = contentNode.current?.offsetHeight;
+    const iconBoxHeight = iconNode.current?.offsetHeight;
+
+    if (!contentHeight || !iconBoxHeight) return;
+
+    contentHeight > iconBoxHeight
+      ? setBlockAlign('start')
+      : setBlockAlign('center');
+  }, []);
+
+  useEffect(() => handleResize(), [handleResize]);
+  useEventListener('resize', handleResize);
+
+  return (
+    <Box width="100%" padding="3" borderRadius="3">
+      <HorizontalStack
+        align="space-between"
+        blockAlign={blockAlign}
+        wrap={false}
+      >
+        <Box width="100%">
+          <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
+            {bannerIcon ? (
+              <div ref={iconNode}>
+                <Box background={backgroundColor} borderRadius="2" padding="1">
+                  {bannerIcon}
+                </Box>
+              </div>
+            ) : null}
+            <Box ref={contentNode} width="100%">
+              <VerticalStack gap="2">
+                <div>{children}</div>
+                {actionButtons}
+              </VerticalStack>
+            </Box>
+          </HorizontalStack>
+        </Box>
+        {dismissButton}
+      </HorizontalStack>
+    </Box>
+  );
+}
+
+export function WithinContentContainerBanner({
+  backgroundColor,
+  textColor,
+  bannerTitle,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children,
+}: PropsWithChildren<BannerLayoutProps>) {
+  return (
+    <Box
+      width="100%"
+      background={backgroundColor}
+      padding="2"
+      borderRadius="2"
+      color={textColor}
+    >
+      <HorizontalStack
+        align="space-between"
+        blockAlign="start"
+        wrap={false}
+        gap="2"
+      >
+        <HorizontalStack gap="1_5-experimental" wrap={false}>
+          {bannerIcon}
+          <Box width="100%">
+            <VerticalStack gap="2">
+              <VerticalStack gap="05">
+                {bannerTitle}
+                <div>{children}</div>
+              </VerticalStack>
+              {actionButtons}
+            </VerticalStack>
+          </Box>
+        </HorizontalStack>
+        {dismissButton}
+      </HorizontalStack>
+    </Box>
+  );
 }
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
deleted file mode 100644
index a238818366e..00000000000
--- a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@mixin recolor-icon($fill-color: null) {
-  svg,
-  path {
-    fill: $fill-color;
-  }
-}
-
-// duplicate selectors to bump specificity
-// https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector
-
-.icon-on-color.icon-on-color {
-  @include recolor-icon(var(--p-color-icon-on-color));
-}
-
-.icon-success-strong-experimental.icon-success-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-success-strong-experimental));
-}
-
-.text-warning-strong.text-warning-strong {
-  @include recolor-icon(var(--p-color-text-warning-strong));
-}
-
-.icon-warning-strong-experimental.icon-warning-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-warning-strong-experimental));
-}
-
-.icon-critical-strong-experimental.icon-critical-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-critical-strong-experimental));
-}
-
-.text-info-strong.text-info-strong {
-  @include recolor-icon(var(--p-color-text-info-strong));
-}
-
-.icon-info-strong-experimental.icon-info-strong-experimental {
-  @include recolor-icon(var(--p-color-icon-info-strong-experimental));
-}
-
-.icon-subdued.icon-subdued {
-  @include recolor-icon(var(--p-color-icon-subdued));
-}
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
deleted file mode 100644
index 09af28ef6dd..00000000000
--- a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import type {PropsWithChildren} from 'react';
-import React, {
-  useEffect,
-  useState,
-  useRef,
-  useContext,
-  useCallback,
-} from 'react';
-import type {ColorTextAlias} from '@shopify/polaris-tokens';
-import {CancelMinor} from '@shopify/polaris-icons';
-
-import {Text} from '../../../Text';
-import {VerticalStack} from '../../../VerticalStack';
-import type {HorizontalStackProps} from '../../../HorizontalStack';
-import {HorizontalStack} from '../../../HorizontalStack';
-import {useBreakpoints} from '../../../../utilities/breakpoints';
-import {WithinContentContext} from '../../../../utilities/within-content-context';
-import type {BoxProps} from '../../../Box';
-import {Box} from '../../../Box';
-import {Button} from '../../../Button';
-import {ButtonGroup} from '../../../ButtonGroup';
-import type {BannerProps} from '../../Banner';
-import {useI18n} from '../../../../utilities/i18n';
-import {Icon} from '../../../Icon';
-import {useEventListener} from '../../../../utilities/use-event-listener';
-
-import {bannerAttributes} from './utilities';
-import styles from './BannerExperimental.scss';
-
-interface BannerLayoutProps {
-  backgroundColor: BoxProps['background'];
-  textColor: ColorTextAlias;
-  bannerTitle: React.ReactNode;
-  bannerIcon: React.ReactNode;
-  actionButtons: React.ReactNode;
-  dismissButton: React.ReactNode;
-}
-
-export function BannerExperimental({
-  status = 'info',
-  icon,
-  hideIcon,
-  onDismiss,
-  action,
-  secondaryAction,
-  title,
-  children,
-}: BannerProps) {
-  const i18n = useI18n();
-  const withinContentContainer = useContext(WithinContentContext);
-  const isInlineIconBanner = !title && !withinContentContainer;
-  const bannerStatus = Object.keys(bannerAttributes).includes(status)
-    ? status
-    : 'info';
-  const bannerColors =
-    bannerAttributes[bannerStatus][
-      withinContentContainer ? 'withinContentContainer' : 'withinPage'
-    ];
-
-  const sharedBannerProps: BannerLayoutProps = {
-    backgroundColor: bannerColors.background,
-    textColor: bannerColors.text,
-    bannerTitle: title ? (
-      <Text as="h2" variant="headingSm" breakWord>
-        {title}
-      </Text>
-    ) : null,
-    bannerIcon: hideIcon ? null : (
-      <span className={styles[bannerColors.icon]}>
-        <Icon source={icon ?? bannerAttributes[bannerStatus].icon} />
-      </span>
-    ),
-    actionButtons:
-      action || secondaryAction ? (
-        <ButtonGroup>
-          {action && (
-            <Button onClick={action.onAction} {...action}>
-              {action.content}
-            </Button>
-          )}
-          {secondaryAction && (
-            <Button onClick={secondaryAction.onAction} {...secondaryAction}>
-              {secondaryAction.content}
-            </Button>
-          )}
-        </ButtonGroup>
-      ) : null,
-    dismissButton: onDismiss ? (
-      <Button
-        plain
-        primary
-        icon={
-          <span
-            className={
-              styles[isInlineIconBanner ? 'icon-subdued' : bannerColors.icon]
-            }
-          >
-            <Icon source={CancelMinor} />
-          </span>
-        }
-        onClick={onDismiss}
-        accessibilityLabel={i18n.translate('Polaris.Banner.dismissButton')}
-      />
-    ) : null,
-  };
-
-  if (withinContentContainer) {
-    return (
-      <WithinContentContainerBanner {...sharedBannerProps}>
-        {children}
-      </WithinContentContainerBanner>
-    );
-  }
-
-  if (isInlineIconBanner) {
-    return (
-      <InlineIconBanner {...sharedBannerProps}>{children}</InlineIconBanner>
-    );
-  }
-
-  return <DefaultBanner {...sharedBannerProps}>{children}</DefaultBanner>;
-}
-
-export function DefaultBanner({
-  backgroundColor,
-  textColor,
-  bannerTitle,
-  bannerIcon,
-  actionButtons,
-  dismissButton,
-  children,
-}: PropsWithChildren<BannerLayoutProps>) {
-  const {smUp} = useBreakpoints();
-  const hasContent = children || actionButtons;
-
-  return (
-    <Box width="100%">
-      <VerticalStack align="space-between">
-        <Box
-          background={backgroundColor}
-          color={textColor}
-          borderRadiusStartStart={smUp ? '3' : undefined}
-          borderRadiusStartEnd={smUp ? '3' : undefined}
-          borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
-          borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
-          padding="3"
-        >
-          <HorizontalStack
-            align="space-between"
-            blockAlign="center"
-            gap="2"
-            wrap={false}
-          >
-            <HorizontalStack gap="1" wrap={false}>
-              {bannerIcon}
-              {bannerTitle}
-            </HorizontalStack>
-            {dismissButton}
-          </HorizontalStack>
-        </Box>
-        {hasContent && (
-          <Box padding={{xs: '3', md: '4'}} paddingBlockStart="3">
-            <VerticalStack gap="2">
-              <div>{children}</div>
-              {actionButtons}
-            </VerticalStack>
-          </Box>
-        )}
-      </VerticalStack>
-    </Box>
-  );
-}
-
-export function InlineIconBanner({
-  backgroundColor,
-  bannerIcon,
-  actionButtons,
-  dismissButton,
-  children,
-}: PropsWithChildren<Omit<BannerLayoutProps, 'textColor' | 'bannerTitle'>>) {
-  const [blockAlign, setBlockAlign] =
-    useState<HorizontalStackProps['blockAlign']>('center');
-  const contentNode = useRef<HTMLDivElement>(null);
-  const iconNode = useRef<HTMLDivElement>(null);
-
-  const handleResize = useCallback(() => {
-    const contentHeight = contentNode.current?.offsetHeight;
-    const iconBoxHeight = iconNode.current?.offsetHeight;
-
-    if (!contentHeight || !iconBoxHeight) return;
-
-    contentHeight > iconBoxHeight
-      ? setBlockAlign('start')
-      : setBlockAlign('center');
-  }, []);
-
-  useEffect(() => handleResize(), [handleResize]);
-  useEventListener('resize', handleResize);
-
-  return (
-    <Box width="100%" padding="3" borderRadius="3">
-      <HorizontalStack
-        align="space-between"
-        blockAlign={blockAlign}
-        wrap={false}
-      >
-        <Box width="100%">
-          <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
-            <div ref={iconNode}>
-              <Box background={backgroundColor} borderRadius="2" padding="1">
-                {bannerIcon}
-              </Box>
-            </div>
-            <Box ref={contentNode} width="100%">
-              <VerticalStack gap="2">
-                <div>{children}</div>
-                {actionButtons}
-              </VerticalStack>
-            </Box>
-          </HorizontalStack>
-        </Box>
-        {dismissButton}
-      </HorizontalStack>
-    </Box>
-  );
-}
-
-export function WithinContentContainerBanner({
-  backgroundColor,
-  textColor,
-  bannerTitle,
-  bannerIcon,
-  actionButtons,
-  dismissButton,
-  children,
-}: PropsWithChildren<BannerLayoutProps>) {
-  return (
-    <Box
-      width="100%"
-      background={backgroundColor}
-      padding="2"
-      borderRadius="2"
-      color={textColor}
-    >
-      <HorizontalStack
-        align="space-between"
-        blockAlign="start"
-        wrap={false}
-        gap="2"
-      >
-        <HorizontalStack gap="1_5-experimental" wrap={false}>
-          {bannerIcon}
-          <Box width="100%">
-            <VerticalStack gap="2">
-              <VerticalStack gap="05">
-                {bannerTitle}
-                <div>{children}</div>
-              </VerticalStack>
-              {actionButtons}
-            </VerticalStack>
-          </Box>
-        </HorizontalStack>
-        {dismissButton}
-      </HorizontalStack>
-    </Box>
-  );
-}
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/index.ts b/polaris-react/src/components/Banner/components/BannerExperimental/index.ts
deleted file mode 100644
index da53b9dbc33..00000000000
--- a/polaris-react/src/components/Banner/components/BannerExperimental/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {BannerExperimental} from './BannerExperimental';
diff --git a/polaris-react/src/components/Banner/components/index.ts b/polaris-react/src/components/Banner/components/index.ts
deleted file mode 100644
index da53b9dbc33..00000000000
--- a/polaris-react/src/components/Banner/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {BannerExperimental} from './BannerExperimental';
diff --git a/polaris-react/src/components/Banner/index.ts b/polaris-react/src/components/Banner/index.ts
index bc95f09d62a..44ca135a7e2 100644
--- a/polaris-react/src/components/Banner/index.ts
+++ b/polaris-react/src/components/Banner/index.ts
@@ -1 +1,2 @@
 export * from './Banner';
+export type {BannerHandles} from './utilities';
diff --git a/polaris-react/src/components/Banner/tests/Banner.test.tsx b/polaris-react/src/components/Banner/tests/Banner.test.tsx
index 59fa5bfa8b0..26ff46cb337 100644
--- a/polaris-react/src/components/Banner/tests/Banner.test.tsx
+++ b/polaris-react/src/components/Banner/tests/Banner.test.tsx
@@ -18,14 +18,14 @@ import {UnstyledButton} from '../../UnstyledButton';
 import {UnstyledLink} from '../../UnstyledLink';
 import {BannerContext} from '../../../utilities/banner-context';
 import {WithinContentContext} from '../../../utilities/within-content-context';
-import {Banner} from '../Banner';
-import type {BannerHandles, BannerStatus} from '../Banner';
-// eslint-disable-next-line @shopify/strict-component-boundaries -- se23 test will eventaully be beside component
 import {
+  Banner,
   DefaultBanner,
   InlineIconBanner,
   WithinContentContainerBanner,
-} from '../components/BannerExperimental/BannerExperimental';
+} from '../Banner';
+import type {BannerStatus} from '../Banner';
+import type {BannerHandles} from '../utilities';
 
 window.matchMedia =
   window.matchMedia ||
@@ -37,7 +37,7 @@ window.matchMedia =
     };
   };
 
-describe('<BannerExperimental />', () => {
+describe('<Banner />', () => {
   it('renders a title', () => {
     const banner = mountWithApp(<Banner title="Banner title" />);
     expect(
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/utilities.ts b/polaris-react/src/components/Banner/utilities.ts
similarity index 64%
rename from polaris-react/src/components/Banner/components/BannerExperimental/utilities.ts
rename to polaris-react/src/components/Banner/utilities.ts
index 00745f44a8b..7f007d11749 100644
--- a/polaris-react/src/components/Banner/components/BannerExperimental/utilities.ts
+++ b/polaris-react/src/components/Banner/utilities.ts
@@ -9,9 +9,11 @@ import {
   RiskMinor,
   TickMinor,
 } from '@shopify/polaris-icons';
+import {useImperativeHandle, useRef, useState} from 'react';
 
-import type {BannerStatus} from '../../Banner';
-import type {IconSource} from '../../../../types';
+import type {IconSource} from '../../types';
+
+import type {BannerStatus} from './Banner';
 
 interface BannerColorAliases {
   background: ColorBackgroundAlias;
@@ -79,3 +81,43 @@ export const bannerAttributes: {[key in BannerStatus]: BannerAttributes} = {
     icon: InfoMinor,
   },
 };
+
+export interface BannerHandles {
+  focus(): void;
+}
+
+export function useBannerFocus(bannerRef: React.Ref<BannerHandles>) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [shouldShowFocus, setShouldShowFocus] = useState(false);
+
+  useImperativeHandle(
+    bannerRef,
+    () => ({
+      focus: () => {
+        wrapperRef.current?.focus();
+        setShouldShowFocus(true);
+      },
+    }),
+    [],
+  );
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.target === wrapperRef.current) {
+      setShouldShowFocus(true);
+    }
+  };
+
+  const handleBlur = () => setShouldShowFocus(false);
+  const handleMouseUp = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.currentTarget.blur();
+    setShouldShowFocus(false);
+  };
+
+  return {
+    wrapperRef,
+    handleKeyUp,
+    handleBlur,
+    handleMouseUp,
+    shouldShowFocus,
+  };
+}