fix: borderRadius not applying issue in banner (#190)

* fix: borderRadius not applying issue in banner, updated doc to showcase borderRadius

* chore: changelog

* chore: clean up Banner styale implementation

* chore: clean up unused variables

Author: haoruikun-cb

apps/docs/docs/components/feedback/Banner/_mobileExamples.mdx

@@ -2,7 +2,7 @@
 
 The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.
 
-```jsx live
+```tsx
 <Banner
   showDismiss
   startIcon="warning"
@@ -24,7 +24,7 @@ The global warning banner is used to communicate important alerts or warnings to
 
 The In-line Error Banner is used to display specific error messages directly beneath the relevant section headers. Use in-line banners to help users identify exactly where the error or outage is located.
 
-```jsx live
+```tsx
 <Banner
   startIcon="info"
   startIconActive
@@ -45,7 +45,7 @@ The In-line Error Banner is used to display specific error messages directly ben
 
 The Contextual Promotional Banner is used to highlight special offers, promotions, or announcements within a specific context or section of the platform. It is used to increase user engagement and drive conversions.
 
-```jsx live
+```tsx
 <Banner
   startIcon="info"
   startIconActive
@@ -64,7 +64,7 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
 
 The in-line Informational Banner is used to provide users with additional information or helpful tips directly within the content or interface, providing relevant guidance.
 
-```jsx live
+```tsx
 <VStack gap={2}>
   <Banner
     startIcon="info"
@@ -93,3 +93,42 @@ The in-line Informational Banner is used to provide users with additional inform
   </Banner>
 </VStack>
 ```
+
+### Rounded Corner Banners
+
+Customize `borderRadius` to align contextual or in-line banners with surrounding surfaces.
+
+```tsx
+<VStack gap={2}>
+  <Banner
+    borderRadius={200}
+    startIcon="info"
+    startIconActive
+    styleVariant="contextual"
+    title="Rounded contextual banner"
+    variant="informational"
+  >
+    <TextLabel2>
+      Use moderate rounding to soften banners that live within card-based layouts.
+    </TextLabel2>
+  </Banner>
+  <Banner
+    borderRadius={400}
+    primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
+    secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
+    startIcon="info"
+    startIconActive
+    styleVariant="inline"
+    title="Rounded inline banner"
+    variant="promotional"
+  >
+    <TextLabel2>
+      Larger radii can help inline banners feel cohesive with pill-shaped buttons or chips nearby.
+    </TextLabel2>
+  </Banner>
+</VStack>
+```
+
+:::tip
+Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned.
+:::

apps/docs/docs/components/feedback/Banner/_webExamples.mdx

@@ -2,7 +2,7 @@
 
 The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.
 
-```jsx live
+```tsx live
 <Banner
   showDismiss
   label="Message last updated today at 3:33pm"
@@ -25,7 +25,7 @@ The global warning banner is used to communicate important alerts or warnings to
 
 The In-line Error Banner is used to display specific error messages directly beneath the relevant section headers. Use in-line banners to help users identify exactly where the error or outage is located.
 
-```jsx live
+```tsx live
 <Banner
   startIcon="info"
   startIconActive
@@ -46,7 +46,7 @@ The In-line Error Banner is used to display specific error messages directly ben
 
 The Contextual Promotional Banner is used to highlight special offers, promotions, or announcements within a specific context or section of the platform. It is used to increase user engagement and drive conversions.
 
-```jsx live
+```tsx live
 <Banner
   startIcon="info"
   startIconActive
@@ -65,7 +65,7 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
 
 The in-line Informational Banner is used to provide users with additional information or helpful tips directly within the content or interface, providing relevant guidance.
 
-```jsx live
+```tsx live
 <VStack gap={2}>
   <Banner
     startIcon="info"
@@ -94,3 +94,42 @@ The in-line Informational Banner is used to provide users with additional inform
   </Banner>
 </VStack>
 ```
+
+### Rounded Corner Banners
+
+You can customize `borderRadius` to soften contextual and in-line banners.
+
+```tsx live
+<VStack gap={2}>
+  <Banner
+    borderRadius={200}
+    startIcon="info"
+    startIconActive
+    styleVariant="contextual"
+    title="Rounded contextual banner"
+    variant="informational"
+  >
+    <TextLabel2 as="p">
+      Rounded corners help align with softer surface treatments within a page section.
+    </TextLabel2>
+  </Banner>
+  <Banner
+    borderRadius={400}
+    primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
+    secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
+    startIcon="info"
+    startIconActive
+    styleVariant="inline"
+    title="Rounded inline banner"
+    variant="promotional"
+  >
+    <TextLabel2 as="p">
+      You can incrementally increase the radius to match surrounding cards or panels.
+    </TextLabel2>
+  </Banner>
+</VStack>
+```
+
+:::tip
+Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned.
+:::

packages/common/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.22.1 ((11/24/2025, 02:58 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.22.0 ((11/24/2025, 10:45 AM PST))
 
 This is an artificial version bump with no new change.

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.22.0",
+  "version": "8.22.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

packages/mcp-server/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.22.1 ((11/24/2025, 02:58 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.22.0 ((11/24/2025, 10:45 AM PST))
 
 This is an artificial version bump with no new change.

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.22.0",
+  "version": "8.22.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

packages/mobile/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.22.1 (11/24/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix the borderRadius prop issue in Banner. [[#190](https://github.com/coinbase/cds/pull/190)]
+
 ## 8.22.0 (11/24/2025 PST)
 
 #### 🚀 Updates

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.22.0",
+  "version": "8.22.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

packages/mobile/src/banner/Banner.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, isValidElement, memo, useCallback, useMemo, useState } from 'react';
-import type { View, ViewStyle } from 'react-native';
+import type { View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { variants } from '@coinbase/cds-common/tokens/banner';
 import type {
@@ -8,33 +8,16 @@ import type {
   IconName,
   SharedProps,
 } from '@coinbase/cds-common/types';
-import { isDevelopment } from '@coinbase/cds-utils';
 
 import { Collapsible } from '../collapsible/Collapsible';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons';
 import type { HStackProps } from '../layout';
 import { Box, HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
-import type { LinkProps } from '../typography';
 import { Link } from '../typography';
 import { Text } from '../typography/Text';
 
-const variantStyleProps: Record<BannerStyleVariant, HStackProps> = {
-  contextual: {
-    paddingX: 2,
-    borderRadius: 400,
-  },
-  global: {
-    paddingX: 3,
-    borderRadius: undefined,
-  },
-  inline: {
-    paddingX: 3,
-    borderRadius: undefined,
-  },
-};
-
 export type BannerBaseProps = SharedProps & {
   /** Sets the variant of the banner - which is responsible for foreground and background color assignment */
   variant: BannerVariant;
@@ -79,7 +62,8 @@ export type BannerBaseProps = SharedProps & {
   bordered?: boolean;
   /**
    * Determines banner's border radius
-   * @default 400
+   *
+   * @default 400 for contextual, undefined for global and inline
    * */
   borderRadius?: ThemeVars.BorderRadius;
 };
@@ -105,7 +89,7 @@ export const Banner = memo(
       styleVariant = 'contextual',
       startIconAccessibilityLabel,
       closeAccessibilityLabel = 'close',
-      borderRadius = 400,
+      borderRadius = styleVariant === 'contextual' ? 400 : undefined,
       margin,
       marginX,
       marginY,
@@ -197,10 +181,10 @@ export const Banner = memo(
           background={background}
           borderRadius={borderRadius}
           gap={1}
+          paddingX={styleVariant === 'contextual' ? 2 : 3}
           paddingY={2}
           style={style}
           testID={testID}
-          {...variantStyleProps[styleVariant]}
           {...props}
         >
           {/** Start */}

packages/mobile/src/banner/__stories__/Banner.stories.tsx

@@ -41,6 +41,8 @@ const examplePropsWithOffset: ExampleProps = {
   children: 'Lorem ipsum dolar sit amet',
 };
 
+const borderRadiusValues = [0, 200, 400] as const;
+
 const styleProps: MobileBannerProps[] = [
   {
     variant: 'warning',
@@ -308,6 +310,39 @@ const BannerScreen = () => {
           />
         </VStack>
       </Example>
+      <Example title="Border Radius">
+        <VStack gap={2}>
+          <Text font="title1">Contextual</Text>
+          <VStack gap={2}>
+            {borderRadiusValues.map((radius) => (
+              <Banner
+                key={`mobile-contextual-${radius}`}
+                {...exampleProps}
+                borderRadius={radius}
+                title={`Contextual radius ${radius}`}
+                variant="informational"
+              >
+                {shortMessage}
+              </Banner>
+            ))}
+          </VStack>
+          <Text font="title1">Inline</Text>
+          <VStack gap={2}>
+            {borderRadiusValues.map((radius) => (
+              <Banner
+                key={`mobile-inline-${radius}`}
+                {...exampleProps}
+                borderRadius={radius}
+                styleVariant="inline"
+                title={`Inline radius ${radius}`}
+                variant="informational"
+              >
+                {shortMessage}
+              </Banner>
+            ))}
+          </VStack>
+        </VStack>
+      </Example>
     </ExampleScreen>
   );
 };