[ci skip] UX Guide: add section on search box
This commit is contained in:
parent
115aac77f6
commit
7282294394
3 changed files with 13 additions and 0 deletions
|
@ -12,6 +12,7 @@
|
|||
* [Panels](#panels)
|
||||
* [Alerts](#alerts)
|
||||
* [Forms](#forms)
|
||||
* [Search box](#search-box)
|
||||
* [File holders](#file-holders)
|
||||
* [Data formats](#data-formats)
|
||||
|
||||
|
@ -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
|
||||
A file holder (`.file-holder`) is used to show the contents of a file inline on a page of GitLab.
|
||||
|
||||
|
|
BIN
doc/development/ux_guide/img/components-searchbox.png
Normal file
BIN
doc/development/ux_guide/img/components-searchbox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
BIN
doc/development/ux_guide/img/components-searchboxscoped.png
Normal file
BIN
doc/development/ux_guide/img/components-searchboxscoped.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.4 KiB |
Loading…
Reference in a new issue