Skip to content

Commit

Permalink
Universally update style hooks from data-attr='true' to data-attr
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed Oct 22, 2024
1 parent fc14621 commit e1134df
Show file tree
Hide file tree
Showing 33 changed files with 99 additions and 99 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
outline-offset: 3px;
}
&[data-dragging='true'] {
&[data-dragging] {
background-color: pink;
}
Expand All @@ -141,7 +141,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
background-color: ${grey[600]};
}
.dark &[data-dragging='true'] {
.dark &[data-dragging] {
background-color: pink;
}
`;
Expand All @@ -150,7 +150,7 @@ const Label = styled(BaseLabel)`
cursor: unset;
font-weight: bold;
&[data-disabled='true'] {
&[data-disabled] {
color: ${grey[600]};
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
outline-offset: 3px;
}
&[data-dragging='true'] {
&[data-dragging] {
background-color: pink;
}
Expand All @@ -135,7 +135,7 @@ const SliderThumb = styled(BaseSlider.Thumb)`
background-color: ${grey[600]};
}
.dark &[data-dragging='true'] {
.dark &[data-dragging] {
background-color: pink;
}
`;
Expand All @@ -144,7 +144,7 @@ const Label = styled(BaseLabel)`
cursor: unset;
font-weight: bold;
&[data-disabled='true'] {
&[data-disabled] {
color: ${grey[600]};
}
`;
2 changes: 1 addition & 1 deletion docs/data/components/slider/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,6 @@
font-weight: bold;
}

.label[data-disabled='true'] {
.label[data-disabled] {
color: var(--gray-600);
}
2 changes: 1 addition & 1 deletion docs/data/components/slider/vertical.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,6 @@
color: inherit;
}

.label[data-disabled='true'] {
.label[data-disabled] {
color: var(--gray-600);
}
2 changes: 1 addition & 1 deletion docs/data/components/tabs/IndicatorBubble.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const Tab = styled(BaseTabs.Tab)`
outline: none;
}
&[data-disabled='true'] {
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/tabs/IndicatorBubble.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ const Tab = styled(BaseTabs.Tab)`
outline: none;
}
&[data-disabled='true'] {
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/tabs/IndicatorUnderline.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const Tab = styled(BaseTabs.Tab)`
outline: none;
}
&[data-disabled='true'] {
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/tabs/IndicatorUnderline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const Tab = styled(BaseTabs.Tab)`
outline: none;
}
&[data-disabled='true'] {
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/tabs/KeyboardNavigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/tabs/KeyboardNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/tabs/UnstyledTabsRouting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]};
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/tabs/UnstyledTabsRouting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]};
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/getting-started/accessibility/FocusRing.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/getting-started/accessibility/FocusRing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/experiments/slider.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,6 @@
font-weight: bold;
}

.label[data-disabled='true'] {
.label[data-disabled] {
color: var(--gray-600);
}
2 changes: 1 addition & 1 deletion docs/src/app/experiments/tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const Tab = styled(BaseTabs.Tab)`
outline: none;
}
&[data-disabled='true'] {
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/content/PackageManagerSnippet.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -55,7 +55,7 @@
}

@media (hover: hover) {
&:not([data-selected='true']):hover {
&:not([data-selected]):hover {
background-color: var(--gray-container-3);
}
}
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/demo/DemoFileSelector.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -45,7 +45,7 @@
}

@media (hover: hover) {
&:not([data-selected='true']):hover {
&:not([data-selected]):hover {
background-color: var(--gray-container-3);
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/design-system/ToggleButtonGroup.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/design-system/ToggleButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 0 additions & 6 deletions packages/mui-base/src/Accordion/Item/styleHooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down
6 changes: 0 additions & 6 deletions packages/mui-base/src/Accordion/Root/AccordionRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

Expand Down
12 changes: 6 additions & 6 deletions packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading

0 comments on commit e1134df

Please sign in to comment.