There are instances of dropdowns in HAML files that do not use Pajamas-compliant styling, or do not use a suitable abstraction. These need to be ported/made compliant. This epic is about the migration of a particular kind of dropdowns: those which have a static list of options that are rendered as links. A very common example of this is dropdowns used for choosing the sort order for a page. ## Migration strategy Existing dropdowns may use raw markup, or existing `dropdown_*` helpers, or a combination. Here's an example of a complete migration: ```diff -.dropdown.inline.gl-ml-3 - = dropdown_toggle(starrers_sort_options_hash[@sort], { toggle: 'dropdown' }) - %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable - %li.dropdown-header - = _("Sort by") - - starrers_sort_options_hash.each do |value, title| - %li - = link_to filter_starrer_path(sort: value), class: ("is-active" if @sort == value) do - = title +- starrers_sort_options = starrers_sort_options_hash.map { |value, text| { value: value, text: text, href: filter_starrer_path(sort: value) } } += gl_redirect_listbox_tag starrers_sort_options, @sort, class: 'gl-ml-3', data: { right: true } ``` Things to note: - The raw markup is replaced entirely by the output of `gl_redirect_listbox_tag`. - The options in the listbox are defined by an array of `{ value, text, href }` hashes. In the example, this is `starrers_sort_options`, and is prepared from the existing `starrers_sort_options_hash`. Other instances may need to take different approaches; perhaps the array should be defined literally in place, or extracted to an appropriate helper. - The currently-selected option is passed as the second argument to `gl_redirect_listbox_tag`. In the example above, this is the `@sort` instance variable. This corresponds to the `value` key of one of the options passed. - Features specs may or may not need to be updated, depending on the selectors they rely on. - The third argument is for applying arbitrary HTML attributes. For instance, `class` is useful for setting up the margins/positioning of the dropdown. The `data: { right: true }` is specially handled, as it right-aligns the dropdown menu with its trigger button, as opposed to the default left-alignment. For more details `gl_redirect_listbox_tag`, refer to its [documentation](https://gitlab.com/gitlab-org/gitlab/blob/a2958f882705ebb01c3ec59a84313ed721306260/app/helpers/listbox_helper.rb#L9-33). See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78708 for more context on this example migration. ## Guidance If you're unsure about a particular migration, feel free to `@mention` @markrian or any other [Foundations team member](https://about.gitlab.com/company/team/?department=ecosystem-foundations-team) for guidance.