feat: Add optional width and zIndex props to SideSheet component

Author: andersler

src/organisms/SideSheet/SideSheet.stories.tsx

@@ -335,6 +335,62 @@ export const StatefulModal: Story = {
   },
 };
 
+export const CustomWidth: Story = {
+  args: {
+    type: 'standard',
+    width: 800,
+  },
+  play: async ({ canvasElement, context }) => {
+    const canvas = within(canvasElement);
+    const { title } = context.args;
+
+    const heading = await canvas.findByRole('heading', {
+      name: title as string,
+      level: 2,
+    });
+    const sheet = heading.closest('aside') ?? heading.parentElement;
+    await expect(sheet).not.toBeNull();
+    await expect(getComputedStyle(sheet!).width).toBe('800px');
+  },
+};
+
+export const CustomZIndex: Story = {
+  args: {
+    type: 'modal',
+    zIndex: 1234,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: (Story) => (
+    <FloatingStoryWrapper>
+      <Story />
+    </FloatingStoryWrapper>
+  ),
+  play: async ({ canvasElement, context }) => {
+    const canvas = within(canvasElement);
+    const { title } = context.args;
+
+    const heading = await canvas.findByRole('heading', {
+      name: title as string,
+      level: 2,
+    });
+
+    let element: HTMLElement | null = heading;
+    let foundZIndex: string | null = null;
+    while (element) {
+      const computed = getComputedStyle(element).zIndex;
+      if (computed && computed !== 'auto') {
+        foundZIndex = computed;
+        break;
+      }
+      element = element.parentElement;
+    }
+
+    await expect(foundZIndex).toBe('1234');
+  },
+};
+
 export const StatefulModalWithScrim: Story = {
   args: {
     type: 'modal',

src/organisms/SideSheet/SideSheet.styles.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 import { colors, elevation, shape, spacings } from 'src/atoms/style';
 import type { SideSheetProps } from 'src/organisms';
 
@@ -7,11 +9,12 @@ import { css, styled } from 'styled-components';
 interface WrapperProps {
   $type: NonNullable<SideSheetProps['type']>;
   $withShadow?: boolean;
+  $zIndex?: CSSProperties['zIndex'];
 }
 
 export const Wrapper = styled(motion.div)<WrapperProps>`
   overflow: hidden;
-  ${({ $type, $withShadow }) => {
+  ${({ $type, $withShadow, $zIndex }) => {
     if ($type === 'standard') return '';
 
     if ($type === 'floating') {
@@ -21,6 +24,10 @@ export const Wrapper = styled(motion.div)<WrapperProps>`
         right: ${spacings.medium};
         box-shadow: ${elevation.sticky};
         border-radius: ${shape.corners.borderRadius};
+        ${$zIndex !== undefined &&
+        css`
+          z-index: ${$zIndex};
+        `}
       `;
     }
 
@@ -29,18 +36,27 @@ export const Wrapper = styled(motion.div)<WrapperProps>`
       top: 64px;
       right: 0;
       box-shadow: ${$withShadow ? elevation.above_scrim : 'none'};
+      ${$zIndex !== undefined &&
+      css`
+        z-index: ${$zIndex};
+      `}
     `;
   }}
 `;
 
 interface SheetProps {
   $type: NonNullable<SideSheetProps['type']>;
+  $width?: CSSProperties['width'];
 }
 
 export const Sheet = styled.div<SheetProps>`
   display: flex;
   flex-direction: column;
-  width: 500px;
+  width: ${({ $width }) => {
+    if ($width === undefined) return '500px';
+    if (typeof $width === 'number') return `${$width}px`;
+    return $width;
+  }};
   background: ${colors.ui.background__default.rgba};
   ${({ $type }) => {
     if ($type === 'standard') {
@@ -64,12 +80,16 @@ export const Header = styled.div`
   padding: ${spacings.medium} ${spacings.large};
 `;
 
-export const ScrimWrapper = styled(motion.div)`
+interface ScrimWrapperProps {
+  $zIndex?: CSSProperties['zIndex'];
+}
+
+export const ScrimWrapper = styled(motion.div)<ScrimWrapperProps>`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   height: calc(100vh - 64px);
-  z-index: 10000;
+  z-index: ${({ $zIndex }) => $zIndex ?? 10000};
 `;

src/organisms/SideSheet/SideSheet.tsx

@@ -16,6 +16,7 @@ import { AnimatePresence } from 'motion/react';
  * @param title - Title to display in the header
  * @param type - How the side sheet should be position, default is standard
  * @param headerElements - Optional spot to put elements in the header, for example more action buttons
+ * @param width - Optional width override (number is treated as px)
  * @param children - Content in the side sheet
  */
 export const SideSheet: FC<SideSheetProps> = ({
@@ -24,6 +25,7 @@ export const SideSheet: FC<SideSheetProps> = ({
   title,
   type = 'standard',
   headerElements,
+  width,
   children,
   ...rest
 }) => {
@@ -32,6 +34,7 @@ export const SideSheet: FC<SideSheetProps> = ({
       <ScrimWrapper
         data-testid="side-sheet-scrim"
         onClick={open ? onClose : undefined}
+        $zIndex={'zIndex' in rest ? rest.zIndex : undefined}
         initial={{
           display: 'none',
           background: 'rgba(111,111,111,0)',
@@ -47,6 +50,8 @@ export const SideSheet: FC<SideSheetProps> = ({
           title={title}
           type="modal"
           headerElements={headerElements}
+          width={width}
+          zIndex={'zIndex' in rest ? rest.zIndex : undefined}
           withScrim
         >
           {children}
@@ -55,13 +60,30 @@ export const SideSheet: FC<SideSheetProps> = ({
     );
   }
 
+  if (type === 'modal' || type === 'floating') {
+    return (
+      <SideSheetContent
+        open={open}
+        onClose={onClose}
+        title={title}
+        type={type}
+        headerElements={headerElements}
+        width={width}
+        zIndex={'zIndex' in rest ? rest.zIndex : undefined}
+      >
+        {children}
+      </SideSheetContent>
+    );
+  }
+
   return (
     <SideSheetContent
       open={open}
       onClose={onClose}
       title={title}
       type={type}
       headerElements={headerElements}
+      width={width}
     >
       {children}
     </SideSheetContent>
@@ -74,6 +96,7 @@ function SideSheetContent({
   title,
   type = 'standard',
   headerElements,
+  width,
   children,
   ...rest
 }: SideSheetProps) {
@@ -83,6 +106,7 @@ function SideSheetContent({
         <Wrapper
           $type={type}
           $withShadow={!('withScrim' in rest && rest.withScrim)}
+          $zIndex={'zIndex' in rest ? rest.zIndex : undefined}
           initial={{
             x: type !== 'standard' ? '110%' : undefined,
             width: type === 'standard' ? 0 : undefined,
@@ -99,7 +123,7 @@ function SideSheetContent({
             bounce: 0.25,
           }}
         >
-          <Sheet $type={type}>
+          <Sheet $type={type} $width={width}>
             <Header>
               <Typography variant="h2">{title}</Typography>
               {headerElements && <section>{headerElements}</section>}

src/organisms/SideSheet/SideSheet.types.ts

@@ -1,10 +1,11 @@
-import { ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 
 interface BaseSideSheetProps {
   open: boolean;
   onClose: () => void;
   title: string;
   headerElements?: ReactElement | ReactElement[];
+  width?: CSSProperties['width'];
   children: ReactElement | ReactElement[];
 }
 
@@ -15,10 +16,12 @@ interface StandardSideSheetProps extends BaseSideSheetProps {
 interface ModalSideSheetProps extends BaseSideSheetProps {
   type: 'modal';
   withScrim?: boolean;
+  zIndex?: CSSProperties['zIndex'];
 }
 
 interface FloatingSideSheetProps extends BaseSideSheetProps {
   type: 'floating';
+  zIndex?: CSSProperties['zIndex'];
 }
 
 export type SideSheetProps =