Commit 72822943 authored by Allison Whilden's avatar Allison Whilden

[ci skip] UX Guide: add section on search box

parent 115aac77
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
* [Panels](#panels) * [Panels](#panels)
* [Alerts](#alerts) * [Alerts](#alerts)
* [Forms](#forms) * [Forms](#forms)
* [Search box](#search-box)
* [File holders](#file-holders) * [File holders](#file-holders)
* [Data formats](#data-formats) * [Data formats](#data-formats)
...@@ -215,6 +216,18 @@ Horizontal form (`form.horizontal-form`) with label rendered inline with input. ...@@ -215,6 +216,18 @@ Horizontal form (`form.horizontal-form`) with label rendered inline with input.
--- ---
## Search box
Search boxes across GitLab have a consistent rest, active and text entered state. When text isn't entered in the box, there should be a magnifying glass right aligned with the input field. When text is entered, the magnifying glass should become a x, allowing users to clear their text.
![Search box](img/components-searchbox.png)
If needed, we indicate the scope of the search in the search box.
![Scoped Search box](img/components-searchboxscoped.png)
---
## File holders ## File holders
A file holder (`.file-holder`) is used to show the contents of a file inline on a page of GitLab. A file holder (`.file-holder`) is used to show the contents of a file inline on a page of GitLab.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment