Improved table cell links

near · Nov 20, 2024 · b8ac905 · b8ac905
1 parent 6e5fa3e
commit b8ac905
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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
@@ -257,7 +257,7 @@ type CellProps = ComponentPropsWithRef<'td'> & {
 
 export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
   ({ 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<HTMLTableCellElement, CellProps>(
         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<HTMLTableCellElement, CellProps>(
         onKeyDown={onKeyDown}
       >
         {href ? (
-          <Link href={href} className={s.cellAnchor} target={target}>
-            {children}
-          </Link>
+          <>
+            <Link href={href} className={s.cellAnchor} target={target}>
+              {children}
+            </Link>
+
+            <span className={s.cellAnchorHiddenChildren} aria-hidden="true">
+              {children}
+            </span>
+          </>
         ) : (
           children
         )}

diff --git 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 &,