Skip to content

dialog: Support configurable entrance animations - #3405

Merged
huacnlee merged 3 commits into
longbridge:mainfrom
xxww0098:dialog-pop-in-entrance
Oct 8, 2026
Merged

huacnlee merged 3 commits into
longbridge:mainfrom
xxww0098:dialog-pop-in-entrance

Conversation

@xxww0098

@xxww0098 xxww0098 commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Description

Dialogs always slide from the window top to their resting position while fading in. When a dialog rests low in a tall window, it crosses much of the window before settling.

Add a shared DialogEntrance API so applications can choose the entrance for both Dialog and AlertDialog:

dialog.entrance(DialogEntrance::FadeSlide)
alert.entrance(DialogEntrance::Fade)
Entrance Behavior
SlideDown (default) Existing slide from the window top with its original timing and easing.
Fade Fade in at the final position without movement.
FadeSlide Fade in with short downward travel from above the resolved resting position.
None Display the surface and backdrop immediately.

Fade and FadeSlide use the theme's normal duration and enter easing. FadeSlide uses the theme's short motion distance and applies travel after window-boundary positioning, so a dialog clamped upwards still moves relative to its actual resting position. Travel is shortened when there is insufficient space above the surface, and pointer hit testing follows the moving surface.

Reduced motion immediately displays the final state for every option. A zero theme duration also skips the fade entrances. Surface opacity, shadows, and the backdrop use the same entrance timing. Closing remains immediate.

The Dialog story exposes all four choices under Options → Entrance. Dialog and AlertDialog documentation is updated in English and Chinese.

Public API

gpui-component

  • #[non_exhaustive] pub enum dialog::DialogEntrance { SlideDown, Fade, FadeSlide, None } — Select the shared entrance presentation. Implements Clone, Copy, Debug, Default, PartialEq, Eq, Serialize, and Deserialize.
  • DialogEntrance::SlideDown — Default; preserve the existing slide and fade entrance.
  • DialogEntrance::Fade — Fade at the final position without movement.
  • DialogEntrance::FadeSlide — Fade with bounded, theme-defined downward travel.
  • DialogEntrance::None — Immediately show the surface and backdrop.
  • Dialog::entrance(self, entrance: DialogEntrance) -> Self — Choose the dialog entrance.
  • AlertDialog::entrance(self, entrance: DialogEntrance) -> Self — Apply the same entrance policy to an alert dialog.

Breaking Changes

None for existing consumers. The API is additive and SlideDown preserves the existing default behavior.

Validation

  • cargo test -p gpui-component --lib dialog -- --nocapture — 17 passed, covering resolved-boundary travel, intermediate positions, top-edge limits, pointer hit testing, builder defaults, AlertDialog forwarding, reduced motion, immediate keyboard dismissal, and zero theme duration.
  • cargo check -p gpui-component-story — passed.
  • cargo clippy -p gpui-component -p gpui-component-story --all-targets -- --deny warnings — passed.
  • cargo fmt --all --check and git diff --check — passed.

Implementation, tests, and documentation were generated with AI assistance. The story was compile-checked; its animations were not manually compared across platforms.

@huacnlee huacnlee changed the title dialog: Add an opt-in pop-in entrance dialog: Add configurable entrance animations Oct 8, 2026
@huacnlee huacnlee changed the title dialog: Add configurable entrance animations dialog: Support configurable entrance animations Oct 8, 2026
@huacnlee
huacnlee enabled auto-merge (squash) October 8, 2026 06:10
@huacnlee
huacnlee merged commit 6baad8b into longbridge:main Oct 8, 2026
16 checks passed
linruohan pushed a commit to linruohan/gpui-component that referenced this pull request Oct 9, 2026
## Description

Dialogs always slide from the window top to their resting position while
fading in. When a dialog rests low in a tall window, it crosses much of
the window before settling.

Add a shared `DialogEntrance` API so applications can choose the
entrance for both `Dialog` and `AlertDialog`:

```rust
dialog.entrance(DialogEntrance::FadeSlide)
alert.entrance(DialogEntrance::Fade)
```

| Entrance | Behavior |
| --- | --- |
| `SlideDown` (default) | Existing slide from the window top with its
original timing and easing. |
| `Fade` | Fade in at the final position without movement. |
| `FadeSlide` | Fade in with short downward travel from above the
resolved resting position. |
| `None` | Display the surface and backdrop immediately. |

`Fade` and `FadeSlide` use the theme's normal duration and enter easing.
`FadeSlide` uses the theme's short motion distance and applies travel
after window-boundary positioning, so a dialog clamped upwards still
moves relative to its actual resting position. Travel is shortened when
there is insufficient space above the surface, and pointer hit testing
follows the moving surface.

Reduced motion immediately displays the final state for every option. A
zero theme duration also skips the fade entrances. Surface opacity,
shadows, and the backdrop use the same entrance timing. Closing remains
immediate.

The Dialog story exposes all four choices under Options → Entrance.
Dialog and AlertDialog documentation is updated in English and Chinese.

## Public API

### gpui-component

- `#[non_exhaustive] pub enum dialog::DialogEntrance { SlideDown, Fade,
FadeSlide, None }` — Select the shared entrance presentation. Implements
`Clone`, `Copy`, `Debug`, `Default`, `PartialEq`, `Eq`, `Serialize`, and
`Deserialize`.
- `DialogEntrance::SlideDown` — Default; preserve the existing slide and
fade entrance.
- `DialogEntrance::Fade` — Fade at the final position without movement.
- `DialogEntrance::FadeSlide` — Fade with bounded, theme-defined
downward travel.
- `DialogEntrance::None` — Immediately show the surface and backdrop.
- `Dialog::entrance(self, entrance: DialogEntrance) -> Self` — Choose
the dialog entrance.
- `AlertDialog::entrance(self, entrance: DialogEntrance) -> Self` —
Apply the same entrance policy to an alert dialog.

## Breaking Changes

None for existing consumers. The API is additive and `SlideDown`
preserves the existing default behavior.

## Validation

- `cargo test -p gpui-component --lib dialog -- --nocapture` — 17
passed, covering resolved-boundary travel, intermediate positions,
top-edge limits, pointer hit testing, builder defaults, AlertDialog
forwarding, reduced motion, immediate keyboard dismissal, and zero theme
duration.
- `cargo check -p gpui-component-story` — passed.
- `cargo clippy -p gpui-component -p gpui-component-story --all-targets
-- --deny warnings` — passed.
- `cargo fmt --all --check` and `git diff --check` — passed.

Implementation, tests, and documentation were generated with AI
assistance. The story was compile-checked; its animations were not
manually compared across platforms.

---------

Co-authored-by: xxww0098 <shefkie1957@gmail.com>
Co-authored-by: Jason Lee <huacnlee@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants