fix(ui): make Table row a bg consumer for correct hover/selection states

Table rows now participate in the bg provider/consumer system, using
the appropriate neutral token level based on their container background.
On a neutral-1 surface (e.g. inside a Card), rows step up to neutral-2
tokens for hover, selected, pressed, and disabled states.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/fix-table-row-bg-consumer.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Table row hover, selected, pressed, and disabled background states to use the correct neutral token level based on the container background.
+
+**Affected components:** Table

packages/ui/src/components/Table/Table.module.css

@@ -121,6 +121,60 @@
       background-color: var(--bui-bg-neutral-1-pressed);
     }
 
+    &[data-on-bg='neutral-1'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-2-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-2-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-2-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-2-disabled);
+      }
+    }
+
+    &[data-on-bg='neutral-2'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-3-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-3-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-3-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-3-disabled);
+      }
+    }
+
+    &[data-on-bg='neutral-3'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-4-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-4-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-4-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-4-disabled);
+      }
+    }
+
     &[data-href],
     &[data-selection-mode],
     &[data-react-aria-pressable='true'] {

packages/ui/src/components/Table/components/Row.tsx

@@ -30,7 +30,7 @@ import { Flex } from '../../Flex';
 
 /** @public */
 export function Row<T extends object>(props: RowProps<T>) {
-  const { ownProps, restProps, analytics } = useDefinition(
+  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(
     RowDefinition,
     props,
   );
@@ -85,6 +85,7 @@ export function Row<T extends object>(props: RowProps<T>) {
     <ReactAriaRow
       href={href}
       {...restProps}
+      {...dataAttributes}
       target={effectiveTarget}
       rel={effectiveRel}
       className={clsx(classes.root, restProps.className)}

packages/ui/src/components/Table/definition.ts

@@ -91,6 +91,7 @@ export const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({
 export const RowDefinition = defineComponent<RowOwnProps>()({
   styles,
   analytics: true,
+  bg: 'consumer',
   classNames: {
     root: 'bui-TableRow',
     cell: 'bui-TableCell',