v38: Move Banner to main export (#6720)

pksjce · web-flow · commit 0466819e4573 · 2025-09-04T23:27:34.000Z
diff --git a/.changeset/fast-countries-remain.md b/.changeset/fast-countries-remain.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+v38: Move Banner to main export
diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts
@@ -6,68 +6,68 @@ import {viewports} from '../test-helpers/viewports'
 const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
   {
     title: 'Default',
-    id: 'experimental-components-banner--default',
+    id: 'components-banner--default',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'Critical',
-    id: 'experimental-components-banner-features--critical',
+    id: 'components-banner-features--critical',
   },
   {
     title: 'Dismiss',
-    id: 'experimental-components-banner-features--dismiss',
+    id: 'components-banner-features--dismiss',
   },
   {
     title: 'Dismiss With Actions',
-    id: 'experimental-components-banner-features--dismiss-with-actions',
+    id: 'components-banner-features--dismiss-with-actions',
   },
   {
     title: 'Info',
-    id: 'experimental-components-banner-features--info',
+    id: 'components-banner-features--info',
   },
   {
     title: 'Success',
-    id: 'experimental-components-banner-features--success',
+    id: 'components-banner-features--success',
   },
   {
     title: 'Upsell',
-    id: 'experimental-components-banner-features--upsell',
+    id: 'components-banner-features--upsell',
   },
   {
     title: 'Warning',
-    id: 'experimental-components-banner-features--warning',
+    id: 'components-banner-features--warning',
   },
   {
     title: 'WithActions',
-    id: 'experimental-components-banner-features--with-actions',
+    id: 'components-banner-features--with-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'WithHiddenTitle',
-    id: 'experimental-components-banner-features--with-hidden-title',
+    id: 'components-banner-features--with-hidden-title',
   },
   {
     title: 'WithHiddenTitleAndActions',
-    id: 'experimental-components-banner-features--with-hidden-title-and-actions',
+    id: 'components-banner-features--with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'DismissibleWithHiddenTitleAndActions',
-    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-actions',
+    id: 'components-banner-features--dismissible-with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'DismissibleWithHiddenTitleAndSecondaryAction',
-    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action',
+    id: 'components-banner-features--dismissible-with-hidden-title-and-secondary-action',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'InSidebar',
-    id: 'experimental-components-banner-examples--in-sidebar',
+    id: 'components-banner-examples--in-sidebar',
   },
   {
     title: 'Multiline',
-    id: 'experimental-components-banner-examples--multiline',
+    id: 'components-banner-examples--multiline',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
 ]
diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json
@@ -3,52 +3,52 @@
   "name": "Banner",
   "status": "alpha",
   "a11yReviewed": "2025-01-08",
-  "importPath": "@primer/react/experimental",
+  "importPath": "@primer/react",
   "stories": [
     {
-      "id": "experimental-components-banner--default"
+      "id": "components-banner--default"
     },
     {
-      "id": "experimental-components-banner-features--critical"
+      "id": "components-banner-features--critical"
     },
     {
-      "id": "experimental-components-banner-features--info"
+      "id": "components-banner-features--info"
     },
     {
-      "id": "experimental-components-banner-features--success"
+      "id": "components-banner-features--success"
     },
     {
-      "id": "experimental-components-banner-features--upsell"
+      "id": "components-banner-features--upsell"
     },
     {
-      "id": "experimental-components-banner-features--warning"
+      "id": "components-banner-features--warning"
     },
     {
-      "id": "experimental-components-banner-features--dismiss"
+      "id": "components-banner-features--dismiss"
     },
     {
-      "id": "experimental-components-banner-features--dismiss-with-actions"
+      "id": "components-banner-features--dismiss-with-actions"
     },
     {
-      "id": "experimental-components-banner-features--with-hidden-title"
+      "id": "components-banner-features--with-hidden-title"
     },
     {
-      "id": "experimental-components-banner-features--with-hidden-title-and-actions"
+      "id": "components-banner-features--with-hidden-title-and-actions"
     },
     {
-      "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions"
+      "id": "components-banner-features--dismissible-with-hidden-title-and-actions"
     },
     {
-      "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action"
+      "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
     },
     {
-      "id": "experimental-components-banner-features--with-actions"
+      "id": "components-banner-features--with-actions"
     },
     {
-      "id": "experimental-components-banner-features--custom-icon"
+      "id": "components-banner-features--custom-icon"
     },
     {
-      "id": "experimental-components-banner-examples--with-announcement"
+      "id": "components-banner-examples--with-announcement"
     }
   ],
   "props": [
diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx
@@ -12,7 +12,7 @@ import {useFocus} from '../internal/hooks/useFocus'
 import {PageLayout} from '../PageLayout'
 
 const meta = {
-  title: 'Experimental/Components/Banner/Examples',
+  title: 'Components/Banner/Examples',
   component: Banner,
 } satisfies Meta<typeof Banner>
 
diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx
@@ -5,7 +5,7 @@ import {Banner} from '../Banner'
 import Link from '../Link'
 
 const meta = {
-  title: 'Experimental/Components/Banner/Features',
+  title: 'Components/Banner/Features',
   component: Banner,
 } satisfies Meta<typeof Banner>
 
diff --git a/packages/react/src/Banner/Banner.figma.tsx b/packages/react/src/Banner/Banner.figma.tsx
@@ -1,4 +1,4 @@
-import {Banner} from '../../src/experimental/'
+import {Banner} from '../../src/'
 import figma from '@figma/code-connect'
 
 const componentProps = {
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
@@ -5,7 +5,7 @@ import {PageLayout} from '../PageLayout'
 import {action} from 'storybook/actions'
 
 const meta = {
-  title: 'Experimental/Components/Banner',
+  title: 'Components/Banner',
   component: Banner,
 } satisfies Meta<typeof Banner>
 
diff --git a/packages/react/src/Button/Button.examples.stories.tsx b/packages/react/src/Button/Button.examples.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '.'
 import {DownloadIcon} from '@primer/octicons-react'
-import {Banner} from '../experimental'
+import {Banner} from '../Banner'
 import {AriaStatus, AriaAlert} from '../live-region'
 
 const meta: Meta<typeof Button> = {
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -27,6 +27,8 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type AvatarProps",
   "AvatarStack",
   "type AvatarStackProps",
+  "Banner",
+  "type BannerProps",
   "BaseStyles",
   "type BaseStylesProps",
   "type BetterCssProperties",
@@ -255,8 +257,6 @@ exports[`@primer/react/experimental > should not update exports without a semver
   "type AriaAlertProps",
   "AriaStatus",
   "type AriaStatusProps",
-  "Banner",
-  "type BannerProps",
   "Blankslate",
   "type BlankslateProps",
   "ButtonBase",
diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts
@@ -14,9 +14,6 @@ export type {BlankslateProps} from '../Blankslate'
 export {ButtonBase} from '../Button'
 export type {ButtonBaseProps} from '../Button'
 
-export {Banner} from '../Banner'
-export type {BannerProps} from '../Banner'
-
 export {DataTable, Table, createColumnHelper} from '../DataTable'
 export type {
   DataTableProps,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -74,6 +74,8 @@ export {default as Avatar} from './Avatar'
 export type {AvatarProps} from './Avatar'
 export {default as AvatarStack} from './AvatarStack'
 export type {AvatarStackProps} from './AvatarStack'
+export {Banner} from './Banner'
+export type {BannerProps} from './Banner'
 
 export {default as BranchName} from './BranchName'
 export type {BranchNameProps} from './BranchName'

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": major
 +---
++
 +v38: Move Banner to main export
Original file line number	Diff line number	Diff line change
`@@ -6,68 +6,68 @@ import {viewports} from '../test-helpers/viewports'`
`6`	`6`	`const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [`
`7`	`7`	`{`
`8`	`8`	`title: 'Default',`
`9`		`- id: 'experimental-components-banner--default',`
	`9`	`+ id: 'components-banner--default',`
`10`	`10`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`11`	`11`	`},`
`12`	`12`	`{`
`13`	`13`	`title: 'Critical',`
`14`		`- id: 'experimental-components-banner-features--critical',`
	`14`	`+ id: 'components-banner-features--critical',`
`15`	`15`	`},`
`16`	`16`	`{`
`17`	`17`	`title: 'Dismiss',`
`18`		`- id: 'experimental-components-banner-features--dismiss',`
	`18`	`+ id: 'components-banner-features--dismiss',`
`19`	`19`	`},`
`20`	`20`	`{`
`21`	`21`	`title: 'Dismiss With Actions',`
`22`		`- id: 'experimental-components-banner-features--dismiss-with-actions',`
	`22`	`+ id: 'components-banner-features--dismiss-with-actions',`
`23`	`23`	`},`
`24`	`24`	`{`
`25`	`25`	`title: 'Info',`
`26`		`- id: 'experimental-components-banner-features--info',`
	`26`	`+ id: 'components-banner-features--info',`
`27`	`27`	`},`
`28`	`28`	`{`
`29`	`29`	`title: 'Success',`
`30`		`- id: 'experimental-components-banner-features--success',`
	`30`	`+ id: 'components-banner-features--success',`
`31`	`31`	`},`
`32`	`32`	`{`
`33`	`33`	`title: 'Upsell',`
`34`		`- id: 'experimental-components-banner-features--upsell',`
	`34`	`+ id: 'components-banner-features--upsell',`
`35`	`35`	`},`
`36`	`36`	`{`
`37`	`37`	`title: 'Warning',`
`38`		`- id: 'experimental-components-banner-features--warning',`
	`38`	`+ id: 'components-banner-features--warning',`
`39`	`39`	`},`
`40`	`40`	`{`
`41`	`41`	`title: 'WithActions',`
`42`		`- id: 'experimental-components-banner-features--with-actions',`
	`42`	`+ id: 'components-banner-features--with-actions',`
`43`	`43`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`44`	`44`	`},`
`45`	`45`	`{`
`46`	`46`	`title: 'WithHiddenTitle',`
`47`		`- id: 'experimental-components-banner-features--with-hidden-title',`
	`47`	`+ id: 'components-banner-features--with-hidden-title',`
`48`	`48`	`},`
`49`	`49`	`{`
`50`	`50`	`title: 'WithHiddenTitleAndActions',`
`51`		`- id: 'experimental-components-banner-features--with-hidden-title-and-actions',`
	`51`	`+ id: 'components-banner-features--with-hidden-title-and-actions',`
`52`	`52`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`53`	`53`	`},`
`54`	`54`	`{`
`55`	`55`	`title: 'DismissibleWithHiddenTitleAndActions',`
`56`		`- id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-actions',`
	`56`	`+ id: 'components-banner-features--dismissible-with-hidden-title-and-actions',`
`57`	`57`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`58`	`58`	`},`
`59`	`59`	`{`
`60`	`60`	`title: 'DismissibleWithHiddenTitleAndSecondaryAction',`
`61`		`- id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action',`
	`61`	`+ id: 'components-banner-features--dismissible-with-hidden-title-and-secondary-action',`
`62`	`62`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`63`	`63`	`},`
`64`	`64`	`{`
`65`	`65`	`title: 'InSidebar',`
`66`		`- id: 'experimental-components-banner-examples--in-sidebar',`
	`66`	`+ id: 'components-banner-examples--in-sidebar',`
`67`	`67`	`},`
`68`	`68`	`{`
`69`	`69`	`title: 'Multiline',`
`70`		`- id: 'experimental-components-banner-examples--multiline',`
	`70`	`+ id: 'components-banner-examples--multiline',`
`71`	`71`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`72`	`72`	`},`
`73`	`73`	`]`
Original file line number	Diff line number	Diff line change
`@@ -3,52 +3,52 @@`
`3`	`3`	`"name": "Banner",`
`4`	`4`	`"status": "alpha",`
`5`	`5`	`"a11yReviewed": "2025-01-08",`
`6`		`- "importPath": "@primer/react/experimental",`
	`6`	`+ "importPath": "@primer/react",`
`7`	`7`	`"stories": [`
`8`	`8`	`{`
`9`		`- "id": "experimental-components-banner--default"`
	`9`	`+ "id": "components-banner--default"`
`10`	`10`	`},`
`11`	`11`	`{`
`12`		`- "id": "experimental-components-banner-features--critical"`
	`12`	`+ "id": "components-banner-features--critical"`
`13`	`13`	`},`
`14`	`14`	`{`
`15`		`- "id": "experimental-components-banner-features--info"`
	`15`	`+ "id": "components-banner-features--info"`
`16`	`16`	`},`
`17`	`17`	`{`
`18`		`- "id": "experimental-components-banner-features--success"`
	`18`	`+ "id": "components-banner-features--success"`
`19`	`19`	`},`
`20`	`20`	`{`
`21`		`- "id": "experimental-components-banner-features--upsell"`
	`21`	`+ "id": "components-banner-features--upsell"`
`22`	`22`	`},`
`23`	`23`	`{`
`24`		`- "id": "experimental-components-banner-features--warning"`
	`24`	`+ "id": "components-banner-features--warning"`
`25`	`25`	`},`
`26`	`26`	`{`
`27`		`- "id": "experimental-components-banner-features--dismiss"`
	`27`	`+ "id": "components-banner-features--dismiss"`
`28`	`28`	`},`
`29`	`29`	`{`
`30`		`- "id": "experimental-components-banner-features--dismiss-with-actions"`
	`30`	`+ "id": "components-banner-features--dismiss-with-actions"`
`31`	`31`	`},`
`32`	`32`	`{`
`33`		`- "id": "experimental-components-banner-features--with-hidden-title"`
	`33`	`+ "id": "components-banner-features--with-hidden-title"`
`34`	`34`	`},`
`35`	`35`	`{`
`36`		`- "id": "experimental-components-banner-features--with-hidden-title-and-actions"`
	`36`	`+ "id": "components-banner-features--with-hidden-title-and-actions"`
`37`	`37`	`},`
`38`	`38`	`{`
`39`		`- "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions"`
	`39`	`+ "id": "components-banner-features--dismissible-with-hidden-title-and-actions"`
`40`	`40`	`},`
`41`	`41`	`{`
`42`		`- "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action"`
	`42`	`+ "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"`
`43`	`43`	`},`
`44`	`44`	`{`
`45`		`- "id": "experimental-components-banner-features--with-actions"`
	`45`	`+ "id": "components-banner-features--with-actions"`
`46`	`46`	`},`
`47`	`47`	`{`
`48`		`- "id": "experimental-components-banner-features--custom-icon"`
	`48`	`+ "id": "components-banner-features--custom-icon"`
`49`	`49`	`},`
`50`	`50`	`{`
`51`		`- "id": "experimental-components-banner-examples--with-announcement"`
	`51`	`+ "id": "components-banner-examples--with-announcement"`
`52`	`52`	`}`
`53`	`53`	`],`
`54`	`54`	`"props": [`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {Banner} from '../../src/experimental/'`
	`1`	`+import {Banner} from '../../src/'`
`2`	`2`	`import figma from '@figma/code-connect'`
`3`	`3`
`4`	`4`	`const componentProps = {`