fix(ui): add dark theme portal container for storybook + use with Select

input-output-hk · May 2, 2024 · 2c8af5b · 2c8af5b
1 parent 8b5f0cd
commit 2c8af5b
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 47 deletions.
diff --git a/packages/ui/src/design-system/decorators/index.ts b/packages/ui/src/design-system/decorators/index.ts
@@ -1,6 +1,6 @@
 export { page } from './page.decorator';
 export * as Variants from './variants-table';
 export { Section } from './page-section.component';
-export { usePortalContainer } from './page.hooks';
+export { useDarkThemePortalContainer } from './page.hooks';
 export { UIStateTable } from './ui-state-table.component';
 export { ColorSchemaTable } from './color-schema-table.component';
diff --git a/packages/ui/src/design-system/decorators/page.component.tsx b/packages/ui/src/design-system/decorators/page.component.tsx
@@ -1,10 +1,14 @@
 import type { PropsWithChildren } from 'react';
 import React, { useEffect, useRef } from 'react';
 
-import { ThemeColorScheme, ThemeProvider } from '../../design-tokens';
+import {
+  LocalThemeProvider,
+  ThemeColorScheme,
+  ThemeProvider,
+} from '../../design-tokens';
 import { Box } from '../box';
 import { Divider } from '../divider';
-import { Grid, Cell } from '../grid';
+import { Cell, Grid } from '../grid';
 import { Text } from '../text';
 
 import { usePageContext } from './page.context';
@@ -48,7 +52,9 @@ export const Page = ({
           {children}
         </Grid>
       </div>
-      <div id="portal-container" ref={container} />
+      <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
+        <div id="dark-theme-portal-container" ref={container} />
+      </LocalThemeProvider>
     </ThemeProvider>
   );
 };
diff --git a/packages/ui/src/design-system/decorators/page.hooks.ts b/packages/ui/src/design-system/decorators/page.hooks.ts
@@ -1,4 +1,4 @@
 import { usePageContext } from './page.context';
 
-export const usePortalContainer = (): HTMLElement | undefined =>
+export const useDarkThemePortalContainer = (): HTMLElement | undefined =>
   usePageContext().portalContainer;
diff --git a/packages/ui/src/design-system/select/select-root.component.tsx b/packages/ui/src/design-system/select/select-root.component.tsx
@@ -23,6 +23,7 @@ export type SelectRootProps = Pick<
   showArrow?: boolean;
   value: string | undefined;
   variant?: SelectVariant;
+  portalContainer?: HTMLElement;
 };
 
 const isValidSelectRootChild = (
@@ -45,6 +46,8 @@ const isValidSelectRootChild = (
  * @param onChange `onValueChange` See: https://www.radix-ui.com/primitives/docs/components/select#root
  * @param defaultOpen The default value for open state of the select.
  * @param placeholder See: https://www.radix-ui.com/primitives/docs/components/select#value
+ * @param portalContainer The HTMLElement which will be passed as `container` to the Radix `<Select.Portal />`.
+ * See: https://www.radix-ui.com/primitives/docs/components/select#portal
  * @param required See: https://www.radix-ui.com/primitives/docs/components/select#root
  * @param showArrow Render arrow icon next to the input value, when the Select is closed.
  * @param value See: https://www.radix-ui.com/primitives/docs/components/select#root
@@ -59,6 +62,7 @@ export const Root = ({
   onChange,
   defaultOpen = false,
   placeholder,
+  portalContainer,
   required,
   showArrow = false,
   value,
@@ -84,7 +88,7 @@ export const Root = ({
           </Select.Icon>
         )}
       </Select.Trigger>
-      <Select.Portal>
+      <Select.Portal container={portalContainer}>
         <Select.Content
           className={cx.content[variant]}
           position={align === 'selected' ? 'item-aligned' : 'popper'}

diff --git a/packages/ui/src/design-system/select/select.stories.tsx b/packages/ui/src/design-system/select/select.stories.tsx
@@ -5,7 +5,12 @@ import type { Meta } from '@storybook/react';
 import capitalize from 'lodash/capitalize';
 
 import { LocalThemeProvider, ThemeColorScheme } from '../../design-tokens';
-import { page, Section, Variants } from '../decorators';
+import {
+  page,
+  Section,
+  useDarkThemePortalContainer,
+  Variants,
+} from '../decorators';
 import { Divider } from '../divider';
 import { Cell, Grid } from '../grid';
 
@@ -75,6 +80,7 @@ const SelectAlignment = (): JSX.Element => (
 );
 
 const SelectVariants = (): JSX.Element => {
+  const darkThemePortalContainer = useDarkThemePortalContainer();
   const renderedOptions = options.map(option => (
     <Select.Item
       key={option.value}
@@ -103,6 +109,11 @@ const SelectVariants = (): JSX.Element => {
                     value={undefined}
                     onChange={(): void => void 0}
                     placeholder={placeholder}
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -125,6 +136,11 @@ const SelectVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -139,6 +155,7 @@ const SelectVariants = (): JSX.Element => {
 };
 
 const SelectRootVariants = (): JSX.Element => {
+  const darkThemePortalContainer = useDarkThemePortalContainer();
   const renderedOptions = options.map(option => (
     <Select.Item
       key={option.value}
@@ -174,6 +191,11 @@ const SelectRootVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -186,6 +208,11 @@ const SelectRootVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -197,6 +224,11 @@ const SelectRootVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -209,6 +241,11 @@ const SelectRootVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>
@@ -221,6 +258,11 @@ const SelectRootVariants = (): JSX.Element => {
                     onChange={(): void => void 0}
                     placeholder={placeholder}
                     showArrow
+                    portalContainer={
+                      colorScheme === ThemeColorScheme.Dark
+                        ? darkThemePortalContainer
+                        : undefined
+                    }
                   >
                     {renderedOptions}
                   </Select.Root>

diff --git a/packages/ui/src/design-system/side-drawer/side-drawer.stories.tsx b/packages/ui/src/design-system/side-drawer/side-drawer.stories.tsx
@@ -11,7 +11,7 @@ import { ThemeColorScheme, LocalThemeProvider, sx } from '../../design-tokens';
 import { sleep } from '../../test';
 import { Box } from '../box';
 import * as Buttons from '../buttons';
-import { page, Section, Variants, usePortalContainer } from '../decorators';
+import { page, Section, Variants } from '../decorators';
 import { Divider } from '../divider';
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
@@ -403,46 +403,38 @@ type Interactions = ComponentStory<ElementType<Props>>;
 export const Interactions: Interactions = ({
   onCloseClick,
   onBackClick,
-}: Props): JSX.Element => {
-  const container = usePortalContainer();
-
-  return (
-    <Grid columns="$1">
-      <Cell>
-        <Section title="Play">
-          <Root>
-            <Content
-              data-testid="side-drawer-content"
-              zIndex={100}
-              container={container}
-            >
-              <Header
-                text="Label"
-                onBackClick={onBackClick}
-                onCloseClick={onCloseClick}
+}: Props): JSX.Element => (
+  <Grid columns="$1">
+    <Cell>
+      <Section title="Play">
+        <Root>
+          <Content data-testid="side-drawer-content" zIndex={100}>
+            <Header
+              text="Label"
+              onBackClick={onBackClick}
+              onCloseClick={onCloseClick}
+            />
+            <Body>
+              <Headline
+                title="Section title"
+                description="Lorem ipsum dolor sit amet quare id faciam."
               />
-              <Body>
-                <Headline
-                  title="Section title"
-                  description="Lorem ipsum dolor sit amet quare id faciam."
-                />
-              </Body>
-              <Footer>
-                <Buttons.CallToAction label="Label" />
-                <Close>
-                  <Buttons.Secondary label="Close" />
-                </Close>
-              </Footer>
-            </Content>
-            <Trigger>
-              <Buttons.Primary label="Open side drawer" />
-            </Trigger>
-          </Root>
-        </Section>
-      </Cell>
-    </Grid>
-  );
-};
+            </Body>
+            <Footer>
+              <Buttons.CallToAction label="Label" />
+              <Close>
+                <Buttons.Secondary label="Close" />
+              </Close>
+            </Footer>
+          </Content>
+          <Trigger>
+            <Buttons.Primary label="Open side drawer" />
+          </Trigger>
+        </Root>
+      </Section>
+    </Cell>
+  </Grid>
+);
 
 Interactions.play = async ({ canvasElement }): Promise<void> => {
   const canvas = within(canvasElement);