Skip to content

Create shared clear icon

Emily Ring requested to merge 647-shared-clear-icon into master

This a refactor that is part of adding a clear icon input field: #647

Our sketch designs include an input field with a clear icon:

https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/forms-spec-previews/

image

This icon is missing from the GitLab UI.

However, 3 separate clear icons have been created.

  1. Search Box Click Clear Icon

https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default

image

  1. Search Box Type Clear Icon

https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default

image

  1. Filter Search Clear Icon

https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default image

Instead of creating a fourth clear icon, I have created a clear_icon component in the shared components folder. The search icons are now using the shared clear_icon. The future input field will also be able to use the shared clear_icon.

The Search icons are using a new component, but their styles and behaviors should be the same as before.

Updates

  1. Moved shared styles to clear_icon_button.scss
  2. Replaced <button> .... with <clear-icon-button .... in each component.
  3. Updated tests. Since clear icon button is no longer in each component tests needed to be refactored.
Edited by Emily Ring

Merge request reports