diff --git a/.changeset/shy-moments-invent.md b/.changeset/shy-moments-invent.md new file mode 100644 index 00000000000..61ba479a9fe --- /dev/null +++ b/.changeset/shy-moments-invent.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Deprecate the `Flash` component and move to `@primer/react/deprecated` diff --git a/e2e/components/Axe.test.ts b/e2e/components/Axe.test.ts index 7cd0e333107..5d029fb2e88 100644 --- a/e2e/components/Axe.test.ts +++ b/e2e/components/Axe.test.ts @@ -11,8 +11,8 @@ import {themes} from '../test-helpers/themes' const SKIPPED_TESTS = [ 'components-treeview-features--stress-test', 'components-treeview-features--contain-intrinsic-size', - 'components-flash-features--with-icon-action-dismiss', // TODO: Remove once color-contrast issues have been resolved - 'components-flash-features--with-icon-and-action', // TODO: Remove once color-contrast issues have been resolved + 'deprecated-components-flash-features--with-icon-action-dismiss', // TODO: Remove once color-contrast issues have been resolved + 'deprecated-components-flash-features--with-icon-and-action', // TODO: Remove once color-contrast issues have been resolved 'components-filteredactionlist--default', // TODO: Remove these once FilteredActionList feature stories no longer trigger label/nested-interactive axe violations. 'components-filteredactionlist-features--loading-with-body-skeleton', diff --git a/e2e/components/Flash.test.ts b/e2e/components/Flash.test.ts index 0968a0f73d8..98acd1cbee8 100644 --- a/e2e/components/Flash.test.ts +++ b/e2e/components/Flash.test.ts @@ -5,23 +5,23 @@ import {themes} from '../test-helpers/themes' const stories = [ { title: 'Default', - id: 'components-flash--default', + id: 'deprecated-components-flash--default', }, { title: 'Danger', - id: 'components-flash-features--danger', + id: 'deprecated-components-flash-features--danger', }, { title: 'Full', - id: 'components-flash-features--full', + id: 'deprecated-components-flash-features--full', }, { title: 'Success', - id: 'components-flash-features--success', + id: 'deprecated-components-flash-features--success', }, { title: 'Warning', - id: 'components-flash-features--warning', + id: 'deprecated-components-flash-features--warning', }, ] as const diff --git a/packages/react/src/Flash/Flash.docs.json b/packages/react/src/Flash/Flash.docs.json index 5b154bce1ee..d86d6c6a578 100644 --- a/packages/react/src/Flash/Flash.docs.json +++ b/packages/react/src/Flash/Flash.docs.json @@ -1,32 +1,32 @@ { "id": "flash", "name": "Flash", - "status": "alpha", + "status": "deprecated", "a11yReviewed": "2025-01-08", "stories": [ { - "id": "components-flash--default" + "id": "deprecated-components-flash--default" }, { - "id": "components-flash-features--success" + "id": "deprecated-components-flash-features--success" }, { - "id": "components-flash-features--danger" + "id": "deprecated-components-flash-features--danger" }, { - "id": "components-flash-features--warning" + "id": "deprecated-components-flash-features--warning" }, { - "id": "components-flash-features--full" + "id": "deprecated-components-flash-features--full" }, { - "id": "components-flash-features--with-icon-and-action" + "id": "deprecated-components-flash-features--with-icon-and-action" }, { - "id": "components-flash-features--with-icon-action-dismiss" + "id": "deprecated-components-flash-features--with-icon-action-dismiss" } ], - "importPath": "@primer/react", + "importPath": "@primer/react/deprecated", "props": [ { "name": "full", diff --git a/packages/react/src/Flash/Flash.features.stories.tsx b/packages/react/src/Flash/Flash.features.stories.tsx index 19e19123cdf..d6de4bdfb91 100644 --- a/packages/react/src/Flash/Flash.features.stories.tsx +++ b/packages/react/src/Flash/Flash.features.stories.tsx @@ -6,7 +6,7 @@ import Link from '../Link' import classes from './Flash.features.stories.module.css' export default { - title: 'Components/Flash/Features', + title: 'Deprecated/Components/Flash/Features', component: Flash, } as Meta diff --git a/packages/react/src/Flash/Flash.stories.tsx b/packages/react/src/Flash/Flash.stories.tsx index 1b873397055..3a3953a14a5 100644 --- a/packages/react/src/Flash/Flash.stories.tsx +++ b/packages/react/src/Flash/Flash.stories.tsx @@ -2,7 +2,7 @@ import type {Meta, StoryFn} from '@storybook/react-vite' import Flash from './Flash' export default { - title: 'Components/Flash', + title: 'Deprecated/Components/Flash', component: Flash, } as Meta diff --git a/packages/react/src/Flash/Flash.tsx b/packages/react/src/Flash/Flash.tsx index b1b67db5f79..5c2584857d0 100644 --- a/packages/react/src/Flash/Flash.tsx +++ b/packages/react/src/Flash/Flash.tsx @@ -3,12 +3,18 @@ import React from 'react' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classes from './Flash.module.css' +/** + * @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`. + */ export type FlashProps = React.ComponentPropsWithoutRef<'div'> & { className?: string variant?: 'default' | 'warning' | 'success' | 'danger' full?: boolean } +/** + * @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`. + */ const Flash = React.forwardRef(function Flash( {as: BaseComponent = 'div', className, variant = 'default', full, ...rest}, ref, diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 068bacd8275..94bd40f056e 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -272,6 +272,8 @@ exports[`@primer/react/deprecated > should not update exports without a semver c "type DialogProps", "FilteredSearch", "type FilteredSearchProps", + "Flash", + "type FlashProps", "Octicon", "type OcticonProps", "Pagehead", diff --git a/packages/react/src/deprecated/index.ts b/packages/react/src/deprecated/index.ts index ad64fa29e32..e7ab95f7bd1 100644 --- a/packages/react/src/deprecated/index.ts +++ b/packages/react/src/deprecated/index.ts @@ -42,3 +42,8 @@ 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 v38.0.0 +export {default as Flash} from '../Flash' +export type {FlashProps} from '../Flash' +// end of v38.0.0 diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index e086b73d662..56f10ac36fb 100755 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -500,23 +500,23 @@ const components = new Map([ { stories: [ { - id: 'components-flash--default', + id: 'deprecated-components-flash--default', name: 'Default', }, { - id: 'components-flash-features--danger', + id: 'deprecated-components-flash-features--danger', name: 'Danger', }, { - id: 'components-flash-features--full', + id: 'deprecated-components-flash-features--full', name: 'Full', }, { - id: 'components-flash-features--success', + id: 'deprecated-components-flash-features--success', name: 'Success', }, { - id: 'components-flash-features--warning', + id: 'deprecated-components-flash-features--warning', name: 'Warning', }, ],