refactor: prefer native [disabled] over [data-disabled] for styles ta…

…rgeting disabled state
Atom-Learning · Feb 19, 2024 · 6518e3d · 6518e3d
1 parent b7481b0
commit 6518e3d
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 130 deletions.
diff --git a/lib/src/components/accordion/AccordionTrigger.tsx b/lib/src/components/accordion/AccordionTrigger.tsx
@@ -29,11 +29,11 @@ const StyledTrigger = styled(Trigger, {
   cursor: 'pointer',
   bg: '$interactive2',
   color: '$interactiveForeground',
-  '&[data-disabled]': {
+  '&[disabled]': {
     opacity: 0.3,
     cursor: 'not-allowed'
   },
-  '&:not([data-disabled])': {
+  '&:not([disabled])': {
     '&:active, &:hover, &:focus-visible': {
       bg: '$interactive3'
     },

diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap
@@ -302,7 +302,7 @@ exports[`Accordion component renders an accordion 1`] = `
     transform: rotate(0deg);
   }
 
-  .c-cHXTzy {
+  .c-cdQaC {
     border: 0;
     padding-top: var(--space-3);
     padding-bottom: var(--space-3);
@@ -317,29 +317,29 @@ exports[`Accordion component renders an accordion 1`] = `
     color: var(--colors-interactiveForeground);
   }
 
-  .c-cHXTzy[data-disabled] {
+  .c-cdQaC[disabled] {
     opacity: 0.3;
     cursor: not-allowed;
   }
 
-  .c-cHXTzy:not([data-disabled]):active,
-  .c-cHXTzy:not([data-disabled]):hover,
-  .c-cHXTzy:not([data-disabled]):focus-visible {
+  .c-cdQaC:not([disabled]):active,
+  .c-cdQaC:not([disabled]):hover,
+  .c-cdQaC:not([disabled]):focus-visible {
     background: var(--colors-interactive3);
   }
 
-  .c-cHXTzy:not([data-disabled]):focus-visible {
+  .c-cdQaC:not([disabled]):focus-visible {
     outline: none;
     position: relative;
     z-index: 1;
     box-shadow: white 0px 0px 0px 2px, var(--colors-primary800) 0px 0px 0px 4px;
   }
 
-  .c-cHXTzy[data-state="open"] {
+  .c-cdQaC[data-state="open"] {
     border-radius: var(--radii-0) var(--radii-0) 0 0;
   }
 
-  .c-cHXTzy[data-state="closed"] {
+  .c-cdQaC[data-state="closed"] {
     border-radius: var(--radii-0);
   }
 
@@ -399,7 +399,7 @@ exports[`Accordion component renders an accordion 1`] = `
         aria-controls="radix-0"
         aria-disabled="true"
         aria-expanded="true"
-        class="c-cHXTzy t-dVJiaJ t-hwCMvs"
+        class="c-cdQaC t-dVJiaJ t-hwCMvs"
         data-radix-collection-item=""
         data-state="open"
         id="radix-1"
@@ -435,7 +435,7 @@ exports[`Accordion component renders an accordion 1`] = `
       <button
         aria-controls="radix-2"
         aria-expanded="false"
-        class="c-cHXTzy t-dVJiaJ t-hwCMvs"
+        class="c-cdQaC t-dVJiaJ t-hwCMvs"
         data-radix-collection-item=""
         data-state="closed"
         id="radix-3"

diff --git a/lib/src/components/chip-dismissible-group/__snapshots__/ChipDismissibleGroup.test.tsx.snap b/lib/src/components/chip-dismissible-group/__snapshots__/ChipDismissibleGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ChipDismissibleGroup component renders 1`] = `
     display: flex;
   }
 
-  .c-cDmpis {
+  .c-iCmdOp {
     padding-left: var(--space-2);
     padding-right: var(--space-2);
     border: 1px solid;
@@ -19,7 +19,7 @@ exports[`ChipDismissibleGroup component renders 1`] = `
     background: var(--colors-primary100);
   }
 
-  .c-cDmpis[data-disabled] {
+  .c-iCmdOp[disabled] {
     opacity: 0.3;
     pointer-events: none;
   }
@@ -137,19 +137,19 @@ exports[`ChipDismissibleGroup component renders 1`] = `
     gap: var(--space-2);
   }
 
-  .c-cDmpis-kIEsaE-size-md {
+  .c-iCmdOp-kIEsaE-size-md {
     height: var(--sizes-3);
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
   }
 
-  .c-cDmpis-kIEsaE-size-md::before {
+  .c-iCmdOp-kIEsaE-size-md::before {
     content: '';
     margin-bottom: -0.4056em;
     display: table;
   }
 
-  .c-cDmpis-kIEsaE-size-md::after {
+  .c-iCmdOp-kIEsaE-size-md::after {
     content: '';
     margin-top: -0.4056em;
     display: table;
@@ -204,7 +204,7 @@ exports[`ChipDismissibleGroup component renders 1`] = `
     class="c-dhzjXW c-dhzjXW-ejCoEP-direction-row c-dhzjXW-XefLA-wrap-wrap c-dhzjXW-kaVYFn-gap-2"
   >
     <div
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-efCiES"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-efCiES"
     >
       <span
         class="c-eOdeXL"
@@ -230,7 +230,7 @@ exports[`ChipDismissibleGroup component renders 1`] = `
       </button>
     </div>
     <div
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-efCiES"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-efCiES"
       data-disabled=""
     >
       <span

diff --git a/lib/src/components/chip-toggle-group/__snapshots__/ChipToggleGroup.test.tsx.snap b/lib/src/components/chip-toggle-group/__snapshots__/ChipToggleGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ChipToggleGroup component renders 1`] = `
     display: flex;
   }
 
-  .c-cDmpis {
+  .c-iCmdOp {
     padding-left: var(--space-2);
     padding-right: var(--space-2);
     border: 1px solid;
@@ -19,7 +19,7 @@ exports[`ChipToggleGroup component renders 1`] = `
     background: var(--colors-primary100);
   }
 
-  .c-cDmpis[data-disabled] {
+  .c-iCmdOp[disabled] {
     opacity: 0.3;
     pointer-events: none;
   }
@@ -99,19 +99,19 @@ exports[`ChipToggleGroup component renders 1`] = `
     gap: var(--space-2);
   }
 
-  .c-cDmpis-kIEsaE-size-md {
+  .c-iCmdOp-kIEsaE-size-md {
     height: var(--sizes-3);
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
   }
 
-  .c-cDmpis-kIEsaE-size-md::before {
+  .c-iCmdOp-kIEsaE-size-md::before {
     content: '';
     margin-bottom: -0.4056em;
     display: table;
   }
 
-  .c-cDmpis-kIEsaE-size-md::after {
+  .c-iCmdOp-kIEsaE-size-md::after {
     content: '';
     margin-top: -0.4056em;
     display: table;
@@ -135,7 +135,7 @@ exports[`ChipToggleGroup component renders 1`] = `
   >
     <button
       aria-pressed="true"
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-bxUhlk"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-bxUhlk"
       data-orientation="horizontal"
       data-radix-collection-item=""
       data-state="on"
@@ -160,7 +160,7 @@ exports[`ChipToggleGroup component renders 1`] = `
     </button>
     <button
       aria-pressed="true"
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-bxUhlk"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-bxUhlk"
       data-disabled=""
       data-orientation="horizontal"
       data-radix-collection-item=""
@@ -187,7 +187,7 @@ exports[`ChipToggleGroup component renders 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-bxUhlk"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-bxUhlk"
       data-orientation="horizontal"
       data-radix-collection-item=""
       data-state="off"
@@ -212,7 +212,7 @@ exports[`ChipToggleGroup component renders 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md c-bxUhlk"
+      class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md c-bxUhlk"
       data-disabled=""
       data-orientation="horizontal"
       data-radix-collection-item=""

diff --git a/lib/src/components/chip/Chip.tsx b/lib/src/components/chip/Chip.tsx
@@ -68,7 +68,7 @@ export const StyledRoot = styled(Flex, {
   borderColor: '$primary800',
   color: '$primary900',
   bg: '$primary100',
-  '&[data-disabled]': {
+  '&[disabled]': {
     opacity: '0.3',
     pointerEvents: 'none'
   },

diff --git a/lib/src/components/chip/__snapshots__/Chip.test.tsx.snap b/lib/src/components/chip/__snapshots__/Chip.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Chip component renders 1`] = `
     display: flex;
   }
 
-  .c-cDmpis {
+  .c-iCmdOp {
     padding-left: var(--space-2);
     padding-right: var(--space-2);
     border: 1px solid;
@@ -19,7 +19,7 @@ exports[`Chip component renders 1`] = `
     background: var(--colors-primary100);
   }
 
-  .c-cDmpis[data-disabled] {
+  .c-iCmdOp[disabled] {
     opacity: 0.3;
     pointer-events: none;
   }
@@ -51,19 +51,19 @@ exports[`Chip component renders 1`] = `
 }
 
 @media  {
-  .c-cDmpis-kIEsaE-size-md {
+  .c-iCmdOp-kIEsaE-size-md {
     height: var(--sizes-3);
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
   }
 
-  .c-cDmpis-kIEsaE-size-md::before {
+  .c-iCmdOp-kIEsaE-size-md::before {
     content: '';
     margin-bottom: -0.4056em;
     display: table;
   }
 
-  .c-cDmpis-kIEsaE-size-md::after {
+  .c-iCmdOp-kIEsaE-size-md::after {
     content: '';
     margin-top: -0.4056em;
     display: table;
@@ -86,7 +86,7 @@ exports[`Chip component renders 1`] = `
 
 <div>
   <div
-    class="c-dhzjXW c-cDmpis c-cDmpis-kIEsaE-size-md"
+    class="c-dhzjXW c-iCmdOp c-iCmdOp-kIEsaE-size-md"
   >
     <span
       class="c-eOdeXL"

diff --git a/lib/src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts b/lib/src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts
@@ -22,11 +22,11 @@ export const navigationMenuVerticalItemStyles = {
   '&[data-state=open]': {
     '--navigation-menu-vertical-item-font-weight': 600
   },
-  '&[data-disabled]': {
+  '&[disabled]': {
     opacity: 0.3,
     cursor: 'not-allowed'
   },
-  '&:not([data-disabled])': {
+  '&:not([disabled])': {
     '&:hover': {
       bg: '$backgroundHover'
     },