asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(dashboard): Add safe zone around link Table rows (#8058)

Browse Source 
**What**
- After adding Table rows as links there was an issue where clicking close to a Checkbox in a row would click the link. This PR adds a safe zone around the Checkboxes, so you don't end up navigating when trying to select a row.

![image](https://github.com/medusajs/medusa/assets/45367945/7091d6d5-665d-41c7-8b2b-63244fef73b2)

RESOLVES CORE-2566
This commit is contained in:
Kasper Fabricius Kristensen
2024-07-10 12:34:11 +02:00
committed by GitHub
parent 046a34bdfc
commit 04ec8e758f
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
View File

@@ -140,7 +140,7 @@ export const DataTableRoot = <TData,>({
<Table.Row
key={headerGroup.id}
className={clx({
"border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
"relative border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
hasActions,
"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
hasSelect,
@@ -171,7 +171,7 @@ export const DataTableRoot = <TData,>({
: undefined,
}}
className={clx({
"bg-ui-bg-base sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
"bg-ui-bg-base sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
isStickyHeader,
"left-[68px]":
isStickyHeader && hasSelect && !isSelectHeader,
@@ -206,7 +206,7 @@ export const DataTableRoot = <TData,>({
key={row.id}
data-selected={row.getIsSelected()}
className={clx(
"transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
"transition-fg group/row group relative [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
"has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover",
{
"bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
@@ -241,23 +241,27 @@ export const DataTableRoot = <TData,>({
? row.depth * 14 + 24
: undefined
const hasLeftOfsset =
isStickyCell && hasSelect && !isSelectCell
const Inner = flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
const isTabableLink = index === 0 && !!to
const isTabableLink = isFirstCell && !!to
const shouldRenderAsLink = !!to && !isSelectCell
return (
<Table.Cell
key={cell.id}
className={clx({
"bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
"!pl-0 !pr-0": shouldRenderAsLink,
"bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
isStickyCell,
"bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
isOdd && isStickyCell,
"left-[68px]":
isStickyCell && hasSelect && !isSelectCell,
"bottom-0 left-[68px] top-0": hasLeftOfsset,
"after:bg-ui-border-base":
showStickyBorder && isStickyCell && !isSelectCell,
"!bg-ui-bg-disabled !hover:bg-ui-bg-disabled":
@@ -269,14 +273,23 @@ export const DataTableRoot = <TData,>({
: undefined,
}}
>
{to ? (
{shouldRenderAsLink ? (
<Link
to={to}
className="outline-none"
className="size-full outline-none"
data-row-link
tabIndex={isTabableLink ? 0 : -1}
>
{Inner}
<div
className={clx(
"flex size-full items-center pr-6",
{
"pl-6": isTabableLink && !hasLeftOfsset,
}
)}
>
{Inner}
</div>
</Link>
) : (
Inner