feat(data-grid): update styles to align with new Paste Twilio theme (#…

…3089) * feat(data-grid): update styles to align with new Paste Twilio theme * fix: shorted the sticky header story for vrt * fix: updated selected row styles * chore: selected rows in selectable data grid story for VRT
twilio-labs · Mar 17, 2023 · bba742e · bba742e
1 parent bce8893
commit bba742e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/.changeset/silver-horses-reply.md b/.changeset/silver-horses-reply.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/data-grid': patch
+'@twilio-paste/core': patch
+---
+
+[data-grid] Update styles to align with new Paste Twilio theme.
diff --git a/packages/paste-core/components/data-grid/src/table/Td.tsx b/packages/paste-core/components/data-grid/src/table/Td.tsx
@@ -24,12 +24,12 @@ export const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
         borderBottomWidth="borderWidth10"
         fontSize="fontSize30"
         lineHeight="lineHeight30"
-        paddingY="space40"
-        paddingX="space50"
+        padding="space50"
         position="relative"
         textAlign={textAlign}
         verticalAlign="inherit"
         wordWrap="break-word"
+        color="inherit"
         _first={{
           paddingLeft: 'space50',
         }}

diff --git a/packages/paste-core/components/data-grid/src/table/Th.tsx b/packages/paste-core/components/data-grid/src/table/Th.tsx
@@ -32,6 +32,7 @@ export const Th = React.forwardRef<HTMLTableCellElement, ThProps>(
         position="relative"
         textAlign={textAlign}
         verticalAlign="inherit"
+        color="inherit"
         _first={{
           paddingLeft: 'space50',
         }}

diff --git a/packages/paste-core/components/data-grid/src/table/Tr.tsx b/packages/paste-core/components/data-grid/src/table/Tr.tsx
@@ -14,10 +14,10 @@ export interface TrProps {
 const StyledTr = styled.tr<TrProps>(
   css({
     '&[aria-selected=true] > td': {
-      borderColor: 'colorBorderWeak',
+      borderColor: 'colorBorderPrimaryWeaker',
     },
     '&[aria-selected=true] > th': {
-      borderColor: 'colorBorderWeak',
+      borderColor: 'colorBorderPrimaryWeaker',
     },
   })
 );
@@ -33,7 +33,6 @@ export const Tr = React.forwardRef<HTMLTableRowElement, TrProps>(
         as={StyledTr}
         aria-selected={props.selected}
         _even={{backgroundColor: striped ? 'colorBackgroundRowStriped' : 'transparent'}}
-        _last={{borderWidth: 'borderWidth0'}}
         _selected={{
           backgroundColor: 'colorBackgroundPrimaryWeakest',
         }}

diff --git a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx
@@ -68,7 +68,18 @@ const CheckboxCell: React.FC<React.PropsWithChildren<CheckboxCellProps>> = ({
 export const SelectableRowsDataGrid = (): JSX.Element => {
   const seed = useUIDSeed();
   // Array of length 10 rows, all unchecked
-  const [checkedItems, setCheckedItems] = React.useState([...new Array(10)].map(() => false));
+  const [checkedItems, setCheckedItems] = React.useState([
+    false,
+    true,
+    false,
+    false,
+    true,
+    true,
+    false,
+    false,
+    false,
+    false,
+  ]);
 
   const allChecked = checkedItems.every(Boolean);
   const indeterminate = checkedItems.some(Boolean) && !allChecked;

diff --git a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx
@@ -18,7 +18,7 @@ export const StickyHeaderDataGrid: React.FC<React.PropsWithChildren<{element?: B
           </DataGridRow>
         </DataGridHead>
         <DataGridBody data-testid="data-grid-body" element={`${element}_BODY`}>
-          {[...new Array(50).keys()].map((rowIndex) => (
+          {[...new Array(20).keys()].map((rowIndex) => (
             <DataGridRow key={`row-${rowIndex}`} data-testid="data-grid-row" element={`${element}_ROW`}>
               <DataGridCell element={`${element}_CELL`} key="col-0" data-testid="data-grid-cell">
                 content