Skip to content

Commit 810b590

Browse files
author
Vlad Moroz
committed
Another attempt at Chromatic/Storybook portals
1 parent d8f2071 commit 810b590

File tree

1 file changed

+38
-34
lines changed

1 file changed

+38
-34
lines changed

‎packages/react/select/src/Select.stories.tsx‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ export default { title: 'Components/Select' };
99

1010
const POSITIONS = ['item-aligned', 'popper'] as const;
1111

12+
const SelectPortal = (props: React.ComponentPropsWithoutRef<typeof Select.Portal>) => (
13+
<Select.Portal container={window.document.body} {...props} />
14+
);
15+
1216
export const Styled = () => (
1317
<div style={{ display: 'flex', gap: 20, padding: 50 }}>
1418
{POSITIONS.map((position) => (
@@ -19,7 +23,7 @@ export const Styled = () => (
1923
<Select.Value />
2024
<Select.Icon />
2125
</Select.Trigger>
22-
<Select.Portal>
26+
<SelectPortal>
2327
<Select.Content className={contentClass()} position={position} sideOffset={5}>
2428
<Select.Viewport className={viewportClass()}>
2529
<Select.Item className={itemClass()} value="one">
@@ -49,7 +53,7 @@ export const Styled = () => (
4953
</Select.Viewport>
5054
<Select.Arrow />
5155
</Select.Content>
52-
</Select.Portal>
56+
</SelectPortal>
5357
</Select.Root>
5458
</Label>
5559
))}
@@ -80,7 +84,7 @@ export const Controlled = () => {
8084
</Select.Value>
8185
<Select.Icon />
8286
</Select.Trigger>
83-
<Select.Portal>
87+
<SelectPortal>
8488
<Select.Content className={contentClass()} position={position} sideOffset={5}>
8589
<Select.Viewport className={viewportClass()}>
8690
<Select.Item className={itemClass()} value="fr">
@@ -110,7 +114,7 @@ export const Controlled = () => {
110114
</Select.Viewport>
111115
<Select.Arrow />
112116
</Select.Content>
113-
</Select.Portal>
117+
</SelectPortal>
114118
</Select.Root>
115119
</Label>
116120
))}
@@ -137,7 +141,7 @@ export const Position = () => (
137141
<Select.Value />
138142
<Select.Icon />
139143
</Select.Trigger>
140-
<Select.Portal>
144+
<SelectPortal>
141145
<Select.Content className={contentClass()} position={position} sideOffset={5}>
142146
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
143147
<Select.Viewport className={viewportClass()}>
@@ -163,7 +167,7 @@ export const Position = () => (
163167
</Select.ScrollDownButton>
164168
<Select.Arrow />
165169
</Select.Content>
166-
</Select.Portal>
170+
</SelectPortal>
167171
</Select.Root>
168172
</Label>
169173
))}
@@ -188,7 +192,7 @@ export const NoDefaultValue = () => (
188192
<Select.Value placeholder="Pick an option" />
189193
<Select.Icon />
190194
</Select.Trigger>
191-
<Select.Portal>
195+
<SelectPortal>
192196
<Select.Content className={contentClass()} position={position} sideOffset={5}>
193197
<Select.Viewport className={viewportClass()}>
194198
<Select.Item className={itemClass()} value="one" disabled>
@@ -212,7 +216,7 @@ export const NoDefaultValue = () => (
212216
</Select.Viewport>
213217
<Select.Arrow />
214218
</Select.Content>
215-
</Select.Portal>
219+
</SelectPortal>
216220
</Select.Root>
217221
</Label>
218222
))}
@@ -237,7 +241,7 @@ export const Typeahead = () => (
237241
<Select.Value />
238242
<Select.Icon />
239243
</Select.Trigger>
240-
<Select.Portal>
244+
<SelectPortal>
241245
<Select.Content className={contentClass()} position={position} sideOffset={5}>
242246
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
243247
<Select.Viewport className={viewportClass()}>
@@ -257,7 +261,7 @@ export const Typeahead = () => (
257261
</Select.ScrollDownButton>
258262
<Select.Arrow />
259263
</Select.Content>
260-
</Select.Portal>
264+
</SelectPortal>
261265
</Select.Root>
262266
</Label>
263267
))}
@@ -282,7 +286,7 @@ export const WithGroups = () => (
282286
<Select.Value />
283287
<Select.Icon />
284288
</Select.Trigger>
285-
<Select.Portal>
289+
<SelectPortal>
286290
<Select.Content className={contentClass()} position={position} sideOffset={5}>
287291
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
288292
<Select.Viewport className={viewportClass()}>
@@ -321,7 +325,7 @@ export const WithGroups = () => (
321325
</Select.ScrollDownButton>
322326
<Select.Arrow />
323327
</Select.Content>
324-
</Select.Portal>
328+
</SelectPortal>
325329
</Select.Root>
326330
</Label>
327331
))}
@@ -330,7 +334,7 @@ export const WithGroups = () => (
330334

331335
export const Labelling = () => {
332336
const content = (
333-
<Select.Portal>
337+
<SelectPortal>
334338
<Select.Content className={contentClass()}>
335339
<Select.Viewport className={viewportClass()}>
336340
<Select.Item className={itemClass()} value="0-18">
@@ -353,7 +357,7 @@ export const Labelling = () => {
353357
</Select.Item>
354358
</Select.Viewport>
355359
</Select.Content>
356-
</Select.Portal>
360+
</SelectPortal>
357361
);
358362
return (
359363
<div style={{ padding: 50 }}>
@@ -411,7 +415,7 @@ export const RightToLeft = () => (
411415
<Select.Value />
412416
<Select.Icon />
413417
</Select.Trigger>
414-
<Select.Portal>
418+
<SelectPortal>
415419
<Select.Content className={contentClass()} position={position} sideOffset={5}>
416420
<Select.Viewport className={viewportClass()}>
417421
<Select.Item className={itemClass()} value="one">
@@ -441,7 +445,7 @@ export const RightToLeft = () => (
441445
</Select.Viewport>
442446
<Select.Arrow />
443447
</Select.Content>
444-
</Select.Portal>
448+
</SelectPortal>
445449
</Select.Root>
446450
</Label>
447451
))}
@@ -477,7 +481,7 @@ export const WithinForm = () => {
477481
<Select.Value />
478482
<Select.Icon />
479483
</Select.Trigger>
480-
<Select.Portal>
484+
<SelectPortal>
481485
<Select.Content className={contentClass()}>
482486
<Select.Viewport className={viewportClass()}>
483487
<Select.Item className={itemClass()} value="fr">
@@ -500,7 +504,7 @@ export const WithinForm = () => {
500504
</Select.Item>
501505
</Select.Viewport>
502506
</Select.Content>
503-
</Select.Portal>
507+
</SelectPortal>
504508
</Select.Root>
505509
</Label>
506510
<br />
@@ -540,7 +544,7 @@ export const DisabledWithinForm = () => {
540544
<Select.Value />
541545
<Select.Icon />
542546
</Select.Trigger>
543-
<Select.Portal>
547+
<SelectPortal>
544548
<Select.Content className={contentClass()}>
545549
<Select.Viewport className={viewportClass()}>
546550
<Select.Item className={itemClass()} value="fr">
@@ -563,7 +567,7 @@ export const DisabledWithinForm = () => {
563567
</Select.Item>
564568
</Select.Viewport>
565569
</Select.Content>
566-
</Select.Portal>
570+
</SelectPortal>
567571
</Select.Root>
568572
</Label>
569573
<br />
@@ -603,7 +607,7 @@ export const RequiredWithinForm = () => {
603607
<Select.Value placeholder="Pick an option" />
604608
<Select.Icon />
605609
</Select.Trigger>
606-
<Select.Portal>
610+
<SelectPortal>
607611
<Select.Content className={contentClass()}>
608612
<Select.Viewport className={viewportClass()}>
609613
<Select.Item className={itemClass()} value="fr">
@@ -626,7 +630,7 @@ export const RequiredWithinForm = () => {
626630
</Select.Item>
627631
</Select.Viewport>
628632
</Select.Content>
629-
</Select.Portal>
633+
</SelectPortal>
630634
</Select.Root>
631635
</Label>
632636
<br />
@@ -652,7 +656,7 @@ export const WithinDialog = () => (
652656
<Select.Value />
653657
<Select.Icon />
654658
</Select.Trigger>
655-
<Select.Portal>
659+
<SelectPortal>
656660
<Select.Content className={contentClass()}>
657661
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
658662
<Select.Viewport className={viewportClass()}>
@@ -669,7 +673,7 @@ export const WithinDialog = () => (
669673
▼
670674
</Select.ScrollDownButton>
671675
</Select.Content>
672-
</Select.Portal>
676+
</SelectPortal>
673677
</Select.Root>
674678
</Label>
675679
<Dialog.Close>Close Dialog</Dialog.Close>
@@ -733,7 +737,7 @@ export const ChromaticNoDefaultValue = () => (
733737
<Select.Value />
734738
<Select.Icon />
735739
</Select.Trigger>
736-
<Select.Portal>
740+
<SelectPortal>
737741
<Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
738742
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
739743
<Select.Viewport className={viewportClass()}>
@@ -748,15 +752,15 @@ export const ChromaticNoDefaultValue = () => (
748752
</Select.Viewport>
749753
<Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
750754
</Select.Content>
751-
</Select.Portal>
755+
</SelectPortal>
752756
</Select.Root>
753757

754758
<Select.Root open>
755759
<Select.Trigger className={triggerClass()}>
756760
<Select.Value placeholder="Pick an option" />
757761
<Select.Icon />
758762
</Select.Trigger>
759-
<Select.Portal>
763+
<SelectPortal>
760764
<Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
761765
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
762766
<Select.Viewport className={viewportClass()}>
@@ -771,7 +775,7 @@ export const ChromaticNoDefaultValue = () => (
771775
</Select.Viewport>
772776
<Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
773777
</Select.Content>
774-
</Select.Portal>
778+
</SelectPortal>
775779
</Select.Root>
776780
</div>
777781
);
@@ -803,7 +807,7 @@ export const Cypress = () => {
803807
<Select.Value />
804808
<Select.Icon />
805809
</Select.Trigger>
806-
<Select.Portal>
810+
<SelectPortal>
807811
<Select.Content className={contentClass()}>
808812
<Select.Viewport className={viewportClass()}>
809813
<Select.Item className={itemClass()} value="S">
@@ -826,7 +830,7 @@ export const Cypress = () => {
826830
</Select.Item>
827831
</Select.Viewport>
828832
</Select.Content>
829-
</Select.Portal>
833+
</SelectPortal>
830834
</Select.Root>
831835
</Label>
832836
<button type="submit">buy</button>
@@ -843,7 +847,7 @@ export const Cypress = () => {
843847
<Select.Value placeholder="…" />
844848
<Select.Icon />
845849
</Select.Trigger>
846-
<Select.Portal>
850+
<SelectPortal>
847851
<Select.Content className={contentClass()}>
848852
<Select.Viewport className={viewportClass()}>
849853
<Select.Item className={itemClass()} value="S">
@@ -872,7 +876,7 @@ export const Cypress = () => {
872876
</Select.Item>
873877
</Select.Viewport>
874878
</Select.Content>
875-
</Select.Portal>
879+
</SelectPortal>
876880
</Select.Root>
877881
</Label>
878882

@@ -901,7 +905,7 @@ const ChromaticSelect = React.forwardRef<
901905
<Select.Value />
902906
<Select.Icon />
903907
</Select.Trigger>
904-
<Select.Portal>
908+
<SelectPortal>
905909
<Select.Content
906910
className={paddedElement === 'content' ? contentClassWithPadding() : contentClass()}
907911
style={{ opacity: 0.7 }}
@@ -929,7 +933,7 @@ const ChromaticSelect = React.forwardRef<
929933
▼
930934
</Select.ScrollDownButton>
931935
</Select.Content>
932-
</Select.Portal>
936+
</SelectPortal>
933937
</Select.Root>
934938
));
935939

0 commit comments

Comments
 (0)