feat(DataTable): update styling for data table container (#2617)

* feat(DataTable): update styling for data table container * feat(DataTable): update border bottom color of table cells * feat(DataTable): update box shadow value based on PR comments * feat(DataTable): rearrange styles used for box-shadow on data table * Update .changeset/orange-suits-grow.md Changing to patch as requested by Shield team Co-authored-by: Yemitan Isaiah Olurotimi <[email protected]> --------- Co-authored-by: Yemitan Isaiah Olurotimi <[email protected]>
commercetools · Oct 12, 2023 · cf30ddf · cf30ddf · vercel · Oct 12, 2023
1 parent 1713d84
commit cf30ddf
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/orange-suits-grow.md b/.changeset/orange-suits-grow.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/data-table': patch
+---
+
+Update styling of data table container and table cells
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -136,6 +136,7 @@
   --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
   --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
     -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
+  --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
   --constraint-scale: 100%;
   --constraint-1: 42px;
   --constraint-2: 84px;
@@ -414,6 +415,7 @@
   --box-shadow-for-view-switcher-when-selected: none;
   --box-shadow-for-select-input-when-focused: inset 0 0 0 1px;
   --box-shadow-for-calendar-menu-when-focused: 0 2px 5px 0px rgba(0, 0, 0, 0.15);
+  --box-shadow-for-table: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
   --font-color-for-text: #1a1a1a;
   --font-color-for-text-when-disabled: hsl(232, 18%, 60%);
   --font-color-for-input: #1a1a1a;

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -124,6 +124,7 @@
   "--shadow-14": "0 0 0.5px rgba(0, 0, 0, 0.1)",
   "--shadow-15": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)",
   "--shadow-16": "0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)",
+  "--shadow-17": "0 1px 5px 0 rgba(0, 0, 0, 0.05)",
   "--constraint-scale": "100%",
   "--constraint-1": "42px",
   "--constraint-2": "84px",
@@ -312,6 +313,7 @@
   "--box-shadow-for-view-switcher-when-selected": "none",
   "--box-shadow-for-select-input-when-focused": "inset 0 0 0 1px",
   "--box-shadow-for-calendar-menu-when-focused": "0 2px 5px 0px rgba(0, 0, 0, 0.15)",
+  "--box-shadow-for-table": "0 1px 5px 0 rgba(0, 0, 0, 0.05)",
   "--font-color-for-text": "#1a1a1a",
   "--font-color-for-text-when-disabled": "hsl(232, 18%, 60%)",
   "--font-color-for-input": "#1a1a1a",

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -196,6 +196,7 @@ choiceGroupsByTheme:
         shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
         shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
         shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
+        shadow-17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
     constraints:
       label: Constraints
       prefix: constraint
@@ -823,6 +824,8 @@ decisionGroupsByTheme:
           choice: 'inset 0 0 0 1px'
         box-shadow-for-calendar-menu-when-focused:
           choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
+        box-shadow-for-table:
+          choice: shadow-17
 
     fontColors:
       label: Font Colors
@@ -1247,7 +1250,7 @@ decisionGroupsByTheme:
         shadow-for-button-when-disabled:
           choice: shadow-0
         shadow-for-card-when-raised:
-          choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
+          choice: shadow-17
         shadow-for-input:
           choice: shadow-0
         shadow-for-input-when-focused:

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -135,6 +135,7 @@ export const themes = {
     shadow15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
     shadow16:
       '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)',
+    shadow17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)',
     constraintScale: '100%',
     constraint1: '42px',
     constraint2: '84px',
@@ -342,6 +343,7 @@ export const themes = {
     boxShadowForViewSwitcherWhenSelected: 'none',
     boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px',
     boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    boxShadowForTable: '0 1px 5px 0 rgba(0, 0, 0, 0.05)',
     fontColorForText: '#1a1a1a',
     fontColorForTextWhenDisabled: 'hsl(232, 18%, 60%)',
     fontColorForInput: '#1a1a1a',
@@ -699,6 +701,7 @@ const designTokens = {
     'var(--shadow-15, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
   shadow16:
     'var(--shadow-16, 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25))',
+  shadow17: 'var(--shadow-17, 0 1px 5px 0 rgba(0, 0, 0, 0.05))',
   constraintScale: 'var(--constraint-scale, 100%)',
   constraint1: 'var(--constraint-1, 42px)',
   constraint2: 'var(--constraint-2, 84px)',
@@ -1019,6 +1022,8 @@ const designTokens = {
     'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)',
   boxShadowForCalendarMenuWhenFocused:
     'var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
+  boxShadowForTable:
+    'var(--box-shadow-for-table, 0 1px 5px 0 rgba(0, 0, 0, 0.05))',
   fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
   fontColorForTextWhenDisabled:
     'var(--font-color-for-text-when-disabled, hsl(232, 18%, 60%))',

diff --git a/packages/components/data-table/src/cell.styles.tsx b/packages/components/data-table/src/cell.styles.tsx
@@ -128,7 +128,7 @@ const BaseCell = styled.td<TBaseCell>`
   background-color: ${designTokens.colorSurface};
   border-bottom: ${(props) =>
     props.shouldRenderBottomBorder
-      ? `1px solid ${designTokens.colorNeutral90};`
+      ? `1px solid ${designTokens.colorNeutral95};`
       : 'none'};
   font-size: ${designTokens.fontSizeForTable};
   ${(props) =>

diff --git a/packages/components/data-table/src/data-table.styles.tsx b/packages/components/data-table/src/data-table.styles.tsx
@@ -48,6 +48,10 @@ type TTableContainer = {
 const TableContainer = styled.div<TTableContainer>`
   position: relative;
   z-index: 0;
+  box-shadow: ${designTokens.boxShadowForTable};
+  border: 1px solid ${designTokens.colorNeutral95};
+  border-radius: ${designTokens.borderRadius4};
+
   ${(props) =>
     // this is needed in order to have a sticky header
     props.maxHeight ? `overflow-x: auto;` : ''}