fix(DataTable): expand + select padding (#8656)

* fix(DataTable): expand + select padding

* fix: expand and select focus styles

* fix: center checkbox

* fix: checkbox focus size

* chore: remove comment

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/components/src/components/data-table/_data-table-core.scss

@@ -293,20 +293,37 @@
   // Select
   //----------------------------------------------------------------------------
   .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
-    padding-left: $spacing-05;
+    padding-left: 0;
   }
 
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;
-    // 16px padding left + 8px padding right + 20px checkbox width
-    width: rem(44px);
-    padding-right: $spacing-05;
-    padding-left: $spacing-05;
+    width: rem(32px);
     background: $layer-accent;
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
+  .#{$prefix}--data-table
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before {
+    //make checkbox focus larger to match expansion btn focus
+    outline-offset: rem(6px);
+  }
+
+  .#{$prefix}--data-table--compact
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--data-table--xs
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before {
+    //make checkbox match expansion button focus size
+    outline-offset: rem(2px);
+  }
+
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
@@ -316,18 +333,15 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
-    // 16px padding left + 20px checkbox width
-    width: rem(16px);
-    // spacing between checkbox / chevron and next cell should be 16px / 1rem
-    // adjacent cell has 16px / 1rem padding-left though, hence the removal of padding-right here
-    padding-right: $spacing-05;
-    padding-left: $spacing-05;
+    // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
+    padding-right: rem(4px);
+    padding-left: 1rem;
   }
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
-    width: rem(48px);
-    height: rem(48px);
+    width: rem(32px);
+    height: rem(32px);
   }
 
   // V11: Remove compact
@@ -337,6 +351,7 @@
   .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
     width: rem(24px);
     height: rem(24px);
+    padding: 0 0 0 0.5rem;
   }
 
   // V11: remove short
@@ -346,12 +361,15 @@
   .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand {
     width: rem(32px);
     height: rem(32px);
+    padding: 0;
+    padding-left: 0.5rem;
   }
 
   .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand {
     width: rem(40px);
     height: rem(40px);
+    padding: rem(4px) 0 rem(4px) rem(8px);
   }
 
   // V11: remove tall
@@ -360,6 +378,8 @@
   .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
     height: rem(64px);
+    padding-top: rem(10px);
+    padding-bottom: rem(22px);
   }
 
   // V11: remove tall

packages/components/src/components/data-table/_data-table-expandable.scss

@@ -170,12 +170,25 @@
   .#{$prefix}--data-table
     td.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox {
-    padding-right: 0;
+    padding-right: rem(6px);
+    padding-left: rem(6px);
+  }
+
+  .#{$prefix}--data-table
+    th.#{$prefix}--table-expand
+    + .#{$prefix}--table-column-checkbox
+    + th,
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-expand
+    + .#{$prefix}--table-column-checkbox
+    + td {
+    padding-left: rem(8px);
   }
 
   .#{$prefix}--data-table td.#{$prefix}--table-expand,
   .#{$prefix}--data-table th.#{$prefix}--table-expand {
-    padding: 0;
+    padding: 0.5rem;
+    padding-right: 0;
   }
 
   .#{$prefix}--data-table
@@ -198,7 +211,7 @@
     height: calc(100% + 1px);
     align-items: center;
     justify-content: center;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
     vertical-align: inherit;
   }
 
@@ -216,8 +229,8 @@
   // V11: remove tall
   .#{$prefix}--data-table--tall .#{$prefix}--table-expand__button,
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
-    padding-top: rem(16px);
-    padding-bottom: rem(24px);
+    width: rem(32px);
+    padding: 0;
   }
 
   // fix expanded parent separating border length

packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js

@@ -8,6 +8,7 @@
 import './story.scss';
 
 import React from 'react';
+import { withKnobs, select } from '@storybook/addon-knobs';
 import {
   Delete16 as Delete,
   Save16 as Save,
@@ -36,8 +37,25 @@ import DataTable, {
 } from '../../../DataTable';
 import { batchActionClick, rows, headers } from '../shared';
 
+const sizes = {
+  Compact: 'compact',
+  Short: 'short',
+  Medium: 'md',
+  Default: null,
+  Tall: 'tall',
+};
+
+const tableProps = {
+  sizeProp: () => {
+    return {
+      size: select('Row size (size)', sizes, null),
+    };
+  },
+};
+
 export default {
   title: 'Components/DataTable/Development',
+  decorators: [withKnobs],
 };
 
 export const Example = (props) => {
@@ -102,6 +120,7 @@ export const Example = (props) => {
     };
 
     render() {
+      const sizeProp = tableProps.sizeProp();
       return (
         <DataTable
           rows={this.state.rows}
@@ -157,7 +176,7 @@ export const Example = (props) => {
                   </TableToolbarMenu>
                 </TableToolbarContent>
               </TableToolbar>
-              <Table {...getTableProps()}>
+              <Table {...getTableProps()} {...sizeProp}>
                 <TableHead>
                   <TableRow>
                     <TableExpandHeader />