chore(table): Refactor table to use system tokens (#2705)

Fixes: #2595 Refactor Table styles to use system tokens and remove base tokens. [category:Components]
Workday · Apr 19, 2024 · f984e87 · f984e87
1 parent f88d052
commit f984e87
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 64 deletions.
diff --git a/modules/react/table/lib/Table.tsx b/modules/react/table/lib/Table.tsx
@@ -9,16 +9,16 @@ import {TableCell} from './TableCell';
 import {TableFooter} from './TableFooter';
 import {TableCaption} from './TableCaption';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const tableStencil = createStencil({
   base: {
     ...system.type.subtext.large,
     display: 'grid',
-    border: `${px2rem(1)} solid ${base.soap500}`,
+    border: `${px2rem(1)} solid ${system.color.border.container}`,
     borderRadius: system.shape.x2,
     overflow: 'auto',
-    color: base.blackPepper300,
+    color: system.color.text.default,
   },
 });
 

diff --git a/modules/react/table/lib/TableCaption.tsx b/modules/react/table/lib/TableCaption.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const tableCaptionStencil = createStencil({
   base: {
     display: 'flex',
-    borderBottom: `${px2rem(1)} solid ${base.soap500}`,
+    borderBottom: `${px2rem(1)} solid ${system.color.border.container}`,
     padding: `${system.space.x2} ${system.space.x4}`,
   },
 });

diff --git a/modules/react/table/lib/TableCell.tsx b/modules/react/table/lib/TableCell.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const tableCellStencil = createStencil({
   base: {
     display: 'grid',
     alignItems: 'center',
-    backgroundColor: base.frenchVanilla100,
-    borderBottom: `${px2rem(1)} solid ${base.soap400}`,
+    backgroundColor: system.color.bg.default,
+    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
     gridTemplateColumns: '1fr',
     justifyContent: 'start',
     minHeight: '3.5rem',

diff --git a/modules/react/table/lib/TableHead.tsx b/modules/react/table/lib/TableHead.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const tableHeadStencil = createStencil({
   base: {
     display: 'grid',
-    backgroundColor: base.soap100,
-    minHeight: '3rem',
+    backgroundColor: system.color.bg.alt.softer,
+    minHeight: calc.subtract(system.space.x16, system.space.x4),
     'th ': {
       '&:first-of-type': {
         borderInlineStart: 'none',

diff --git a/modules/react/table/lib/TableHeader.tsx b/modules/react/table/lib/TableHeader.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const tableHeaderStencil = createStencil({
   base: {
     display: 'grid',
     alignItems: 'center',
-    backgroundColor: base.frenchVanilla100,
-    borderBottom: `${px2rem(1)} solid ${base.soap400}`,
+    backgroundColor: system.color.bg.default,
+    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
     justifyContent: 'start',
-    minHeight: '3.5rem',
+    minHeight: calc.subtract(system.space.x16, system.space.x2),
     padding: `${system.space.x2} ${system.space.x4}`,
     wordBreak: 'break-word',
     fontWeight: system.fontWeight.medium,

diff --git a/modules/react/table/stories/stories_visualTesting.tsx b/modules/react/table/stories/stories_visualTesting.tsx
@@ -8,7 +8,8 @@ import {withSnapshotsEnabled} from '../../../../utils/storybook';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 
 export default {
   title: 'Testing/Containers/Table',
@@ -66,66 +67,48 @@ const exampleData = [
   },
 ];
 
+const tableHeaderStencil = createStencil({
+  base: {
+    backgroundColor: system.color.bg.alt.softer,
+    borderRight: `${px2rem(1)} solid ${system.color.border.divider}`,
+  },
+  modifiers: {
+    variant: {
+      sticky: {
+        position: 'sticky',
+        left: system.space.zero,
+        zIndex: 2,
+      },
+    },
+  },
+});
+
 const FixedColumn = () => (
   <>
     <Heading size="small">Table Heading</Heading>
     <Table>
       <Table.Head>
         <Table.Row>
-          <Table.Header
-            position="sticky"
-            left="0"
-            backgroundColor="soap100"
-            borderRight={`1px solid ${colors.soap400}`}
-          >
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
+          <Table.Header {...tableHeaderStencil({variant: 'sticky'})}>Header</Table.Header>
+          {Array.from({length: 7}).map((_, i) => (
+            <Table.Header key={i} {...tableHeaderStencil()}>
+              Header
+            </Table.Header>
+          ))}
         </Table.Row>
       </Table.Head>
       <Table.Body>
         {exampleData.map(item => (
           <>
             <Table.Row>
-              <Table.Header
-                position="sticky"
-                left="0"
-                backgroundColor="soap100"
-                borderRight={`1px solid ${colors.soap400}`}
-              >
+              <Table.Header {...tableHeaderStencil({variant: 'sticky'})}>
                 {item.header}
               </Table.Header>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
+              {Array.from({length: 7}).map((_, i) => (
+                <Table.Cell key={i} {...tableHeaderStencil()}>
+                  {item.cell}
+                </Table.Cell>
+              ))}
             </Table.Row>
           </>
         ))}