gestalt
gestalt copied to clipboard
SelectList: Add support for `<optgroup>`, replace `items` prop with subcomponents
A recent blogpost mentioned <optgroup>
, which I'd never heard of before. This element allows for grouping/categorization within <select>
items. This is a great fit for SelectList, as it could allow more users to use this simpler component rather than needing to use Dropdown. This PR adds support for <optgroup>
…
…and also completely overhauls how users specify items in the list. The current items
prop wouldn't scale well to support groups, leading to a tedious and confusing nested structure. Even without the introduction of groups, the array of objects isn't very readable, particularly if the user needs to reorder the items. Therefore, this PR creates SelectList.Option and SelectList.Group subcomponents. Users can compose these subcomponents as needed to create their list of items in a much more HTML-like format. And of course, an array of objects can be mapped to SelectList.Option when a more JS-esque approach is desired.
NON-GOALS OF THIS PR
- Addressing the Flow types of SelectList's
children
to ensure that only the subcomponents are used. This is the same problem we have with Dropdown and SideNav, and really everywhere we use subcomponents. I'll work on a solution for all these issues in the future. - Using a more realistic example in the new Groups example. We can update this in the future. Anyone with a good idea for that example is welcome to fast-follow this PR with their fixes.
Deploy Preview for gestalt ready!
Name | Link |
---|---|
Latest commit | c6c67803a4746edf4fd412117618b819de775197 |
Latest deploy log | https://app.netlify.com/sites/gestalt/deploys/630ff38b27ea4a000843b926 |
Deploy Preview | https://deploy-preview-2219--gestalt.netlify.app |
Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
This looks good. I'm still not sure when to use this vs dropdown groups. I think this guidance might have to be updated?
The current items prop wouldn't scale well to support groups, leading to a tedious and confusing nested structure.
Also, just wondering, is this an example of something that is considered a breaking change because all the select lists in Pinboard have to be updated?
There do seems to be some werid HEAD tags in places causing some of the sandboxes to break:

@rlingineni
This looks good. I'm still not sure when to use this vs dropdown groups. I think this guidance might have to be updated?
Yep, definitely.
Also, just wondering, is this an example of something that is considered a breaking change because all the select lists in Pinboard have to be updated?
Absolutely, hence the major
version bump and the codemod.
There do seems to be some werid HEAD tags in places causing some of the sandboxes to break:
Those are from merge conflicts — but not anything an IDE would recognize as such because the code is "just a string". This is the biggest reason I'm excited about the new code editor! A functional UI is nice, but using real code for all these examples will catch so many errors like this.