Universally update style hooks from data-attr='true' to data-attr

mui · Oct 22, 2024 · e1134df · e1134df
1 parent fc14621
commit e1134df
Show file tree

Hide file tree

Showing 33 changed files with 99 additions and 99 deletions.
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -132,7 +132,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
     outline-offset: 3px;
   }
 
-  &[data-dragging='true'] {
+  &[data-dragging] {
     background-color: pink;
   }
 
@@ -141,7 +141,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
     background-color: ${grey[600]};
   }
 
-  .dark &[data-dragging='true'] {
+  .dark &[data-dragging] {
     background-color: pink;
   }
 `;
@@ -150,7 +150,7 @@ const Label = styled(BaseLabel)`
   cursor: unset;
   font-weight: bold;
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     color: ${grey[600]};
   }
 `;
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -126,7 +126,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
     outline-offset: 3px;
   }
 
-  &[data-dragging='true'] {
+  &[data-dragging] {
     background-color: pink;
   }
 
@@ -135,7 +135,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
     background-color: ${grey[600]};
   }
 
-  .dark &[data-dragging='true'] {
+  .dark &[data-dragging] {
     background-color: pink;
   }
 `;
@@ -144,7 +144,7 @@ const Label = styled(BaseLabel)`
   cursor: unset;
   font-weight: bold;
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     color: ${grey[600]};
   }
 `;
diff --git a/docs/data/components/slider/styles.module.css b/docs/data/components/slider/styles.module.css
@@ -98,6 +98,6 @@
   font-weight: bold;
 }
 
-.label[data-disabled='true'] {
+.label[data-disabled] {
   color: var(--gray-600);
 }
diff --git a/docs/data/components/slider/vertical.module.css b/docs/data/components/slider/vertical.module.css
@@ -101,6 +101,6 @@
   color: inherit;
 }
 
-.label[data-disabled='true'] {
+.label[data-disabled] {
   color: var(--gray-600);
 }
diff --git a/docs/data/components/tabs/IndicatorBubble.js b/docs/data/components/tabs/IndicatorBubble.js
@@ -129,7 +129,7 @@ const Tab = styled(BaseTabs.Tab)`
     outline: none;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/IndicatorBubble.tsx b/docs/data/components/tabs/IndicatorBubble.tsx
@@ -129,7 +129,7 @@ const Tab = styled(BaseTabs.Tab)`
     outline: none;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/IndicatorUnderline.js b/docs/data/components/tabs/IndicatorUnderline.js
@@ -117,7 +117,7 @@ const Tab = styled(BaseTabs.Tab)`
     outline: none;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/IndicatorUnderline.tsx b/docs/data/components/tabs/IndicatorUnderline.tsx
@@ -117,7 +117,7 @@ const Tab = styled(BaseTabs.Tab)`
     outline: none;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/KeyboardNavigation.js b/docs/data/components/tabs/KeyboardNavigation.js
@@ -80,12 +80,12 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/KeyboardNavigation.tsx b/docs/data/components/tabs/KeyboardNavigation.tsx
@@ -80,12 +80,12 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
@@ -107,12 +107,12 @@ function Styles() {
         outline: 3px solid ${cyan[200]};
       }
 
-      .CustomTabIntroduction[data-selected='true'] {
+      .CustomTabIntroduction[data-selected] {
         background-color: #fff;
         color: ${cyan[600]};
       }
 
-      .CustomTabIntroduction[data-disabled='true'] {
+      .CustomTabIntroduction[data-disabled] {
         opacity: 0.5;
         cursor: not-allowed;
       }

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
@@ -107,12 +107,12 @@ function Styles() {
         outline: 3px solid ${cyan[200]};
       }
 
-      .CustomTabIntroduction[data-selected='true'] {
+      .CustomTabIntroduction[data-selected] {
         background-color: #fff;
         color: ${cyan[600]};
       }
 
-      .CustomTabIntroduction[data-disabled='true'] {
+      .CustomTabIntroduction[data-disabled] {
         opacity: 0.5;
         cursor: not-allowed;
       }

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
@@ -68,12 +68,12 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
@@ -68,12 +68,12 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/data/components/tabs/UnstyledTabsRouting.js b/docs/data/components/tabs/UnstyledTabsRouting.js
@@ -146,7 +146,7 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }

diff --git a/docs/data/components/tabs/UnstyledTabsRouting.tsx b/docs/data/components/tabs/UnstyledTabsRouting.tsx
@@ -141,7 +141,7 @@ const Tab = styled(Tabs.Tab)`
     outline: 3px solid ${blue[200]};
   }
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: #fff;
     color: ${blue[600]};
   }

diff --git a/docs/data/getting-started/accessibility/FocusRing.js b/docs/data/getting-started/accessibility/FocusRing.js
@@ -91,7 +91,7 @@ const SliderThumb = styled(BaseSlider.Thumb)(
     outline: none;
   }
 
-  &[data-dragging='true'] {
+  &[data-dragging] {
     box-shadow: 0 0 0 8px ${alpha(
       theme.palette.mode === 'light' ? blue[200] : blue[400],
       0.5,

diff --git a/docs/data/getting-started/accessibility/FocusRing.tsx b/docs/data/getting-started/accessibility/FocusRing.tsx
@@ -91,7 +91,7 @@ const SliderThumb = styled(BaseSlider.Thumb)(
     outline: none;
   }
 
-  &[data-dragging='true'] {
+  &[data-dragging] {
     box-shadow: 0 0 0 8px ${alpha(
       theme.palette.mode === 'light' ? blue[200] : blue[400],
       0.5,

diff --git a/docs/src/app/experiments/slider.module.css b/docs/src/app/experiments/slider.module.css
@@ -94,6 +94,6 @@
   font-weight: bold;
 }
 
-.label[data-disabled='true'] {
+.label[data-disabled] {
   color: var(--gray-600);
 }
diff --git a/docs/src/app/experiments/tabs.tsx b/docs/src/app/experiments/tabs.tsx
@@ -193,7 +193,7 @@ const Tab = styled(BaseTabs.Tab)`
     outline: none;
   }
 
-  &[data-disabled='true'] {
+  &[data-disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

diff --git a/docs/src/components/content/PackageManagerSnippet.module.css b/docs/src/components/content/PackageManagerSnippet.module.css
@@ -44,7 +44,7 @@
   width: var(--space-9);
   letter-spacing: 0.18px;
 
-  &[data-selected='true'] {
+  &[data-selected] {
     border-radius: var(--br-pill);
     background-color: white;
     box-shadow:
@@ -55,7 +55,7 @@
   }
 
   @media (hover: hover) {
-    &:not([data-selected='true']):hover {
+    &:not([data-selected]):hover {
       background-color: var(--gray-container-3);
     }
   }

diff --git a/docs/src/components/demo/DemoFileSelector.module.css b/docs/src/components/demo/DemoFileSelector.module.css
@@ -28,7 +28,7 @@
   cursor: pointer;
   border: 1px solid transparent;
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: white;
     box-shadow:
       0 1px 2px rgba(0, 0, 0, 0.05),
@@ -45,7 +45,7 @@
   }
 
   @media (hover: hover) {
-    &:not([data-selected='true']):hover {
+    &:not([data-selected]):hover {
       background-color: var(--gray-container-3);
     }
   }

diff --git a/docs/src/design-system/ToggleButtonGroup.module.css b/docs/src/design-system/ToggleButtonGroup.module.css
@@ -31,7 +31,7 @@
   cursor: pointer;
   border: 1px solid transparent;
 
-  &[data-selected='true'] {
+  &[data-selected] {
     background-color: white;
     box-shadow:
       0 1px 2px rgba(0, 0, 0, 0.05),

diff --git a/docs/src/design-system/ToggleButtonGroup.tsx b/docs/src/design-system/ToggleButtonGroup.tsx
@@ -32,7 +32,7 @@ export const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup<
           type="button"
           key={option.value}
           value={option.value}
-          data-selected={value === option.value}
+          data-selected={value === option.value || undefined}
           aria-pressed={value === option.value || undefined}
           onClick={() => {
             setValue(option.value);

diff --git a/packages/mui-base/src/Accordion/Item/styleHooks.ts b/packages/mui-base/src/Accordion/Item/styleHooks.ts
@@ -4,12 +4,6 @@ import type { AccordionItem } from './AccordionItem';
 
 export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.OwnerState> = {
   ...baseMapping,
-  disabled: (value) => {
-    if (value) {
-      return { 'data-disabled': '' };
-    }
-    return null;
-  },
   index: (value) => {
     return Number.isInteger(value) ? { 'data-index': String(value) } : null;
   },

diff --git a/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx b/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx
@@ -8,12 +8,6 @@ import { useAccordionRoot } from './useAccordionRoot';
 import { AccordionRootContext } from './AccordionRootContext';
 
 const rootStyleHookMapping = {
-  disabled: (value: boolean) => {
-    if (value) {
-      return { 'data-disabled': '' };
-    }
-    return null;
-  },
   value: () => null,
 };
 

diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
@@ -192,16 +192,16 @@ describe('<Checkbox.Root />', () => {
     expect(checkbox).to.have.attribute('data-checked', '');
     expect(checkbox).not.to.have.attribute('data-unchecked');
 
-    expect(checkbox).to.have.attribute('data-disabled', 'true');
-    expect(checkbox).to.have.attribute('data-readonly', 'true');
-    expect(checkbox).to.have.attribute('data-required', 'true');
+    expect(checkbox).to.have.attribute('data-disabled', '');
+    expect(checkbox).to.have.attribute('data-readonly', '');
+    expect(checkbox).to.have.attribute('data-required', '');
 
     expect(indicator).to.have.attribute('data-checked', '');
     expect(indicator).not.to.have.attribute('data-unchecked');
 
-    expect(indicator).to.have.attribute('data-disabled', 'true');
-    expect(indicator).to.have.attribute('data-readonly', 'true');
-    expect(indicator).to.have.attribute('data-required', 'true');
+    expect(indicator).to.have.attribute('data-disabled', '');
+    expect(indicator).to.have.attribute('data-readonly', '');
+    expect(indicator).to.have.attribute('data-required', '');
 
     setProps({ disabled: false, readOnly: false });
     fireEvent.click(checkbox);