diff --git a/.changeset/fix-table-row-cursor-non-interactive.md b/.changeset/fix-table-row-cursor-non-interactive.md new file mode 100644 index 0000000000..cf83ea6631 --- /dev/null +++ b/.changeset/fix-table-row-cursor-non-interactive.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Table rows showing a pointer cursor when not interactive. Rows now only show `cursor: pointer` when they have an `href`, are selectable, or are pressable. + +**Affected components:** Table diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css index 0faa256e06..9663fd9aa8 100644 --- a/packages/ui/src/components/Table/Table.module.css +++ b/packages/ui/src/components/Table/Table.module.css @@ -83,6 +83,7 @@ .bui-TableRow { border-bottom: 1px solid var(--bui-border-2); transition: color 0.2s ease-in-out; + cursor: default; &:hover { background-color: var(--bui-bg-tint-hover); @@ -100,6 +101,8 @@ background-color: var(--bui-bg-tint-disabled); } + &[data-href], + &[data-selection-mode], &[data-react-aria-pressable='true'] { cursor: pointer; } diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx index 54e2ea3a77..3da46b3eaa 100644 --- a/packages/ui/src/components/Table/components/Row.tsx +++ b/packages/ui/src/components/Table/components/Row.tsx @@ -37,14 +37,18 @@ export function Row(props: RowProps) { ); const { classes, columns, children, href } = ownProps; const hasInternalHref = !!href && !isExternalLink(href); + const hasInteraction = !!restProps.onAction || !!href; - const handlePress = () => { - if (href) { - analytics.captureEvent('click', href, { - attributes: { to: String(href) }, - }); - } - }; + const handlePress = hasInteraction + ? () => { + restProps.onAction?.(); + if (href) { + analytics.captureEvent('click', href, { + attributes: { to: String(href) }, + }); + } + } + : undefined; let { selectionBehavior, selectionMode } = useTableOptions(); @@ -70,10 +74,7 @@ export function Row(props: RowProps) { className={classes.root} data-react-aria-pressable={hasInternalHref ? 'true' : undefined} {...restProps} - onAction={() => { - restProps.onAction?.(); - handlePress(); - }} + onAction={handlePress} > {content}