Merge branch 'main' into llastflowers/revert-ProgressBar-styled-components-changes

llastflowers · web-flow · commit 125d9bfe2c75 · 2025-09-05T12:11:19.000-07:00
diff --git a/.changeset/big-lizards-study.md b/.changeset/big-lizards-study.md
diff --git a/.changeset/fast-countries-remain.md b/.changeset/fast-countries-remain.md
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: 'components-banner--default',
+    id: 'experimental-components-banner--default',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'Critical',
-    id: 'components-banner-features--critical',
+    id: 'experimental-components-banner-features--critical',
   },
   {
     title: 'Dismiss',
-    id: 'components-banner-features--dismiss',
+    id: 'experimental-components-banner-features--dismiss',
   },
   {
     title: 'Dismiss With Actions',
-    id: 'components-banner-features--dismiss-with-actions',
+    id: 'experimental-components-banner-features--dismiss-with-actions',
   },
   {
     title: 'Info',
-    id: 'components-banner-features--info',
+    id: 'experimental-components-banner-features--info',
   },
   {
     title: 'Success',
-    id: 'components-banner-features--success',
+    id: 'experimental-components-banner-features--success',
   },
   {
     title: 'Upsell',
-    id: 'components-banner-features--upsell',
+    id: 'experimental-components-banner-features--upsell',
   },
   {
     title: 'Warning',
-    id: 'components-banner-features--warning',
+    id: 'experimental-components-banner-features--warning',
   },
   {
     title: 'WithActions',
-    id: 'components-banner-features--with-actions',
+    id: 'experimental-components-banner-features--with-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'WithHiddenTitle',
-    id: 'components-banner-features--with-hidden-title',
+    id: 'experimental-components-banner-features--with-hidden-title',
   },
   {
     title: 'WithHiddenTitleAndActions',
-    id: 'components-banner-features--with-hidden-title-and-actions',
+    id: 'experimental-components-banner-features--with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'DismissibleWithHiddenTitleAndActions',
-    id: 'components-banner-features--dismissible-with-hidden-title-and-actions',
+    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'DismissibleWithHiddenTitleAndSecondaryAction',
-    id: 'components-banner-features--dismissible-with-hidden-title-and-secondary-action',
+    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
     title: 'InSidebar',
-    id: 'components-banner-examples--in-sidebar',
+    id: 'experimental-components-banner-examples--in-sidebar',
   },
   {
     title: 'Multiline',
-    id: 'components-banner-examples--multiline',
+    id: 'experimental-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",
+  "importPath": "@primer/react/experimental",
   "stories": [
     {
-      "id": "components-banner--default"
+      "id": "experimental-components-banner--default"
     },
     {
-      "id": "components-banner-features--critical"
+      "id": "experimental-components-banner-features--critical"
     },
     {
-      "id": "components-banner-features--info"
+      "id": "experimental-components-banner-features--info"
     },
     {
-      "id": "components-banner-features--success"
+      "id": "experimental-components-banner-features--success"
     },
     {
-      "id": "components-banner-features--upsell"
+      "id": "experimental-components-banner-features--upsell"
     },
     {
-      "id": "components-banner-features--warning"
+      "id": "experimental-components-banner-features--warning"
     },
     {
-      "id": "components-banner-features--dismiss"
+      "id": "experimental-components-banner-features--dismiss"
     },
     {
-      "id": "components-banner-features--dismiss-with-actions"
+      "id": "experimental-components-banner-features--dismiss-with-actions"
     },
     {
-      "id": "components-banner-features--with-hidden-title"
+      "id": "experimental-components-banner-features--with-hidden-title"
     },
     {
-      "id": "components-banner-features--with-hidden-title-and-actions"
+      "id": "experimental-components-banner-features--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-actions"
     },
     {
-      "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
+      "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action"
     },
     {
-      "id": "components-banner-features--with-actions"
+      "id": "experimental-components-banner-features--with-actions"
     },
     {
-      "id": "components-banner-features--custom-icon"
+      "id": "experimental-components-banner-features--custom-icon"
     },
     {
-      "id": "components-banner-examples--with-announcement"
+      "id": "experimental-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: 'Components/Banner/Examples',
+  title: 'Experimental/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: 'Components/Banner/Features',
+  title: 'Experimental/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/'
+import {Banner} from '../../src/experimental/'
 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: 'Components/Banner',
+  title: 'Experimental/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 '../Banner'
+import {Banner} from '../experimental'
 import {AriaStatus, AriaAlert} from '../live-region'
 
 const meta: Meta<typeof Button> = {
diff --git a/packages/react/src/PointerBox/PointerBox.docs.json b/packages/react/src/PointerBox/PointerBox.docs.json
@@ -1,10 +1,14 @@
 {
   "id": "pointer_box",
   "name": "PointerBox",
-  "status": "deprecated",
+  "status": "alpha",
   "a11yReviewed": "2025-01-08",
-  "stories": [],
-  "importPath": "@primer/react/deprecated",
+  "stories": [
+    {
+      "id": "components-pointerbox--default"
+    }
+  ],
+  "importPath": "@primer/react",
   "props": [
     {
       "name": "bg",
diff --git a/packages/react/src/PointerBox/PointerBox.stories.tsx b/packages/react/src/PointerBox/PointerBox.stories.tsx
@@ -3,14 +3,7 @@ import PointerBox from './PointerBox'
 import type {ComponentProps} from '../utils/types'
 
 export default {
-  title: 'Deprecated/Components/PointerBox',
-  parameters: {
-    docs: {
-      description: {
-        component: 'PointerBox is deprecated and will be removed in a future major release. Consider using Overlay.',
-      },
-    },
-  },
+  title: 'Components/PointerBox',
 } as Meta<typeof PointerBox>
 
 export const Default = () => <PointerBox>Pointer box content</PointerBox>
diff --git a/packages/react/src/PointerBox/PointerBox.test.tsx b/packages/react/src/PointerBox/PointerBox.test.tsx
@@ -1,7 +1,6 @@
 import {describe, expect, it} from 'vitest'
 import {render} from '@testing-library/react'
-import {ThemeProvider} from '..'
-import PointerBox from './PointerBox'
+import {PointerBox, ThemeProvider} from '..'
 import theme from '../theme'
 
 describe('PointerBox', () => {
diff --git a/packages/react/src/PointerBox/PointerBox.tsx b/packages/react/src/PointerBox/PointerBox.tsx
@@ -16,10 +16,6 @@ type MutatedSxProps = {
   }
 } & SxProp
 
-/**
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
- * Consider using Overlay or Position + Box with a caret instead.
- */
 export type PointerBoxProps = {
   caret?: CaretProps['location']
   bg?: CaretProps['bg']
@@ -28,10 +24,6 @@ export type PointerBoxProps = {
 } & BoxProps &
   MutatedSxProps
 
-/**
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
- * Consider using Overlay or Position + Box with a caret instead.
- */
 function PointerBox(props: PointerBoxProps) {
   // don't destructure these, just grab them
   const themeContext = React.useContext(ThemeContext)
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -27,8 +27,6 @@ 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",
@@ -112,6 +110,8 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type PageLayoutProps",
   "Pagination",
   "type PaginationProps",
+  "PointerBox",
+  "type PointerBoxProps",
   "Popover",
   "type PopoverContentProps",
   "type PopoverProps",
@@ -234,8 +234,6 @@ exports[`@primer/react/deprecated > should not update exports without a semver c
   "type OcticonProps",
   "Pagehead",
   "type PageheadProps",
-  "PointerBox",
-  "type PointerBoxProps",
   "TabNav",
   "type TabNavLinkProps",
   "type TabNavProps",
@@ -257,6 +255,8 @@ 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/deprecated/index.ts b/packages/react/src/deprecated/index.ts
@@ -42,7 +42,3 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav'
 export {default as Tooltip} from '../Tooltip/Tooltip'
 export type {TooltipProps} from '../Tooltip/Tooltip'
 // end of v37.0.0
-
-// Deprecated in vNext
-export {default as PointerBox} from '../PointerBox'
-export type {PointerBoxProps} from '../PointerBox'
diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts
@@ -14,6 +14,9 @@ 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,8 +74,6 @@ 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'
@@ -122,7 +120,8 @@ export {default as Overlay} from './Overlay'
 export type {OverlayProps} from './Overlay'
 export {default as Pagination} from './Pagination'
 export type {PaginationProps} from './Pagination'
-// Deprecated: moved to deprecated bundle
+export {default as PointerBox} from './PointerBox'
+export type {PointerBoxProps} from './PointerBox'
 export {default as Popover} from './Popover'
 export type {PopoverProps, PopoverContentProps} from './Popover'
 export {default as Portal, registerPortalRoot} from './Portal'

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: 'components-banner--default',`
	`9`	`+ id: 'experimental-components-banner--default',`
`10`	`10`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`11`	`11`	`},`
`12`	`12`	`{`
`13`	`13`	`title: 'Critical',`
`14`		`- id: 'components-banner-features--critical',`
	`14`	`+ id: 'experimental-components-banner-features--critical',`
`15`	`15`	`},`
`16`	`16`	`{`
`17`	`17`	`title: 'Dismiss',`
`18`		`- id: 'components-banner-features--dismiss',`
	`18`	`+ id: 'experimental-components-banner-features--dismiss',`
`19`	`19`	`},`
`20`	`20`	`{`
`21`	`21`	`title: 'Dismiss With Actions',`
`22`		`- id: 'components-banner-features--dismiss-with-actions',`
	`22`	`+ id: 'experimental-components-banner-features--dismiss-with-actions',`
`23`	`23`	`},`
`24`	`24`	`{`
`25`	`25`	`title: 'Info',`
`26`		`- id: 'components-banner-features--info',`
	`26`	`+ id: 'experimental-components-banner-features--info',`
`27`	`27`	`},`
`28`	`28`	`{`
`29`	`29`	`title: 'Success',`
`30`		`- id: 'components-banner-features--success',`
	`30`	`+ id: 'experimental-components-banner-features--success',`
`31`	`31`	`},`
`32`	`32`	`{`
`33`	`33`	`title: 'Upsell',`
`34`		`- id: 'components-banner-features--upsell',`
	`34`	`+ id: 'experimental-components-banner-features--upsell',`
`35`	`35`	`},`
`36`	`36`	`{`
`37`	`37`	`title: 'Warning',`
`38`		`- id: 'components-banner-features--warning',`
	`38`	`+ id: 'experimental-components-banner-features--warning',`
`39`	`39`	`},`
`40`	`40`	`{`
`41`	`41`	`title: 'WithActions',`
`42`		`- id: 'components-banner-features--with-actions',`
	`42`	`+ id: 'experimental-components-banner-features--with-actions',`
`43`	`43`	`viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],`
`44`	`44`	`},`
`45`	`45`	`{`
`46`	`46`	`title: 'WithHiddenTitle',`
`47`		`- id: 'components-banner-features--with-hidden-title',`
	`47`	`+ id: 'experimental-components-banner-features--with-hidden-title',`
`48`	`48`	`},`
`49`	`49`	`{`
`50`	`50`	`title: 'WithHiddenTitleAndActions',`
`51`		`- id: 'components-banner-features--with-hidden-title-and-actions',`
	`51`	`+ id: 'experimental-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: 'components-banner-features--dismissible-with-hidden-title-and-actions',`
	`56`	`+ id: 'experimental-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: 'components-banner-features--dismissible-with-hidden-title-and-secondary-action',`
	`61`	`+ id: 'experimental-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: 'components-banner-examples--in-sidebar',`
	`66`	`+ id: 'experimental-components-banner-examples--in-sidebar',`
`67`	`67`	`},`
`68`	`68`	`{`
`69`	`69`	`title: 'Multiline',`
`70`		`- id: 'components-banner-examples--multiline',`
	`70`	`+ id: 'experimental-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",`
	`6`	`+ "importPath": "@primer/react/experimental",`
`7`	`7`	`"stories": [`
`8`	`8`	`{`
`9`		`- "id": "components-banner--default"`
	`9`	`+ "id": "experimental-components-banner--default"`
`10`	`10`	`},`
`11`	`11`	`{`
`12`		`- "id": "components-banner-features--critical"`
	`12`	`+ "id": "experimental-components-banner-features--critical"`
`13`	`13`	`},`
`14`	`14`	`{`
`15`		`- "id": "components-banner-features--info"`
	`15`	`+ "id": "experimental-components-banner-features--info"`
`16`	`16`	`},`
`17`	`17`	`{`
`18`		`- "id": "components-banner-features--success"`
	`18`	`+ "id": "experimental-components-banner-features--success"`
`19`	`19`	`},`
`20`	`20`	`{`
`21`		`- "id": "components-banner-features--upsell"`
	`21`	`+ "id": "experimental-components-banner-features--upsell"`
`22`	`22`	`},`
`23`	`23`	`{`
`24`		`- "id": "components-banner-features--warning"`
	`24`	`+ "id": "experimental-components-banner-features--warning"`
`25`	`25`	`},`
`26`	`26`	`{`
`27`		`- "id": "components-banner-features--dismiss"`
	`27`	`+ "id": "experimental-components-banner-features--dismiss"`
`28`	`28`	`},`
`29`	`29`	`{`
`30`		`- "id": "components-banner-features--dismiss-with-actions"`
	`30`	`+ "id": "experimental-components-banner-features--dismiss-with-actions"`
`31`	`31`	`},`
`32`	`32`	`{`
`33`		`- "id": "components-banner-features--with-hidden-title"`
	`33`	`+ "id": "experimental-components-banner-features--with-hidden-title"`
`34`	`34`	`},`
`35`	`35`	`{`
`36`		`- "id": "components-banner-features--with-hidden-title-and-actions"`
	`36`	`+ "id": "experimental-components-banner-features--with-hidden-title-and-actions"`
`37`	`37`	`},`
`38`	`38`	`{`
`39`		`- "id": "components-banner-features--dismissible-with-hidden-title-and-actions"`
	`39`	`+ "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions"`
`40`	`40`	`},`
`41`	`41`	`{`
`42`		`- "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"`
	`42`	`+ "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action"`
`43`	`43`	`},`
`44`	`44`	`{`
`45`		`- "id": "components-banner-features--with-actions"`
	`45`	`+ "id": "experimental-components-banner-features--with-actions"`
`46`	`46`	`},`
`47`	`47`	`{`
`48`		`- "id": "components-banner-features--custom-icon"`
	`48`	`+ "id": "experimental-components-banner-features--custom-icon"`
`49`	`49`	`},`
`50`	`50`	`{`
`51`		`- "id": "components-banner-examples--with-announcement"`
	`51`	`+ "id": "experimental-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/'`
	`1`	`+import {Banner} from '../../src/experimental/'`
`2`	`2`	`import figma from '@figma/code-connect'`
`3`	`3`
`4`	`4`	`const componentProps = {`