[core] Refactor data-state to individual attributes (#739)

Author: atomiks

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]`
 
 <Demo demo="AlertDialogWithTransitions" />
@@ -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.
 

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;
     }
 

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;
     }
 

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;
     }

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;
     }

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);
   }
 `;

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);
   }
 `;

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,16 +118,16 @@ 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
 .Collapsible-content {
   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;
 }

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]`
 
 <Demo demo="DialogWithTransitions" />
@@ -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.
 

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);

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)(

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)(

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)(

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)(

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.
 

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]`
 
 <Demo demo="UnstyledPopoverTransition" defaultCodeOpen={false} />
@@ -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.
 

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]`
 
 <Demo demo="UnstyledPreviewCardTransition" defaultCodeOpen={false} />
@@ -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.
 

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;

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;

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
 <Progress.Root value={null}>

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]`
 
 <Demo demo="UnstyledTooltipTransition" defaultCodeOpen={false} />
@@ -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.