Skip to content

feat(side-sheet): add disableResize prop to hide the drag handle - #3417

Merged
eikeland merged 3 commits into
equinor:mainfrom
EdwardBrunton:feat/side-sheet-disable-resize
Sep 18, 2026
Merged

eikeland merged 3 commits into
equinor:mainfrom
EdwardBrunton:feat/side-sheet-disable-resize

Conversation

@EdwardBrunton

Copy link
Copy Markdown
Contributor

What

Adds an optional disableResize prop to SideSheet/SideSheetBase that hides the drag-to-resize handle. Defaults to false, so existing behavior is unchanged unless a consumer opts in.

Why

We're toggling the side sheet's width programmatically between two fixed sizes, and leaving the drag handle enabled let manual drags desync from that state. Hiding the handle avoids the desync entirely.

Changes

  • packages/side-sheet/src/components/SideSheetBase.tsx: new disableResize?: boolean prop (default false); when true, passes a DISABLE_ALL_HANDLES object to re-resizable's enable prop instead of undefined, which otherwise preserves re-resizable's original default (all 8 directions enabled) exactly as before.
  • storybook/src/stories/sidesheet/side-sheet.stories.tsx: added a disableResize boolean control to the basic story for manual testing.
  • Changeset added for a minor bump of @equinor/fusion-react-side-sheet.

Testing

  • bun run --filter @equinor/fusion-react-side-sheet build and lint pass.
  • Manually verified via Storybook: toggling disableResize shows/hides the drag handle with no change to default behavior.

@changeset-bot

changeset-bot Bot commented Sep 16, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5d660e8

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 Minor

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

@EdwardBrunton

EdwardBrunton commented Sep 17, 2026 •

Copy link
Copy Markdown
Contributor Author

Both failing checks appear unrelated to this PR: chromatic-deployment fails with "Missing project token" (likely secrets are not exposed to fork PRs), and biome fails on a pre-existing unused-variable lint issue in scripts/publish.js, which this PR does not touch.

@eikeland

Copy link
Copy Markdown
Collaborator

@EdwardBrunton, Thanks for the pr.

Could you remove DISABLE_ALL_HANDLES and pass false to the enable prop when resizing is disabled?

enable={disableResize ? false : undefined}

Also, could you add a separate disableResize story to demonstrate this behavior and remove the disableResize prop from the basic story? That keeps the basic example focused on the default behavior.

@EdwardBrunton

Copy link
Copy Markdown
Contributor Author

@EdwardBrunton, Thanks for the pr.

Could you remove DISABLE_ALL_HANDLES and pass false to the enable prop when resizing is disabled?

enable={disableResize ? false : undefined}

Also, could you add a separate disableResize story to demonstrate this behavior and remove the disableResize prop from the basic story? That keeps the basic example focused on the default behavior.

Done 😁

- pass false instead of a DISABLE_ALL_HANDLES object to the enable prop
- add a dedicated disableResize story and keep the basic story unchanged
@eikeland
eikeland force-pushed the feat/side-sheet-disable-resize branch from 10bd1f9 to da365bf Compare September 17, 2026 12:12
Comment thread packages/side-sheet/src/components/SideSheetBase.tsx Outdated
@eikeland
eikeland merged commit b8ae020 into equinor:main Sep 18, 2026
4 checks passed
@eikeland

Copy link
Copy Markdown
Collaborator

thank you @EdwardBrunton for the contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants