Migrate GlSorting to use GlCollapsibleListbox

The GlSorting component uses the deprecated GlDropdown component. It should be migrated to the GlListbox component for better accessibility and UX.

There are three approaches we could take:

  • Keep the existing GlSorting API (i.e., GlSortingItem children, etc).
    • Pros:
      • Least amount of work. Work only needs to happen in GitLab UI. No downstream changes necessary, at least initially. We may want to migrate the API to something a bit less verbose in future, i.e., more similar to GlListbox's items prop.
    • Cons:
      • Requires some unusual component coding practices. Rough plan: GlSorting would provide its instance to descendants. GlSortingItems would inject that instance, and call methods on that instance to propagate their option values/labels up to GlSorting, which would pass the resulting structure to GlListbox. Something similar for @click events on the children.
      • Could break downstream test suites that do things like wrapper.findAllComponents(GlSortingItem), maybe.
  • Add a new items API to GlSorting. Use of GlSortingItem children would be supported, but deprecated.
    • Pros:
      • Downstream migrations can happen incrementally.
    • Cons:
      • Would have to maintain two completely different approaches in the component during incremental migration.
  • Follow the breaking changes process for GlSorting, and create a new component with the new API.
    • Pros:
      • We've done this process before.
    • Cons:
      • Most amount of work. The deprecation process is long-winded and involves several steps both up and downstream.
Edited by Mark Florian