fix(ui): add light theme portal container for storybook + use with Se…

…lect
input-output-hk · May 3, 2024 · 5a79d30 · 5a79d30
1 parent 820bfe5
commit 5a79d30
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 35 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 { useDarkThemePortalContainer } from './page.hooks';
+export { usePortalContainer } 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-provider.component.tsx b/packages/ui/src/design-system/decorators/page-provider.component.tsx
@@ -10,13 +10,21 @@ interface Props {
 export const PageProvider = ({
   children,
 }: Readonly<Props>): React.ReactElement => {
-  const [state, setState] = useState<HTMLElement>();
+  const [state, setState] = useState<{
+    lightThemePortalContainer?: HTMLElement;
+    darkThemePortalContainer?: HTMLElement;
+  }>({});
 
   return (
     <PageContext.Provider
       value={{
-        portalContainer: state,
-        setPortalContainer: setState,
+        ...state,
+        setPortalContainers: ({ lightTheme, darkTheme }): void => {
+          setState({
+            lightThemePortalContainer: lightTheme,
+            darkThemePortalContainer: darkTheme,
+          });
+        },
       }}
     >
       {children}

diff --git a/packages/ui/src/design-system/decorators/page.component.tsx b/packages/ui/src/design-system/decorators/page.component.tsx
@@ -24,14 +24,18 @@ export const Page = ({
   title,
   subtitle,
 }: Readonly<PageProps>): JSX.Element => {
-  const container = useRef<HTMLDivElement>(null);
-  const { setPortalContainer } = usePageContext();
+  const lightThemeContainer = useRef<HTMLDivElement>(null);
+  const darkThemeContainer = useRef<HTMLDivElement>(null);
+  const { setPortalContainers } = usePageContext();
 
   useEffect(() => {
-    if (container.current) {
-      setPortalContainer(container.current);
+    if (lightThemeContainer.current && darkThemeContainer.current) {
+      setPortalContainers({
+        lightTheme: lightThemeContainer.current,
+        darkTheme: darkThemeContainer.current,
+      });
     }
-  }, [container.current]);
+  }, [lightThemeContainer.current, darkThemeContainer.current]);
 
   return (
     <ThemeProvider colorScheme={ThemeColorScheme.Light}>
@@ -52,8 +56,9 @@ export const Page = ({
           {children}
         </Grid>
       </div>
+      <div id="light-theme-portal-container" ref={lightThemeContainer} />
       <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
-        <div id="dark-theme-portal-container" ref={container} />
+        <div id="dark-theme-portal-container" ref={darkThemeContainer} />
       </LocalThemeProvider>
     </ThemeProvider>
   );

diff --git a/packages/ui/src/design-system/decorators/page.context.ts b/packages/ui/src/design-system/decorators/page.context.ts
@@ -1,16 +1,18 @@
 import { createContext, useContext } from 'react';
 
 interface PageContextValue {
-  portalContainer?: HTMLElement;
-  setPortalContainer: (container: Readonly<HTMLElement>) => void;
+  darkThemePortalContainer?: HTMLElement;
+  lightThemePortalContainer?: HTMLElement;
+  setPortalContainers: ({
+    lightTheme,
+    darkTheme,
+  }: Readonly<{ lightTheme: HTMLElement; darkTheme: HTMLElement }>) => void;
 }
 
 export const PageContext = createContext<PageContextValue>({
-  portalContainer: undefined,
-  setPortalContainer: () => false,
+  darkThemePortalContainer: undefined,
+  lightThemePortalContainer: undefined,
+  setPortalContainers: () => void 0,
 });
 
-export const usePageContext = (): PageContextValue => {
-  const context = useContext(PageContext);
-  return context;
-};
+export const usePageContext = (): PageContextValue => useContext(PageContext);
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,16 @@
 import { usePageContext } from './page.context';
 
-export const useDarkThemePortalContainer = (): HTMLElement | undefined =>
-  usePageContext().portalContainer;
+interface UsePortalContainerReturnType {
+  darkThemePortalContainer?: HTMLElement;
+  lightThemePortalContainer?: HTMLElement;
+}
+
+/**
+ * **Important**: This is for Storybook use only. In real app everything will be placed in context of a single
+ * ThemeProvider. It should be used with all components that create portals to fix LocalThemeProvider with dark theme
+ * and Interaction tests (without this approach your component may not be accessible using `canvas.getByTestId()`).
+ */
+export const usePortalContainer = (): UsePortalContainerReturnType => ({
+  darkThemePortalContainer: usePageContext().darkThemePortalContainer,
+  lightThemePortalContainer: usePageContext().lightThemePortalContainer,
+});
diff --git a/packages/ui/src/design-system/select/select.stories.tsx b/packages/ui/src/design-system/select/select.stories.tsx
@@ -5,12 +5,7 @@ import type { Meta } from '@storybook/react';
 import capitalize from 'lodash/capitalize';
 
 import { LocalThemeProvider, ThemeColorScheme } from '../../design-tokens';
-import {
-  page,
-  Section,
-  useDarkThemePortalContainer,
-  Variants,
-} from '../decorators';
+import { page, Section, usePortalContainer, Variants } from '../decorators';
 import { Divider } from '../divider';
 import { Cell, Grid } from '../grid';
 
@@ -80,7 +75,8 @@ const SelectAlignment = (): JSX.Element => (
 );
 
 const SelectVariants = (): JSX.Element => {
-  const darkThemePortalContainer = useDarkThemePortalContainer();
+  const { darkThemePortalContainer, lightThemePortalContainer } =
+    usePortalContainer();
   const renderedOptions = options.map(option => (
     <Select.Item
       key={option.value}
@@ -112,7 +108,7 @@ const SelectVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -139,7 +135,7 @@ const SelectVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -155,7 +151,8 @@ const SelectVariants = (): JSX.Element => {
 };
 
 const SelectRootVariants = (): JSX.Element => {
-  const darkThemePortalContainer = useDarkThemePortalContainer();
+  const { darkThemePortalContainer, lightThemePortalContainer } =
+    usePortalContainer();
   const renderedOptions = options.map(option => (
     <Select.Item
       key={option.value}
@@ -193,7 +190,7 @@ const SelectRootVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -210,7 +207,7 @@ const SelectRootVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -226,7 +223,7 @@ const SelectRootVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -243,7 +240,7 @@ const SelectRootVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}
@@ -260,7 +257,7 @@ const SelectRootVariants = (): JSX.Element => {
                     portalContainer={
                       colorScheme === ThemeColorScheme.Dark
                         ? darkThemePortalContainer
-                        : undefined
+                        : lightThemePortalContainer
                     }
                   >
                     {renderedOptions}