Skip to content

feat(GlFilteredSearch): Add friendly text option + improvements

Coung Ngo requested to merge cngo-update-glfilteredsearch into main

What does this MR do?

MR changes:

  • Adds a prop showFriendlyText to show is instead of = etc. on the UI. Context: gitlab#23532 (comment 530904067)
  • When user clicks on completed token with multiple values, the text shown in the input is the last one selected (before, it showed the full comma separated list)

It also creates two new story examples for friendly text and multi-select, and resets the default story example to before the OR multi-select changes were made to it since multi-select is not yet in use in GitLab and is still being fleshed out.

The following changes were made to the multi-select story example:

  • No more multi select limit in example (there was mistaken belief that the backend could only handle a maximum of two values)
  • Adds OR (||) operator to example
  • Updates example so multi select is available for all operators (AND, NOT and OR—before it assumed you did an OR selection)

Screenshots

Screen_Recording_2021-04-26_at_1.27.14_pm

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

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.
Edited by Ezekiel Kigbo

Merge request reports