From b37dfc96e1a7d2515df19e3cafa5963039951257 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 24 Oct 2024 21:38:22 +1100 Subject: [PATCH] [core] Refactor `data-state` to individual attributes (#739) --- .../components/alert-dialog/alert-dialog.mdx | 5 ++--- .../collapsible/CssAnimatedCollapsible.js | 6 ++--- .../collapsible/CssAnimatedCollapsible.tsx | 6 ++--- .../collapsible/CssTransitionCollapsible.js | 6 ++--- .../collapsible/CssTransitionCollapsible.tsx | 6 ++--- .../UnstyledCollapsibleIntroduction.js | 2 +- .../UnstyledCollapsibleIntroduction.tsx | 2 +- .../components/collapsible/collapsible.mdx | 16 +++++++------- docs/data/components/dialog/dialog.mdx | 5 ++--- .../css-modules/Menu.module.css | 17 +++++--------- .../menu/MenuIntroduction/system/index.js | 4 ---- .../menu/MenuIntroduction/system/index.tsx | 4 ---- docs/data/components/menu/NestedMenu.js | 4 ---- docs/data/components/menu/NestedMenu.tsx | 4 ---- docs/data/components/menu/menu.mdx | 5 ++--- docs/data/components/popover/popover.mdx | 5 ++--- .../components/preview-card/preview-card.mdx | 6 ++--- .../progress/IndeterminateProgress.js | 2 +- .../progress/IndeterminateProgress.tsx | 2 +- docs/data/components/progress/progress.mdx | 4 ++-- docs/data/components/tooltip/tooltip.mdx | 6 ++--- .../app/experiments/collapsible-accordion.tsx | 4 ++-- .../app/experiments/collapsible-framer.tsx | 2 +- .../collapsible-hidden-until-found.tsx | 10 ++++----- docs/src/app/experiments/collapsible.tsx | 10 ++++----- docs/src/app/experiments/progress.tsx | 4 ++-- docs/src/components/demo/Demo.module.css | 4 ++-- .../Collapsible/Root/CollapsibleRoot.test.tsx | 22 +++++++++---------- .../src/Collapsible/Root/styleHooks.ts | 6 ++--- .../Indicator/ProgressIndicator.test.tsx | 1 + .../src/Progress/Root/ProgressRoot.tsx | 5 +++-- .../mui-base/src/Progress/Root/styleHooks.ts | 12 ++++++++++ .../src/Progress/Track/ProgressTrack.test.tsx | 1 + 33 files changed, 93 insertions(+), 105 deletions(-) diff --git a/docs/data/components/alert-dialog/alert-dialog.mdx b/docs/data/components/alert-dialog/alert-dialog.mdx index 6e21e62771..bdfb2f902a 100644 --- a/docs/data/components/alert-dialog/alert-dialog.mdx +++ b/docs/data/components/alert-dialog/alert-dialog.mdx @@ -144,7 +144,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` @@ -226,8 +226,7 @@ function App() { Four states are available as data attributes to animate the dialog, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.js b/docs/data/components/collapsible/CssAnimatedCollapsible.js index 78f52dab8a..909cf3418f 100644 --- a/docs/data/components/collapsible/CssAnimatedCollapsible.js +++ b/docs/data/components/collapsible/CssAnimatedCollapsible.js @@ -97,7 +97,7 @@ export function Styles() { transform-origin: center 45%; } - .CssAnimatedCollapsible-trigger[data-state="open"] svg { + .CssAnimatedCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -110,10 +110,10 @@ export function Styles() { padding: 0 1rem; } - .CssAnimatedCollapsible-content[data-state='open'] { + .CssAnimatedCollapsible-content[data-open] { animation: slideDown 300ms ease-out; } - .CssAnimatedCollapsible-content[data-state='closed'] { + .CssAnimatedCollapsible-content[data-closed] { animation: slideUp 300ms ease-out; } diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx index 78f52dab8a..909cf3418f 100644 --- a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx +++ b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx @@ -97,7 +97,7 @@ export function Styles() { transform-origin: center 45%; } - .CssAnimatedCollapsible-trigger[data-state="open"] svg { + .CssAnimatedCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -110,10 +110,10 @@ export function Styles() { padding: 0 1rem; } - .CssAnimatedCollapsible-content[data-state='open'] { + .CssAnimatedCollapsible-content[data-open] { animation: slideDown 300ms ease-out; } - .CssAnimatedCollapsible-content[data-state='closed'] { + .CssAnimatedCollapsible-content[data-closed] { animation: slideUp 300ms ease-out; } diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.js b/docs/data/components/collapsible/CssTransitionCollapsible.js index 0243c54177..612069408f 100644 --- a/docs/data/components/collapsible/CssTransitionCollapsible.js +++ b/docs/data/components/collapsible/CssTransitionCollapsible.js @@ -97,7 +97,7 @@ export function Styles() { transform-origin: center 45%; } - .CssTransitionCollapsible-trigger[data-state="open"] svg { + .CssTransitionCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -110,12 +110,12 @@ export function Styles() { padding: 0 1rem; } - .CssTransitionCollapsible-content[data-state='open'] { + .CssTransitionCollapsible-content[data-open] { height: var(--collapsible-content-height); transition: height 200ms ease-out; } - .CssTransitionCollapsible-content[data-state='closed'] { + .CssTransitionCollapsible-content[data-closed] { height: 0; transition: height 200ms ease-in; } diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.tsx b/docs/data/components/collapsible/CssTransitionCollapsible.tsx index 0243c54177..612069408f 100644 --- a/docs/data/components/collapsible/CssTransitionCollapsible.tsx +++ b/docs/data/components/collapsible/CssTransitionCollapsible.tsx @@ -97,7 +97,7 @@ export function Styles() { transform-origin: center 45%; } - .CssTransitionCollapsible-trigger[data-state="open"] svg { + .CssTransitionCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -110,12 +110,12 @@ export function Styles() { padding: 0 1rem; } - .CssTransitionCollapsible-content[data-state='open'] { + .CssTransitionCollapsible-content[data-open] { height: var(--collapsible-content-height); transition: height 200ms ease-out; } - .CssTransitionCollapsible-content[data-state='closed'] { + .CssTransitionCollapsible-content[data-closed] { height: 0; transition: height 200ms ease-in; } diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js index 40515a2d27..2ce225655d 100644 --- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js +++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js @@ -16,7 +16,7 @@ const CollapsibleTrigger = styled(BaseCollapsible.Trigger)` margin-top: 1px; } - &[data-state='open'] svg { + &[data-open] svg { transform: rotate(180deg); } `; diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx index 40515a2d27..2ce225655d 100644 --- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx +++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx @@ -16,7 +16,7 @@ const CollapsibleTrigger = styled(BaseCollapsible.Trigger)` margin-top: 1px; } - &[data-state='open'] svg { + &[data-open] svg { transform: rotate(180deg); } `; diff --git a/docs/data/components/collapsible/collapsible.mdx b/docs/data/components/collapsible/collapsible.mdx index 6d9d1f2c2c..a1f3031534 100644 --- a/docs/data/components/collapsible/collapsible.mdx +++ b/docs/data/components/collapsible/collapsible.mdx @@ -63,8 +63,8 @@ This relies on the HTML `hidden="until-found"` attribute which only has [partial Four states are available as data attributes to animate the Collapsible: -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. +- `[data-closed]` - `open` state is `false`. Can still be mounted to the DOM if closing. - `[data-entering]` - the `hidden` attribute was just removed from the DOM and the content element participates in page layout. The `data-entering` attribute will be removed 1 animation frame later. - `[data-exiting]` - the content element is in the process of being hidden from the DOM, but is still mounted. @@ -85,11 +85,11 @@ CSS animations can be used with two declarations: overflow: hidden; } -.Collapsible-content[data-state='open'] { +.Collapsible-content[data-open] { animation: slideDown 300ms ease-out; } -.Collapsible-content[data-state='closed'] { +.Collapsible-content[data-closed] { animation: slideUp 300ms ease-in; } @@ -118,8 +118,8 @@ CSS animations can be used with two declarations: When using CSS transitions, styles for the `Content` subcomponent must be applied to three states: -- The closed styles with `[data-state="closed"]` -- The open styles with `[data-state="open"]` +- The closed styles with `[data-closed]` +- The open styles with `[data-open]` - The entering styles with `[data-entering]` ```css @@ -127,7 +127,7 @@ When using CSS transitions, styles for the `Content` subcomponent must be applie overflow: hidden; } -.Collapsible2-content[data-state='open'] { +.Collapsible2-content[data-open] { height: var(--collapsible-content-height); transition: height 300ms ease-out; } @@ -136,7 +136,7 @@ When using CSS transitions, styles for the `Content` subcomponent must be applie height: 0; } -.Collapsible2-content[data-state='closed'] { +.Collapsible2-content[data-closed] { height: 0; transition: height 300ms ease-in; } diff --git a/docs/data/components/dialog/dialog.mdx b/docs/data/components/dialog/dialog.mdx index f9a970b9bc..646348cc74 100644 --- a/docs/data/components/dialog/dialog.mdx +++ b/docs/data/components/dialog/dialog.mdx @@ -167,7 +167,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` @@ -249,8 +249,7 @@ function App() { Four states are available as data attributes to animate the dialog, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css index 70d8f0908b..37344890ec 100644 --- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css +++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css @@ -4,10 +4,6 @@ &:focus-visible { outline: 0; } - - &[data-state='closed'] { - pointer-events: none; - } } .popup { @@ -25,6 +21,11 @@ color: var(--gray-900); box-shadow: 0px 4px 30px var(--gray-200); transform-origin: var(--transform-origin); + opacity: 0; + transform: scale(0.95, 0.8); + transition: + opacity 200ms ease-in, + transform 200ms ease-in; :global(.dark) & { background: var(--gray-900); @@ -33,14 +34,6 @@ box-shadow: 0px 4px 30px var(--gray-900); } - &[data-state='closed'] { - opacity: 0; - transform: scale(0.95, 0.8); - transition: - opacity 200ms ease-in, - transform 200ms ease-in; - } - &[data-open] { opacity: 1; transform: scale(1, 1); diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js index 3b7dca224d..49bdce1cbd 100644 --- a/docs/data/components/menu/MenuIntroduction/system/index.js +++ b/docs/data/components/menu/MenuIntroduction/system/index.js @@ -152,10 +152,6 @@ const MenuPositioner = styled(Menu.Positioner)` &:focus-visible { outline: 0; } - - &[data-state='closed'] { - pointer-events: none; - } `; export const MenuArrow = styled(Menu.Arrow)( diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx index a45fce9797..fdeaa085b2 100644 --- a/docs/data/components/menu/MenuIntroduction/system/index.tsx +++ b/docs/data/components/menu/MenuIntroduction/system/index.tsx @@ -152,10 +152,6 @@ const MenuPositioner = styled(Menu.Positioner)` &:focus-visible { outline: 0; } - - &[data-state='closed'] { - pointer-events: none; - } `; export const MenuArrow = styled(Menu.Arrow)( diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js index 6abf610cd8..04b306fb1a 100644 --- a/docs/data/components/menu/NestedMenu.js +++ b/docs/data/components/menu/NestedMenu.js @@ -157,10 +157,6 @@ const MenuPositioner = styled(Menu.Positioner)` &:focus-visible { outline: 0; } - - &[data-state='closed'] { - pointer-events: none; - } `; const MenuItem = styled(Menu.Item)( diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx index b7d7aac3b1..9aa56b8f9e 100644 --- a/docs/data/components/menu/NestedMenu.tsx +++ b/docs/data/components/menu/NestedMenu.tsx @@ -157,10 +157,6 @@ const MenuPositioner = styled(Menu.Positioner)` &:focus-visible { outline: 0; } - - &[data-state='closed'] { - pointer-events: none; - } `; const MenuItem = styled(Menu.Item)( diff --git a/docs/data/components/menu/menu.mdx b/docs/data/components/menu/menu.mdx index 4ecb264422..8a99f0b1f4 100644 --- a/docs/data/components/menu/menu.mdx +++ b/docs/data/components/menu/menu.mdx @@ -323,7 +323,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` In newer browsers, there is a feature called `@starting-style` which allows transitions to occur on open for conditionally-mounted components: @@ -409,8 +409,7 @@ function App() { Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx index b39bc3e84b..a4f6593b6c 100644 --- a/docs/data/components/popover/popover.mdx +++ b/docs/data/components/popover/popover.mdx @@ -318,7 +318,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` @@ -405,8 +405,7 @@ function App() { Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx index 1c708b9a51..b50113b88c 100644 --- a/docs/data/components/preview-card/preview-card.mdx +++ b/docs/data/components/preview-card/preview-card.mdx @@ -268,7 +268,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` @@ -355,8 +355,8 @@ function App() { Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. +- `[data-closed]` - `open` state is `false`. Can still be mounted to the DOM if closing. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/data/components/progress/IndeterminateProgress.js b/docs/data/components/progress/IndeterminateProgress.js index 2b81c447f5..2c7dd3a841 100644 --- a/docs/data/components/progress/IndeterminateProgress.js +++ b/docs/data/components/progress/IndeterminateProgress.js @@ -51,7 +51,7 @@ const ProgressIndicator = styled(BaseProgress.Indicator)( background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; border-radius: inherit; - &[data-state='indeterminate'] { + &[data-indeterminate] { width: 25%; animation: ${indeterminateProgress} 1.5s infinite ease-in-out; will-change: transform; diff --git a/docs/data/components/progress/IndeterminateProgress.tsx b/docs/data/components/progress/IndeterminateProgress.tsx index 2b81c447f5..2c7dd3a841 100644 --- a/docs/data/components/progress/IndeterminateProgress.tsx +++ b/docs/data/components/progress/IndeterminateProgress.tsx @@ -51,7 +51,7 @@ const ProgressIndicator = styled(BaseProgress.Indicator)( background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500}; border-radius: inherit; - &[data-state='indeterminate'] { + &[data-indeterminate] { width: 25%; animation: ${indeterminateProgress} 1.5s infinite ease-in-out; will-change: transform; diff --git a/docs/data/components/progress/progress.mdx b/docs/data/components/progress/progress.mdx index 5b1f79bdc5..0dd3e274d5 100644 --- a/docs/data/components/progress/progress.mdx +++ b/docs/data/components/progress/progress.mdx @@ -41,7 +41,7 @@ Progress ### Determinate -The `value` prop represents the percentage value of the Progress component. The default minimum and maximum values are `0` and `100`, and can be changed with the `min` and `max` props. When progress is determinate the `data-state` attribute is initially `'progressing'`, changing to `'complete'` when `value` equals `max`. +The `value` prop represents the percentage value of the Progress component. The default minimum and maximum values are `0` and `100`, and can be changed with the `min` and `max` props. When progress is determinate the `data-progressing` attribute exists, changing to `data-complete` when `value` equals `max`. ```tsx function App() { @@ -58,7 +58,7 @@ function App() { ### Indeterminate -Set `value` to `null` to configure an indeterminate progress bar. The `data-state` attribute will be set to `indeterminate`. +Set `value` to `null` to configure an indeterminate progress bar. The `data-indeterminate` attribute will exist. ```tsx diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx index 4099a90338..6763ea3202 100644 --- a/docs/data/components/tooltip/tooltip.mdx +++ b/docs/data/components/tooltip/tooltip.mdx @@ -246,7 +246,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th Styles need to be applied in three states: - The exiting styles, placed on the base element class -- The open styles, placed on the base element class with `[data-state="open"]` +- The open styles, placed on the base element class with `[data-open]` - The entering styles, placed on the base element class with `[data-entering]` @@ -333,8 +333,8 @@ function App() { Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop. -- `[data-state="open"]` - `open` state is `true`. -- `[data-state="closed"]` - `open` state is `false`. Can still be mounted to the DOM if closing. +- `[data-open]` - `open` state is `true`. +- `[data-closed]` - `open` state is `false`. Can still be mounted to the DOM if closing. - `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering. - `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted. diff --git a/docs/src/app/experiments/collapsible-accordion.tsx b/docs/src/app/experiments/collapsible-accordion.tsx index 2aff3de237..017a00c391 100644 --- a/docs/src/app/experiments/collapsible-accordion.tsx +++ b/docs/src/app/experiments/collapsible-accordion.tsx @@ -139,7 +139,7 @@ export function Styles() { fill: #00f; } - .MyCollapsible2-trigger[data-state='open'] svg { + .MyCollapsible2-trigger[data-open] svg { transform: rotate(90deg); } @@ -150,7 +150,7 @@ export function Styles() { height: 0; } - .MyCollapsible2-content[data-state='open'] { + .MyCollapsible2-content[data-open] { height: var(--collapsible-content-height); transition: height ${TRANSITION_DURATION}; } diff --git a/docs/src/app/experiments/collapsible-framer.tsx b/docs/src/app/experiments/collapsible-framer.tsx index b8b4d7b70b..ee116e0801 100644 --- a/docs/src/app/experiments/collapsible-framer.tsx +++ b/docs/src/app/experiments/collapsible-framer.tsx @@ -138,7 +138,7 @@ export function Styles() { fill: #00f; } - .FramerCollapsible-trigger[data-state='open'] svg { + .FramerCollapsible-trigger[data-open] svg { transform: rotate(90deg); } diff --git a/docs/src/app/experiments/collapsible-hidden-until-found.tsx b/docs/src/app/experiments/collapsible-hidden-until-found.tsx index d5da6daf6d..b706525b9b 100644 --- a/docs/src/app/experiments/collapsible-hidden-until-found.tsx +++ b/docs/src/app/experiments/collapsible-hidden-until-found.tsx @@ -181,7 +181,7 @@ export function Styles() { fill: #00f; } - .MyCollapsible-trigger[data-state='open'] svg { + .MyCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -190,20 +190,20 @@ export function Styles() { overflow: hidden; } - .MyCollapsible-content.animation[data-state='open'] { + .MyCollapsible-content.animation[data-open] { animation: slideDown ${DURATION} ease-out; } - .MyCollapsible-content.animation[data-state='closed'] { + .MyCollapsible-content.animation[data-closed] { animation: slideUp ${DURATION} ease-in; } - .MyCollapsible-content.csstransition[data-state='open'] { + .MyCollapsible-content.csstransition[data-open] { height: var(--collapsible-content-height); transition: height ${DURATION} ease-out; } - .MyCollapsible-content.csstransition[data-state='closed'] { + .MyCollapsible-content.csstransition[data-closed] { height: 0; transition: height ${DURATION} ease-in; } diff --git a/docs/src/app/experiments/collapsible.tsx b/docs/src/app/experiments/collapsible.tsx index bb5deff1d1..2b5c3925ba 100644 --- a/docs/src/app/experiments/collapsible.tsx +++ b/docs/src/app/experiments/collapsible.tsx @@ -152,7 +152,7 @@ export function Styles() { fill: #00f; } - .MyCollapsible-trigger[data-state='open'] svg { + .MyCollapsible-trigger[data-open] svg { transform: rotate(90deg); } @@ -161,20 +161,20 @@ export function Styles() { overflow: hidden; } - .MyCollapsible-content.cssanimation[data-state='open'] { + .MyCollapsible-content.cssanimation[data-open] { animation: slideDown ${DURATION} ease-out; } - .MyCollapsible-content.cssanimation[data-state='closed'] { + .MyCollapsible-content.cssanimation[data-closed] { animation: slideUp ${DURATION} ease-out; } - .MyCollapsible-content.csstransition[data-state='open'] { + .MyCollapsible-content.csstransition[data-open] { height: var(--collapsible-content-height); transition: height ${DURATION} ease-out; } - .MyCollapsible-content.csstransition[data-state='closed'] { + .MyCollapsible-content.csstransition[data-closed] { height: 0; transition: height ${DURATION} ease-in; } diff --git a/docs/src/app/experiments/progress.tsx b/docs/src/app/experiments/progress.tsx index c826f853bf..3bab4439a2 100644 --- a/docs/src/app/experiments/progress.tsx +++ b/docs/src/app/experiments/progress.tsx @@ -180,13 +180,13 @@ export function Styles() { border-radius: inherit; } - .MyProgress-indicator[data-state='indeterminate'] { + .MyProgress-indicator[data-indeterminate] { width: 25%; animation: indeterminateLoading 1.5s infinite ease-in-out; will-change: transform; } - [dir='rtl'] .MyProgress-indicator[data-state='indeterminate'] { + [dir='rtl'] .MyProgress-indicator[data-indeterminate] { animation-name: rtlIndeterminateLoading; } diff --git a/docs/src/components/demo/Demo.module.css b/docs/src/components/demo/Demo.module.css index a4910b833a..ab17c2c5c7 100644 --- a/docs/src/components/demo/Demo.module.css +++ b/docs/src/components/demo/Demo.module.css @@ -97,11 +97,11 @@ .collapsible { overflow: hidden; - &[data-state='open'] { + &[data-open] { animation: slideDown 200ms ease-out; } - &[data-state='closed'] { + &[data-closed] { animation: slideUp 200ms ease-in; } } diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx index ec5888e7f9..6635d47139 100644 --- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx +++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx @@ -49,18 +49,18 @@ describe('', () => { expect(trigger).to.have.attribute('aria-expanded', 'false'); expect(content).to.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); setProps({ open: true }); expect(trigger).to.have.attribute('aria-expanded', 'true'); expect(content).to.not.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'open'); + expect(content).to.have.attribute('data-open', ''); setProps({ open: false }); expect(trigger).to.have.attribute('aria-expanded', 'false'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); expect(content).to.have.attribute('hidden'); }); @@ -77,18 +77,18 @@ describe('', () => { expect(trigger).to.have.attribute('aria-expanded', 'false'); expect(content).to.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); await user.pointer({ keys: '[MouseLeft]', target: trigger }); expect(trigger).to.have.attribute('aria-expanded', 'true'); expect(content).to.not.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'open'); + expect(content).to.have.attribute('data-open', ''); await user.pointer({ keys: '[MouseLeft]', target: trigger }); expect(trigger).to.have.attribute('aria-expanded', 'false'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); expect(content).to.have.attribute('hidden'); }); }); @@ -108,7 +108,7 @@ describe('', () => { expect(trigger).to.have.attribute('aria-expanded', 'false'); expect(content).to.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); await user.keyboard('[Tab]'); expect(trigger).toHaveFocus(); @@ -116,12 +116,12 @@ describe('', () => { expect(trigger).to.have.attribute('aria-expanded', 'true'); expect(content).to.not.have.attribute('hidden'); - expect(content).to.have.attribute('data-state', 'open'); + expect(content).to.have.attribute('data-open', ''); await user.keyboard(`[${key}]`); expect(trigger).to.have.attribute('aria-expanded', 'false'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); expect(content).to.have.attribute('hidden'); }); }); @@ -145,7 +145,7 @@ describe('', () => { const content = getByTestId('content'); - expect(content).to.have.attribute('data-state', 'closed'); + expect(content).to.have.attribute('data-closed', ''); act(() => { const event = new window.Event('beforematch', { @@ -156,7 +156,7 @@ describe('', () => { }); expect(handleOpenChange.callCount).to.equal(1); - expect(content).to.have.attribute('data-state', 'open'); + expect(content).to.have.attribute('data-open', ''); }); }); }); diff --git a/packages/mui-base/src/Collapsible/Root/styleHooks.ts b/packages/mui-base/src/Collapsible/Root/styleHooks.ts index bf81e88687..3590d508e2 100644 --- a/packages/mui-base/src/Collapsible/Root/styleHooks.ts +++ b/packages/mui-base/src/Collapsible/Root/styleHooks.ts @@ -2,10 +2,10 @@ import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import type { CollapsibleRoot } from './CollapsibleRoot'; export const collapsibleStyleHookMapping: CustomStyleHookMapping = { - open: (value) => { - return value ? { 'data-state': 'open' } : { 'data-state': 'closed' }; + open(value): Record { + return value ? { 'data-open': '' } : { 'data-closed': '' }; }, - transitionStatus: (value) => { + transitionStatus(value) { if (value === 'entering') { return { 'data-entering': '' } as Record; } diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx index a2012fb4c2..963eff54ac 100644 --- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx +++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx @@ -14,6 +14,7 @@ const contextValue: ProgressRootContext = { direction: 'ltr', max: 100, min: 0, + status: 'progressing', }, }; diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.tsx index 2f785bf222..4ea9522a30 100644 --- a/packages/mui-base/src/Progress/Root/ProgressRoot.tsx +++ b/packages/mui-base/src/Progress/Root/ProgressRoot.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { type ProgressDirection, useProgressRoot } from './useProgressRoot'; +import { type ProgressDirection, ProgressStatus, useProgressRoot } from './useProgressRoot'; import { ProgressRootContext } from './ProgressRootContext'; import { progressStyleHookMapping } from './styleHooks'; import { BaseUIComponentProps } from '../../utils/types'; @@ -53,7 +53,7 @@ const ProgressRoot = React.forwardRef(function ProgressRoot( direction, max, min, - state: progress.state, + status: progress.state, }), [direction, max, min, progress.state], ); @@ -88,6 +88,7 @@ namespace ProgressRoot { direction: ProgressDirection; max: number; min: number; + status: ProgressStatus; }; export interface Props diff --git a/packages/mui-base/src/Progress/Root/styleHooks.ts b/packages/mui-base/src/Progress/Root/styleHooks.ts index 89937bb242..9a6d365f92 100644 --- a/packages/mui-base/src/Progress/Root/styleHooks.ts +++ b/packages/mui-base/src/Progress/Root/styleHooks.ts @@ -5,4 +5,16 @@ export const progressStyleHookMapping: CustomStyleHookMapping null, max: () => null, min: () => null, + status(value): Record | null { + if (value === 'progressing') { + return { 'data-progressing': '' }; + } + if (value === 'complete') { + return { 'data-complete': '' }; + } + if (value === 'indeterminate') { + return { 'data-indeterminate': '' }; + } + return null; + }, }; diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx index 27e8c204a4..a643ac732f 100644 --- a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx +++ b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx @@ -13,6 +13,7 @@ const contextValue: ProgressRootContext = { direction: 'ltr', max: 100, min: 0, + status: 'progressing', }, };