Resolve "GlFormCombobox > Use latest dropdown styles"

Jeremy Elderrequested to merge
3158-glformcombobox-use-latest-dropdown-styles into main

What does this MR do?

Updates GlFormCombobox to use the latest dropdown and option styles which are applied to a listbox. Unlike the newer panel that has a maximum width, the decision here is to let the panel width match the current behavior, which is to match the the input width. This avoids any shortcomings that could arise from truncation and maintains existing expectations where the component is used. This panel will not include a tip because that's currently handled with an additional div and the desire here was to avoid markup changes that would trigger a migration.

Screenshots or screen recordings

Before After
GlFormCombobox current design GlFormCombobox updated design
CI/CD variable before CI/CD variable after

Approach

Several approaches were considered, but this direction was chosen because it doesn't impact the existing API and can match the desired design with minimal overhead. Alternate approaches included custom property overrides, a wrapper component, scoped styles, or design token remapping which would all have undesirable cons.

Integrations

GlFormCombobox is used in the following places:

  • Used in CI variable drawer for variable key input - gitlab/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue
  • Used in job assistant drawer for job setup -gitlab/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue
  • Used in custom status form for status selection (Enterprise Edition) - gitlab/ee/app/assets/javascripts/groups/settings/work_items/custom_status/status_form.vue

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

  • The “What does this MR do?” section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per “Say why not just what”.
    • For example, if the MR is focused on usage guidelines, addressing accessibility challenges could be added in a separate MR.
  • Relevant label(s) are applied to the MR.
  • The MR is added to a milestone.
  • Added the ~"component:*" label(s) if applicable.
  • A changeset is added when this MR will do a patch, minor, or major update. More information can be found in doc/publishing-packages.md.

Components

Documentation

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.

Related to #3158

Edited by Jeremy Elder

Merge request reports