diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js index 0c74f1518f..609534c461 100644 --- 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 index 330a8d5dd2..fe0350fce5 100644 --- 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 index d91cbd99ac..d866f6a6df 100644 --- 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 index e4b21c8497..b2c80f3c3f 100644 --- 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 index 80ce1ffbde..b915700e59 100644 --- 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 index 80ce1ffbde..b915700e59 100644 --- 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 index 441448e034..4488e69e6a 100644 --- 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 index 441448e034..4488e69e6a 100644 --- 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 index 47d402c908..0179e9ff39 100644 --- 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 index 47d402c908..0179e9ff39 100644 --- 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 index ba96422e66..47c3a3723f 100644 --- 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 index ba96422e66..47c3a3723f 100644 --- 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 index 021c449cb6..547b19f1ec 100644 --- 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 index 021c449cb6..547b19f1ec 100644 --- 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 index 5782a0785d..0cebf0eb48 100644 --- 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 index 0ff86ac06f..4310651859 100644 --- 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 index 24d3c25be7..5e664e1ab5 100644 --- 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 index 24d3c25be7..5e664e1ab5 100644 --- 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 index 99aecc36a3..046590f717 100644 --- 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 index fc8acc3d11..a43bf362b5 100644 --- 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 index 2dc3b3fd12..9ecb333899 100644 --- 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 index 21d47c80e6..81213168a7 100644 --- 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 index 51582c82fd..25d097c047 100644 --- 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 index 00ced02b1d..05c86b7957 100644 --- 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/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx index 40a9eccbe6..9a4350457b 100644 --- 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('', () => { 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); diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx index 8fe0d8b657..06b10b840e 100644 --- a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx +++ b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx @@ -41,10 +41,10 @@ describe('', () => { const label = screen.getByTestId('label'); const message = screen.getByTestId('message'); - expect(field).to.have.attribute('data-disabled', 'true'); - expect(control).to.have.attribute('data-disabled', 'true'); - expect(label).to.have.attribute('data-disabled', 'true'); - expect(message).to.have.attribute('data-disabled', 'true'); + expect(field).to.have.attribute('data-disabled', ''); + expect(control).to.have.attribute('data-disabled', ''); + expect(label).to.have.attribute('data-disabled', ''); + expect(message).to.have.attribute('data-disabled', ''); }); }); @@ -357,10 +357,10 @@ describe('', () => { fireEvent.focus(control); fireEvent.blur(control); - expect(root).to.have.attribute('data-touched', 'true'); - expect(control).to.have.attribute('data-touched', 'true'); - expect(label).to.have.attribute('data-touched', 'true'); - expect(description).to.have.attribute('data-touched', 'true'); + expect(root).to.have.attribute('data-touched', ''); + expect(control).to.have.attribute('data-touched', ''); + expect(label).to.have.attribute('data-touched', ''); + expect(description).to.have.attribute('data-touched', ''); expect(error).to.equal(null); }); @@ -376,7 +376,7 @@ describe('', () => { fireEvent.focus(button); fireEvent.blur(button); - expect(button).to.have.attribute('data-touched', 'true'); + expect(button).to.have.attribute('data-touched', ''); }); it('supports Switch', () => { @@ -391,7 +391,7 @@ describe('', () => { fireEvent.focus(button); fireEvent.blur(button); - expect(button).to.have.attribute('data-touched', 'true'); + expect(button).to.have.attribute('data-touched', ''); }); it('supports NumberField', () => { @@ -408,7 +408,7 @@ describe('', () => { fireEvent.focus(input); fireEvent.blur(input); - expect(input).to.have.attribute('data-touched', 'true'); + expect(input).to.have.attribute('data-touched', ''); }); it('supports Slider', () => { @@ -428,7 +428,7 @@ describe('', () => { fireEvent.focus(thumb); fireEvent.blur(thumb); - expect(root).to.have.attribute('data-touched', 'true'); + expect(root).to.have.attribute('data-touched', ''); }); it('supports RadioGroup (click)', () => { @@ -448,8 +448,8 @@ describe('', () => { fireEvent.click(control); - expect(group).to.have.attribute('data-touched', 'true'); - expect(control).to.have.attribute('data-touched', 'true'); + expect(group).to.have.attribute('data-touched', ''); + expect(control).to.have.attribute('data-touched', ''); }); it('supports RadioGroup (blur)', async () => { @@ -471,8 +471,8 @@ describe('', () => { await userEvent.tab(); // onto control await userEvent.tab(); // onto last button - expect(group).to.have.attribute('data-touched', 'true'); - expect(control).to.have.attribute('data-touched', 'true'); + expect(group).to.have.attribute('data-touched', ''); + expect(control).to.have.attribute('data-touched', ''); }); }); @@ -499,10 +499,10 @@ describe('', () => { fireEvent.change(control, { target: { value: 'value' } }); - expect(root).to.have.attribute('data-dirty', 'true'); - expect(control).to.have.attribute('data-dirty', 'true'); - expect(label).to.have.attribute('data-dirty', 'true'); - expect(description).to.have.attribute('data-dirty', 'true'); + expect(root).to.have.attribute('data-dirty', ''); + expect(control).to.have.attribute('data-dirty', ''); + expect(label).to.have.attribute('data-dirty', ''); + expect(description).to.have.attribute('data-dirty', ''); fireEvent.change(control, { target: { value: '' } }); @@ -525,7 +525,7 @@ describe('', () => { fireEvent.click(button); - expect(button).to.have.attribute('data-dirty', 'true'); + expect(button).to.have.attribute('data-dirty', ''); }); it('supports Switch', () => { @@ -541,7 +541,7 @@ describe('', () => { fireEvent.click(button); - expect(button).to.have.attribute('data-dirty', 'true'); + expect(button).to.have.attribute('data-dirty', ''); }); it('supports NumberField', () => { @@ -559,7 +559,7 @@ describe('', () => { fireEvent.change(input, { target: { value: '1' } }); - expect(input).to.have.attribute('data-dirty', 'true'); + expect(input).to.have.attribute('data-dirty', ''); }); it('supports Slider', () => { @@ -581,7 +581,7 @@ describe('', () => { fireEvent.change(input, { target: { value: 'value' } }); - expect(root).to.have.attribute('data-dirty', 'true'); + expect(root).to.have.attribute('data-dirty', ''); }); it('supports RadioGroup', () => { @@ -600,7 +600,7 @@ describe('', () => { fireEvent.click(screen.getByText('One')); - expect(group).to.have.attribute('data-dirty', 'true'); + expect(group).to.have.attribute('data-dirty', ''); }); }); }); diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx index 8336d7c4ec..20eb135415 100644 --- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx +++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx @@ -132,19 +132,19 @@ describe('', () => { const item = screen.getByTestId('item'); const indicator = screen.getByTestId('indicator'); - expect(root).to.have.attribute('data-disabled', 'true'); - expect(root).to.have.attribute('data-readonly', 'true'); - expect(root).to.have.attribute('data-required', 'true'); + expect(root).to.have.attribute('data-disabled', ''); + expect(root).to.have.attribute('data-readonly', ''); + expect(root).to.have.attribute('data-required', ''); expect(item).to.have.attribute('data-radio', 'checked'); - expect(item).to.have.attribute('data-disabled', 'true'); - expect(item).to.have.attribute('data-readonly', 'true'); - expect(item).to.have.attribute('data-required', 'true'); + expect(item).to.have.attribute('data-disabled', ''); + expect(item).to.have.attribute('data-readonly', ''); + expect(item).to.have.attribute('data-required', ''); expect(indicator).to.have.attribute('data-radio', 'checked'); - 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', ''); }); it('should set the name attribute on the input', () => { diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx index 2073b8415f..467e89b600 100644 --- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx +++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx @@ -311,7 +311,7 @@ describe('', () => { const thumb = getByTestId('thumb'); [root, output, control, track, indicator, thumb].forEach((subcomponent) => { - expect(subcomponent).to.have.attribute('data-disabled', 'true'); + expect(subcomponent).to.have.attribute('data-disabled', ''); }); }); @@ -1088,7 +1088,7 @@ describe('', () => { createTouches([{ identifier: 1, clientX: 200, clientY: 0 }]), ); - expect(sliderControl).to.have.attribute('data-dragging', 'true'); + expect(sliderControl).to.have.attribute('data-dragging', ''); fireEvent.touchEnd(document.body, createTouches([{ identifier: 1, clientX: 0, clientY: 0 }])); expect(sliderControl).to.not.have.attribute('data-dragging'); }); diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx index 0a612b9982..0fda18757f 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx +++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx @@ -256,14 +256,14 @@ describe('', () => { const thumb = screen.getByTestId('thumb'); expect(switchElement).to.have.attribute('data-checked', ''); - expect(switchElement).to.have.attribute('data-disabled', 'true'); - expect(switchElement).to.have.attribute('data-readonly', 'true'); - expect(switchElement).to.have.attribute('data-required', 'true'); + expect(switchElement).to.have.attribute('data-disabled', ''); + expect(switchElement).to.have.attribute('data-readonly', ''); + expect(switchElement).to.have.attribute('data-required', ''); expect(thumb).to.have.attribute('data-checked', ''); - expect(thumb).to.have.attribute('data-disabled', 'true'); - expect(thumb).to.have.attribute('data-readonly', 'true'); - expect(thumb).to.have.attribute('data-required', 'true'); + expect(thumb).to.have.attribute('data-disabled', ''); + expect(thumb).to.have.attribute('data-readonly', ''); + expect(thumb).to.have.attribute('data-required', ''); setProps({ disabled: false, readOnly: false }); fireEvent.click(switchElement); diff --git a/packages/mui-base/src/utils/getStyleHookProps.test.ts b/packages/mui-base/src/utils/getStyleHookProps.test.ts index 8a797c8ddd..5b998195e8 100644 --- a/packages/mui-base/src/utils/getStyleHookProps.test.ts +++ b/packages/mui-base/src/utils/getStyleHookProps.test.ts @@ -11,7 +11,7 @@ describe('getStyleHookProps', () => { const result = getStyleHookProps(state); expect(result).to.deep.equal({ - 'data-checked': 'true', + 'data-checked': '', 'data-orientation': 'vertical', 'data-count': '42', }); @@ -24,10 +24,20 @@ describe('getStyleHookProps', () => { const result = getStyleHookProps(state); expect(result).to.deep.equal({ - 'data-readonly': 'true', + 'data-readonly': '', }); }); + it('changes true values to a data-attribute without a value', () => { + const state = { + required: true, + disabled: false, + }; + + const result = getStyleHookProps(state); + expect(result).to.deep.equal({ 'data-required': '' }); + }); + it('does not include false values', () => { const state = { required: true, diff --git a/packages/mui-base/src/utils/getStyleHookProps.ts b/packages/mui-base/src/utils/getStyleHookProps.ts index 0246d9da6a..ca94e03c4b 100644 --- a/packages/mui-base/src/utils/getStyleHookProps.ts +++ b/packages/mui-base/src/utils/getStyleHookProps.ts @@ -18,7 +18,9 @@ export function getStyleHookProps>( return; } - if (value) { + if (value === true) { + props[`data-${key.toLowerCase()}`] = ''; + } else if (value) { props[`data-${key.toLowerCase()}`] = value.toString(); } });