Skip to content

Fix: replace removed --bui-bg-tint tokens in Table component (fixes #33292) - #33363

Merged
cdedreuille merged 1 commit into
backstage:masterfrom
shivamtiwari3:fix/table-replace-removed-bui-bg-tint-tokens
Mar 17, 2026
Merged

Fix: replace removed --bui-bg-tint tokens in Table component (fixes #33292)#33363
cdedreuille merged 1 commit into
backstage:masterfrom
shivamtiwari3:fix/table-replace-removed-bui-bg-tint-tokens

Conversation

@shivamtiwari3

@shivamtiwari3 shivamtiwari3 commented Mar 16, 2026

Copy link
Copy Markdown
Contributor

Hey, I just made a Pull Request!

Fixes #33292.

The Table component's TableRow states (hover, selected/pressed, disabled) were using --bui-bg-tint-hover, --bui-bg-tint-pressed, and --bui-bg-tint-disabled CSS tokens. These tokens were removed from the design system on 2026-01-30 in favour of the --bui-bg-neutral-* family, but Table.module.css was missed during the migration. As a result, hovering table rows produces no visual feedback.

Root Cause

In packages/ui/src/components/Table/Table.module.css (lines 96, 100, 104, 114), TableRow state styles referenced --bui-bg-tint-hover, --bui-bg-tint-pressed, and --bui-bg-tint-disabled. The CHANGELOG (packages/ui/CHANGELOG.md) documents the removal and the replacement mapping:

  • --bui-bg-tint-hover → --bui-bg-neutral-on-surface-0-hover (later renamed --bui-bg-neutral-1-hover)
  • --bui-bg-tint-pressed → --bui-bg-neutral-on-surface-0-pressed (later renamed --bui-bg-neutral-1-pressed)
  • --bui-bg-tint-disabled → --bui-bg-neutral-on-surface-0-disabled (later renamed --bui-bg-neutral-1-disabled)

Solution

Replace all four occurrences in Table.module.css with the current --bui-bg-neutral-1-* tokens, matching the pattern used by other interactive components (Button, ButtonLink, ButtonIcon, Accordion, etc.).

Testing

This is a CSS-only change. Visual verification:

  1. Visit https://backstage.io/storybook/?path=/story/backstage-ui-table-dev--basic-local-data
  2. Hover a table row — background should now change
  3. Select a row — selected state background should be visible

✔️ Checklist

  • A changeset describing the change and affected packages.
  • Added or updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • All your commits have a Signed-off-by line in the message.

@shivamtiwari3
Fix: replace removed --bui-bg-tint tokens in Table component (fixes b…
bc42b60 
…ackstage#33292)

Root cause: The --bui-bg-tint-* CSS tokens were removed from the design system
in favour of --bui-bg-neutral-* tokens, but Table.module.css was not updated
during the migration, leaving row hover, selected, pressed, and disabled states
with no visual effect.

Fix: Replace --bui-bg-tint-hover/pressed/disabled with the equivalent
--bui-bg-neutral-1-hover/pressed/disabled tokens, matching the migration
mapping documented in the CHANGELOG.

Signed-off-by: shivamtiwari3 <33183708+shivamtiwari3@users.noreply.github.com>
Copilot AI review requested due to automatic review settings March 16, 2026 05:11
@shivamtiwari3
shivamtiwari3 requested a review from a team as a code owner March 16, 2026 05:11
@backstage-goalie

backstage-goalie Bot commented Mar 16, 2026

Copy link
Copy Markdown
Contributor

Changed Packages

Package Name Package Path Changeset Bump Current Version
@backstage/ui packages/ui patch v0.13.0-next.2

@backstage-goalie backstage-goalie Bot added size:small Small pull requests receive a slightly higher priority for reviews. waiting-for:review The PR needs a review and will be visible in the review queue unless already assigned an owner. labels Mar 16, 2026
Copilot AI reviewed Mar 16, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a visual regression in the @backstage/ui Table component where row hover, selected, pressed, and disabled background states had no effect because they referenced removed --bui-bg-tint-* CSS tokens. The fix replaces them with the current --bui-bg-neutral-1-* token family, consistent with other interactive components like Button, ButtonLink, and ButtonIcon.

Changes:

  • Replaced four removed --bui-bg-tint-* CSS token references in Table.module.css with their --bui-bg-neutral-1-* equivalents.
  • Added a changeset file describing the patch.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/ui/src/components/Table/Table.module.css Replaced --bui-bg-tint-hover, --bui-bg-tint-pressed, and --bui-bg-tint-disabled with --bui-bg-neutral-1-hover, --bui-bg-neutral-1-pressed, and --bui-bg-neutral-1-disabled
.changeset/fix-table-bui-bg-tint-tokens.md Changeset describing the patch for @backstage/ui

cdedreuille
cdedreuille approved these changes Mar 17, 2026
View reviewed changes

@cdedreuille cdedreuille left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot 🙏 We will have to do a follow up to get our table row to adapt to any containers but as a first fix this is fine.

@cdedreuille
cdedreuille merged commit 57726bf into backstage:master Mar 17, 2026
34 of 35 checks passed
@backstage-goalie backstage-goalie Bot added waiting-for:merge The PR has been approved and is awaiting merge. and removed waiting-for:review The PR needs a review and will be visible in the review queue unless already assigned an owner. labels Mar 17, 2026
@github-actions

github-actions Bot commented Mar 17, 2026

Copy link
Copy Markdown
Contributor

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.49.0 release, scheduled for Tue, 17 Mar 2026.

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

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@cdedreuille cdedreuille cdedreuille approved these changes

Assignees

No one assigned

Labels

size:small Small pull requests receive a slightly higher priority for reviews. waiting-for:merge The PR has been approved and is awaiting merge.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

@backstage/ui Table component still uses removed --bui-bg-tint CSS tokens

3 participants

@shivamtiwari3 @cdedreuille