diff --git a/package.json b/package.json index e1ee5cf..1479ab1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@near-pagoda/ui", - "version": "2.1.0", + "version": "2.1.1", "description": "A React component library that implements the official NEAR design system.", "license": "MIT", "repository": { diff --git a/src/components/Table/Table.module.scss b/src/components/Table/Table.module.scss index d6e5ab7..c10de90 100644 --- a/src/components/Table/Table.module.scss +++ b/src/components/Table/Table.module.scss @@ -85,7 +85,7 @@ .row { &:hover { td { - background: var(--sand-3); + background: var(--sand-2); } } } @@ -140,6 +140,7 @@ vertical-align: middle; transition: var(--transitions); font: var(--text-s); + position: relative; &:first-child { border-top-left-radius: var(--table-border-radius); @@ -157,7 +158,7 @@ outline: var(--table-default-outline); &:hover { - background: var(--sand-4) !important; + background: var(--violet-3) !important; } &:focus-visible, @@ -170,16 +171,20 @@ pointer-events: none; opacity: 0.5; } - - &[data-link='true'] { - padding: 0; - } } .cellAnchor { - display: block; + display: flex; + align-items: center; + position: absolute; + inset: 0; padding: var(--table-half-padding); color: currentColor; text-decoration: none; outline: none; } + +.cellAnchorHiddenChildren { + opacity: 0; + pointer-events: none; +} diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index a9018c1..24d3fff 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -257,7 +257,7 @@ type CellProps = ComponentPropsWithRef<'td'> & { export const Cell = forwardRef( ({ children, disabled, href, spanAllColumns, target, ...props }, ref) => { - const clickable = !!props.onClick; + const clickable = !!props.onClick || !!href; const isButton = !!props.onClick && !href; const role = isButton ? 'button' : undefined; const tabIndex = isButton ? (disabled ? -1 : 0) : undefined; @@ -277,7 +277,6 @@ export const Cell = forwardRef( className={s.cell} aria-disabled={disabled} data-clickable={clickable} - data-link={!!href} role={role} tabIndex={tabIndex} ref={ref} @@ -286,9 +285,15 @@ export const Cell = forwardRef( onKeyDown={onKeyDown} > {href ? ( - - {children} - + <> + + {children} + + + + ) : ( children )} diff --git a/src/components/Text.module.scss b/src/components/Text.module.scss index 215cd5d..d49e2c8 100644 --- a/src/components/Text.module.scss +++ b/src/components/Text.module.scss @@ -26,6 +26,8 @@ a.text { &[data-parent-clickable='true'] { [role='button']:hover &, [role='button']:focus-visible &, + [data-clickable='true']:hover &, + [data-clickable='true']:focus-visible &, button:hover &, button:focus-visible &, a:hover &,