chore(FilterPanel): deprecate filter panel and its sub components (#6431

) * chore(FilterPanel): deprecare filter panel and its sub components * chore: change headind to Deprecation notice --------- Co-authored-by: David Menendez <damenend@gmail.com> Co-authored-by: elysia <elysia.hwang@gmail.com>
carbon-design-system · Nov 20, 2024 · 5fb804a · 5fb804a
1 parent a59dd7c
commit 5fb804a
Show file tree

Hide file tree

Showing 29 changed files with 216 additions and 8 deletions.
diff --git a/e2e/components/FilterPanel/FilterPanel-test.avt.e2e.js b/e2e/components/FilterPanel/FilterPanel-test.avt.e2e.js
@@ -15,7 +15,7 @@ test.describe('FilterPanel @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'FilterPanel',
-      id: 'experimental-components-filter-panel-filterpanel--default',
+      id: 'deprecated-filter-panel-filterpanel--default',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.js b/packages/ibm-products/src/components/FilterPanel/FilterPanel.js
@@ -19,7 +19,9 @@ const componentName = 'FilterPanel';
 
 /**
  * The container for filter panel subcomponents.
+ * @deprecated This component is deprecated
  */
+
 export let FilterPanel = React.forwardRef(
   ({ children, className, title, ...rest }, ref) => {
     return (
@@ -35,6 +37,10 @@ export let FilterPanel = React.forwardRef(
     );
   }
 );
+FilterPanel.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`,
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanel = pkg.checkComponentEnabled(FilterPanel, componentName);

diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.mdx b/packages/ibm-products/src/components/FilterPanel/FilterPanel.mdx
@@ -11,6 +11,11 @@ import * as FilterPanelStories from './FilterPanel.stories';
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
+## Deprecation notice
+
+> This component is deprecated and will be removed in the next major version.
+
+
 ## Overview
 
 The `FilterPanel` is the container for its subcomponents.

diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.stories.jsx b/packages/ibm-products/src/components/FilterPanel/FilterPanel.stories.jsx
@@ -24,11 +24,12 @@ import {
 import mdx from './FilterPanel.mdx';
 
 import styles from './_storybook-styles.scss?inline';
+import { Annotation } from '../../../../core/.storybook/Annotation';
 
 const storyClass = 'filter-panel-stories';
 
 export default {
-  title: 'Experimental/Components/Filter panel/FilterPanel',
+  title: 'Deprecated/Filter panel/FilterPanel',
   component: FilterPanel,
   tags: ['autodocs'],
   parameters: {
@@ -64,6 +65,21 @@ export default {
   args: {
     title: 1,
   },
+  decorators: [
+    (story) => (
+      <Annotation
+        type="deprecation-notice"
+        text={
+          <div>
+            This component is deprecated and will be removed in the next major
+            version.
+          </div>
+        }
+      >
+        {story()}
+      </Annotation>
+    ),
+  ],
 };
 
 const demoData = [

diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanel.test.js b/packages/ibm-products/src/components/FilterPanel/FilterPanel.test.js
@@ -25,6 +25,9 @@ const renderComponent = ({ ...rest } = {}) =>
   render(<FilterPanel data-testid={dataTestId} {...{ ...rest }} />);
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
   it('renders a component FilterPanel', async () => {
     renderComponent();
     expect(screen.getByTestId(dataTestId)).toBeInTheDocument();

diff --git a/...ages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js b/...ages/ibm-products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js
@@ -25,6 +25,7 @@ const defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelAccordion = React.forwardRef(
   (
@@ -62,6 +63,11 @@ export let FilterPanelAccordion = React.forwardRef(
   }
 );
 
+FilterPanelAccordion.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelAccordion = pkg.checkComponentEnabled(
   FilterPanelAccordion,

diff --git a/...oducts/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.mdx b/...oducts/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.mdx
@@ -11,6 +11,11 @@ import * as FilterPanelAccordionStories from './FilterPanelAccordion.stories';
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
+## Deprecation notice
+
+> This component is deprecated and will be removed in the next major version.
+
+
 ## Overview
 
 The `FilterPanelAccordion` is a container required for grouping

diff --git a/...products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.stories.jsx b/...products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.stories.jsx
@@ -14,11 +14,12 @@ import mdx from './FilterPanelAccordion.mdx';
 import uuidv4 from '../../../global/js/utils/uuidv4';
 
 import styles from '../_storybook-styles.scss?inline';
+import { Annotation } from '../../../../../core/.storybook/Annotation';
 
 const storyClass = 'filter-panel-stories';
 
 export default {
-  title: 'Experimental/Components/Filter panel/FilterPanelAccordion',
+  title: 'Deprecated/Filter panel/FilterPanelAccordion',
   component: FilterPanelAccordion,
   tags: ['autodocs'],
   parameters: {
@@ -74,6 +75,21 @@ export default {
     count: 1,
     labelText: 0,
   },
+  decorators: [
+    (story) => (
+      <Annotation
+        type="deprecation-notice"
+        text={
+          <div>
+            This component is deprecated and will be removed in the next major
+            version.
+          </div>
+        }
+      >
+        {story()}
+      </Annotation>
+    ),
+  ],
 };
 
 const Template = (args) => {

diff --git a/...ibm-products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.test.js b/...ibm-products/src/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.test.js
@@ -33,6 +33,9 @@ const renderComponent = ({ ...rest } = {}) =>
   );
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
   const { getComputedStyle } = window;
 
   beforeEach(() => {

diff --git a/...-products/src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js b/...-products/src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js
@@ -27,6 +27,7 @@ const defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelAccordionItem = React.forwardRef(
   (
@@ -72,6 +73,10 @@ export let FilterPanelAccordionItem = React.forwardRef(
   }
 );
 
+FilterPanelAccordionItem.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`,
+};
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelAccordionItem = pkg.checkComponentEnabled(
   FilterPanelAccordionItem,

diff --git a/...rc/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.mdx b/...rc/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.mdx
@@ -12,6 +12,11 @@ import * as FilterPanelAccordionItemStories from './FilterPanelAccordionItem.sto
 - [Truncated usage](#truncated-usage)
 - [Component API](#component-api)
 
+## Deprecation notice
+
+> This component is deprecated and will be removed in the next major version.
+
+
 ## Overview
 
 The `FilterPanelAccordionItem` can be expanded and collapsed and will accept any

diff --git a/.../src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.stories.jsx b/.../src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.stories.jsx
@@ -18,11 +18,12 @@ import mdx from './FilterPanelAccordionItem.mdx';
 import uuidv4 from '../../../global/js/utils/uuidv4';
 
 import styles from '../_storybook-styles.scss?inline';
+import { Annotation } from '../../../../../core/.storybook/Annotation';
 
 const storyClass = 'filter-panel-stories';
 
 export default {
-  title: 'Experimental/Components/Filter panel/FilterPanelAccordionItem',
+  title: 'Deprecated/Filter panel/FilterPanelAccordionItem',
   component: FilterPanelAccordionItem,
   tags: ['autodocs'],
   parameters: {
@@ -77,6 +78,21 @@ export default {
     count: 1,
     labelText: 0,
   },
+  decorators: [
+    (story) => (
+      <Annotation
+        type="deprecation-notice"
+        text={
+          <div>
+            This component is deprecated and will be removed in the next major
+            version.
+          </div>
+        }
+      >
+        {story()}
+      </Annotation>
+    ),
+  ],
 };
 
 const Template = (args) => {

diff --git a/...ucts/src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.test.js b/...ucts/src/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.test.js
@@ -31,6 +31,9 @@ const renderComponent = ({ ...rest } = {}) =>
   );
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
   it('renders a component FilterPanelAccordionItem', async () => {
     const { container } = renderComponent();
     const component = container.querySelector(`.${blockClass}`);

diff --git a/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js b/packages/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js
@@ -26,6 +26,7 @@ const componentName = 'FilterPanelCheckbox';
  *
  * All of Carbon Checkbox's props are directly available
  * through "...rest", including id, onClick, etc.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckbox = React.forwardRef(
   ({ className, count, id, labelText, title, ...rest }, ref) => {
@@ -44,6 +45,11 @@ export let FilterPanelCheckbox = React.forwardRef(
   }
 );
 
+FilterPanelCheckbox.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelCheckbox = pkg.checkComponentEnabled(
   FilterPanelCheckbox,

diff --git a/...products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.mdx b/...products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.mdx
@@ -11,6 +11,11 @@ import * as FilterPanelCheckboxStories from './FilterPanelCheckbox.stories';
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
+## Deprecation notice
+
+> This component is deprecated and will be removed in the next major version.
+
+
 ## Overview
 
 The `FilterPanelCheckbox` is a modified Carbon `Checkbox` and accepts both a

diff --git a/...m-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.stories.jsx b/...m-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.stories.jsx
@@ -14,11 +14,12 @@ import { FilterPanel, FilterPanelCheckbox } from '..';
 import mdx from './FilterPanelCheckbox.mdx';
 
 import styles from '../_storybook-styles.scss?inline';
+import { Annotation } from '../../../../../core/.storybook/Annotation';
 
 const storyClass = 'filter-panel-stories';
 
 export default {
-  title: 'Experimental/Components/Filter panel/FilterPanelCheckbox',
+  title: 'Deprecated/Filter panel/FilterPanelCheckbox',
   component: FilterPanelCheckbox,
   tags: ['autodocs'],
   argTypes: {
@@ -72,6 +73,21 @@ export default {
       page: mdx,
     },
   },
+  decorators: [
+    (story) => (
+      <Annotation
+        type="deprecation-notice"
+        text={
+          <div>
+            This component is deprecated and will be removed in the next major
+            version.
+          </div>
+        }
+      >
+        {story()}
+      </Annotation>
+    ),
+  ],
 };
 
 const Template = (args) => {

diff --git a/...s/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.test.js b/...s/ibm-products/src/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.test.js
@@ -29,6 +29,9 @@ const renderComponent = ({ ...rest } = {}) =>
   );
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
   it('renders a component FilterPanelCheckbox', async () => {
     const { container } = renderComponent();
 

diff --git a/...components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js b/...components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js
@@ -30,6 +30,7 @@ const defaults = {
  * just like FilterPanelCheckbox.
  *
  * Use `overflowMenuProps` for properties specific to the OverflowMenu.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckboxWithOverflow = React.forwardRef(
   (
@@ -122,6 +123,11 @@ export let FilterPanelCheckboxWithOverflow = React.forwardRef(
   }
 );
 
+FilterPanelCheckboxWithOverflow.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelCheckboxWithOverflow = pkg.checkComponentEnabled(
   FilterPanelCheckboxWithOverflow,

diff --git a/...FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.mdx b/...FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.mdx
@@ -11,6 +11,11 @@ import * as FilterPanelCheckboxWithOverflowStories from './FilterPanelCheckboxWi
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
+## Deprecation notice
+
+> This component is deprecated and will be removed in the next major version.
+
+
 ## Overview
 
 The `FilterPanelCheckboxWithOverflow` is like `FilterPanelCheckbox`, but

diff --git a/...s/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.stories.jsx b/...s/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.stories.jsx
@@ -16,11 +16,12 @@ import { FilterPanelCheckboxWithOverflow } from '.';
 import mdx from './FilterPanelCheckboxWithOverflow.mdx';
 
 import styles from '../_storybook-styles.scss?inline';
+import { Annotation } from '../../../../../core/.storybook/Annotation';
 
 const storyClass = 'filter-panel-stories';
 
 export default {
-  title: 'Experimental/Components/Filter panel/FilterPanelCheckboxWithOverflow',
+  title: 'Deprecated/Filter panel/FilterPanelCheckboxWithOverflow',
   component: FilterPanelCheckboxWithOverflow,
   tags: ['autodocs'],
   argTypes: {
@@ -75,6 +76,21 @@ export default {
       page: mdx,
     },
   },
+  decorators: [
+    (story) => (
+      <Annotation
+        type="deprecation-notice"
+        text={
+          <div>
+            This component is deprecated and will be removed in the next major
+            version.
+          </div>
+        }
+      >
+        {story()}
+      </Annotation>
+    ),
+  ],
 };
 
 const Template = (args) => {

diff --git a/...nents/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.test.js b/...nents/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.test.js
@@ -38,6 +38,9 @@ const renderComponent = ({ ...rest } = {}) =>
   );
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
   it('renders a component FilterPanelCheckboxWithOverflow', async () => {
     renderComponent();
     expect(screen.getByRole('checkbox')).toBeInTheDocument();