feat: code review changes and storybook example

carbon-design-system · Feb 22, 2024 · ad2c042 · ad2c042
1 parent 1d7c69f
commit ad2c042
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/packages/react/src/components/Table/EmptyTable/EmptyTable.jsx b/packages/react/src/components/Table/EmptyTable/EmptyTable.jsx
@@ -25,7 +25,7 @@ const propTypes = {
   ),
   testId: PropTypes.string,
   /** icon to display while no data in table */
-  noDataIcon: PropTypes.oneOfType([
+  emptyStateIcon: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.oneOf(['error', 'error404', 'empty', 'not-authorized', 'no-result', 'success', '']),
   ]),
@@ -35,7 +35,7 @@ const defaultProps = {
   id: 'EmptyTable',
   onEmptyStateAction: null,
   testId: '',
-  noDataIcon: '',
+  emptyStateIcon: '',
 };
 
 const EmptyTable = ({
@@ -55,7 +55,7 @@ const EmptyTable = ({
   // TODO: remove deprecated 'testID' in v3
   testID,
   testId,
-  noDataIcon,
+  emptyStateIcon,
 }) => {
   const isFilterEmptyTable = (
     <EmptyState
@@ -76,7 +76,7 @@ const EmptyTable = ({
 
   const defaultEmptyTable = (
     <EmptyState
-      icon={noDataIcon !== '' ? noDataIcon : 'empty'}
+      icon={emptyStateIcon ?? 'empty'}
       title={message}
       body={messageBody || ''}
       action={

diff --git a/packages/react/src/components/Table/Table.jsx b/packages/react/src/components/Table/Table.jsx
@@ -169,7 +169,7 @@ const propTypes = {
     /** Freezes table header and footer */
     pinHeaderAndFooter: PropTypes.bool,
     /** display icon while Table data is empty */
-    noDataIcon: PropTypes.oneOfType([
+    emptyStateIcon: PropTypes.oneOfType([
       PropTypes.func,
       PropTypes.oneOf(['error', 'error404', 'empty', 'not-authorized', 'no-result', 'success', '']),
     ]),
@@ -618,7 +618,7 @@ export const defaultProps = (baseProps) => ({
   // previously used as testId.
   testId: null,
   enablePercentageColumnWidth: false,
-  noDataIcon: '',
+  emptyStateIcon: '',
 });
 
 const Table = (props) => {
@@ -645,7 +645,7 @@ const Table = (props) => {
     testId,
     size,
     zIndex,
-    noDataIcon,
+    emptyStateIcon,
     ...others
   } = merge({}, defaultProps(props), props);
 
@@ -1246,7 +1246,7 @@ const Table = (props) => {
                 id={id}
                 totalColumns={totalColumns}
                 isFiltered={isFiltered}
-                noDataIcon={noDataIcon}
+                emptyStateIcon={emptyStateIcon}
                 emptyState={
                   // only show emptyState if no filters or search is applied
                   view.table.emptyState && !isFiltered

diff --git a/packages/react/src/components/Table/Table.main.story.jsx b/packages/react/src/components/Table/Table.main.story.jsx
@@ -170,6 +170,7 @@ export const Playground = () => {
     hasFilterRowIcon,
     pinColumn,
     pinHeaderAndFooter,
+    emptyStateIcon,
   } = getTableKnobs({
     getDefaultValue: (name) =>
       // For this story always disable the following knobs by default
@@ -240,10 +241,8 @@ export const Playground = () => {
   );
 
   const customToolbarContentElement = getCustomToolbarContentElement();
-
   const customEmptyState = getCustomEmptyState();
   const customErrorState = getCustomErrorState();
-
   // INITIAL DATA STATE
   const [data, setData] = useStoryState(
     [...(demoEmptyState || demoCustomEmptyState ? [] : storyTableData)]
@@ -262,6 +261,7 @@ export const Playground = () => {
       hasRowNesting,
       selectionCheckboxEnabled,
       demoHasLoadMore,
+      numberOfRows,
     ]
   );
 
@@ -500,6 +500,7 @@ export const Playground = () => {
         i18n={getI18nKnobs()}
         error={error}
         locale={locale}
+        emptyStateIcon={emptyStateIcon}
       />
     </DragAndDrop>
   );

diff --git a/packages/react/src/components/Table/Table.story.helpers.jsx b/packages/react/src/components/Table/Table.story.helpers.jsx
@@ -1112,7 +1112,6 @@ export const getTableKnobs = ({ knobsToCreate, getDefaultValue, useGroups = fals
   const SELECTIONS_ACTIONS_GROUP = useGroups ? 'Selections & actions' : undefined;
   const STATES_GROUP = useGroups ? 'Main view states' : undefined;
   const DND_GROUP = useGroups ? 'Drag & drop' : undefined;
-
   const shouldCreate = (name) => !knobsToCreate || knobsToCreate.includes(name);
 
   return {
@@ -1134,8 +1133,16 @@ export const getTableKnobs = ({ knobsToCreate, getDefaultValue, useGroups = fals
     size: shouldCreate('size')
       ? select('Row height (size)', ['xs', 'sm', 'md', 'lg', 'xl'], 'lg', TABLE_GROUP)
       : null,
-    numerOfRows: shouldCreate('numerOfRows')
-      ? select('Demo number of rows in data', [100, 50, 20, 5], 100, TABLE_GROUP)
+    numberOfRows: shouldCreate('numberOfRows')
+      ? select('Demo number of rows in data', [100, 50, 20, 5, 0], 100, TABLE_GROUP)
+      : null,
+    emptyStateIcon: shouldCreate('emptyStateIcon')
+      ? select(
+          'Demo empty Table Icon',
+          ['error', 'error404', 'empty', 'not-authorized', 'no-result', 'success'],
+          'no-result',
+          TABLE_GROUP
+        )
       : null,
     hasUserViewManagement: shouldCreate('hasUserViewManagement')
       ? boolean(

diff --git a/packages/react/src/components/Table/mdx/Table.mdx b/packages/react/src/components/Table/mdx/Table.mdx
@@ -470,8 +470,7 @@ import TableViewDropdownContent from '../TableViewDropdown/TableViewDropdownCont
 | locale               | string          |         | what locale should we use to format table values if left empty no locale formatting happens                                                                                                            |
 | i18n                 | object          |         | (see [i18n prop](#i18n-prop))                                                                                                                                                                          |
 | error                | string          |         | Specify the error message that need to be displayed by default. Incase we use `view.table.errorState` property then the error state element will be rendered instead of error message                  |
-| noDataIcon           | string          |         | While Table is empty then we have choice while icon should be display. one of (error', 'error404', 'empty', 'not-authorized', 'no-result', 'success') option so display.                               |
-
+| emptyStateIcon       | string          |         | When the Table is empty, we have the choice of which icon should be displayed. One of the following options ('error', 'error404', 'empty', 'not-authorized', 'no-result', 'success') or a custom function. |
 ### Column Prop
 
 | Name                     | Type                     | Default | Description                                                                                                                                                                                            |