diff --git a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js index 84d1579c4a..9840381506 100644 --- a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js +++ b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js @@ -16,7 +16,7 @@ test.describe('Datagrid @avt', () => { test('@avt-basic-usage', async ({ page }) => { await visitStory(page, { component: 'Datagrid', - id: 'ibm-products-components-datagrid--basic-usage', + id: 'deprecated-datagrid-datagrid--basic-usage', globals: { carbonTheme: 'white', }, @@ -27,7 +27,7 @@ test.describe('Datagrid @avt', () => { test('@avt-open-and-dismiss-sidepanel-onRowClick', async ({ page }) => { await visitStory(page, { component: 'Datagrid', - id: 'ibm-products-components-datagrid-clickablerow--clickable-row-story', + id: 'deprecated-datagrid-datagrid-clickablerow--clickable-row-story', globals: { carbonTheme: 'white', }, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js index e8b2ecbce5..ab7451ce49 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js +++ b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js @@ -13,6 +13,7 @@ import toolbarScreenshot from './storybook-assets/datagrid-actions-example.png'; const DocsPage = () => ( ( +
+ + This component is deprecated and will be moving to an + example-based approach. For more information, please refer to the{' '} + + migration documentation + + . +
+ } + > + {story()} + + + ), + ], }; const getColumns = (rows) => { diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js index 1f70df495f..aa18a8c878 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js +++ b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js @@ -917,7 +917,10 @@ const ActionsColumnExample = ({ beforeAll(() => { jest.spyOn(global.console, 'warn').mockImplementation((message) => { - if (!message.includes('componentWillReceiveProps')) { + if ( + !message.includes('componentWillReceiveProps') && + !message.includes('deprecated') + ) { global.console.warn(message); } }); @@ -1171,7 +1174,8 @@ describe(componentName, () => { ); expect(container.children.length).toEqual(0); jest.spyOn(console, 'error').mockRestore(); - } + }, + 2 ); }); diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx index 5513e0466d..06dc2d3a1f 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx @@ -34,6 +34,7 @@ export interface DatagridProps { /** * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided. + * @deprecated */ export let Datagrid = React.forwardRef( ( @@ -104,6 +105,12 @@ export let Datagrid = React.forwardRef( } ); +/**@ts-ignore*/ +Datagrid.deprecated = { + level: 'warn', + details: `For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon`, +}; + // Return a placeholder if not released and not enabled by feature flag Datagrid = pkg.checkComponentEnabled(Datagrid, componentName); diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx index 31abdb9ab1..a54b6163fa 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx @@ -26,7 +26,7 @@ import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage'; import { ExampleAILabel } from '../../utils/ExampleAILabel'; export default { - title: 'IBM Products/Components/Datagrid/AILabel', + title: 'Deprecated/Datagrid/Datagrid/AILabel', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx index 9188f31cf7..e40444d898 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx @@ -30,7 +30,7 @@ import { SidePanel } from '../../../SidePanel'; import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage'; export default { - title: 'IBM Products/Components/Datagrid/ClickableRow', + title: 'Deprecated/Datagrid/Datagrid/ClickableRow', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx index c145c4e894..89e8742532 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx @@ -30,7 +30,7 @@ import { FeatureFlags } from '../../../FeatureFlags'; import { WithFeatureFlags } from '../../../../../../core/.storybook/WithFeatureFlags'; export default { - title: 'IBM Products/Components/Datagrid/ColumnCustomization', + title: 'Deprecated/Datagrid/Datagrid/ColumnCustomization', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx index c015260486..7ce2812ef3 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx @@ -28,7 +28,7 @@ const blockClass = `${pkg.prefix}--datagrid`; const storybookBlockClass = `storybook-${blockClass}__validation-code-snippet`; export default { - title: 'IBM Products/Components/Datagrid/EditableCell', + title: 'Deprecated/Datagrid/Datagrid/EditableCell', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx index 655cf20a04..d15e68425d 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx @@ -26,7 +26,7 @@ import { DocsPage } from './ExpandableRow.docs-page'; import { usePrefix } from '../../../../global/js/hooks'; export default { - title: 'IBM Products/Components/Datagrid/ExpandableRow', + title: 'Deprecated/Datagrid/Datagrid/ExpandableRow', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx index 29908a82fc..7eee49314d 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx @@ -18,7 +18,7 @@ import { getDateFormat } from '../../utils/getDateFormat'; import { getFilterProps } from './Panel.stories'; export default { - title: 'IBM Products/Components/Datagrid/Filtering/Flyout', + title: 'Deprecated/Datagrid/Datagrid/Filtering/Flyout', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx index f97daf5ab6..48bcbbb55e 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx @@ -18,7 +18,7 @@ import { FilteringUsage } from '../../utils/FilteringUsage'; import { getDateFormat } from '../../utils/getDateFormat'; export default { - title: 'IBM Products/Components/Datagrid/Filtering/Panel', + title: 'Deprecated/Datagrid/Datagrid/Filtering/Panel', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx index bf3c6ca3ee..cdfe350540 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx @@ -33,7 +33,7 @@ const sharedArgTypes = { }; export default { - title: 'IBM Products/Components/Datagrid/NestedRows', + title: 'Deprecated/Datagrid/Datagrid/NestedRows', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx index 22548e8709..34f97ac3a6 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx @@ -25,7 +25,7 @@ import { makeData } from '../../utils/makeData'; import { ARG_TYPES } from '../../utils/getArgTypes'; export default { - title: 'IBM Products/Components/Datagrid/RowActionButtons', + title: 'Deprecated/Datagrid/Datagrid/RowActionButtons', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx index e720c4f475..8d59917fba 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx @@ -19,7 +19,7 @@ import { ARG_TYPES } from '../../utils/getArgTypes'; import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage'; export default { - title: 'IBM Products/Components/Datagrid/RowHeightSettings', + title: 'Deprecated/Datagrid/Datagrid/RowHeightSettings', component: Datagrid, tags: ['autodocs'], parameters: { diff --git a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js index c086bef450..95f690d44b 100644 --- a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js +++ b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js @@ -97,6 +97,7 @@ export const StoryDocsPage = ({ blocks, omitCodedExample, omitUnreferencedStories, + deprecationNotice, }) => { const { csfFile } = useOf('meta', ['meta']); @@ -140,6 +141,12 @@ export const StoryDocsPage = ({ ) ) : null} + {deprecationNotice && ( + <> +

Deprecation notice

+ {deprecationNotice} + + )}

Table of contents

@@ -290,6 +297,10 @@ StoryDocsPage.propTypes = { }), }) ), + /** + * Designates a special top level area for important notices or messaging like deprecation + */ + deprecationNotice: PropTypes.string, /** * Set to true if no published example exists (all components and patterns should have an example) */ diff --git a/packages/ibm-products/src/global/js/utils/test-helper.js b/packages/ibm-products/src/global/js/utils/test-helper.js index fa9b93a1ff..d089abf5da 100644 --- a/packages/ibm-products/src/global/js/utils/test-helper.js +++ b/packages/ibm-products/src/global/js/utils/test-helper.js @@ -138,11 +138,12 @@ const makeMatcherArray = (args) => * argument. * @param {Function} test the test function to call, during which the call to * console.warn will be expected. + * @param {number} calls by default the test assumes warn will be called a single time, but it's possible it'll be called more than once */ -export const expectWarn = (message, test) => { +export const expectWarn = (message, test, calls = 1) => { const warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn()); const result = test(); - expect(warn).toBeCalledTimes(1); + expect(warn).toBeCalledTimes(calls); // expect(warn).toHaveBeenCalledWith(...makeMatcherArray(message)); warn.mockRestore(); return result;