diff --git a/apps/docs/docs/components/feedback/Banner/_webExamples.mdx b/apps/docs/docs/components/feedback/Banner/_webExamples.mdx index b610254e9..85b843fab 100644 --- a/apps/docs/docs/components/feedback/Banner/_webExamples.mdx +++ b/apps/docs/docs/components/feedback/Banner/_webExamples.mdx @@ -133,3 +133,25 @@ You can customize `borderRadius` to soften contextual and in-line banners. :::tip Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned. ::: + +### Bleed with Margin Props + +When using negative `margin*` props to create a bleed effect, explicitly set `width` so the Banner expands beyond its container. + +```tsx live + + + + Use with prop to override the default 100% width + + + +``` diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md index fb1fc5575..7bb6382d8 100644 --- a/packages/common/CHANGELOG.md +++ b/packages/common/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. +## 8.44.1 ((2/10/2026, 12:05 PM PST)) + +This is an artificial version bump with no new change. + ## 8.44.0 (2/9/2026 PST) #### 🚀 Updates diff --git a/packages/common/package.json b/packages/common/package.json index 57ed724eb..d0dc99fc3 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-common", - "version": "8.44.0", + "version": "8.44.1", "description": "Coinbase Design System - Common", "repository": { "type": "git", diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md index cd4e91b41..1092b824b 100644 --- a/packages/mcp-server/CHANGELOG.md +++ b/packages/mcp-server/CHANGELOG.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. +## 8.44.1 ((2/10/2026, 12:05 PM PST)) + +This is an artificial version bump with no new change. + ## 8.44.0 ((2/9/2026, 07:07 PM PST)) This is an artificial version bump with no new change. diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json index 8363286fb..04f345a58 100644 --- a/packages/mcp-server/package.json +++ b/packages/mcp-server/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mcp-server", - "version": "8.44.0", + "version": "8.44.1", "description": "Coinbase Design System - MCP Server", "repository": { "type": "git", diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md index 238637e3b..db51ec270 100644 --- a/packages/mobile/CHANGELOG.md +++ b/packages/mobile/CHANGELOG.md @@ -8,7 +8,9 @@ All notable changes to this project will be documented in this file. -## Unreleased +## 8.44.1 ((2/10/2026, 12:05 PM PST)) + +This is an artificial version bump with no new change. #### 📘 Misc diff --git a/packages/mobile/package.json b/packages/mobile/package.json index 14aa1c862..64d58223e 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-mobile", - "version": "8.44.0", + "version": "8.44.1", "description": "Coinbase Design System - Mobile", "repository": { "type": "git", diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md index 9a99e9635..a89f8d95f 100644 --- a/packages/web/CHANGELOG.md +++ b/packages/web/CHANGELOG.md @@ -8,7 +8,11 @@ All notable changes to this project will be documented in this file. -## Unreleased +## 8.44.1 (2/10/2026 PST) + +#### 🐞 Fixes + +- Enabled customer to override the width prop in Banner so they can explicitly pass in a width for any bleed effect. [[#383](https://github.com/coinbase/cds/pull/383)] #### 📘 Misc diff --git a/packages/web/package.json b/packages/web/package.json index 86d407d29..9cfa8c4fb 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cds-web", - "version": "8.44.0", + "version": "8.44.1", "description": "Coinbase Design System - Web", "repository": { "type": "git", diff --git a/packages/web/src/banner/Banner.tsx b/packages/web/src/banner/Banner.tsx index fed483098..2301b7049 100644 --- a/packages/web/src/banner/Banner.tsx +++ b/packages/web/src/banner/Banner.tsx @@ -118,6 +118,7 @@ export const Banner = memo( marginBottom, marginStart, marginEnd, + width = '100%', ...props }: BannerProps, ref: React.ForwardedRef, @@ -201,7 +202,7 @@ export const Banner = memo( const content = ( @@ -301,7 +302,7 @@ export const Banner = memo( display="block" height="fit-content" position="relative" - width="100%" + width={width} {...marginStyles} > ; const exampleProps: ExampleProps = { @@ -38,6 +39,7 @@ const examplePropsWithMargin: ExampleProps = { ...exampleProps, marginX: -2, children: shortMessage, + width: 'calc(100% + var(--space-4))', }; const styleProps: BannerProps[] = [ @@ -282,7 +284,7 @@ export const BannerWithLink = () => { export const CustomMargin = () => { return ( - + Global