Skip to content

Commit ecd3535

Browse files
tkajtochacstll
tkajtoch
authored and
acstll
committed
[Flyout system] Improve flyout animations (#9025)
1 parent 225db60 commit ecd3535

File tree

16 files changed

+387
-173
lines changed

16 files changed

+387
-173
lines changed

‎packages/eui-theme-borealis/src/eui_theme_borealis_dark.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"euiContrastRatioGraphic": 3,
1616
"euiContrastRatioDisabled": 2,
1717
"euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
18-
"euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
18+
"euiAnimSlightResistance": "cubic-bezier(0.32, 0.72, 0, 1)",
1919
"euiAnimSpeedExtraFast": "90ms",
2020
"euiAnimSpeedFast": "150ms",
2121
"euiAnimSpeedNormal": "250ms",

‎packages/eui-theme-borealis/src/eui_theme_borealis_light.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"euiContrastRatioGraphic": 3,
1616
"euiContrastRatioDisabled": 2,
1717
"euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
18-
"euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
18+
"euiAnimSlightResistance": "cubic-bezier(0.32, 0.72, 0, 1)",
1919
"euiAnimSpeedExtraFast": "90ms",
2020
"euiAnimSpeedFast": "150ms",
2121
"euiAnimSpeedNormal": "250ms",

‎packages/eui-theme-borealis/src/variables/_animation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const animation_speed: _EuiThemeAnimationSpeeds = {
2222

2323
export const animation_ease: _EuiThemeAnimationEasings = {
2424
bounce: 'cubic-bezier(.34, 1.61, .7, 1)',
25-
resistance: 'cubic-bezier(.694, .0482, .335, 1)',
25+
resistance: 'cubic-bezier(.32, .72, 0, 1)',
2626
};
2727

2828
export const animation: _EuiThemeAnimation = {

‎packages/eui-theme-common/src/global_styling/variables/_animations.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Animations
22

33
$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
4-
$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
4+
$euiAnimSlightResistance: cubic-bezier(.32, .72, 0, 1) !default;
55

66
$euiAnimSpeedExtraFast: 90ms !default;
77
$euiAnimSpeedFast: 150ms !default;

‎packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap‎

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = `
1414
<nav
1515
aria-describedby="generated-id"
1616
aria-modal="true"
17-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
17+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
1818
data-autofocus="true"
1919
id="id"
2020
role="dialog"
@@ -69,7 +69,7 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
6969
aria-describedby="generated-id"
7070
aria-label="aria-label"
7171
aria-modal="true"
72-
class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
72+
class="euiFlyout euiFlyout--open euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
7373
data-autofocus="true"
7474
data-test-subj="test subject string"
7575
id="id"
@@ -110,51 +110,53 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
110110

111111
exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
112112
<div>
113-
<div
114-
data-focus-guard="true"
115-
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
116-
tabindex="0"
117-
/>
118-
<div
119-
data-focus-lock-disabled="false"
120-
>
121-
<nav
122-
aria-describedby="generated-id"
123-
aria-modal="true"
124-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
125-
data-autofocus="true"
126-
id="id"
127-
role="dialog"
128-
style="inline-size: 240px;"
113+
<div>
114+
<div
115+
data-focus-guard="true"
116+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
129117
tabindex="0"
118+
/>
119+
<div
120+
data-focus-lock-disabled="false"
130121
>
131-
<p
132-
class="emotion-euiScreenReaderOnly"
133-
id="generated-id"
134-
>
135-
You are in a non-modal dialog. To close the dialog, press Escape.
136-
137-
</p>
138-
<button
139-
aria-label="Close this dialog"
140-
class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
141-
data-test-subj="euiFlyoutCloseButton"
142-
type="button"
122+
<nav
123+
aria-describedby="generated-id"
124+
aria-modal="true"
125+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
126+
data-autofocus="true"
127+
id="id"
128+
role="dialog"
129+
style="inline-size: 240px;"
130+
tabindex="0"
143131
>
144-
<span
145-
aria-hidden="true"
146-
class="euiButtonIcon__icon"
147-
color="inherit"
148-
data-euiicon-type="cross"
149-
/>
150-
</button>
151-
</nav>
132+
<p
133+
class="emotion-euiScreenReaderOnly"
134+
id="generated-id"
135+
>
136+
You are in a non-modal dialog. To close the dialog, press Escape.
137+
138+
</p>
139+
<button
140+
aria-label="Close this dialog"
141+
class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
142+
data-test-subj="euiFlyoutCloseButton"
143+
type="button"
144+
>
145+
<span
146+
aria-hidden="true"
147+
class="euiButtonIcon__icon"
148+
color="inherit"
149+
data-euiicon-type="cross"
150+
/>
151+
</button>
152+
</nav>
153+
</div>
154+
<div
155+
data-focus-guard="true"
156+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
157+
tabindex="0"
158+
/>
152159
</div>
153-
<div
154-
data-focus-guard="true"
155-
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
156-
tabindex="0"
157-
/>
158160
</div>
159161
`;
160162

@@ -177,7 +179,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
177179
<nav
178180
aria-describedby="generated-id"
179181
aria-modal="true"
180-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
182+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
181183
data-autofocus="true"
182184
id="id"
183185
role="dialog"
@@ -229,7 +231,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
229231
<nav
230232
aria-describedby="generated-id"
231233
aria-modal="true"
232-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
234+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
233235
data-autofocus="true"
234236
id="id"
235237
role="dialog"
@@ -278,7 +280,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
278280
data-focus-lock-disabled="disabled"
279281
>
280282
<nav
281-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
283+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
282284
id="id"
283285
style="inline-size: 320px;"
284286
/>
@@ -305,7 +307,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
305307
<nav
306308
aria-describedby="generated-id"
307309
aria-modal="true"
308-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
310+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
309311
data-autofocus="true"
310312
id="id"
311313
role="dialog"
@@ -359,7 +361,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
359361
data-focus-lock-disabled="disabled"
360362
>
361363
<nav
362-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
364+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
363365
id="id"
364366
style="inline-size: 320px;"
365367
/>
@@ -386,7 +388,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
386388
<nav
387389
aria-describedby="generated-id"
388390
aria-modal="true"
389-
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
391+
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
390392
data-autofocus="true"
391393
id="id"
392394
role="dialog"

‎packages/eui/src/components/collapsible_nav/collapsible_nav.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ describe('EuiCollapsibleNav', () => {
6464
expect(cy.get('#navSpec').should('not.exist'));
6565
});
6666

67-
it('closes the nav when the overlay mask is clicked', () => {
67+
// TODO: Unskip in https://github.com/elastic/eui/issues/8989
68+
it.skip('closes the nav when the overlay mask is clicked', () => {
6869
cy.realMount(<Nav />);
6970
cy.get('[data-test-subj="navSpecButton"]').realClick();
7071
cy.get('.euiOverlayMask').realClick({ position: 'bottomRight' });

‎packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
3636
>
3737
<nav
3838
aria-label="aria-label"
39-
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
39+
class="euiFlyout euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
4040
data-test-subj="nav"
4141
id="generated-id_euiCollapsibleNav"
4242
style="inline-size: 248px;"
@@ -89,7 +89,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
8989
>
9090
<nav
9191
aria-label="Site menu"
92-
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
92+
class="euiFlyout euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
9393
data-test-subj="nav"
9494
id="generated-id_euiCollapsibleNav"
9595
style="inline-size: 48px;"

0 commit comments

Comments
 (0)