Skip to content

Commit

Permalink
Fix(table) better header and footer contrast in dark mode (#440)
Browse files Browse the repository at this point in the history 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
  • Loading branch information
@aversini
aversini authored Mar 20, 2024
1 parent e9ccc97 commit a0c261f
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 80 deletions.
48 changes: 13 additions & 35 deletions packages/documentation/src/Components/Table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export const WithAction: Story<any> = (args) => {
noBorder
label="Restore chat"
mode="light"
focusMode="alt-system"
onClick={() => {}}
>
<IconRestore className="h-3 w-3" />
Expand All @@ -123,6 +124,7 @@ export const WithAction: Story<any> = (args) => {
noBorder
label="Delete chat"
mode="light"
focusMode="alt-system"
onClick={() => {}}
>
<div className="text-red-400">
Expand All @@ -135,20 +137,13 @@ export const WithAction: Story<any> = (args) => {
);
})}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3} className="text-center uppercase">
hello footer
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
</div>
);
};

export const WithStickyHeader: Story<any> = (args) => {
export const Sticky: Story<any> = (args) => {
const data = [
{
id: 1,
Expand Down Expand Up @@ -197,13 +192,13 @@ export const WithStickyHeader: Story<any> = (args) => {
return (
<div className="min-h-10">
<div className="flex flex-wrap gap-2">
<Table maxHeight="285px" stickyHeader stickyFooter {...args}>
<Table {...args}>
<TableHead className="uppercase">
<TableRow>
<TableCell scope="col">Date</TableCell>
<TableCell scope="col">First message</TableCell>
<TableCell scope="col">Question</TableCell>
<TableCell className="text-right" scope="col">
Actions
Answer
</TableCell>
</TableRow>
</TableHead>
Expand All @@ -216,37 +211,15 @@ export const WithStickyHeader: Story<any> = (args) => {
{row.timestamp}
</TableCell>
<TableCell>{row.character}</TableCell>

<TableCell>
<div className="flex justify-end gap-2">
<ButtonIcon
noBorder
label="Restore chat"
mode="light"
onClick={() => {}}
>
<IconRestore className="h-3 w-3" />
</ButtonIcon>
<ButtonIcon
noBorder
label="Delete chat"
mode="light"
onClick={() => {}}
>
<div className="text-red-400">
<IconDelete className="h-3 w-3" monotone />
</div>
</ButtonIcon>
</div>
</TableCell>
<TableCell className="text-right">{row.actor}</TableCell>
</TableRow>
);
})}
</TableBody>

<TableFooter>
<TableRow>
<TableCell colSpan={3} className="text-center uppercase">
<TableCell colSpan={3} className="py-3 text-center uppercase">
hello footer
</TableCell>
</TableRow>
Expand All @@ -256,3 +229,8 @@ export const WithStickyHeader: Story<any> = (args) => {
</div>
);
};
Sticky.args = {
stickyHeader: true,
stickyFooter: true,
maxHeight: "260px",
};
31 changes: 8 additions & 23 deletions packages/ui-components/src/components/Table/__tests__/Table.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, [
Expand Down Expand Up @@ -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, [
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
39 changes: 17 additions & 22 deletions packages/ui-components/src/components/Table/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
};
Expand All @@ -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",
});
};
Expand All @@ -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",
});
Expand Down
4 changes: 4 additions & 0 deletions packages/ui-styles/src/plugins/tailwindcss/tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down

0 comments on commit a0c261f

Please sign in to comment.