Commit 45bd2263 authored by Achilleas Pipinellis's avatar Achilleas Pipinellis

Merge branch 'ux-guide-cursors' into 'master'

UX Guide: add guidance on cursor usage

Add guidance to the UX guide on when to use what mouse cursor.

See merge request !8128
parents ecd0c175 fb4d763c
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
* [Typography](#typography) * [Typography](#typography)
* [Icons](#icons) * [Icons](#icons)
* [Color](#color) * [Color](#color)
* [Cursors](#cursors)
--- ---
...@@ -59,3 +60,18 @@ GitLab uses Font Awesome icons throughout our interface. ...@@ -59,3 +60,18 @@ GitLab uses Font Awesome icons throughout our interface.
> TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage. > TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage.
---
## Cursors
The mouse cursor is key in helping users understand how to interact with elements on the screen.
| | |
| :------: | :------- |
| ![Default cursor](img/cursors-default.png) | Default cursor |
| ![Pointer cursor](img/cursors-pointer.png) | Pointer cursor: used to indicate that you can click on an element to invoke a command or navigate, such as links and buttons |
| ![Move cursor](img/cursors-move.png) | Move cursor: used to indicate that you can move an element around on the screen |
| ![Pan opened cursor](img/cursors-panopened.png) | Pan cursor (opened): indicates that you can grab and move the entire canvas, affecting what is seen in the view port. |
| ![Pan closed cursor](img/cursors-panclosed.png) | Pan cursor (closed): indicates that you are actively panning the canvas. |
| ![I-beam cursor](img/cursors-ibeam.png) | I-beam cursor: indicates that this is either text that you can select and copy, or a text field that you can click into to enter text. |
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