Skip to content

Commit

Permalink
Another attempt at Chromatic/Storybook portals
Browse files Browse the repository at this point in the history
  • Loading branch information
Vlad Moroz committed Jun 4, 2024
1 parent d8f2071 commit 810b590
Showing 1 changed file with 38 additions and 34 deletions.
72 changes: 38 additions & 34 deletions packages/react/select/src/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ export default { title: 'Components/Select' };

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

const SelectPortal = (props: React.ComponentPropsWithoutRef<typeof Select.Portal>) => (
<Select.Portal container={window.document.body} {...props} />
);

export const Styled = () => (
<div style={{ display: 'flex', gap: 20, padding: 50 }}>
{POSITIONS.map((position) => (
Expand All @@ -19,7 +23,7 @@ export const Styled = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="one">
Expand Down Expand Up @@ -49,7 +53,7 @@ export const Styled = () => (
</Select.Viewport>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand Down Expand Up @@ -80,7 +84,7 @@ export const Controlled = () => {
</Select.Value>
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="fr">
Expand Down Expand Up @@ -110,7 +114,7 @@ export const Controlled = () => {
</Select.Viewport>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand All @@ -137,7 +141,7 @@ export const Position = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand All @@ -163,7 +167,7 @@ export const Position = () => (
</Select.ScrollDownButton>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand All @@ -188,7 +192,7 @@ export const NoDefaultValue = () => (
<Select.Value placeholder="Pick an option" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="one" disabled>
Expand All @@ -212,7 +216,7 @@ export const NoDefaultValue = () => (
</Select.Viewport>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand All @@ -237,7 +241,7 @@ export const Typeahead = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand All @@ -257,7 +261,7 @@ export const Typeahead = () => (
</Select.ScrollDownButton>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand All @@ -282,7 +286,7 @@ export const WithGroups = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand Down Expand Up @@ -321,7 +325,7 @@ export const WithGroups = () => (
</Select.ScrollDownButton>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand All @@ -330,7 +334,7 @@ export const WithGroups = () => (

export const Labelling = () => {
const content = (
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="0-18">
Expand All @@ -353,7 +357,7 @@ export const Labelling = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
);
return (
<div style={{ padding: 50 }}>
Expand Down Expand Up @@ -411,7 +415,7 @@ export const RightToLeft = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} position={position} sideOffset={5}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="one">
Expand Down Expand Up @@ -441,7 +445,7 @@ export const RightToLeft = () => (
</Select.Viewport>
<Select.Arrow />
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
))}
Expand Down Expand Up @@ -477,7 +481,7 @@ export const WithinForm = () => {
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="fr">
Expand All @@ -500,7 +504,7 @@ export const WithinForm = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
<br />
Expand Down Expand Up @@ -540,7 +544,7 @@ export const DisabledWithinForm = () => {
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="fr">
Expand All @@ -563,7 +567,7 @@ export const DisabledWithinForm = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
<br />
Expand Down Expand Up @@ -603,7 +607,7 @@ export const RequiredWithinForm = () => {
<Select.Value placeholder="Pick an option" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="fr">
Expand All @@ -626,7 +630,7 @@ export const RequiredWithinForm = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
<br />
Expand All @@ -652,7 +656,7 @@ export const WithinDialog = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand All @@ -669,7 +673,7 @@ export const WithinDialog = () => (
▼
</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
<Dialog.Close>Close Dialog</Dialog.Close>
Expand Down Expand Up @@ -733,7 +737,7 @@ export const ChromaticNoDefaultValue = () => (
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand All @@ -748,15 +752,15 @@ export const ChromaticNoDefaultValue = () => (
</Select.Viewport>
<Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>

<Select.Root open>
<Select.Trigger className={triggerClass()}>
<Select.Value placeholder="Pick an option" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()} style={{ opacity: 0.7 }}>
<Select.ScrollUpButton className={scrollUpButtonClass()}>▲</Select.ScrollUpButton>
<Select.Viewport className={viewportClass()}>
Expand All @@ -771,7 +775,7 @@ export const ChromaticNoDefaultValue = () => (
</Select.Viewport>
<Select.ScrollDownButton className={scrollDownButtonClass()}>▼</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</div>
);
Expand Down Expand Up @@ -803,7 +807,7 @@ export const Cypress = () => {
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="S">
Expand All @@ -826,7 +830,7 @@ export const Cypress = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>
<button type="submit">buy</button>
Expand All @@ -843,7 +847,7 @@ export const Cypress = () => {
<Select.Value placeholder="…" />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content className={contentClass()}>
<Select.Viewport className={viewportClass()}>
<Select.Item className={itemClass()} value="S">
Expand Down Expand Up @@ -872,7 +876,7 @@ export const Cypress = () => {
</Select.Item>
</Select.Viewport>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
</Label>

Expand Down Expand Up @@ -901,7 +905,7 @@ const ChromaticSelect = React.forwardRef<
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Portal>
<SelectPortal>
<Select.Content
className={paddedElement === 'content' ? contentClassWithPadding() : contentClass()}
style={{ opacity: 0.7 }}
Expand Down Expand Up @@ -929,7 +933,7 @@ const ChromaticSelect = React.forwardRef<
▼
</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</SelectPortal>
</Select.Root>
));

Expand Down

0 comments on commit 810b590

Please sign in to comment.