Skip to content

fix(table): match header and body cell padding for size=sm (#219) #220

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

Open
rohitmahajan880 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(table): match header and body cell padding for size=sm (#219) #220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 19 additions & 3 deletions components/application/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,13 @@ const TableHeader = <T extends object>({ columns, children, bordered = true, cla
}
>
{selectionBehavior === "toggle" && (
<AriaColumn className={cx("relative py-2 pr-0 pl-4", size === "sm" ? "w-9 md:pl-5" : "w-11 md:pl-6")}>
<AriaColumn
className={cx(
"relative py-2 pr-0 pl-4",
// Match the body selection cell width so header/body stay aligned.
size === "sm" ? "w-9 md:pl-5" : "w-11 md:pl-6",
)}
>
{selectionMode === "multiple" && (
<div className="flex items-start">
<Checkbox slot="selection" size="md" />
Expand All @@ -170,14 +176,17 @@ interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTabl
}

const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadProps) => {
const { size } = useContext(TableContext);
const { selectionBehavior } = useTableOptions();

return (
<AriaColumn
{...props}
className={(state) =>
cx(
"relative p-0 px-6 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
"relative p-0 py-2 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
// FIX #219: keep header horizontal padding in lockstep with TableCell below.
size === "sm" ? "px-5" : "px-6",
selectionBehavior === "toggle" && "nth-2:pl-3",
state.allowsSorting && "cursor-pointer",
typeof className === "function" ? className(state) : className,
Expand Down Expand Up @@ -241,7 +250,13 @@ const TableRow = <T extends object>({ columns, children, className, highlightSel
}
>
{selectionBehavior === "toggle" && (
<AriaCell className={cx("relative py-2 pr-0 pl-4", size === "sm" ? "md:pl-5" : "md:pl-6")}>
<AriaCell
className={cx(
"relative py-2 pr-0 pl-4",
// Keep body selection cell width aligned with the header selection column.
size === "sm" ? "w-9 md:pl-5" : "w-11 md:pl-6",
)}
>
<div className="flex items-end">
<Checkbox slot="selection" size="md" />
</div>
Expand Down Expand Up @@ -271,6 +286,7 @@ const TableCell = ({ className, children, size: sizeProp, ...props }: TableCellP
className={(state) =>
cx(
"relative text-sm text-tertiary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
// FIX #219: horizontal padding must match TableHead above.
size === "sm" && "px-5 py-3",
size === "md" && "px-6 py-4",

Expand Down