feat(side-sheet): improve resize affordance

[chdefrene]

Component Development

Type

• Feature
• Fix
• Hotfix (should release ASAP)
• Maintenance (deps only)

Reference to assignment

Closes equinor/fusion-core-tasks#1860

Description of assignment

Make the SideSheet resize target easier to see and use while retaining dismissal behavior.

Description of Proposed Changes

• Replace the small grip with a full-height, 16 px-wide resize strip outside the SideSheet. Keep its 2 px outer border visible in the subtle gray EDS border color.
• On hover or drag, fill the strip background with the same subtle gray as the outer border. Do not add a right border or shadows. Center the grip in the full strip background, with its bars at 50% opacity.
• disableResize already existed before this PR; do not introduce a new prop or resizing opt-out. Update its README documentation to describe the new strip, preserving its existing purpose of hiding the resize control and disabling resizing.
• Reserve the strip's width at the expanded limit, so its outer border remains at the viewport's left edge instead of moving the strip inside the sheet.
• Follow the WAI-ARIA Window Splitter keyboard convention, treating the SideSheet as the primary pane: Home sets minimum width; End sets maximum width. These shortcuts target pane size, not separator position. Left Arrow widens the right-hand sheet; Right Arrow narrows it. Describe all four keys in the accessible label and README, and link the convention in code.
• Add a full-width Storybook story and a patch changeset. Retain one Keeper SSH-signed commit on top of chdefrene-storybook-light-mode.

Checklist

Create User Story(DevOps) or Issue(Github)

• Describe functional requirements
• Design plan/suggestion (e.g. images, link to eds design or relevant figma links, mention of eds tokens to use)
• Communication with UX (evaluate if needed)

Development

• Describe the component
• Code funtional requirements
• Create stories
• Create snapshots (evaluate if needed)
• Remove unused imports and commented code
• Lint code with Biome (and follow best practises for code quality

Validation:

• bun run --cwd packages/side-sheet build — passed.
• bunx biome check packages/side-sheet/src/components/SideSheetBase.tsx packages/side-sheet/src/components/icon/HandlerIcon.tsx — passed.
• git diff --check — passed.
• Live Storybook checks confirmed no right border or shadows, a surface background at rest, a background matching the subtle gray border during hover and drag, and restoration after release. The grip's actual SVG geometry is centered horizontally and vertically in the 16 px strip (zero center offset).
• Earlier Storybook checks confirmed the outside strip remains reachable at maximum width on desktop and narrow viewports, disabled resizing remains intact, and Home selects minimum width while End selects maximum width. The full Storybook build and broad test suite were not rerun for this final styling update.

Create Pull Request

• Assign relevant reviewers in Github and Cromatic
• Inform colleagues of pending reviews. We use Teams for this purpose, under fusion-frontend team please tag involved reviewers in the Code review channel

Review of Pull Request

• Follow up on comments from code review and implement necessary changes (evaluate if needed)
• Review approved in github (and chromatic)

Publish Code

• Increment version number
• Merge PR
• Consider letting fusion developers know this this shiny new thing exists

[changeset-bot]

🦋 Changeset detected

Latest commit: 448dc9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@equinor/fusion-react-side-sheet	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Copilot review overview

🟡 Changes recommended

Address the accessibility gap and reset interaction state when resizing is disabled.

Review effort: Lite
Findings: 2

Open (2)

• Disabling resize can leave stale active handle state · New
• Resize handle is inaccessible to keyboard and screen-reader users · New

What changed in this PR

Improves the SideSheet resize affordance with an external handle and clearer hover/drag feedback while documenting disableResize.

Changes:

• Adds a half-circle external resize handle.
• Highlights the handle and sheet border during interaction.
• Documents resize behavior and disableResize.

Review findings:

• The handle lacks an accessible keyboard and screen-reader interaction.
• Resize and hover state may become stale if disableResize changes during interaction.

File	Summary
packages/​side-sheet/​src/​components/​SideSheetBase.tsx	Implements the redesigned handle, visual feedback, and resize state handling.
packages/​side-sheet/​README.md	Documents resize behavior and disableResize.

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[eikeland]

if we pull it to full width we cant get a hold of the handle again.

[chdefrene]

@eikeland Updated in the signed, single-commit PR (448dc9c): the resize control is a full-height, 16 px-wide strip outside the SideSheet. At the expanded limit the sheet stops 16 px short, leaving the strip at the viewport left edge so it remains grabbable anywhere along its height. It does not flip inward. The 2 px outer border stays visible in subtle gray; hovering or dragging fills the strip background with that same gray. There is no inner/right border or shadow, and the grip is centered in the full strip with 50% opacity. Keyboard resizing remains available: Left Arrow widens, Right Arrow narrows, Home selects minimum width, and End selects maximum width, following the WAI-ARIA Window Splitter convention. Verified the outside edge at desktop and narrow viewport widths and the final hover background and icon centering in Storybook.

[Copilot]

Copilot review overview

🟡 Changes recommended

Update the accessible label for Home/End shortcuts and clamp the rendered width when the maximum changes.

Review effort: Lite
Findings: 2

Open (2)

• Clamp rendered width when maximum width decreases · New
• Accessible name omits Home/End keyboard shortcuts · New

Resolved since last review (2)

• Resize handle is inaccessible to keyboard and screen-reader users
• Disabling resize can leave stale active handle state

[eikeland]

Looks good to me.

But we cant let this loose when some users get black handles and colors in the sidesheet. Either we support darkmode everywhere or nowhere.