Skip to content

fix(catalyst): Update data-disabled selectors to data-[disabled]#2821

Merged
jordanarldt merged 1 commit into
canaryfrom
fix/fix-data-disabled-classes
Jan 12, 2026
Merged

fix(catalyst): Update data-disabled selectors to data-[disabled]#2821
jordanarldt merged 1 commit into
canaryfrom
fix/fix-data-disabled-classes

Conversation

@jordanarldt

@jordanarldt jordanarldt commented Jan 12, 2026

Copy link
Copy Markdown
Contributor

What/Why?

When working on my other work, I noticed that certain components weren't showing their disabled state correctly. This is due to the tailwind selectors not being correct.

To fix this, all data-disabled: selectors must be updated to data-[disabled]

Testing

Manual testing

Before fix

The "Share" menu item is disabled, but the UI is not reflecting it other than the cursor not hovering:

Screen.Recording.2026-01-12.at.4.12.15.PM.mov

After fix:

The disabled "Share" menu item is shown as expected:

Screen.Recording.2026-01-12.at.4.17.28.PM.mov

Migration

Updated Tailwind CSS class selectors from data-disabled: to data-[disabled]: in the following components:

  • vibes/soul/form/button-radio-group/index.tsx
  • vibes/soul/form/card-radio-group/index.tsx
  • vibes/soul/form/radio-group/index.tsx
  • vibes/soul/form/rating-radio-group/index.tsx
  • vibes/soul/form/swatch-radio-group/index.tsx
  • vibes/soul/form/switch/index.tsx
  • vibes/soul/primitives/dropdown-menu/index.tsx

If you have customized any of these components, update your class names:

- data-disabled:pointer-events-none data-disabled:opacity-50
+ data-[disabled]:pointer-events-none data-[disabled]:opacity-50

This change ensures proper styling of disabled states using the correct Tailwind CSS data attribute syntax.

@changeset-bot

changeset-bot Bot commented Jan 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a684daa

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

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core 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

@vercel

vercel Bot commented Jan 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
catalyst Ready Ready Preview, Comment Jan 12, 2026 10:23pm

@jordanarldt
jordanarldt force-pushed the fix/fix-data-disabled-classes branch from 65609c6 to 1736063 Compare January 12, 2026 22:19
@jordanarldt
jordanarldt force-pushed the fix/fix-data-disabled-classes branch from 1736063 to a684daa Compare January 12, 2026 22:20
@jordanarldt
jordanarldt marked this pull request as ready for review January 12, 2026 22:20
@jordanarldt
jordanarldt requested a review from a team January 12, 2026 22:20
@jordanarldt
jordanarldt added this pull request to the merge queue Jan 12, 2026
Merged via the queue into canary with commit e5a03f6 Jan 12, 2026
8 checks passed
@jordanarldt
jordanarldt deleted the fix/fix-data-disabled-classes branch January 12, 2026 23:11
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.

2 participants