Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix(table) better header and footer contrast in dark mode #440

Merged
merged 5 commits into from
Mar 20, 2024
Merged

Fix(table) better header and footer contrast in dark mode #440

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dab6aba
fix(Table): better header and footer contrast in dark mode
aversini Mar 19, 2024
02a339d
update
aversini Mar 20, 2024
270053d
Update Table.stories.tsx
aversini Mar 20, 2024
cafacab
Update utilities.ts
aversini Mar 20, 2024
c4dfb95
Update Table.test.tsx
aversini Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 13 additions & 35 deletions packages/documentation/src/Components/Table.stories.tsx
View file
Open in desktop
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",
};
39 changes: 17 additions & 22 deletions packages/ui-components/src/components/Table/utilities.ts
View file
Open in desktop
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
Open in desktop
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
Loading