Skip to content

Commit 8a2c247

Browse files
paulinashakirovapaulinashakirova
authored
Merge branch 'feat/flyout-system' into flyout-props-shaded-bg
2 parents 6e1ea99 + 3cc1e53 commit 8a2c247

15 files changed

Lines changed: 344 additions & 508 deletions

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

Lines changed: 9 additions & 9 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 euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
17+
class="euiFlyout 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 euiFlyout--open euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
72+
class="euiFlyout 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"
@@ -122,7 +122,7 @@ exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
122122
<nav
123123
aria-describedby="generated-id"
124124
aria-modal="true"
125-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
125+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
126126
data-autofocus="true"
127127
id="id"
128128
role="dialog"
@@ -179,7 +179,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
179179
<nav
180180
aria-describedby="generated-id"
181181
aria-modal="true"
182-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
182+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
183183
data-autofocus="true"
184184
id="id"
185185
role="dialog"
@@ -231,7 +231,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
231231
<nav
232232
aria-describedby="generated-id"
233233
aria-modal="true"
234-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
234+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
235235
data-autofocus="true"
236236
id="id"
237237
role="dialog"
@@ -280,7 +280,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
280280
data-focus-lock-disabled="disabled"
281281
>
282282
<nav
283-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
283+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
284284
id="id"
285285
style="inline-size: 320px;"
286286
/>
@@ -307,7 +307,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
307307
<nav
308308
aria-describedby="generated-id"
309309
aria-modal="true"
310-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
310+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
311311
data-autofocus="true"
312312
id="id"
313313
role="dialog"
@@ -361,7 +361,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
361361
data-focus-lock-disabled="disabled"
362362
>
363363
<nav
364-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
364+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
365365
id="id"
366366
style="inline-size: 320px;"
367367
/>
@@ -388,7 +388,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
388388
<nav
389389
aria-describedby="generated-id"
390390
aria-modal="true"
391-
class="euiFlyout euiFlyout--open euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
391+
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
392392
data-autofocus="true"
393393
id="id"
394394
role="dialog"

‎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 euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
39+
class="euiFlyout 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 euiFlyout--open euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
92+
class="euiFlyout 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;"

‎packages/eui/src/components/flyout/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ The managed flyout wrapper that integrates with the flyout manager system, handl
5353

5454
### `src/components/flyout/manager/flyout_validation.ts`
5555
Validation utilities for managed flyout props:
56-
- **Named Size Validation**: Managed flyouts must use named sizes (s, m, l). If not provided, defaults to 'm'.
57-
- **Size Combination Rules**: Parent and child can't both be 'm', parent can't be 'l' with child
56+
- **Named Size Validation**: Child flyouts must use named sizes (s, m, l, fill). Main flyouts can use named sizes or custom values (e.g., '400px'). If size is not provided, main flyouts default to 'm' and child flyouts default to 's'.
57+
- **Size Combination Rules**: Parent and child can't both be 'm', parent and child can't both be 'fill', and 'l' can only be used if the other flyout is 'fill'
5858
- **Title**: Must be provided either through `flyoutMenuProps` or `aria-label`
5959
- **Error Handling**: Comprehensive error messages for invalid configurations
6060

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

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`EuiFlyout is rendered 1`] = `
1818
aria-describedby="generated-id"
1919
aria-label="aria-label"
2020
aria-modal="true"
21-
class="euiFlyout euiFlyout--open testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
21+
class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
2222
data-autofocus="true"
2323
data-test-subj="test subject string"
2424
role="dialog"
@@ -73,7 +73,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
7373
<div
7474
aria-describedby="generated-id"
7575
aria-modal="true"
76-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
76+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
7777
data-autofocus="true"
7878
id="imaflyout"
7979
role="dialog"
@@ -128,7 +128,7 @@ exports[`EuiFlyout props closeButtonPosition can be outside 1`] = `
128128
<div
129129
aria-describedby="generated-id"
130130
aria-modal="true"
131-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
131+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
132132
data-autofocus="true"
133133
role="dialog"
134134
tabindex="0"
@@ -182,7 +182,7 @@ exports[`EuiFlyout props closeButtonProps 1`] = `
182182
<div
183183
aria-describedby="generated-id"
184184
aria-modal="true"
185-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
185+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
186186
data-autofocus="true"
187187
role="dialog"
188188
tabindex="0"
@@ -236,7 +236,7 @@ exports[`EuiFlyout props hideCloseButton 1`] = `
236236
<div
237237
aria-describedby="generated-id"
238238
aria-modal="true"
239-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
239+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
240240
data-autofocus="true"
241241
role="dialog"
242242
tabindex="0"
@@ -278,7 +278,7 @@ exports[`EuiFlyout props is rendered as nav 1`] = `
278278
<nav
279279
aria-describedby="generated-id"
280280
aria-modal="true"
281-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
281+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
282282
data-autofocus="true"
283283
role="dialog"
284284
tabindex="0"
@@ -333,7 +333,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom number 1`] = `
333333
<div
334334
aria-describedby="generated-id"
335335
aria-modal="true"
336-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
336+
class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
337337
data-autofocus="true"
338338
role="dialog"
339339
style="max-inline-size: 1024px;"
@@ -389,7 +389,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom value and measurement 1
389389
<div
390390
aria-describedby="generated-id"
391391
aria-modal="true"
392-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
392+
class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
393393
data-autofocus="true"
394394
role="dialog"
395395
style="max-inline-size: 24rem;"
@@ -445,7 +445,7 @@ exports[`EuiFlyout props maxWidth can be set to a default 1`] = `
445445
<div
446446
aria-describedby="generated-id"
447447
aria-modal="true"
448-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-overlay-right-right"
448+
class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
449449
data-autofocus="true"
450450
role="dialog"
451451
tabindex="0"
@@ -500,7 +500,7 @@ exports[`EuiFlyout props outsideClickCloses 1`] = `
500500
<div
501501
aria-describedby="generated-id"
502502
aria-modal="true"
503-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
503+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
504504
data-autofocus="true"
505505
role="dialog"
506506
tabindex="0"
@@ -555,7 +555,7 @@ exports[`EuiFlyout props ownFocus can alter mask props with maskProps without th
555555
<div
556556
aria-describedby="generated-id"
557557
aria-modal="true"
558-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
558+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
559559
data-autofocus="true"
560560
role="dialog"
561561
tabindex="0"
@@ -610,7 +610,7 @@ exports[`EuiFlyout props ownFocus can be false 1`] = `
610610
<div
611611
aria-describedby="generated-id"
612612
aria-modal="true"
613-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
613+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
614614
data-autofocus="true"
615615
role="dialog"
616616
tabindex="0"
@@ -665,7 +665,7 @@ exports[`EuiFlyout props paddingSize l is rendered 1`] = `
665665
<div
666666
aria-describedby="generated-id"
667667
aria-modal="true"
668-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
668+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
669669
data-autofocus="true"
670670
role="dialog"
671671
tabindex="0"
@@ -720,7 +720,7 @@ exports[`EuiFlyout props paddingSize m is rendered 1`] = `
720720
<div
721721
aria-describedby="generated-id"
722722
aria-modal="true"
723-
class="euiFlyout euiFlyout--open emotion-euiFlyout-m-m-noMaxWidth-overlay-right-right"
723+
class="euiFlyout emotion-euiFlyout-m-m-noMaxWidth-overlay-right-right"
724724
data-autofocus="true"
725725
role="dialog"
726726
tabindex="0"
@@ -775,7 +775,7 @@ exports[`EuiFlyout props paddingSize none is rendered 1`] = `
775775
<div
776776
aria-describedby="generated-id"
777777
aria-modal="true"
778-
class="euiFlyout euiFlyout--open emotion-euiFlyout-none-m-noMaxWidth-overlay-right-right"
778+
class="euiFlyout emotion-euiFlyout-none-m-noMaxWidth-overlay-right-right"
779779
data-autofocus="true"
780780
role="dialog"
781781
tabindex="0"
@@ -830,7 +830,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
830830
<div
831831
aria-describedby="generated-id"
832832
aria-modal="true"
833-
class="euiFlyout euiFlyout--open emotion-euiFlyout-s-m-noMaxWidth-overlay-right-right"
833+
class="euiFlyout emotion-euiFlyout-s-m-noMaxWidth-overlay-right-right"
834834
data-autofocus="true"
835835
role="dialog"
836836
tabindex="0"
@@ -869,7 +869,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
869869

870870
exports[`EuiFlyout props push flyouts renders 1`] = `
871871
<div
872-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
872+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
873873
data-test-subj="flyout"
874874
>
875875
<button
@@ -905,7 +905,7 @@ exports[`EuiFlyout props sides left is rendered 1`] = `
905905
<div
906906
aria-describedby="generated-id"
907907
aria-modal="true"
908-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-left-left"
908+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-left-left"
909909
data-autofocus="true"
910910
role="dialog"
911911
tabindex="0"
@@ -959,7 +959,7 @@ exports[`EuiFlyout props sides right is rendered 1`] = `
959959
<div
960960
aria-describedby="generated-id"
961961
aria-modal="true"
962-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
962+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
963963
data-autofocus="true"
964964
role="dialog"
965965
tabindex="0"
@@ -1014,7 +1014,7 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
10141014
<div
10151015
aria-describedby="generated-id"
10161016
aria-modal="true"
1017-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-noMaxWidth-overlay-right-right"
1017+
class="euiFlyout emotion-euiFlyout-l-noMaxWidth-overlay-right-right"
10181018
data-autofocus="true"
10191019
role="dialog"
10201020
style="inline-size: 500px;"
@@ -1070,7 +1070,7 @@ exports[`EuiFlyout props size fill is rendered 1`] = `
10701070
<div
10711071
aria-describedby="generated-id"
10721072
aria-modal="true"
1073-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
1073+
class="euiFlyout emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
10741074
data-autofocus="true"
10751075
role="dialog"
10761076
tabindex="0"
@@ -1125,7 +1125,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
11251125
<div
11261126
aria-describedby="generated-id"
11271127
aria-modal="true"
1128-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-l-noMaxWidth-overlay-right-right"
1128+
class="euiFlyout emotion-euiFlyout-l-l-noMaxWidth-overlay-right-right"
11291129
data-autofocus="true"
11301130
role="dialog"
11311131
tabindex="0"
@@ -1180,7 +1180,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
11801180
<div
11811181
aria-describedby="generated-id"
11821182
aria-modal="true"
1183-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
1183+
class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
11841184
data-autofocus="true"
11851185
role="dialog"
11861186
tabindex="0"
@@ -1235,7 +1235,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
12351235
<div
12361236
aria-describedby="generated-id"
12371237
aria-modal="true"
1238-
class="euiFlyout euiFlyout--open emotion-euiFlyout-l-s-noMaxWidth-overlay-right-right"
1238+
class="euiFlyout emotion-euiFlyout-l-s-noMaxWidth-overlay-right-right"
12391239
data-autofocus="true"
12401240
role="dialog"
12411241
tabindex="0"
@@ -1295,7 +1295,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
12951295
aria-describedby="generated-id"
12961296
aria-label="aria-label"
12971297
aria-modal="true"
1298-
class="euiFlyout euiFlyout--open testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
1298+
class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right-euiTestCss"
12991299
data-autofocus="true"
13001300
data-test-subj="test subject string"
13011301
role="dialog"

0 commit comments

Comments
 (0)