react-native: add default accessibility label to BannerBase close button; merge closeButton classes on web/native; reorder BannerBase exports after BadgeWrapper for alphabetical grouping

cursoragent · cursoragent · commit 8d0969d66ecb · 2026-03-04T01:10:17.000Z
diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.constants.ts b/packages/design-system-react-native/src/components/BannerBase/BannerBase.constants.ts
@@ -5,5 +5,6 @@ export const DEFAULT_BANNERBASE_DESCRIPTION_VARIANT = TextVariant.BodyMd;
 export const DEFAULT_BANNERBASE_ACTION_BUTTON_SIZE = ButtonSize.Md;
 export const DEFAULT_BANNERBASE_CLOSE_BUTTON_SIZE = ButtonIconSize.Sm;
 export const DEFAULT_BANNERBASE_CLOSE_BUTTON_ICON_NAME = IconName.Close;
+export const DEFAULT_BANNERBASE_CLOSE_BUTTON_ARIA_LABEL = 'Close banner';
 
 export const TESTID_BANNERBASE_CLOSE_BUTTON = 'banner-base-close-button';
diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
@@ -14,6 +14,7 @@ import { Text } from '../Text';
 
 import {
   DEFAULT_BANNERBASE_ACTION_BUTTON_SIZE,
+  DEFAULT_BANNERBASE_CLOSE_BUTTON_ARIA_LABEL,
   DEFAULT_BANNERBASE_CLOSE_BUTTON_ICON_NAME,
   DEFAULT_BANNERBASE_CLOSE_BUTTON_SIZE,
   DEFAULT_BANNERBASE_DESCRIPTION_VARIANT,
@@ -48,8 +49,13 @@ export const BannerBase: React.FC<BannerBaseProps> = ({
     ...resolvedActionButtonProps
   } = actionButtonProps ?? {};
 
-  const { onPress: closeButtonPropsOnPress, ...resolvedCloseButtonProps } =
-    closeButtonProps ?? {};
+  const {
+    accessibilityLabel:
+      closeButtonAccessibilityLabel = DEFAULT_BANNERBASE_CLOSE_BUTTON_ARIA_LABEL,
+    onPress: closeButtonPropsOnPress,
+    twClassName: closeButtonTwClassName,
+    ...resolvedCloseButtonProps
+  } = closeButtonProps ?? {};
 
   const resolvedActionButtonLabel =
     actionButtonLabel ??
@@ -71,6 +77,10 @@ export const BannerBase: React.FC<BannerBaseProps> = ({
         }
       : undefined;
 
+  const mergedCloseButtonTwClassName = closeButtonTwClassName
+    ? `ml-3 ${closeButtonTwClassName}`
+    : 'ml-3';
+
   return (
     <Box
       flexDirection={BoxFlexDirection.Row}
@@ -128,9 +138,10 @@ export const BannerBase: React.FC<BannerBaseProps> = ({
       {shouldShowCloseButton && (
         <ButtonIcon
           testID={TESTID_BANNERBASE_CLOSE_BUTTON}
-          twClassName="ml-3"
+          twClassName={mergedCloseButtonTwClassName}
           iconName={DEFAULT_BANNERBASE_CLOSE_BUTTON_ICON_NAME}
           size={DEFAULT_BANNERBASE_CLOSE_BUTTON_SIZE}
+          accessibilityLabel={closeButtonAccessibilityLabel}
           onPress={handleClosePress}
           {...resolvedCloseButtonProps}
         />
diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
@@ -30,9 +30,6 @@ export type { AvatarNetworkProps } from './AvatarNetwork';
 export { AvatarToken, AvatarTokenSize } from './AvatarToken';
 export type { AvatarTokenProps } from './AvatarToken';
 
-export { BannerBase } from './BannerBase';
-export type { BannerBaseProps } from './BannerBase';
-
 export { BadgeCount, BadgeCountSize } from './BadgeCount';
 export type { BadgeCountProps } from './BadgeCount';
 
@@ -55,6 +52,9 @@ export type {
   BadgeWrapperCustomPosition,
 } from './BadgeWrapper';
 
+export { BannerBase } from './BannerBase';
+export type { BannerBaseProps } from './BannerBase';
+
 export { BottomSheetFooter, ButtonsAlignment } from './BottomSheetFooter';
 export type {
   BottomSheetFooterProps,
diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
@@ -57,6 +57,7 @@ export const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(
       ariaLabel:
         closeButtonAriaLabel = DEFAULT_BANNERBASE_CLOSE_BUTTON_ARIA_LABEL,
       onClick: closeButtonPropsOnClick,
+      className: closeButtonClassName,
       ...resolvedCloseButtonProps
     } = closeButtonProps ?? {};
 
@@ -127,7 +128,7 @@ export const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(
         {shouldShowCloseButton && (
           <ButtonIcon
             data-testid={TESTID_BANNERBASE_CLOSE_BUTTON}
-            className="ml-3 self-start"
+            className={twMerge('ml-3 self-start', closeButtonClassName)}
             iconName={DEFAULT_BANNERBASE_CLOSE_BUTTON_ICON_NAME}
             size={DEFAULT_BANNERBASE_CLOSE_BUTTON_SIZE}
             ariaLabel={closeButtonAriaLabel}
diff --git a/packages/design-system-react/src/components/index.ts b/packages/design-system-react/src/components/index.ts
@@ -27,9 +27,6 @@ export type { AvatarNetworkProps } from './AvatarNetwork';
 export { AvatarToken, AvatarTokenSize } from './AvatarToken';
 export type { AvatarTokenProps } from './AvatarToken';
 
-export { BannerBase } from './BannerBase';
-export type { BannerBaseProps } from './BannerBase';
-
 export { BadgeCount } from './BadgeCount';
 export type { BadgeCountProps } from './BadgeCount';
 export { BadgeCountSize } from './BadgeCount';
@@ -52,6 +49,9 @@ export {
 } from './BadgeWrapper';
 export type { BadgeWrapperCustomPosition } from './BadgeWrapper';
 
+export { BannerBase } from './BannerBase';
+export type { BannerBaseProps } from './BannerBase';
+
 export { Blockies } from './temp-components/Blockies';
 export type { BlockiesProps } from './temp-components/Blockies';
 
