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

Author: jordanarldt

.changeset/soft-flies-sip.md

@@ -0,0 +1,26 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Fix data-disabled class selectors in UI components
+
+## 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:
+
+```diff
+- 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.

core/vibes/soul/form/button-radio-group/index.tsx

@@ -80,7 +80,7 @@ export const ButtonRadioGroup = React.forwardRef<
             <RadioGroupPrimitive.Item
               aria-label={option.label}
               className={clsx(
-                'data-disabled:pointer-events-none data-disabled:opacity-50 h-12 whitespace-nowrap rounded-full border px-4 font-body text-sm font-normal leading-normal transition-colors focus-visible:outline-0 focus-visible:ring-2',
+                'h-12 whitespace-nowrap rounded-full border px-4 font-body text-sm font-normal leading-normal transition-colors focus-visible:outline-0 focus-visible:ring-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
                 {
                   light:
                     'border-[var(--button-radio-group-light-unchecked-border,hsl(var(--contrast-100)))] focus-visible:ring-[var(--button-radio-group-light-focus,hsl(var(--primary)))] data-[state=checked]:bg-[var(--button-radio-group-light-checked-background,hsl(var(--foreground)))] data-[state=unchecked]:bg-[var(--button-radio-group-light-unchecked-background,hsl(var(--background)))] data-[state=checked]:text-[var(--button-radio-group-light-checked-text,hsl(var(--background)))] data-[state=unchecked]:text-[var(--button-radio-group-light-unchecked-text,hsl(var(--foreground)))] data-[state=unchecked]:hover:border-[var(--button-radio-group-light-unchecked-border-hover,hsl(var(--contrast-200)))] data-[state=unchecked]:hover:bg-[var(--button-radio-group-light-unchecked-background-hover,hsl(var(--contrast-100)))]',

core/vibes/soul/form/card-radio-group/index.tsx

@@ -82,7 +82,7 @@ export const CardRadioGroup = React.forwardRef<
             <RadioGroupPrimitive.Item
               aria-label={option.label}
               className={clsx(
-                'data-disabled:pointer-events-none data-disabled:opacity-50 relative flex h-12 w-full items-center overflow-hidden rounded-lg border font-body text-sm font-normal leading-normal transition-colors focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-[var(--card-radio-group-focus,hsl(var(--primary)))]',
+                'relative flex h-12 w-full items-center overflow-hidden rounded-lg border font-body text-sm font-normal leading-normal transition-colors focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-[var(--card-radio-group-focus,hsl(var(--primary)))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
                 {
                   light:
                     'border-[var(--card-radio-group-light-unchecked-border,hsl(var(--contrast-100)))] text-[var(--card-radio-group-light-unchecked-text,hsl(var(--foreground)))] data-[state=checked]:bg-[var(--card-radio-group-light-checked-background,hsl(var(--foreground)))] data-[state=unchecked]:bg-[var(--card-radio-group-light-unchecked-background,hsl(var(--background)))] data-[state=checked]:text-[var(--card-radio-group-light-checked-text,hsl(var(--background)))] data-[state=unchecked]:hover:border-[var(--card-radio-group-light-unchecked-border-hover,hsl(var(--contrast-200)))] data-[state=unchecked]:hover:bg-[var(--card-radio-group-light-unchecked-background-hover,hsl(var(--contrast-100)))]',

core/vibes/soul/form/radio-group/index.tsx

@@ -117,7 +117,7 @@ function RadioGroupItem({
           option.description !== undefined ? `${id}-label ${id}-description` : `${id}-label`
         }
         className={clsx(
-          'data-disabled:pointer-events-none data-disabled:opacity-50 size-5 cursor-default rounded-full border outline-none [&:disabled+label]:pointer-events-none [&:disabled+label]:opacity-50',
+          'size-5 cursor-default rounded-full border outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&:disabled+label]:pointer-events-none [&:disabled+label]:opacity-50',
           {
             light: 'bg-[var(--radio-group-light-background,hsl(var(--background)))]',
             dark: 'bg-[var(--radio-group-dark-background,hsl(var(--foreground)))]',

core/vibes/soul/form/rating-radio-group/index.tsx

@@ -101,7 +101,7 @@ export const RatingRadioGroup = React.forwardRef<
                   <RadioGroupPrimitive.Item
                     className={clsx(
                       'peer sr-only',
-                      'data-disabled:pointer-events-none data-disabled:opacity-50 transition-colors focus-visible:outline-0 focus-visible:ring-2',
+                      'transition-colors focus-visible:outline-0 focus-visible:ring-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
                       {
                         light:
                           'focus-visible:ring-[var(--rating-radio-group-focus,hsl(var(--primary)))]',

core/vibes/soul/form/swatch-radio-group/index.tsx

@@ -90,7 +90,7 @@ export const SwatchRadioGroup = React.forwardRef<
             <RadioGroupPrimitive.Item
               aria-label={option.label}
               className={clsx(
-                'data-disabled:pointer-events-none group relative box-content h-8 w-8 rounded-full border p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--swatch-radio-group-focus,hsl(var(--primary)))] [&:disabled>.disabled-icon]:grid',
+                'group relative box-content h-8 w-8 rounded-full border p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--swatch-radio-group-focus,hsl(var(--primary)))] data-[disabled]:pointer-events-none [&:disabled>.disabled-icon]:grid',
                 {
                   light:
                     'hover:border-[var(--swatch-radio-group-light-unchecked-border-hover,hsl(var(--contrast-200)))] data-[state=checked]:border-[var(--swatch-radio-group-light-checked-border,hsl(var(--foreground)))]',

core/vibes/soul/form/switch/index.tsx

@@ -49,7 +49,7 @@ export const Switch = ({
         aria-busy={loading}
         checked={checked}
         className={clsx(
-          '[&:not([data-loading])]:data-disabled:bg-contrast-100 data-disabled:cursor-not-allowed w-12 rounded-full border border-contrast-200 p-[3px] transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2',
+          'w-12 rounded-full border border-contrast-200 p-[3px] transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 data-[disabled]:cursor-not-allowed [&:not([data-loading])]:data-[disabled]:bg-contrast-100',
         )}
         data-loading={loading ? '' : undefined}
         disabled={disabled || loading}
@@ -59,7 +59,7 @@ export const Switch = ({
       >
         <SwitchPrimitive.Thumb
           className={clsx(
-            'data-disabled:bg-contrast-200 relative block h-5 w-5 overflow-hidden rounded-full transition-transform duration-100 data-[state=checked]:translate-x-full data-[state=unchecked]:bg-contrast-200',
+            'relative block h-5 w-5 overflow-hidden rounded-full transition-transform duration-100 data-[state=checked]:translate-x-full data-[disabled]:bg-contrast-200 data-[state=unchecked]:bg-contrast-200',
             {
               primary: 'bg-[var(--toggle-primary-background,hsl(var(--primary)))]',
               secondary: 'bg-[var(--toggle-secondary-background,hsl(var(--foreground)))]',

core/vibes/soul/primitives/dropdown-menu/index.tsx

@@ -103,7 +103,7 @@ export const DropdownMenu = ({
               <DropdownMenuPrimitive.Item
                 asChild={asChild ?? labelIsComponent}
                 className={clsx(
-                  'data-disabled:bg-contrast-100/50 data-disabled:text-contrast-300/95 data-disabled:cursor-not-allowed cursor-default rounded-lg bg-[var(--dropdown-menu-item-background,transparent)] px-3 py-2 font-[family-name:var(--dropdown-menu-item-font-family,var(--font-family-body))] text-sm font-medium outline-none transition-colors',
+                  'cursor-default rounded-lg bg-[var(--dropdown-menu-item-background,transparent)] px-3 py-2 font-[family-name:var(--dropdown-menu-item-font-family,var(--font-family-body))] text-sm font-medium outline-none transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:bg-contrast-100/50 data-[disabled]:text-contrast-300/95',
                   {
                     default:
                       'text-[var(--dropdown-menu-item-text,hsl(var(--contrast-500)))] ring-[var(--dropdown-menu-item-focus,hsl(var(--primary)))] [&:not([data-disabled])]:hover:bg-[var(--dropdown-menu-item-background-hover,hsl(var(--contrast-100)))] [&:not([data-disabled])]:hover:text-[var(--dropdown-menu-item-text-hover,hsl(var(--foreground)))] [&:not([data-disabled])]:data-[highlighted]:bg-[var(--dropdown-menu-item-background-hover,hsl(var(--contrast-100)))] [&:not([data-disabled])]:data-[highlighted]:text-[var(--dropdown-menu-item-text-hover,hsl(var(--foreground)))]',