@dxos/react-ui 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

package/src/components/Dialog/Dialog.tsx

@@ -7,7 +7,6 @@ import {
   DialogClose as DialogClosePrimitive,
   type DialogCloseProps as DialogClosePrimitiveProps,
   DialogContent as DialogContentPrimitive,
-  type DialogContentProps as DialogContentPrimitiveProps,
   DialogDescription as DialogDescriptionPrimitive,
   type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
   DialogOverlay as DialogOverlayPrimitive,
@@ -21,12 +20,26 @@ import {
   DialogTrigger as DialogTriggerPrimitive,
   type DialogTriggerProps as DialogTriggerPrimitiveProps,
 } from '@radix-ui/react-dialog';
-import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type DialogSize, osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton, type IconButtonProps } from '../Button';
 import { ElevationProvider } from '../ElevationProvider';
 
+//
+// Root
+//
+
 type DialogRootProps = DialogRootPrimitiveProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
@@ -35,52 +48,30 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+//
+// Trigger
+//
+
 type DialogTriggerProps = DialogTriggerPrimitiveProps;
 
 const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
 
+//
+// Portal
+//
+
 type DialogPortalProps = DialogPortalPrimitiveProps;
 
 const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
-
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
-
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
-type DialogCloseProps = DialogClosePrimitiveProps;
+//
+// Overlay
+//
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
-const DIALOG_CONTENT_NAME = 'DialogContent';
+
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   DIALOG_OVERLAY_NAME,
   {},
@@ -107,10 +98,19 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
 
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
+//
+// Content
+//
+
+const DIALOG_CONTENT_NAME = 'DialogContent';
+
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContentPrimitive>> & {
+  size?: DialogSize;
+  inOverlayLayout?: boolean;
+};
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  ({ classNames, children, size, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
@@ -123,7 +123,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         className={tx(
           'dialog.content',
           'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
+          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size },
           classNames,
         )}
         ref={forwardedRef}
@@ -136,15 +136,152 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
 
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 
+//
+// Header
+//
+
+type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+
+const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div
+        {...props}
+        role='header'
+        className={tx('dialog.header', 'dialog__header', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Body
+//
+
+type DialogBodyProps = PropsWithChildren;
+
+const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div {...props} className={tx('dialog.body', 'dialog__body')} ref={forwardedRef}>
+        {children}
+      </div>
+    );
+  },
+);
+
+// TODO(burdon): Add ActionBar.
+
+//
+// Title
+//
+
+type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+
+const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogTitlePrimitive
+        {...props}
+        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Description
+//
+
+type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+
+const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
+  HTMLParagraphElement,
+  DialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <DialogDescriptionPrimitive
+      {...props}
+      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// ActionBar
+//
+
+type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+
+const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  DialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('dialog.actionbar', 'dialog__actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+//
+// Close
+//
+
+type DialogCloseProps = DialogClosePrimitiveProps;
+
+const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+
+//
+// Close Button
+//
+
+type DialogCloseIconButtonProps = ThemedClassName<Partial<IconButtonProps>>;
+
+const DialogCloseIconButton: ForwardRefExoticComponent<DialogCloseIconButtonProps> = forwardRef<
+  HTMLButtonElement,
+  DialogCloseIconButtonProps
+>((props, forwardedRef) => {
+  const { t } = useTranslation(osTranslations);
+  return (
+    <IconButton
+      {...props}
+      label={props.label ?? t('close dialog label')}
+      icon='ph--x--regular'
+      iconOnly
+      size={4}
+      density='fine'
+      variant='ghost'
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// Dialog
+//
+
 export const Dialog = {
   Root: DialogRoot,
   Trigger: DialogTrigger,
   Portal: DialogPortal,
   Overlay: DialogOverlay,
   Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
+  CloseIconButton: DialogCloseIconButton,
 };
 
 export type {
@@ -153,7 +290,11 @@ export type {
   DialogPortalProps,
   DialogOverlayProps,
   DialogContentProps,
+  DialogHeaderProps,
+  DialogBodyProps,
   DialogTitleProps,
   DialogDescriptionProps,
+  DialogActionBarProps,
   DialogCloseProps,
+  DialogCloseIconButtonProps,
 };

package/src/components/ElevationProvider/ElevationProvider.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 export interface ElevationContextValue {
   elevation?: Elevation;

package/src/components/Icon/Icon.stories.tsx

@@ -6,7 +6,7 @@ import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC, type ReactElement, type SVGProps, forwardRef } from 'react';
 
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 
@@ -60,9 +60,9 @@ const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Icon',
+  title: 'ui/react-ui-core/components/Icon',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@
 import { type Primitive } from '@radix-ui/react-primitive';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Size } from '@dxos/react-ui-types';
+import { type Size } from '@dxos/ui-types';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Input/Input.stories.tsx

@@ -5,8 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 
@@ -39,7 +39,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
 
-const Wrapper = ({
+const InputWrapper = ({
   kind,
   label,
   description,
@@ -74,31 +74,31 @@ const Wrapper = ({
 const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4 rounded-md')}>
-        <Wrapper {...props} />
+      <div className={mx('bg-baseSurface', 'p-4 rounded-md')}>
+        <InputWrapper {...props} />
       </div>
       <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
+        <InputWrapper {...props} />
       </div>
-      <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
+      <div className={mx('bg-modalSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
+        <InputWrapper {...props} />
       </div>
     </div>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Input',
+  title: 'ui/react-ui-core/components/Input',
   component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
 type Story = StoryObj<BaseProps & Variant>;
 
-export const Default: Story = {
+export const DensityCoarse: Story = {
   args: {
     kind: 'text',
     label: 'Hello',
@@ -109,6 +109,7 @@ export const Default: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    density: 'coarse',
   },
 };
 

package/src/components/Input/Input.tsx

@@ -27,8 +27,8 @@ import {
   type ValidationProps as ValidationPrimitiveProps,
   useInputContext,
 } from '@dxos/react-input';
-import { mx } from '@dxos/react-ui-theme';
-import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/react-ui-types';
+import { mx } from '@dxos/ui-theme';
+import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -119,7 +119,6 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
       elevation: propsElevation,
       segmentClassName: propsSegmentClassName,
       inputClassName,
-      variant,
       ...props
     },
     forwardedRef,
@@ -162,10 +161,17 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
 
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
 
-type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps>;
+type AutoFillProps = {
+  noAutoFill?: boolean;
+};
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps;
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
-  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  (
+    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    forwardedRef,
+  ) => {
     const { hasIosKeyboard } = useThemeContext();
     const themeContextValue = useThemeContext();
     const density = useDensityContext(propsDensity);
@@ -177,6 +183,8 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
     return (
       <TextInputPrimitive
         {...props}
+        // TODO(wittjosiah): Factor out autofill properies.
+        {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
           'input',

package/src/components/Link/Link.stories.tsx

@@ -9,9 +9,9 @@ import { withTheme } from '../../testing';
 import { Link } from './Link';
 
 const meta = {
-  title: 'ui/react-ui-core/Link',
+  title: 'ui/react-ui-core/components/Link',
   component: Link,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Link>;
 
 export default meta;

package/src/components/List/List.stories.tsx

@@ -7,7 +7,7 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, useState } from 'react';
+import React, { type ReactNode, useCallback, useState } from 'react';
 
 import {
   getSize,
@@ -16,7 +16,7 @@ import {
   ghostSelectedTrackingInterFromNormal,
   mx,
   surfaceShadow,
-} from '@dxos/react-ui-theme';
+} from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
@@ -24,9 +24,9 @@ import { Icon } from '../Icon';
 import { List, ListItem, type ListScopedProps } from './List';
 
 const meta = {
-  title: 'ui/react-ui-core/List',
+  title: 'ui/react-ui-core/components/List',
   component: List,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof List>;
 
 export default meta;
@@ -63,16 +63,20 @@ export const UniformSizeDraggable: Story = {
       })),
     );
 
-    const handleDragEnd = (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        setItems((items) => {
-          const oldIndex = items.findIndex((item) => item.id === active.id);
-          const newIndex = items.findIndex((item) => item.id === over?.id);
-          return arrayMove(items, oldIndex, newIndex);
-        });
-      }
-    };
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (active.id !== over?.id) {
+          setItems((items) => {
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over?.id);
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+      },
+      [items],
+    );
+
     return (
       <DndContext onDragEnd={handleDragEnd}>
         <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>

package/src/components/List/List.tsx

@@ -23,7 +23,7 @@ import {
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/List/Tree.stories.tsx

@@ -56,10 +56,10 @@ const DefaultStory = ({ data }: StorybookTreeProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Tree',
+  title: 'ui/react-ui-core/components/Tree',
   component: Tree as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/List/Treegrid.stories.tsx

@@ -144,10 +144,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Treegrid',
+  title: 'ui/react-ui-core/components/Treegrid',
   component: Treegrid.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/List/Treegrid.tsx

@@ -97,10 +97,10 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
     return (
       <Root
         role='treegrid'
-        onKeyDown={handleKeyDown}
         {...props}
         className={tx('treegrid.root', 'treegrid', {}, classNames)}
         style={{ ...style, gridTemplateColumns }}
+        onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
         {children}

package/src/components/Main/Main.stories.tsx

@@ -5,51 +5,72 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Button';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Toolbar } from '../Toolbar';
 
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
 
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
 };
 
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='is-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Main',
+  title: 'ui/react-ui-core/components/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     chromatic: {