chore(DataTable): size prop audit (#10999)

* chore(DataTable): size prop audit first draft * chore(DataTable): removed zombies * chore(DataTable): removed v10 styles * chore(DataTable): excluded v10 stories * chore(DataTable): removed sm story from Toolbar * chore(DataTable): included more dynamic and expansion stories
carbon-design-system · Mar 18, 2022 · 2ecfa37 · 2ecfa37
1 parent e18c86d
commit 2ecfa37
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 1,029 deletions.
diff --git a/packages/carbon-react/.storybook/main.js b/packages/carbon-react/.storybook/main.js
@@ -19,6 +19,7 @@ const stories = glob
       '../src/**/*.stories.js',
       '../src/**/*.stories.mdx',
       '../../react/src/**/next/*.stories.js',
+      '../../react/src/**/next/**/*.stories.js',
       '../../react/src/**/next/*.stories.mdx',
       '../../react/src/**/*-story.js',
     ],
@@ -32,7 +33,17 @@ const stories = glob
   .filter((match) => {
     const filepath = path.resolve(__dirname, match);
     const basename = path.basename(match, '.js');
-    const denylist = new Set(['TooltipDefinition-story']);
+    const denylist = new Set([
+      'TooltipDefinition-story',
+      'DataTable-basic-story',
+      'DataTable-batch-actions-story',
+      'DataTable-filtering-story',
+      'DataTable-selection-story',
+      'DataTable-sorting-story',
+      'DataTable-toolbar-story',
+      'DataTable-dynamic-content-story',
+      'DataTable-expansion-story',
+    ]);
 
     if (denylist.has(basename)) {
       return false;

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -16,6 +16,7 @@ import { composeEventHandlers } from '../../tools/events';
 import { defaultFilterRows } from './tools/filter';
 import { defaultSortRow } from './tools/sorting';
 import setupGetInstanceId from './tools/instanceId';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -116,19 +117,20 @@ export default class DataTable extends React.Component {
 
     /**
      *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
-     *  The previous terms (`compact`, `short`, `normal`, and `tall`) will be removed in the next major release.
      */
-    size: PropTypes.oneOf([
-      'compact',
-      'short',
-      'normal',
-      'tall',
-      'xs',
-      'sm',
-      'md',
-      'lg',
-      'xl',
-    ]),
+    size: FeatureFlags.enabled('enable-v11-release')
+      ? PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+      : PropTypes.oneOf([
+          'compact',
+          'short',
+          'normal',
+          'tall',
+          'xs',
+          'sm',
+          'md',
+          'lg',
+          'xl',
+        ]),
 
     /**
      * Optional hook to manually control sorting of the rows.
@@ -163,7 +165,7 @@ export default class DataTable extends React.Component {
     sortRow: defaultSortRow,
     filterRows: defaultFilterRows,
     locale: 'en',
-    size: 'normal',
+    size: FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'normal',
     overflowMenuOnHover: true,
     translateWithId,
   };

diff --git a/packages/react/src/components/DataTable/Table.js b/packages/react/src/components/DataTable/Table.js
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate.js';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 const { prefix } = settings;
 
@@ -80,19 +81,20 @@ Table.propTypes = {
 
   /**
    *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
-   *  The previous terms (`compact`, `short`, `normal`, and `tall`) will be removed in the next major release.
    */
-  size: PropTypes.oneOf([
-    'compact',
-    'short',
-    'normal',
-    'tall',
-    'xs',
-    'sm',
-    'md',
-    'lg',
-    'xl',
-  ]),
+  size: FeatureFlags.enabled('enable-v11-release')
+    ? PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+    : PropTypes.oneOf([
+        'compact',
+        'short',
+        'normal',
+        'tall',
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+      ]),
 
   /**
    * `false` If true, will keep the header sticky (only data rows will scroll)

diff --git a/packages/react/src/components/DataTable/TableToolbar.js b/packages/react/src/components/DataTable/TableToolbar.js
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 const { prefix } = settings;
 
@@ -37,10 +38,11 @@ TableToolbar.propTypes = {
   children: PropTypes.node,
 
   /**
-   * `normal` Change the row height of table
-   * V11: remove small, normal
+   * `lg` Change the row height of table
    */
-  size: PropTypes.oneOf(['small', 'sm', 'normal', 'lg']),
+  size: FeatureFlags.enabled('enable-v11-release')
+    ? PropTypes.oneOf(['sm', 'lg'])
+    : PropTypes.oneOf(['small', 'sm', 'normal', 'lg']),
 };
 
 TableToolbar.defaultProps = {