-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Try Ariakit Select for new CustomSelectControl component #55790
Conversation
d5b1287
to
72c6e34
Compare
Flaky tests detected in 3edc792. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6830589057
|
Should the design for |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on it @brookewp!
I've left some thoughts and questions as I took a quick first look, let me know what you think.
Also, I think it would be nice to add some unit tests.
packages/components/src/custom-select-control-v2/stories/index.story.tsx
Show resolved
Hide resolved
Hey @jameskoster , that is a good suggestion! For now, this new version of the component is still quite experimental, so maybe we won't apply any changes in this PR specifically. But we should definitely take this opportunity to take a look at @brookewp , we should probably add a task about reviewing the design of the component in the main tracking issue ?
@brookewp and I recently discussed the approach to this PR, and decided that, since this new version of the component isn't used anywhere, isn't exported, and is temporary, we could adopt a more iterative approach with the PRs, meaning that we were planning on wrapping this PR up even if the work on the component is clearly still in progress. For example, Brooke was going to work on adding unit tests to the legacy As explained above in the reply to Jay, styles for now are also a "best effort" to mimic the legacy component, and they will likely be revised at a later point in the process. Finally, we can also ignore the README file for now, since it would be a bit of a wasted effort to keep it up to date with the component's prop types (while those types are still WIP). @brookewp is also going to update the tracking issue with more details about all the more granular follow-up tasks, to that we can better keep track of the work that is being done. |
Thank you all for the suggestions! It is helpful to get this initial feedback to keep it in mind as we work on refining the component in upcoming iterations. In addition to the follow-ups I've added to the description, I've also included a note on this and it being experimental. I'll also be adding those follow-ups and suggestions mentioned here to the tracking issue #55023, but comments are also welcome from anyone there, too. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I left a few more comments, but I believe that we're good to merge this initial WIP once they've been addressed 🚀
Note
WIP: This component is experimental and will have many upcoming iterations. Please feel free to add any suggestions to the above tracking issue.
What?
Part of #55023
Try creating a new
CustomSelectControl
using Ariakit to include new features, including an option to render children.Why?
For more customization potential and a more intuitive API, allowing the use of JSX to add select values rather than a strict object like in our current
CustomSelectControl
component.How?
By creating a compound component:
New Features
Multi-Select
Option to select more than one value:
To render any JSX children, with rich previews:
Testing Instructions
npm run storybook: dev
Generally:
CustomSelectControl
as closely as possiblePer Story:
Default
: Padding, font-size, and height should change for sizesmall
Multi Select
: Should be able to select and deselect multiple items and count in input should reflect thisFollow-ups:
WordPressComponentProps
compact
size variantCustomSelectItem
components