Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core] Rename data-entering and data-exiting #877

Merged
merged 6 commits into from
Nov 29, 2024
Merged

[core] Rename data-entering and data-exiting #877

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8896555
[core] Rename data-entering and data-exiting
atomiks Nov 27, 2024
292460f
Update docs
atomiks Nov 27, 2024
3cd0174
docs:api
atomiks Nov 27, 2024
7167fda
Simplify experiment styles
atomiks Nov 27, 2024
9d08d80
Merge branch 'master' into refactor/starting-ending-style
atomiks Nov 29, 2024
ee2de44
Replace again
atomiks Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/data/components/accordion/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,8 @@
Three states are available as data attributes to animate the `Accordion.Panel`:

- `[data-open]` - `open` state is `true`.
- `[data-entering]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-entering` attribute will be removed 1 animation frame later.
- `[data-exiting]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
- `[data-starting-style]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-starting-style` attribute will be removed 1 animation frame later.

Check warning on line 214 in docs/data/components/accordion/accordion.mdx

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/components/accordion/accordion.mdx", "range": {"start": {"line": 214, "column": 169}}}, "severity": "WARNING"}
- `[data-ending-style]` - the panel element is in the process of being hidden from the DOM, but is still mounted.

The component can be animate when opening or closing using either:

Expand Down Expand Up @@ -266,7 +266,7 @@

- The exiting styles, placed on the base element class
- The open styles, placed on the base element class with `[data-state="open"]`
- The entering styles, placed on the base element class with `[data-entering]`
- The entering styles, placed on the base element class with `[data-starting-style]`

```css
.AccordionPanel {
Expand All @@ -283,7 +283,7 @@
}

/* The initial styles when opening/entering */
.AccordionPanel[data-entering] {
.AccordionPanel[data-starting-style] {
height: 0;
}
```
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/alert-dialog/AlertDialogWithTransitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
Expand All @@ -81,7 +81,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
Expand All @@ -81,7 +81,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/alert-dialog/NestedAlertDialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/alert-dialog/NestedAlertDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
29 changes: 8 additions & 21 deletions docs/data/components/alert-dialog/alert-dialog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,42 +123,29 @@ Here is an example of how to apply a symmetric scale and fade transition with th
.AlertDialogPopup {
transition-property: opacity, transform;
transition-duration: 0.2s;
/* Represents the final styles once exited */
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}

/* Represents the final styles once entered */
.AlertDialogPopup[data-open] {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* Represents the initial styles when entering */
.AlertDialogPopup[data-entering] {
.AlertDialogPopup[data-starting-style],
.AlertDialogPopup[data-ending-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
```

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-open]`
- The entering styles, placed on the base element class with `[data-entering]`
`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.

<Demo demo="AlertDialogWithTransitions" />

In newer browsers, there is a feature called `@starting-style` which allows transitions to occur on open for conditionally-mounted components:

```css
/* Base UI API - Polyfill */
.AlertDialogPopup[data-entering] {
.AlertDialogPopup[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}

/* Official Browser API - no Firefox support as of May 2024 */
/* Official Browser API */
@starting-style {
.AlertDialogPopup[data-open] {
opacity: 0;
Expand Down Expand Up @@ -190,7 +177,7 @@ CSS animations can also be used, requiring only two separate declarations:
animation: scale-in 0.2s forwards;
}

.AlertDialogPopup[data-exiting] {
.AlertDialogPopup[data-ending-style] {
animation: scale-out 0.2s forwards;
}
```
Expand Down Expand Up @@ -227,8 +214,8 @@ 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-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.
- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
- `[data-ending-style]` - the popup's final styles once it closes.

## Composing a custom React component

Expand Down
8 changes: 4 additions & 4 deletions docs/data/components/collapsible/collapsible.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@
Three states are available as data attributes to animate the Collapsible:

- `[data-open]` - `open` state is `true`.
- `[data-entering]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-entering` attribute will be removed 1 animation frame later.
- `[data-exiting]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
- `[data-starting-style]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-starting-style` attribute will be removed 1 animation frame later.

Check warning on line 67 in docs/data/components/collapsible/collapsible.mdx

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/components/collapsible/collapsible.mdx", "range": {"start": {"line": 67, "column": 169}}}, "severity": "WARNING"}
- `[data-ending-style]` - the panel element is in the process of being hidden from the DOM, but is still mounted.

The component can be animate when opening or closing using either:

Expand Down Expand Up @@ -121,7 +121,7 @@

- The exiting styles, placed on the base element class
- The open styles, placed on the base element class with `[data-state="open"]`
- The entering styles, placed on the base element class with `[data-entering]`
- The entering styles, placed on the base element class with `[data-starting-style]`

```css
.CollapsiblePanel {
Expand All @@ -138,7 +138,7 @@
}

/* The initial styles when opening/entering */
.CollapsiblePanel[data-entering] {
.CollapsiblePanel[data-starting-style] {
height: 0;
}
```
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/collapsible/transitions.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
transition: height 200ms ease-in;
}

.panel[data-entering] {
.panel[data-starting-style] {
height: 0;
}
4 changes: 2 additions & 2 deletions docs/data/components/dialog/DialogWithTransitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Popup = styled(BaseDialog.Popup)(
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
Expand All @@ -81,7 +81,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/dialog/DialogWithTransitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Popup = styled(BaseDialog.Popup)(
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
Expand All @@ -81,7 +81,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/dialog/NestedDialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/dialog/NestedDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
transition-timing-function: ease-out;
}

&[data-entering] {
&[data-starting-style] {
backdrop-filter: blur(0);
opacity: 0;
}
Expand Down
29 changes: 8 additions & 21 deletions docs/data/components/dialog/dialog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,42 +146,29 @@ Here is an example of how to apply a symmetric scale and fade transition with th
.DialogPopup {
transition-property: opacity, transform;
transition-duration: 0.2s;
/* Represents the final styles once exited */
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}

/* Represents the final styles once entered */
.DialogPopup[data-open] {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* Represents the initial styles when entering */
.DialogPopup[data-entering] {
.DialogPopup[data-starting-style],
.DialogPopup[data-ending-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}
```

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-open]`
- The entering styles, placed on the base element class with `[data-entering]`
`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.

<Demo demo="DialogWithTransitions" />

In newer browsers, there is a feature called `@starting-style` which allows transitions to occur on open for conditionally-mounted components:

```css
/* Base UI API - Polyfill */
.DialogPopup[data-entering] {
.DialogPopup[data-starting-style] {
opacity: 0;
transform: translate(-50%, -35%) scale(0.8);
}

/* Official Browser API - no Firefox support as of May 2024 */
/* Official Browser API */
@starting-style {
.DialogPopup[data-open] {
opacity: 0;
Expand Down Expand Up @@ -213,7 +200,7 @@ CSS animations can also be used, requiring only two separate declarations:
animation: scale-in 0.2s forwards;
}

.DialogPopup[data-exiting] {
.DialogPopup[data-ending-style] {
animation: scale-out 0.2s forwards;
}
```
Expand Down Expand Up @@ -250,8 +237,8 @@ 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-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.
- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
- `[data-ending-style]` - the popup's final styles once it closes.

## Composing a custom React component

Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/MenuIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const MenuPopup = styled(Menu.Popup)(
}
}

&[data-exiting] {
&[data-ending-style] {
opacity: 0;
transform: scale(0.8);
transition: opacity 200ms ease-in, transform 200ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/MenuIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const MenuPopup = styled(Menu.Popup)(
}
}

&[data-exiting] {
&[data-ending-style] {
opacity: 0;
transform: scale(0.8);
transition: opacity 200ms ease-in, transform 200ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/NestedMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const MenuPopup = styled(Menu.Popup)(
}
}

&[data-exiting] {
&[data-ending-style] {
opacity: 0;
transform: scale(0.8);
transition: opacity 200ms ease-in, transform 200ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/NestedMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const MenuPopup = styled(Menu.Popup)(
}
}

&[data-exiting] {
&[data-ending-style] {
opacity: 0;
transform: scale(0.8);
transition: opacity 200ms ease-in, transform 200ms ease-in;
Expand Down
Loading
Loading