feat(sidebar): add a Sidebar component with several variant styles #3154
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 16472da The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
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 |
github-actions
bot
added
the
Status: Do Not Merge
TheSisb
force-pushed
the
sidebar-component
branch
from
49318e2
to
c7e010c
Compare
github-actions
bot
added
Area: Components
✅ Deploy Preview for paste-theme-designer ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for paste-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 16472da. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 3 targetsSent with 💌 from NxCloud. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 16472da:
|
Passing run #5813 ↗︎
Details:
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. |
|||||||||||||||
|
Size Change: +468 B (0%) Total Size: 979 kB
ℹ️ View Unchanged
|
github-actions
bot
added
Area: Infrastructure
TheSisb
force-pushed
the
sidebar-component
branch
from
2bd92b5
to
bfe0b38
Compare
TheSisb
added
🚀 merge it!
🕵🏻♀️ Run website visual regression
nkrantz
reviewed
Apr 18, 2023
packages/paste-core/components/sidebar/__tests__/index.spec.tsx
Outdated
Show resolved
Hide resolved
nkrantz
previously approved these changes
Apr 18, 2023
SiTaggart
reviewed
Apr 18, 2023
SiTaggart
reviewed
Apr 18, 2023
SiTaggart
reviewed
Apr 18, 2023
SiTaggart
approved these changes
Apr 18, 2023
loreina
approved these changes
Apr 18, 2023
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new Paste package:
@twilio-paste/sidebar. This package exports three components:The Sidebar comes prebuilt with two variants:
defaultorcompact.compactkeeps a sliver of the sidebar visible when collapsed, but otherwise is the same.The
Sidebarcomponent is position fixed, locked to the left side of the screen and taking the full vertical height. By default, Sidebar is an overlay element. In order for the Sidebar to push the page contents, we wrap the page content with the correspondingPush-orOverlaySidebarContentWrapper. These wrappers handle animating the content position when the sidebar opens or closes. They accept the same props as Sidebar.All the components are stateless. State is managed by the consuming application.
The Sidebar is responsive. It occupies the full 100% width, behaves as overlay, and is default variant always on the smallest breakpoint (mobile). This allows nested components to respond accordingly by also using responsive props and expecting the behavior on the smallest breakpoint too.
This PR also changes the
theme'sbreakpointsfromremtopxvalues. MediaQueries are more easily grokked as PX, and it simplifies development. Some tests, like snapshot tests, may need to be updated.