feat: Add optional width and zIndex props to SideSheet component

[andersler]

Azure DevOps links

User story

• AB#742526

Tasks

• AB#743088

---

• Needs to be tested locally by reviewer

[Copilot]

Pull request overview

This PR extends the SideSheet organism API to support optional width overrides and configurable zIndex (for modal/floating variants), updating the component implementation, styling, and Storybook coverage accordingly.

Changes:

• Added width prop to SideSheet base props and plumbed it through to styling for runtime width overrides.
• Added zIndex prop for modal and floating side sheets and applied it in styles.
• Added Storybook stories to validate custom width and z-index behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/organisms/SideSheet/SideSheet.types.ts	Extends SideSheet prop types with width and zIndex.
src/organisms/SideSheet/SideSheet.tsx	Passes width/zIndex through to content and wrapper logic.
src/organisms/SideSheet/SideSheet.styles.ts	Implements width override and conditional z-index styling.
src/organisms/SideSheet/SideSheet.stories.tsx	Adds play-test stories for width and zIndex.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	100% (🎯 100%)	17224 / 17224
🔵	Statements	100% (🎯 100%)	17224 / 17224
🔵	Functions	100% (🎯 100%)	1244 / 1244
🔵	Branches	100% (🎯 100%)	4385 / 4385

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/organisms/SideSheet/SideSheet.styles.ts	100%	100%	100%	100%
src/organisms/SideSheet/SideSheet.tsx	100%	100%	100%	100%

Generated in workflow #2273 for commit 8960baa by the Vitest Coverage Report Action

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/organisms/SideSheet/SideSheet.tsx:59

• In the withScrim rendering path, ScrimWrapper wraps the entire SideSheetContent and has an onClick handler. Because clicks on descendants bubble, clicking anywhere inside the sheet (including interactive children) will also trigger onClose via the scrim wrapper. Consider stopping propagation on the sheet container (e.g., Wrapper/Sheet) or restructuring so the backdrop click target is a sibling element rather than a parent, so only true backdrop clicks close the sheet.

      <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)',
        }}
        animate={{
          background: open ? 'rgba(111,111,111,0.35)' : 'rgba(111,111,111,0)',
          display: open ? 'block' : 'none',
        }}
      >
        <SideSheetContent
          open={open}
          onClose={onClose}
          title={title}
          type="modal"
          headerElements={headerElements}
          width={width}
          zIndex={'zIndex' in rest ? rest.zIndex : undefined}
          withScrim
        >
          {children}
        </SideSheetContent>
      </ScrimWrapper>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[arkadiy93]

LGTM 🔥