[EuiFlyout] Allow push flyouts to have slide in animations by cee-chen · Pull Request #7239 · elastic/eui

cee-chen · 2023-09-30T01:14:34Z

Summary

closes #7205

QA

Go to https://eui.elastic.co/pr_7239/storybook/index.html?path=/story/euiflyout--push-flyouts
Toggle the pushAnimation control to "True"
Click the blue "Toggle flyout" button and confirm the push flyout now slides with an animation
Set the side control to "left" and confirm that slide in animation also works as expected

General checklist

Browser QA
- Checked in Chrome, Safari, Edge, and Firefox
Docs site QA
- Updated documentation Added Storybook
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
Designer checklist - skipped - IIRC Figma doesn't have animations?
~~- [ ] Updated the Figma library counterpart~~

- push flyouts that turn into overlay flyouts on smaller screens aren't using the correct styles on prod :(

- which allow consumers to configure push flyouts with slide in animations

NOTE: I strongly prefer storybook over the docs site for testing the animation, as the docs site causes a ton of page jumping that makes it hard to click the button easily

cee-chen · 2023-10-04T03:08:41Z

@ThomThomson FYI, this is coming soon!

As a heads up, I'm leaning towards making the new animation opt-in for now (i.e., you'll have to manually enable it with <EuiFlyout type="push" pushAnimation={true} />. My reasoning behind that is wanting to disrupt existing usages as little as possible. For example, the current EuiCollapsibleNav component is a push flyout under the hood and would need have the prop manually turned off if it was the default (because the nav is present on page load and shouldn't be animated in). There may be other similar usages of push flyouts like that in Kibana.

However, I'm definitely open to hearing thoughts from others if they feel otherwise / if this should be baked in at some point as a default!

kibanamachine · 2023-10-04T03:32:33Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7239/
Storybook: https://eui.elastic.co/pr_7239/storybook

elasticmachine · 2023-10-04T03:37:37Z

💚 Build Succeeded

Buildkite Build
Commit: 36bc48b

History

💚 Build #732 succeeded 14eab53
💚 Build #726 succeeded b020ff6

ThomThomson · 2023-10-04T14:17:09Z

This looks great! Opt-in is fine as I can't imagine most usages wanting this behaviour.

1Copenut

👍 LGTM!

cee-chen · 2023-10-04T16:21:47Z

Thank you all, and for the terrific suggestion @ThomThomson!

`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([#7268](elastic/eui#7268)) **Breaking changes** - EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([#7182](elastic/eui#7182))

`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([elastic#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([elastic#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([elastic#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([elastic#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([elastic#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([elastic#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([elastic#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([elastic#7268](elastic/eui#7268)) **Breaking changes** - EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([elastic#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([elastic#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([elastic#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([elastic#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([elastic#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([elastic#7182](elastic/eui#7182))

cee-chen mentioned this pull request Sep 30, 2023

[EuiFlyout] Animate push flyouts #7205

Closed

cee-chen added 6 commits October 3, 2023 19:52

[misc cleanup] Fix incorrect push styles

f2d966c

- push flyouts that turn into overlay flyouts on smaller screens aren't using the correct styles on prod :(

Add pushAnimation prop

3bacc4f

- which allow consumers to configure push flyouts with slide in animations

Update/add tests

949ae98

Update downstream snapshots

09f92cc

changelog

f23dbbf

[docs] Add storybook for testing

36bc48b

NOTE: I strongly prefer storybook over the docs site for testing the animation, as the docs site causes a ton of page jumping that makes it hard to click the button easily

cee-chen force-pushed the flyout-push-animation branch from 14eab53 to 36bc48b Compare October 4, 2023 03:02

cee-chen marked this pull request as ready for review October 4, 2023 03:06

cee-chen requested a review from a team as a code owner October 4, 2023 03:06

1Copenut self-requested a review October 4, 2023 13:51

1Copenut approved these changes Oct 4, 2023

View reviewed changes

cee-chen merged commit 83e3d4e into elastic:main Oct 4, 2023

cee-chen deleted the flyout-push-animation branch October 4, 2023 16:22

cee-chen mentioned this pull request Oct 9, 2023

Upgrade EUI to v89.0.0 elastic/kibana#168396

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiFlyout] Allow push flyouts to have slide in animations#7239

[EuiFlyout] Allow push flyouts to have slide in animations#7239
cee-chen merged 6 commits intoelastic:mainfrom
cee-chen:flyout-push-animation

cee-chen commented Sep 30, 2023 •

edited by 1Copenut

Loading

Uh oh!

cee-chen commented Oct 4, 2023

Uh oh!

kibanamachine commented Oct 4, 2023

Uh oh!

elasticmachine commented Oct 4, 2023

Uh oh!

ThomThomson commented Oct 4, 2023

Uh oh!

1Copenut left a comment

Uh oh!

cee-chen commented Oct 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

cee-chen commented Sep 30, 2023 • edited by 1Copenut Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

cee-chen commented Oct 4, 2023

Uh oh!

kibanamachine commented Oct 4, 2023

Uh oh!

elasticmachine commented Oct 4, 2023

💚 Build Succeeded

History

Uh oh!

ThomThomson commented Oct 4, 2023

Uh oh!

1Copenut left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Oct 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cee-chen commented Sep 30, 2023 •

edited by 1Copenut

Loading