fix(Select): expose render prop and default value param.s #1781
Conversation
Screen.Recording.2023-10-11.at.16.27.08.mov |
Codecov Report
@@ Coverage Diff @@
## next #1781 +/- ##
=======================================
Coverage 92.35% 92.35%
=======================================
Files 147 147
Lines 2656 2656
Branches 711 710 -1
=======================================
Hits 2453 2453
Misses 187 187
Partials 16 16
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
size-limit report 📦
|
|
Motivation: uncontrolled components allow the form to behave in a way that's more compatible with frameworks using standard HTTP methods for data persistence/submission (e.g., Remix). exposing this option allows for simpler implementation |
src/components/Select/Select.tsx
Outdated
| Select.Button = SelectTrigger; | ||
| Select.ButtonWrapper = SelectButton; |
There was a problem hiding this comment.
This is a bit confusing to me. What's going on here?
select.button = trigger but select.buttonwrapper = button
There was a problem hiding this comment.
Yah, not exactly happy with this as-is. It's referenced in this story, and should be used if someone wants to use BOTH the render prop, but also the existing style for Select.
The idea is that you can use <Select.Button>{text}</Select.Button> which will secretly use that wrapper, or
<Select.Button>
{(props} => (
<span>{props.label}</span> {/* or something similar */}
)}
</Select.Button>Which will render the "button" as a plain span. If someone wants to use the wrapper, it wasn't previously available, hence the export. This allows the button to be "headless" AND allows folks who want to do something with the render prop to also use the regular styling. Naming suggestions?
I can add documentation to explain this use case, but the way things work with storybook makes documenting the details here a little cumbersome. Will think about it a bit more.
- add in story docs for story example - clean up example using unstyled and styled render props - rename internal methods to better define code behavior and use - remove custom styling and use FPO block instead - add snapshots - update existing snapshots
booc0mtaco
force-pushed
the
aholloway/EFI-1371
branch
from
e4b2492
to
c66a26b
Compare
## [13.6.0](v13.5.0...v13.6.0) (2023-10-13) ### Features * **Menu:** allow href and onClick to co-exist on a menu item ([#1779](#1779)) ([971f189](971f189)) * **Popover:** allow focus upon popover panel open ([#1782](#1782)) ([76ddbc6](76ddbc6)) ### Bug Fixes * **Accordion:** handle multi-line text in headers ([#1783](#1783)) ([0b3c3e6](0b3c3e6)) * **Select:** expose render prop and default value param.s ([#1781](#1781)) ([f21e2b6](f21e2b6))
Summary:
Test Plan:
edu-stackortrajectas a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.