Skip to content

fix(Table): show row hover gradient when only hoverActions is passed (closes #3281)#3341

Open
Mrsandeep27 wants to merge 1 commit intorazorpay:masterfrom
Mrsandeep27:fix/table-hover-actions-gradient
Open

fix(Table): show row hover gradient when only hoverActions is passed (closes #3281)#3341
Mrsandeep27 wants to merge 1 commit intorazorpay:masterfrom
Mrsandeep27:fix/table-hover-actions-gradient

Conversation

@Mrsandeep27
Copy link
Copy Markdown

Context

Closes #3281 — reported by @anuraghazra.

The row hover gradient on `TableRow` was gated behind `Boolean(onHover) || Boolean(onClick)` only. Tables that used hover-revealed actions without a click or hover handler (`hoverActions` alone) saw the actions appear on hover but no underlying row highlight — the row looked static while the actions popped in, which is visually inconsistent with how hoverable rows normally read.

Root cause

`packages/blade/src/components/Table/TableBody.web.tsx` line 394 (before):

```tsx
$isHoverable={isDisabled ? false : Boolean(onHover) || Boolean(onClick)}
```

The hover-state CSS block at line 283-293 only applies when `$isHoverable || $isSelectable` is true. A row with `hoverActions` but no `onHover`/`onClick` and no selection → neither condition fires → no gradient.

Fix

Include `hoverActions` in the `$isHoverable` computation:

```tsx
$isHoverable={
isDisabled ? false : Boolean(onHover) || Boolean(onClick) || Boolean(hoverActions)
}
```

One-line change. Hoverable disabled rows stay non-hoverable (the `isDisabled` short-circuit is preserved).

Scope

  • ✅ Primary bug — hoverAction now triggers the row gradient.
  • ⏭️ Not in this PR — disabled-row hover (also called out by @anuraghazra in the issue comment): the current `&:hover:not(.disabled-row)` selector intentionally excludes disabled rows so they don't appear interactive. Before we punch a hole in that, it'd be good to confirm the intended UX — should a disabled row that has hoverActions show a different (muted) hover background, or stay flat? Happy to follow up in a separate PR once the direction is decided.

Test plan

  • Open `Table` Storybook docs (`TableHoverActions.stories.tsx`) — rows already pass `hoverActions`. Confirm the gradient now appears on hover without adding `onHover`/`onClick`.
  • Existing `onHover` / `onClick` stories unchanged — rows still hover as before.
  • Disabled rows with `hoverActions` remain non-hoverable (to be revisited per scope note above).
  • No existing tests break (hover-related tests in `Table.web.test.tsx` continue to pass; snapshots unaffected because the condition only changes when `hoverActions` is present without `onHover`/`onClick`).

Checklist

  • Add changeset (`patch`)
  • Single-line scope, no behavioural change for existing prop combinations

🤖 Generated with Claude Code

A TableRow's $isHoverable flag was computed from Boolean(onHover) ||
Boolean(onClick) only, so rows that passed hoverActions without either
callback rendered the actions on hover but no background gradient under
them — the row looked static while actions popped in.

Include hoverActions in the hoverable check:
  $isHoverable = !isDisabled &&
                 (Boolean(onHover) || Boolean(onClick) || Boolean(hoverActions))

Closes razorpay#3281

Co-Authored-By: Claude <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 19, 2026

🦋 Changeset detected

Latest commit: 29e1320

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 29e1320:

Sandbox Source
razorpay/blade: basic Configuration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table: hoverAction doesn't have linear-gradient unless we also add onHover

1 participant