primer
Hidden component
The Hidden component will be used to hide or show content in a responsive manner. We can do this across three viewport breakpoints aka 'narrow', 'regular' and 'wide'.
It is inspired by Braid design system
This was built to satisfy use cases specific to PageHeader eg -
Here, we want to show different text inside the primary Button based on viewport value.
Merge checklist
- [ ] Added/updated tests
- [x] Added/updated documentation
- [x] Tested in Chrome
- [x] Tested in Firefox
- [x] Tested in Safari
- [ ] Tested in Edge
🦋 Changeset detected
Latest commit: 685fdb8e32d491440839f2225e90be6f309c16fc
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @primer/react | 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
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
size-limit report 📦
| Path | Size |
|---|---|
| dist/browser.esm.js | 77.21 KB (0%) |
| dist/browser.umd.js | 77.85 KB (0%) |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hi 👋
Should we start this component in drafts till we feel confident about our responsive story?
Closing this PR. Basically after discussion with @siddharthkp and reviewing Chakra library, I think it's better we use styled system's responsive props to power this hide behaviour. I will update the API docs accordingly.
After some more thought and trying out the alternative sx way of having responsive css, I'm somewhat gravitating back to the simplicity and utility of this component.
I have addressed existing feedback and moved this component to the drafts folder. I think we should test out the utility before writing off this component.