Merge pull request #477 from mashmatrix/support-slds-2-table

Update `Table` for SLDS2

Author: stomita

src/scripts/Table.tsx

@@ -102,7 +102,7 @@ export const TableRow: FC<TableRowProps> = (props) => {
   }
   const rowClassName = classnames(
     className,
-    header ? 'slds-text-title_caps' : 'slds-hint-parent'
+    header ? 'slds-line-height_reset' : 'slds-hint-parent'
   );
   const style = selected
     ? {
@@ -130,7 +130,7 @@ export type TableHeaderColumnProps = {
   sorted?: boolean;
   align?: 'left' | 'center' | 'right';
   onSort?: () => void;
-} & ThHTMLAttributes<HTMLTableHeaderCellElement>;
+} & ThHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
@@ -152,7 +152,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
   const sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
   const oClassNames = classnames(
     className,
-    'slds-text-title_caps slds-truncate',
     {
       'slds-is-sortable': sortable,
       'slds-is-resizable': resizable,
@@ -165,8 +164,15 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 
   const icon = sortDir === 'DESC' ? 'arrowdown' : 'arrowup';
 
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = (
+    <div className='slds-truncate' title={content}>
+      {children}
+    </div>
+  );
+
   return (
-    <th {...pprops} className={oClassNames} scope='col' style={style}>
+    <th {...pprops} className={oClassNames} style={style}>
       {sortable ? (
         <a
           onClick={(e) => {
@@ -178,24 +184,18 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           className='slds-th__action slds-text-link_reset'
         >
           <span className='slds-assistive-text'>Sort </span>
-          <span className='slds-truncate'>{children}</span>
+          {cellContent}
           <Icon
+            container
             className='slds-is-sortable__icon'
             textColor='default'
-            container
             size='x-small'
             category='utility'
             icon={icon}
-            style={{ position: 'absolute' }}
-          />
-          <span
-            className='slds-assistive-text'
-            aria-live='assertive'
-            aria-atomic='true'
           />
         </a>
       ) : (
-        children
+        cellContent
       )}
     </th>
   );
@@ -207,23 +207,35 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 export type TableRowColumnProps = {
   width?: string | number;
   truncate?: boolean;
-} & TdHTMLAttributes<HTMLTableDataCellElement>;
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
  */
 export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
-  const { truncate = true, className, width, children, ...pprops } = props;
-  const oClassNames = classnames(className, {
-    'slds-truncate': truncate,
-  });
+  const {
+    truncate = true,
+    className: oClassNames,
+    width,
+    children,
+    ...pprops
+  } = props;
   const style: CSSProperties = {};
   if (width !== undefined) style.width = width;
   if (!truncate) style.position = 'static';
 
-  return (
-    <td role='gridcell' style={style} className={oClassNames} {...pprops}>
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = truncate ? (
+    <div className='slds-truncate' title={content}>
       {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <td style={style} className={oClassNames} {...pprops}>
+      {cellContent}
     </td>
   );
 };
@@ -274,17 +286,15 @@ export const Table: FC<TableProps> = (props) => {
     ...rprops
   } = props;
 
-  const tableClassNames = classnames(
-    className,
-    'slds-table slds-table_cell-buffer',
-    {
-      'slds-table_bordered': bordered,
-      'slds-no-row-hover': noRowHover,
-      'slds-table_striped': striped,
-      'slds-table_fixed-layout': fixedLayout,
-      'slds-table_col-bordered': verticalBorders,
-    }
-  );
+  const tableClassNames = classnames(className, 'slds-table', {
+    'slds-table_bordered': bordered,
+    'slds-no-row-hover': noRowHover,
+    'slds-table_striped': striped,
+    'slds-table_fixed-layout': fixedLayout,
+    'slds-table_resizable-cols': sortable,
+    'slds-table_cell-buffer': !sortable,
+    'slds-table_col-bordered': verticalBorders,
+  });
 
   const style: CSSProperties = { ...style_ };
   if (autoWidth) {