Skip to content

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

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

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

Conversation

@jordanarldt
Copy link
Contributor

@jordanarldt jordanarldt commented Jan 12, 2026

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
Copy link

changeset-bot bot commented Jan 12, 2026

🦋 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
Copy link

vercel bot commented Jan 12, 2026

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 as a code owner 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