From a0c261f407007635548b2d9dccc17fb68acff0f2 Mon Sep 17 00:00:00 2001 From: Arno V Date: Wed, 20 Mar 2024 08:39:48 -0400 Subject: [PATCH] Fix(table) better header and footer contrast in dark mode (#440) ## Summary by CodeRabbit - **New Features** - Introduced `focusMode="alt-system"` for enhanced accessibility in chat action buttons. - **Refactor** - Simplified and improved the `Table` component design by renaming and adjusting features for clarity and usability. - **Style** - Refined shadow effects and background colors in `Table` components for better visual hierarchy. - Added new color schemes for table heads in both dark and light themes. --- .../src/Components/Table.stories.tsx | 48 +++++-------------- .../components/Table/__tests__/Table.test.tsx | 31 ++++-------- .../src/components/Table/utilities.ts | 39 +++++++-------- .../src/plugins/tailwindcss/tokens.ts | 4 ++ 4 files changed, 42 insertions(+), 80 deletions(-) diff --git a/packages/documentation/src/Components/Table.stories.tsx b/packages/documentation/src/Components/Table.stories.tsx index cfa86624..7f4ae642 100644 --- a/packages/documentation/src/Components/Table.stories.tsx +++ b/packages/documentation/src/Components/Table.stories.tsx @@ -115,6 +115,7 @@ export const WithAction: Story = (args) => { noBorder label="Restore chat" mode="light" + focusMode="alt-system" onClick={() => {}} > @@ -123,6 +124,7 @@ export const WithAction: Story = (args) => { noBorder label="Delete chat" mode="light" + focusMode="alt-system" onClick={() => {}} >
@@ -135,20 +137,13 @@ export const WithAction: Story = (args) => { ); })} - - - - hello footer - - -
); }; -export const WithStickyHeader: Story = (args) => { +export const Sticky: Story = (args) => { const data = [ { id: 1, @@ -197,13 +192,13 @@ export const WithStickyHeader: Story = (args) => { return (
- +
Date - First message + Question - Actions + Answer @@ -216,29 +211,7 @@ export const WithStickyHeader: Story = (args) => { {row.timestamp} {row.character} - - -
- {}} - > - - - {}} - > -
- -
- -
- + {row.actor} ); })} @@ -246,7 +219,7 @@ export const WithStickyHeader: Story = (args) => { - + hello footer @@ -256,3 +229,8 @@ export const WithStickyHeader: Story = (args) => { ); }; +Sticky.args = { + stickyHeader: true, + stickyFooter: true, + maxHeight: "260px", +}; diff --git a/packages/ui-components/src/components/Table/__tests__/Table.test.tsx b/packages/ui-components/src/components/Table/__tests__/Table.test.tsx index 8fe2351d..8bd3e58e 100644 --- a/packages/ui-components/src/components/Table/__tests__/Table.test.tsx +++ b/packages/ui-components/src/components/Table/__tests__/Table.test.tsx @@ -76,12 +76,7 @@ describe("Table classes", () => { ]); } if (tableRowHead) { - expectToHaveClasses(tableRowHead, [ - "border-b", - "last:border-0", - "border-table-dark", - "bg-table-dark", - ]); + expectToHaveClasses(tableRowHead, ["bg-table-head-dark"]); } if (tableRowBody) { expectToHaveClasses(tableRowBody, [ @@ -152,11 +147,7 @@ describe("Table classes", () => { ]); } if (tableRowHead) { - expectToHaveClasses(tableRowHead, [ - "border-b", - "last:border-0", - "bg-table-light", - ]); + expectToHaveClasses(tableRowHead, ["bg-table-head-light"]); } if (tableRowBody) { expectToHaveClasses(tableRowBody, [ @@ -237,10 +228,8 @@ describe("Table classes", () => { } if (tableRowHead) { expectToHaveClasses(tableRowHead, [ - "border-b", - "last:border-0", - "border-table-dark", - "bg-table-dark", + "bg-table-head-dark", + "dark:bg-table-head-light", ]); } if (tableRowBody) { @@ -328,10 +317,8 @@ describe("Table classes", () => { } if (tableRowFooter) { expectToHaveClasses(tableRowFooter, [ - "border-b", - "last:border-0", - "border-table-dark", - "bg-table-dark", + "bg-table-head-dark", + "dark:bg-table-head-light", ]); } if (tableRowBody) { @@ -409,10 +396,8 @@ describe("Table classes", () => { } if (tableRowHead) { expectToHaveClasses(tableRowHead, [ - "border-b", - "last:border-0", - "border-table-dark", - "bg-table-dark", + "bg-table-head-dark", + "dark:bg-table-head-light", ]); } if (tableRowBody) { diff --git a/packages/ui-components/src/components/Table/utilities.ts b/packages/ui-components/src/components/Table/utilities.ts index 768f3215..a028e16a 100644 --- a/packages/ui-components/src/components/Table/utilities.ts +++ b/packages/ui-components/src/components/Table/utilities.ts @@ -62,13 +62,13 @@ export const getTableHeadClasses = ({ }) => { return clsx(className, { "sticky top-0 z-10": stickyHeader, - "shadow-[rgb(190_190_190_/30%)_0_0.5rem_1rem]": + "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark", - "shadow-[rgb(190_190_190_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": + "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system", "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light", - "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/30%)_0_0.5rem_1rem]": + "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "alt-system", }); }; @@ -84,13 +84,13 @@ export const getTableFooterClasses = ({ }) => { return clsx(className, { "sticky bottom-0 z-10": stickyFooter, - "shadow-[rgb(190_190_190_/30%)_0_-0.5rem_1rem]": + "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark", - "shadow-[rgb(190_190_190_/30%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": + "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system", "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light", - "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/30%)_0_-0.5rem_1rem]": + "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "alt-system", }); }; @@ -104,36 +104,31 @@ export const getTableRowClasses = ({ cellWrapper?: string; className?: string; }) => { + if ( + cellWrapper === CELL_WRAPPER_HEAD || + cellWrapper === CELL_WRAPPER_FOOTER + ) { + return clsx({ + "bg-table-head-dark": mode === "dark", + "bg-table-head-light": mode === "light", + "bg-table-head-dark dark:bg-table-head-light": mode === "system", + "bg-table-head-light dark:bg-table-head-dark": mode === "alt-system", + }); + } return clsx("border-b last:border-0", className, { "border-table-dark": mode === "dark", - "bg-table-dark": - (cellWrapper === CELL_WRAPPER_HEAD || - cellWrapper === CELL_WRAPPER_FOOTER) && - mode === "dark", "odd:bg-table-dark-odd even:bg-table-dark-even": cellWrapper === CELL_WRAPPER_BODY && mode === "dark", "border-table-light": mode === "light", - "bg-table-light": - (cellWrapper === CELL_WRAPPER_HEAD || - cellWrapper === CELL_WRAPPER_FOOTER) && - mode === "light", "odd:bg-table-light-odd even:bg-table-light-even": cellWrapper === CELL_WRAPPER_BODY && mode === "light", "border-table-dark dark:border-table-light": mode === "system", - "bg-table-dark dark:bg-table-light": - (cellWrapper === CELL_WRAPPER_HEAD || - cellWrapper === CELL_WRAPPER_FOOTER) && - mode === "system", "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": cellWrapper === CELL_WRAPPER_BODY && mode === "system", "border-table-light dark:border-table-dark": mode === "alt-system", - "bg-table-light dark:bg-table-dark": - (cellWrapper === CELL_WRAPPER_HEAD || - cellWrapper === CELL_WRAPPER_FOOTER) && - mode === "alt-system", "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": cellWrapper === CELL_WRAPPER_BODY && mode === "alt-system", }); diff --git a/packages/ui-styles/src/plugins/tailwindcss/tokens.ts b/packages/ui-styles/src/plugins/tailwindcss/tokens.ts index 4eaf8b04..802449da 100644 --- a/packages/ui-styles/src/plugins/tailwindcss/tokens.ts +++ b/packages/ui-styles/src/plugins/tailwindcss/tokens.ts @@ -95,9 +95,13 @@ export default { /** * Table tokens */ + "table-head-dark": colors.gray[950], + "table-head-light": colors.gray[100], + "table-dark": colors.gray[700], "table-dark-odd": colors.gray[800], "table-dark-even": colors.gray[900], + "table-light": colors.gray[100], "table-light-odd": colors.gray[200], "table-light-even": colors.gray[300],