From fb4d763c138830b324d1b060fe1c05bf451e91e5 Mon Sep 17 00:00:00 2001
From: Allison Whilden <allison@gitlab.com>
Date: Thu, 15 Dec 2016 15:15:17 -0800
Subject: [PATCH] [ci skip] UX Guide: add guidance on cursor usage

---
 doc/development/ux_guide/basics.md              |  16 ++++++++++++++++
 .../ux_guide/img/cursors-default.png            | Bin 0 -> 567 bytes
 doc/development/ux_guide/img/cursors-ibeam.png  | Bin 0 -> 383 bytes
 doc/development/ux_guide/img/cursors-move.png   | Bin 0 -> 276 bytes
 .../ux_guide/img/cursors-panclosed.png          | Bin 0 -> 483 bytes
 .../ux_guide/img/cursors-panopened.png          | Bin 0 -> 622 bytes
 .../ux_guide/img/cursors-pointer.png            | Bin 0 -> 574 bytes
 7 files changed, 16 insertions(+)
 create mode 100644 doc/development/ux_guide/img/cursors-default.png
 create mode 100644 doc/development/ux_guide/img/cursors-ibeam.png
 create mode 100644 doc/development/ux_guide/img/cursors-move.png
 create mode 100644 doc/development/ux_guide/img/cursors-panclosed.png
 create mode 100644 doc/development/ux_guide/img/cursors-panopened.png
 create mode 100644 doc/development/ux_guide/img/cursors-pointer.png

diff --git a/doc/development/ux_guide/basics.md b/doc/development/ux_guide/basics.md
index 76b739386a5..e81729556d8 100644
--- a/doc/development/ux_guide/basics.md
+++ b/doc/development/ux_guide/basics.md
@@ -5,6 +5,7 @@
 * [Typography](#typography)
 * [Icons](#icons)
 * [Color](#color)
+* [Cursors](#cursors)
 
 ---
 
@@ -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.
 
+---
+
+## 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. |
+
+
diff --git a/doc/development/ux_guide/img/cursors-default.png b/doc/development/ux_guide/img/cursors-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..c188ec4e3512da6b03c0fc9cd8463c60e11af9ff
GIT binary patch
literal 567
zcmV-70?7S|P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00060Nkl<ZcmeE{
zHH=$P5Jh9gFf%hlvkZ0W^qu=Y%pW9IuF{37FtrO!xC%3anHld$^QADpHIH<5&F7Ej
zzVW!4SG(F(E|;fQ+o=P3i0^y7-kEfp9~*P25!lM8TrT(c^5x45aNh*<V=2~?6ig$r
z+wK04PN$!FJf3BE%rcg81DF7ok(frUD2hLsOumpLY2{eTjbJL+qKOGvmIEX|aNxjd
z+_#Q}+yrKT?k~kG4<-_cmt!R-@l4Rq;vdTQ?%lhFv!E9(9$@izVAdg$@7lF%?HBT~
z7i*n=5jZo@jlGyrRn<#J?d;jJ3+XhBsko=7Ctv=iipAnX+Hj)8eP4=^<XnG$e}Qff
z4-ZFAoH%isk`LwqyQq$5fG$mZ=+L25JRZ;9xN##%_qT4{nn$?8OO`CzMjMW2tQWOF
zHj|hV{Q2`|@5YTAC7;h18W<SJk$iM?)OY*#?L)Xdh2NtSwKA8GI1-7x>Fw>^f&1H!
zq3+(j8zymAR~L2tj>lpW^&?@WuCv+f6PL?HU*{sQ(&=;#hQnbmy3Vd$yS9MmV|aW%
zu!`td$6Z_am^gt0Oa?2?pFb~^xvpKic96m)O03ECd;xmK%t2ZOIyup6!E`YT<o6?(
z!d))l^gH+h$E<W;bZ!Io%0Lc5Pti1Y02DKV@n8d^006%_D=@!6aeM#(002ovPDHLk
FV1o9$4&wj-

literal 0
HcmV?d00001

diff --git a/doc/development/ux_guide/img/cursors-ibeam.png b/doc/development/ux_guide/img/cursors-ibeam.png
new file mode 100644
index 0000000000000000000000000000000000000000..86f286399826d632d6f8e1b9f7f26ac2620dc8e7
GIT binary patch
literal 383
zcmV-_0f7FAP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0003-Nkl<ZcmeH{
z1!@FA5JlJB-LXc4#}jO?v5Ll%#-sQOzH*p3z#wr$;_mM5RnSKmiGBFg{2Ji3EB^Jb
zzpc;DPc_&Lc7hFH6{{}RSBnL9Xf&GFKp=3ON~Q9U!|8Oo2>Dd6*FWKZ(Pq4}vlF6}
z_PO2e%euO{MUTgGff@Uv&6vTJVAIIRNIS%jVzHRSjD0EgTDiWy9)o3ngYN)?N~7iF
z<uC(#G5;yBPs;nO;W(}p!9345u+uEQW@cu*Mx*f&$6&MBZt?y~_JSQA9@em>CYYrH
zE9d9uBa$C31W!#(#pD31rl+R~0|%vgwbWoMrE~z}@bGX4WQ*AEw5D7xH)b-KqTO!4
zjmP6-P;au?Y@u4MHsF7;zzzUi5<=Fxy1FRj09MHBE|=>ZvR%w&c7h#XJy^-AgY{L4
dfBoyv>I)QN0ESXi^LqdQ002ovPDHLkV1mT}xfK8a

literal 0
HcmV?d00001

diff --git a/doc/development/ux_guide/img/cursors-move.png b/doc/development/ux_guide/img/cursors-move.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9c610eaa882105d4011de7ba220fa0e4256a207
GIT binary patch
literal 276
zcmV+v0qg#WP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0002nNkl<ZcmeH|
z0SAOY5QS5r3f1qu{#2C!s0u);AN0<|3k!?dJ<dEHHI~oJ%<Kj~mrA7qP>a1okK=%t
za4*n#o>7+N<z-pi!U^rV4r!V~e#P=FF~VK-l)Ax&>er!d+Y%U<V8)pFt38#H+A_}b
z9Md#CgA=;%yA06<iQ||i*o?_pPW$Ka+7N6r!RL8C0~0PQW0pD$Lqt(zmioQ*BE0YW
zdyq^pV{*pHWZN=!y30+|AW4$Dr&*R^7zRJL*Eo(SiUL(tVO>|h_w}}IoZk9RpGB2Q
aWziQ%`E&tpl#&|&0000<MNUMnLSTY2gL(}B

literal 0
HcmV?d00001

diff --git a/doc/development/ux_guide/img/cursors-panclosed.png b/doc/development/ux_guide/img/cursors-panclosed.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d247a765aca5cf4f4412d607c12c868c688e848
GIT binary patch
literal 483
zcmV<90UZ8`P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00051Nkl<ZcmZM<
z(O?vef>EFY#t^^<#xw*aKs<$uiz`D$M&_NUsOT4NZti(<a&ouW*x0^uaB$cG<%Owg
zqkw?GgviLqcR>6TKsz01HVlMu0FM};F#t8t(iVfs3InBsY86b2JwczKS}4NaBfwrI
zA_OoJk(d>Sz$VEgk^jCg+-xx**^lEp?)>lW?x+jbbrHugxON<;?yIU=&|=P-rdgc@
z_j*0ovMewT3&ZfcPSX@sRn>J61kiO|P<`D+?jyC2!{P7_!aHrs^BlhKgKf9lHyW?E
z4ZRzW$MJ5rE2%~lMQCa+X0zG6w%#$_+p}q!6$l@vWEck6@puHA&1R71^Lap1uauS^
z_WQj+!)mnxTPzm8g0n2cWHNc7c^7Siwb5u~d7g)#*6a13!E`#G{eJ&R>B!A=I`wVa
zhIBfe!05rr;QCt)heMafUn(8CmH$_g_nssPgb-LRmqNbguHAEZQ50ZhS%UlAxE>4!
zXR1}@pWti${{Bzm;^H3J+1Wi678YIzEH;<I96-x5TNqk7=mN0`k`J}PS!l$7Q7{Td
Z0RXAGYdeFI<i!90002ovPDHLkV1lnY-OT_1

literal 0
HcmV?d00001

diff --git a/doc/development/ux_guide/img/cursors-panopened.png b/doc/development/ux_guide/img/cursors-panopened.png
new file mode 100644
index 0000000000000000000000000000000000000000..76f2eeda8316cdf3764aeeb48d6c0eab139bceb2
GIT binary patch
literal 622
zcmV-!0+IcRP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0006tNkl<ZcmeH|
z0i;@C6vyA%9+FB`lBtxI@|v;23?&az5&%XL06<U>vH)O$Fj}U9RS<-|Jp~lS=J6Vq
z>{(UqRVkb5o}H7u>uw$<cZT)j&-t#KpYwg^yB!_)7aTZn7bCzBO1)m6Q>j$vSer1!
z9SrZ7Q1V_N5G=8lA0Ho&(&;o)C=@`cRDO`l<!|sgVC=kFQ8X!+%aF}x8KcqoRw|Va
z=JPoaBuplg*NsL4OeWJguic~UWxZYpA`}XJ(dl%Z*=)v&Tdful4u|6-u1_&*iA3^*
z54SfGiHrcLR4O~!bUJ0ly<QIpjYc!3bv~a5i^X!uhxne^Y`z$e$ADYBllA+3Ry-UI
z**cX<eFwy9wPN@C^9Z|mr`2i;xOFcwnammxu~^J>IvpT{LLswStzfZO?8Kwd2)f-a
zb$qtB6{odRDwQCY%K<LIX0u(xA5bh7L9JHD_7)oqhO?W_YPA}>t+z3mOxQXekAKB?
zJ(#_D>UO)kG)TXbNF;!W#bQ9XTrRjF5D0w2-#)<Xk4z?e77mBU+wB&(_<TMfJRZ+4
zVmfaetP8sSeB9$wwOVC>gWvDJRg44p4bS)a5l@`h?e@!dyUjgEAfnMID{eNM^z~}v
z`%(;V*g0P*7KUM9xm?0vFaWRDJHU4yV|eEj1MBq~h|OjLw5Cvvx8REN55_w*wV#8*
zV9)7vUMUocS0a(<H9h|s@!t|FFgDCXjDyqR3FbcLz=8jiAN}s`gp5Gd8~^|S07*qo
IM6N<$f-aUC+5i9m

literal 0
HcmV?d00001

diff --git a/doc/development/ux_guide/img/cursors-pointer.png b/doc/development/ux_guide/img/cursors-pointer.png
new file mode 100644
index 0000000000000000000000000000000000000000..d86dd955fa78b158255739595a50def06f5d31dc
GIT binary patch
literal 574
zcmV-E0>S->P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00067Nkl<ZcmeIy
zfv1{L7zXewlag9h2_q{}sqIn&Qqdq)0wqI(h5#4}LiTq|qe0*z&=3YgG>Wv=#dS07
zR+zP}>h|t=<8bfXK~=;0@#q|NdcSkdIp4|AKXG)VR;$nOK{}o8<ss`nRw|XhfP6mR
zIr>kLgRn%S(LO=BTwZ9k+Si9FEOWVBUstOYwOTE5I2^p}r-%z-s&)3kZnuBvcDuyO
zjV_tZ<}1Bk|5Kq*yfv9jU!+p$R3?-8@tqFY2`LAMDu-phA>hK5N`=Pb@w(k;G^p8Z
zl0+g|7z~C1&cmmzD&h}bsZ^@5TrMA>`y!joej`YwQa9CVmBd5LW;5b#;C8>?C%4-@
zMB9mMMx)Vu2ddZWgyPqj^$+@s`Fu{jUXNHZnY_es_vT00V)@wVbcnUv?e&aCqY>SQ
zmt9CC5*J&|7*4%j@A+ghp+6OiMPm7Uo>(9dAR!nG_A&MmvN`N=DwD}v@gCk5iA0En
zLZLf_dB1HoTL(iQAlt#!IjhxbcPhtXv3m=bN~LR~(fH<MN1Psyr^{DHC=?3Ba=Dx+
zyuMaetMxN}{}9<34??22z*{h#PH8wCQaBtQiqpJn&k<TI7Q~jzC2^m_ZEVQ^Z3(g$
z6pzO*)9Lhu-|rvbZok88^SyY0y}h$Ri@1;{$g^8Bbc!o<boBrE4X2=_#4%^xF8}}l
M07*qoM6N<$f~I^BQvd(}

literal 0
HcmV?d00001