gestalt icon indicating copy to clipboard operation
gestalt copied to clipboard

SelectList: Add support for `<optgroup>`, replace `items` prop with subcomponents

Open dangerismycat opened this issue 2 years ago • 1 comments

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.

dangerismycat avatar Jul 23 '22 00:07 dangerismycat

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Jul 23 '22 00:07 netlify[bot]

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:

image

rlingineni avatar Aug 18 '22 19:08 rlingineni

@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.

dangerismycat avatar Aug 18 '22 21:08 dangerismycat