Create shared clear icon
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/
This icon is missing from the GitLab UI.
However, 3 separate clear icons have been created.
- Search Box Click Clear Icon
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default
- Search Box Type Clear Icon
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default
- Filter Search Clear Icon
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default
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
- Moved shared styles to
clear_icon_button.scss
- Replaced
<button> ....
with<clear-icon-button ....
in each component. - Updated tests. Since clear icon button is no longer in each component tests needed to be refactored.