Skip to content

Resizable pane refactor #2481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Oct 27, 2022
Merged

Conversation

colebemis
Copy link
Contributor

@colebemis colebemis commented Oct 25, 2022

CleanShot.2022-10-25.at.16.18.32.mp4

TODO

  • Disable resizing on narrow viewports
  • Clamp pane width
  • Prevent text selection while resizing
  • Delay hover style
  • Double click to reset
  • Support touch events (out of scope)

@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2022

⚠️ No Changeset found

Latest commit: 64c63bc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@colebemis colebemis changed the base branch from main to japf/resizable-pane October 25, 2022 23:09
@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 78.64 KB (-0.08% 🔽)
dist/browser.umd.js 79.29 KB (-0.08% 🔽)

@colebemis colebemis temporarily deployed to github-pages October 25, 2022 23:15 Inactive
@colebemis colebemis temporarily deployed to github-pages October 27, 2022 01:00 Inactive
@colebemis colebemis temporarily deployed to github-pages October 27, 2022 01:13 Inactive
@colebemis colebemis temporarily deployed to github-pages October 27, 2022 01:24 Inactive
@colebemis colebemis temporarily deployed to github-pages October 27, 2022 01:37 Inactive
@colebemis colebemis marked this pull request as ready for review October 27, 2022 01:38
@colebemis colebemis requested review from a team and rezrah October 27, 2022 01:38
@colebemis colebemis merged commit ea629b3 into japf/resizable-pane Oct 27, 2022
@colebemis colebemis deleted the colebemis/resizable-pane branch October 27, 2022 01:38
colebemis added a commit that referenced this pull request Oct 31, 2022
* add resizable support to the PageLayout component

* Add changeset file

* update snapshot

* take client left position into account when pane is not left aligned

* fix resize behavior when pane is not at start position

* fix resize when there are column gaps

* use story debug values

* decouple the resize handle from the vertical divider

* update snap file

* update snap file

* rename canResizePane to resizable

* update snap files

* update resizable PageLayout story

* rename paneWidthStorageKey to widthStorageKey

* refactor(PageLayout): set pane with in CSS Custom Property

* docs: add documentation for resizable nad widthStorageKey

* Resizable pane refactor (#2481)

* Update stories

* Refactor resizable pane implementation

* Clamp pane width resizing

* Delay drag hover effect

* Reset pane width on double click

* Handle styles while dragging

* Add resizable example to SplitPageLayout docs

* Remove comment

* Add comment about touch events

* Update docs

* Update resizable pane story

* Update snapshots

* Wrap localStorage in try/catch

* Store pane width in px

* Update snapshot

* Update pagelayout snapshots

Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
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.

1 participant