chore: add Datagrid feature flags, v2 (#2992)

* chore: update migration doc * chore: update cspell * chore: add feature flags for Datagrid select hooks * chore: add datagrid feature flag hooks to migration doc * chore: add missing feature flags * chore: update gallery config --------- Co-authored-by: Elysia Hwang <[email protected]>
carbon-design-system · May 17, 2023 · 7f738de · 7f738de
1 parent 8915c14
commit 7f738de
Show file tree

Hide file tree

Showing 17 changed files with 221 additions and 41 deletions.
diff --git a/docs/guides/v2.md b/docs/guides/v2.md
@@ -82,6 +82,14 @@ v1 and v2 will both receive weekly releases occurring every Tuesday morning.
 ### Datagrid
 
 - `useInlineEdit` has been renamed to `useEditableCell`
+- The following hooks are feature flagged until further review:
+  - useInfiniteScroll
+  - useEditableCell
+  - useExpandedRow
+  - useNestedRows
+  - useActionsColumn
+  - useFiltering
+  - useCustomizeColumns
 
 ### EditInPlace
 

diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,7 +18,6 @@ import {
   ActionableNotification,
   UnorderedList,
   ListItem,
-  NotificationActionButton,
 } from '@carbon/react';
 import React, { useEffect } from 'react';
 

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
@@ -44,6 +44,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const getColumns = (rows) => {

diff --git a/...cts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.js b/...cts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.js
@@ -39,6 +39,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const blockClass = `${pkg.prefix}--datagrid`;
@@ -199,6 +206,12 @@ const ColumnCustomizationUsage = ({ ...args }) => {
     useColumnOrder
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useCustomizeColumns` hook
+  pkg.feature['Datagrid.useCustomizeColumns'] = true;
+  pkg._silenceWarnings(true);
+
   return (
     <>
       <Datagrid datagridState={datagridState} />
@@ -235,6 +248,7 @@ export const ColumnCustomizationUsageStory = prepareStory(
     },
     args: {
       ...columnCustomizationControlProps,
+      featureFlags: ['Datagrid.useCustomizeColumns'],
     },
   }
 );
@@ -306,6 +320,12 @@ const ColumnCustomizationWithFixedColumn = ({ ...args }) => {
     useActionsColumn
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useCustomizeColumns` hook
+  pkg.feature['Datagrid.useCustomizeColumns'] = true;
+  pkg._silenceWarnings(true);
+
   return (
     <>
       <Datagrid datagridState={datagridState} />
@@ -337,6 +357,7 @@ export const ColumnCustomizationWithFixedColumnStory = prepareStory(
     },
     args: {
       ...columnCustomizationControlProps,
+      featureFlags: ['Datagrid.useCustomizeColumns'],
     },
   }
 );
diff --git a/...ages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.js b/...ages/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.js
@@ -35,6 +35,13 @@ export default {
   parameters: {
     styles,
     docs: { page: mdx },
+    argTypes: {
+      featureFlags: {
+        table: {
+          disable: true,
+        },
+      },
+    },
   },
 };
 
@@ -99,9 +106,14 @@ const InlineEditUsage = ({ ...args }) => {
       onDataUpdate: setData,
       ...args.defaultGridProps,
     },
-    useInlineEdit
+    useEditableCell
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  pkg.feature['Datagrid.useEditableCell'] = true;
+  pkg._silenceWarnings(true);
+
   return (
     <div>
       <Datagrid datagridState={datagridState} />
@@ -131,9 +143,14 @@ const EditableCellUsage = ({ ...args }) => {
       onDataUpdate: setData,
       ...args.defaultGridProps,
     },
-    useEditableCell
+    useInlineEdit
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  pkg.feature['Datagrid.useInlineEdit'] = true;
+  pkg._silenceWarnings(true);
+
   return (
     <div>
       <Datagrid datagridState={datagridState} />
@@ -169,6 +186,7 @@ export const EditableCellUsageStory = prepareStory(
     },
     args: {
       ...inlineEditUsageControlProps,
+      featureFlags: ['Datagrid.useEditableCell'],
     },
   }
 );

diff --git a/...es/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.js b/...es/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.js
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,13 +20,21 @@ import { DatagridActions } from '../../utils/DatagridActions';
 import { DatagridPagination } from '../../utils/DatagridPagination';
 import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/ExpandableRow`,
   component: Datagrid,
   parameters: {
     styles,
     docs: { page: mdx },
+    argTypes: {
+      featureFlags: {
+        table: {
+          disable: true,
+        },
+      },
+    },
   },
 };
 
@@ -170,6 +178,12 @@ const ExpandedRows = ({ ...args }) => {
     useExpandedRow
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useExpandedRow` hook
+  pkg.feature['Datagrid.useExpandedRow'] = true;
+  pkg._silenceWarnings(true);
+
   return <Datagrid datagridState={datagridState} />;
 };
 
@@ -192,5 +206,6 @@ export const ExpandableRowStory = prepareStory(BasicTemplateWrapper, {
   },
   args: {
     ...expandableRowControlProps,
+    featureFlags: ['Datagrid.useExpandedRow'],
   },
 });
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.js b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.js
@@ -20,6 +20,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 import { DatagridActions } from '../../utils/DatagridActions';
 import { StatusIcon } from '../../../StatusIcon';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/Filtering/Flyout`,
@@ -28,6 +29,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const getBatchActions = () => {
@@ -171,6 +179,12 @@ const FilteringUsage = ({ defaultGridProps }) => {
     useFiltering
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useFiltering` hook
+  pkg.feature['Datagrid.useFiltering'] = true;
+  pkg._silenceWarnings(true);
+
   return <Datagrid datagridState={datagridState} />;
 };
 
@@ -310,6 +324,7 @@ export const FlyoutBatch = prepareStory(FilteringTemplateWrapper, {
       onFlyoutClose: action('onFlyoutClose'),
       filters,
     },
+    featureFlags: ['Datagrid.useFiltering'],
   },
 });
 
@@ -338,6 +353,7 @@ export const FlyoutInstant = prepareStory(FilteringTemplateWrapper, {
       onFlyoutClose: action('onFlyoutClose'),
       filters,
     },
+    featureFlags: ['Datagrid.useFiltering'],
   },
 });
 
@@ -375,5 +391,6 @@ export const FlyoutWithInitialFilters = prepareStory(FilteringTemplateWrapper, {
       onFlyoutClose: action('onFlyoutClose'),
       filters,
     },
+    featureFlags: ['Datagrid.useFiltering'],
   },
 });
diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.js b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.js
@@ -20,6 +20,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 import { DatagridActions } from '../../utils/DatagridActions';
 import { StatusIcon } from '../../../StatusIcon';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/Filtering/Panel`,
@@ -28,6 +29,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const getBatchActions = () => {
@@ -172,6 +180,12 @@ const FilteringUsage = ({ defaultGridProps }) => {
     useFiltering
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useFiltering` hook
+  pkg.feature['Datagrid.useFiltering'] = true;
+  pkg._silenceWarnings(true);
+
   return <Datagrid datagridState={datagridState} />;
 };
 
@@ -349,6 +363,7 @@ export const PanelInstant = prepareStory(FilteringTemplateWrapper, {
     filterProps: ARG_TYPES.filterProps,
   },
   args: {
+    featureFlags: ['Datagrid.useFiltering'],
     gridTitle: 'Data table title',
     gridDescription: 'Additional information if needed',
     useDenseHeader: false,
@@ -510,6 +525,7 @@ export const PanelWithInitialFilters = prepareStory(FilteringTemplateWrapper, {
     filterProps: ARG_TYPES.filterProps,
   },
   args: {
+    featureFlags: ['Datagrid.useFiltering'],
     initialState: {
       filters: [
         {
@@ -704,6 +720,7 @@ export const PanelOnlyAccordions = prepareStory(FilteringTemplateWrapper, {
     filterProps: ARG_TYPES.filterProps,
   },
   args: {
+    featureFlags: ['Datagrid.useFiltering'],
     gridTitle: 'Data table title',
     gridDescription: 'Additional information if needed',
     useDenseHeader: false,
@@ -866,6 +883,7 @@ export const PanelNoAccordions = prepareStory(FilteringTemplateWrapper, {
     filterProps: ARG_TYPES.filterProps,
   },
   args: {
+    featureFlags: ['Datagrid.useFiltering'],
     gridTitle: 'Data table title',
     gridDescription: 'Additional information if needed',
     useDenseHeader: false,
@@ -1028,6 +1046,7 @@ export const PanelNoData = prepareStory(FilteringTemplateWrapper, {
     filterProps: ARG_TYPES.filterProps,
   },
   args: {
+    featureFlags: ['Datagrid.useFiltering'],
     data: [],
     gridTitle: 'Data table title',
     gridDescription: 'Additional information if needed',

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,6 +19,7 @@ import mdx from '../../Datagrid.mdx';
 import { DatagridActions } from '../../utils/DatagridActions';
 import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/NestedRows`,
@@ -27,6 +28,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const defaultHeader = [
@@ -156,6 +164,12 @@ const NestedRows = ({ ...args }) => {
     useNestedRows
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useNestedRows` hook
+  pkg.feature['Datagrid.useNestedRows'] = true;
+  pkg._silenceWarnings(true);
+
   return <Datagrid datagridState={{ ...datagridState }} />;
 };
 
@@ -184,5 +198,6 @@ export const NestedRowsUsageStory = prepareStory(BasicTemplateWrapper, {
   },
   args: {
     ...nestedRowsControlProps,
+    featureFlags: ['Datagrid.useNestedRows'],
   },
 });