fix(DataTable): update data-table styles and add description prop (#2127

) * feat: update data-table styles and add description prop * fix: update snapshots * chore: remove old icons * chore: update snapshots * feat: Add expansion and sorting functionality * test: update snapshots and tests * docs: update default table to be sortable * feat: add class to parent/sibling on hover * test: update snapshots * fix: update sort prop to match header * fix: use previousElementSibling and combine event handlers * fix: don't use toggle
carbon-design-system · Apr 5, 2019 · 4196a39 · 4196a39
1 parent ac870a6
commit 4196a39
Show file tree

Hide file tree

Showing 36 changed files with 1,072 additions and 512 deletions.
diff --git a/src/components/DataTable/Table.js b/src/components/DataTable/Table.js
@@ -18,12 +18,14 @@ export const Table = ({
   children,
   short,
   shouldShowBorder,
+  isSortable,
   ...other
 }) => {
-  const componentClass = cx(`${prefix}--data-table-v2`, className, {
-    [`${prefix}--data-table-v2--zebra`]: zebra,
-    [`${prefix}--data-table-v2--short`]: short,
-    [`${prefix}--data-table-v2--no-border`]: !shouldShowBorder,
+  const componentClass = cx(`${prefix}--data-table`, className, {
+    [`${prefix}--data-table--zebra`]: zebra,
+    [`${prefix}--data-table--short`]: short,
+    [`${prefix}--data-table--sort`]: isSortable,
+    [`${prefix}--data-table--no-border`]: !shouldShowBorder,
   });
   return (
     <table {...other} className={componentClass}>
@@ -48,6 +50,11 @@ Table.propTypes = {
    */
   short: PropTypes.bool,
 
+  /**
+   * `false` Applies styles for data tables with sorting functionality.
+   */
+  isSortable: PropTypes.bool,
+
   /**
    * `true` for data table without borders.
    */

diff --git a/src/components/DataTable/TableBatchAction.js b/src/components/DataTable/TableBatchAction.js
@@ -7,11 +7,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { iconAddSolid } from 'carbon-icons';
+import iconAddSolid from '@carbon/icons-react/lib/add--filled/16';
 import Button from '../Button';
 
 const TableBatchAction = props => (
-  <Button small kind="ghost" icon={iconAddSolid} {...props} />
+  <Button small kind="ghost" renderIcon={iconAddSolid} {...props} />
 );
 
 TableBatchAction.propTypes = {

diff --git a/src/components/DataTable/TableContainer.js b/src/components/DataTable/TableContainer.js
@@ -12,14 +12,27 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const TableContainer = ({ className, children, title, ...rest }) => {
+const TableContainer = ({
+  className,
+  children,
+  title,
+  description,
+  ...rest
+}) => {
   const tableContainerClasses = cx(
     className,
-    `${prefix}--data-table-v2-container`
+    `${prefix}--data-table-container`
   );
   return (
     <div {...rest} className={tableContainerClasses}>
-      {title && <h4 className={`${prefix}--data-table-v2-header`}>{title}</h4>}
+      {title && (
+        <div className={`${prefix}--data-table-header`}>
+          <h4 className={`${prefix}--data-table-header__title`}>{title}</h4>
+          <p className={`${prefix}--data-table-header__description`}>
+            {description}
+          </p>
+        </div>
+      )}
       {children}
     </div>
   );
@@ -32,6 +45,11 @@ TableContainer.propTypes = {
    * Provide a title for the Table
    */
   title: PropTypes.node,
+
+  /**
+   * Optional description text for the Table
+   */
+  description: PropTypes.node,
 };
 
 export default TableContainer;
diff --git a/src/components/DataTable/TableExpandRow.js b/src/components/DataTable/TableExpandRow.js
@@ -8,12 +8,9 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { iconChevronRight } from 'carbon-icons';
 import ChevronRight16 from '@carbon/icons-react/lib/chevron--right/16';
 import { settings } from 'carbon-components';
-import Icon from '../Icon';
 import TableCell from './TableCell';
-import { componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -30,9 +27,9 @@ const TableExpandRow = ({
 }) => {
   const className = cx(
     {
-      [`${prefix}--parent-row-v2`]: true,
-      [`${prefix}--expandable-row-v2`]: isExpanded,
-      [`${prefix}--data-table-v2--selected`]: isSelected,
+      [`${prefix}--parent-row`]: true,
+      [`${prefix}--expandable-row`]: isExpanded,
+      [`${prefix}--data-table--selected`]: isSelected,
     },
     rowClassName
   );
@@ -41,26 +38,18 @@ const TableExpandRow = ({
   return (
     <tr {...rest} className={className} data-parent-row>
       <TableCell
-        className={`${prefix}--table-expand-v2`}
+        className={`${prefix}--table-expand`}
         data-previous-value={previousValue}
         headers={expandHeader}>
         <button
-          className={`${prefix}--table-expand-v2__button`}
+          className={`${prefix}--table-expand__button`}
           onClick={onExpand}
           title={expandIconDescription}
           aria-label={ariaLabel}>
-          {componentsX ? (
-            <ChevronRight16
-              className={`${prefix}--table-expand-v2__svg`}
-              aria-label={expandIconDescription}
-            />
-          ) : (
-            <Icon
-              className={`${prefix}--table-expand-v2__svg`}
-              icon={iconChevronRight}
-              description={expandIconDescription}
-            />
-          )}
+          <ChevronRight16
+            className={`${prefix}--table-expand__svg`}
+            aria-label={expandIconDescription}
+          />
         </button>
       </TableCell>
       {children}

diff --git a/src/components/DataTable/TableExpandedRow.js b/src/components/DataTable/TableExpandedRow.js
@@ -7,20 +7,43 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef } from 'react';
 import { settings } from 'carbon-components';
+import TableCell from './TableCell';
 
 const { prefix } = settings;
 
 const TableExpandedRow = ({
   className: customClassName,
   children,
+  colSpan,
   ...rest
 }) => {
-  const className = cx(`${prefix}--expandable-row-v2`, customClassName);
+  const rowRef = useRef(null);
+  const className = cx(`${prefix}--expandable-row`, customClassName);
+
+  const toggleParentHoverClass = eventType => {
+    if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
+      const parentNode = rowRef.current.previousElementSibling;
+      if (eventType === 'enter') {
+        parentNode.classList.add(`${prefix}--expandable-row--hover`);
+      } else {
+        parentNode.classList.remove(`${prefix}--expandable-row--hover`);
+      }
+    }
+  };
+
   return (
-    <tr {...rest} className={className} data-child-row>
-      {children}
+    <tr
+      ref={rowRef}
+      onMouseEnter={() => toggleParentHoverClass('enter')}
+      onMouseLeave={() => toggleParentHoverClass('leave')}
+      {...rest}
+      className={className}
+      data-child-row>
+      <TableCell colSpan={colSpan}>
+        <div className={`${prefix}--child-row-inner-container`}>{children}</div>
+      </TableCell>
     </tr>
   );
 };
@@ -35,6 +58,11 @@ TableExpandedRow.propTypes = {
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
+
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: PropTypes.number.isRequired,
 };
 
 export default TableExpandedRow;
diff --git a/src/components/DataTable/TableHeader.js b/src/components/DataTable/TableHeader.js
@@ -8,12 +8,10 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { iconCaretUp } from 'carbon-icons';
 import { settings } from 'carbon-components';
-import Icon from '../Icon';
-import CaretUpGlyph from '@carbon/icons-react/lib/caret--up';
+import Arrow from '@carbon/icons-react/lib/arrow--up/20';
+import Arrows from '@carbon/icons-react/lib/arrows--vertical/20';
 import { sortStates } from './state/sorting';
-import { componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -67,10 +65,10 @@ const TableHeader = ({
   }
 
   const className = cx(headerClassName, {
-    [`${prefix}--table-sort-v2`]: true,
-    [`${prefix}--table-sort-v2--active`]:
+    [`${prefix}--table-sort`]: true,
+    [`${prefix}--table-sort--active`]:
       isSortHeader && sortDirection !== sortStates.NONE,
-    [`${prefix}--table-sort-v2--ascending`]:
+    [`${prefix}--table-sort--ascending`]:
       isSortHeader && sortDirection === sortStates.DESC,
   });
   const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
@@ -79,28 +77,24 @@ const TableHeader = ({
     <th scope={scope} className={headerClassName} aria-sort={ariaSort}>
       <button className={className} onClick={onClick} {...rest}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
-        {componentsX ? (
-          <CaretUpGlyph
-            className={`${prefix}--table-sort-v2__icon`}
-            aria-label={t('carbon.table.header.icon.description', {
-              header: children,
-              sortDirection,
-              isSortHeader,
-              sortStates,
-            })}
-          />
-        ) : (
-          <Icon
-            className={`${prefix}--table-sort-v2__icon`}
-            icon={iconCaretUp}
-            description={t('carbon.table.header.icon.description', {
-              header: children,
-              sortDirection,
-              isSortHeader,
-              sortStates,
-            })}
-          />
-        )}
+        <Arrow
+          className={`${prefix}--table-sort__icon`}
+          aria-label={t('carbon.table.header.icon.description', {
+            header: children,
+            sortDirection,
+            isSortHeader,
+            sortStates,
+          })}
+        />
+        <Arrows
+          className={`${prefix}--table-sort__icon-unsorted`}
+          aria-label={t('carbon.table.header.icon.description', {
+            header: children,
+            sortDirection,
+            isSortHeader,
+            sortStates,
+          })}
+        />
       </button>
     </th>
   );

diff --git a/src/components/DataTable/TableRow.js b/src/components/DataTable/TableRow.js
@@ -17,7 +17,7 @@ const TableRow = props => {
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
   const className = cx(props.className, {
-    [`${prefix}--data-table-v2--selected`]: props.isSelected,
+    [`${prefix}--data-table--selected`]: props.isSelected,
   });
   const cleanProps = {
     ...omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),

diff --git a/src/components/DataTable/TableSelectAll.js b/src/components/DataTable/TableSelectAll.js
@@ -8,6 +8,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import InlineCheckbox from '../InlineCheckbox';
+import cx from 'classnames';
+
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
 
 const TableSelectAll = ({
   ariaLabel,
@@ -19,7 +24,7 @@ const TableSelectAll = ({
   disabled,
   className,
 }) => (
-  <th scope="col" className={className}>
+  <th scope="col" className={cx(`${prefix}--table-column-checkbox`, className)}>
     <InlineCheckbox
       ariaLabel={ariaLabel}
       checked={checked}

diff --git a/src/components/DataTable/__tests__/DataTable-test.js b/src/components/DataTable/__tests__/DataTable-test.js
@@ -6,7 +6,9 @@
  */
 
 import React from 'react';
-import { iconDownload, iconEdit, iconSettings } from 'carbon-icons';
+import Download16 from '@carbon/icons-react/lib/download/16';
+import Edit16 from '@carbon/icons-react/lib/edit/16';
+import Settings16 from '@carbon/icons-react/lib/settings/16';
 import Button from '../../Button';
 import DataTable, {
   Table,
@@ -82,17 +84,17 @@ describe('DataTable', () => {
             <TableToolbarSearch onChange={onInputChange} id="custom-id" />
             <TableToolbarContent>
               <TableToolbarAction
-                icon={iconDownload}
+                renderIcon={Download16}
                 iconDescription="Download"
                 onClick={jest.fn()}
               />
               <TableToolbarAction
-                icon={iconEdit}
+                renderIcon={Edit16}
                 iconDescription="Edit"
                 onClick={jest.fn()}
               />
               <TableToolbarAction
-                icon={iconSettings}
+                renderIcon={Settings16}
                 iconDescription="Settings"
                 onClick={jest.fn()}
               />
@@ -533,11 +535,9 @@ describe('DataTable', () => {
                         ))}
                       </TableExpandRow>
                       {row.isExpanded && (
-                        <TableExpandedRow>
-                          <TableCell colSpan={headers.length + 3}>
-                            <h1>Expandable row content</h1>
-                            <p>Description here</p>
-                          </TableCell>
+                        <TableExpandedRow colSpan={headers.length + 3}>
+                          <h1>Expandable row content</h1>
+                          <p>Description here</p>
                         </TableExpandedRow>
                       )}
                     </React.Fragment>

diff --git a/src/components/DataTable/__tests__/Table-test.js b/src/components/DataTable/__tests__/Table-test.js
@@ -17,7 +17,7 @@ describe('DataTable.Table', () => {
 
   it('should support disable zebra stripe', () => {
     const wrapper = shallow(<Table zebra={false} />);
-    expect(wrapper.hasClass('bx--data-table-v2')).toBe(true);
-    expect(wrapper.hasClass('bx--data-table-v2--zebra')).toBe(false);
+    expect(wrapper.hasClass('bx--data-table')).toBe(true);
+    expect(wrapper.hasClass('bx--data-table--zebra')).toBe(false);
   });
 });