From b2c657c49395dfe7809d1326b676d4d3a41b4625 Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Fri, 31 Aug 2018 10:08:01 -0700 Subject: [PATCH] Add HorizontalActionList Component (#511) * add post action link list * refactoring * use correct icon color * menuButton styling * update snapshots * add unit tests * rename to MessageActionsList * update reference images * fix reference image * fix vertical alignment * update interface to support both links and clickable * use a more generic name * remove stale reference images * add references with new name * add action states for open overflow menu * fix description * revert menuButton color override * update snapshot --- .../ActionLink_with_compact_desktop.png | Bin 0 -> 2682 bytes ...rizontalActionList_basic_click_desktop.png | Bin 0 -> 11860 bytes .../HorizontalActionList_basic_desktop.png | Bin 0 -> 7760 bytes ...rizontalActionList_basic_hover_desktop.png | Bin 0 -> 11939 bytes .../HorizontalActionList_counts_desktop.png | Bin 0 -> 5748 bytes ...izontalActionList_counts_hover_desktop.png | Bin 0 -> 6230 bytes ...rizontalActionList_no_overflow_desktop.png | Bin 0 -> 5462 bytes src/components/ActionLink/ActionLink.md | 10 + src/components/ActionLink/ActionLink.test.tsx | 19 ++ src/components/ActionLink/ActionLink.tsx | 14 +- src/components/ActionLink/ActionLink.types.ts | 7 +- .../__snapshots__/ActionLink.test.tsx.snap | 35 +++ .../HorizontalActionList.md | 99 ++++++++ .../HorizontalActionList.styles.ts | 21 ++ .../HorizontalActionList.test.tsx | 76 ++++++ .../HorizontalActionList.tsx | 69 +++++ .../HorizontalActionList.types.ts | 36 +++ .../HorizontalActionList.test.tsx.snap | 239 ++++++++++++++++++ src/components/HorizontalActionsList/index.ts | 3 + 19 files changed, 622 insertions(+), 6 deletions(-) create mode 100644 config/styleguide-visual/reference/ActionLink_with_compact_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_basic_click_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_basic_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_basic_hover_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_counts_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_counts_hover_desktop.png create mode 100644 config/styleguide-visual/reference/HorizontalActionList_no_overflow_desktop.png create mode 100644 src/components/HorizontalActionsList/HorizontalActionList.md create mode 100644 src/components/HorizontalActionsList/HorizontalActionList.styles.ts create mode 100644 src/components/HorizontalActionsList/HorizontalActionList.test.tsx create mode 100644 src/components/HorizontalActionsList/HorizontalActionList.tsx create mode 100644 src/components/HorizontalActionsList/HorizontalActionList.types.ts create mode 100644 src/components/HorizontalActionsList/__snapshots__/HorizontalActionList.test.tsx.snap create mode 100644 src/components/HorizontalActionsList/index.ts diff --git a/config/styleguide-visual/reference/ActionLink_with_compact_desktop.png b/config/styleguide-visual/reference/ActionLink_with_compact_desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..0fe00987135d3440b592d5d3dcf72d305eee882e GIT binary patch literal 2682 zcmds3`CF3t7Dp{x&F*7f(=?`X#&XF84Gn?H)F?#@mvNAKvdd-{(1>^Ev0d=e+Ov)felj zx7}nr1Om~+oH=~~0@)M?=rLP$fm7SY{RjlI{Uqk}Nxu}z!Z;~$n3(Z?DR3*Ay!(jb zZo7)YvnPWMEzvK=`N6LBtOV}dF=`+66)r509aDc*o|4>5r7{;ro_#W_GE8+XASIXA zMu~DOoyz@O9P# zA&=v8ShI`3<4iQtPX zy{=XF+VGsppFUNn;H32dQ^KMbSwQ4TK9wGigj9kgy0=gMBhDj0p2N>Qaj?BMQuAkz5gNEK>b}{o+N^bZ$d^?{i@ohAfpzTN|cEKnH~cU)Q%O;ww!U za#BbsE(GZadcm1oPgo@DDJM3hCR1}*Vs(=+q7_3P-;%30 zJ`!*8P=J0f9F0T-<}@5}_%qbL{Rb!weq{KKmF!_p@$_wYD60Pu*eAC~9*>-I${4Kn zqB~mVA=}Wsp2r>qV-K6_&JH=e7ncp{< z^b~;(A4^&=yKZE&dsL)DaCu}FvyDgxQ1cV_DZ zao_RqI35WPQosBTNE_Z)$3A356h*Nm=&CGP_Q$ROh0>JL$1rf$rFbKP6WCj z#__pti%w7X3C@$d21cEABdn{DZ5{aDdmq$u-USJ4Vycwc8sG5Om(J+cCF~QHRLmO6 zss6Ow)uw|y+YyZ#%(qRSuW1#;AH*!@6TLq`HLGtqjF7gusUCW4iTzQxwUPZv!?ght z*A}K+t-k{Zapm=;fT^AJb=`U}F*8w4tDEGKqZxah`VYy=HcyV1xYfTeSaA(i_Ms_U zQIcv`6J7n&(x4GDW$u1dTdXW!D2hD;xVhN5hpBCWxl!tb!ZiNbGg;^FjGIWgKK!X` z!G_p%&-7wQZu~vt!`H|9vGmqfR^*V)F@Z45Qu*Q4$G-->92!06s@rPZ# zcXd-KnYi=$YK`Y)X^(-&513VGrVBl6sHAz75zY%k&J8s;>e$#uafj@qG;pE!?<#p3 z;09vkab61y==z+vQj1nj8us&_wQ9kajf!dR=gWv@J(KBaVJs|V^q8FHVt`$5ZH>q8 zUsEzxnrg4VUvIWfi4$(78v~BMK-~#X&SD9_r%L8D%K5xdWWR7_@TJlhrEGGFO5f;1 zmn38L@ib?~@r}6ov73sgU5P{sE4XR*&s*TLJ4l1F4ZDgb$67*pzj+2ovE=l*TYAbo z!!a0ft-=^xX}R$J^|FNfCaCH23C3RZauOSy@WP6hSu!!FI)LE(8!ub^jO~lV+14JKyUh2k4c+m#4q6v!4`7FiNW+^gtG~=kTi-ZydQh)Fb?Zl)upSKBX zv(R5p^qfeY`QA8aSW#j|9p{e;XhzAj1H92T?Z0O zcyQv9?gCMgJ l9)E2i6MyTS;{V;7*7e~dItk20#XCggAf!2l_tG6>Ai*?KoC%n zPKcCHMF^ooXrbK6`}=?R-?i?SyY9MQ?z*#BBpl9}nX~uoXFt!L`J|$F?b37xbc(OB8 zBKaK0-cXh<%tfdqt?h!JA>N}uB;N(scn8TObuct&w{BLJp8L;N2z!P+E70h|Aew)_ zv`qj1OaGTF!K&nl)?X9tCc57yo4V!8DPI`m8EuFmMg3B~?}H#|Q`c_POUI@_-bYKx_)m^X!FP9su^EZfYJ*$N2}OUN-&VL`g)J;V zy;`j#pnTyUz>Np>(tdMB-biWjleVX7o8BK?i<%k8qlA!0`Pkp_Vr1BO`w-4&?<5r{ zt?3t^e{x)F7sqxrjXwQR3*G#{(uCK_@Jw-Y4W#y<_>f5%Q5*>Z}fs}LXZAs#} ze2d|R;rQwisUGv15v6y(mM&f_`1HWi?RZ0tUH)>t&snM(I*pH7wpQrB$oTy9dzHN@ z5x?=i%+bS(g%Ttb-&VTEJdcjDe!x>c0kNA}pIn|NO5b^eO_kIdn7MDZ_ir$?kPff5 zu*EXv^GI=N9rWs?L{6ymomf{m`65!Do6bh-4Ue~RsEv7+jRj?IgeJ-qu0AU>Gkx9F zAm3=K3H)03LBC75XmCMs9$%nKy%=^baKGNDGpnfavE!6!#zgCbu?Rx}wa;s81)cEJ zyreXf%+6!9a-~DubQ}eY!j^IlDDGU3`rm70F>=@!$q;5$RUx)p23pdw^Wq)AL z$j)6F$W1;i0~j~{xg$H`~+$H)PZVJLVjXR$gLi!VpQwVl(Ab91+edq$-<$MTWF zqnH=QO3(8CdC|tJ_Tjq3n5o+`Rng=_RZ6I1uE2?Jf&w}r&-%yl0Q;z-iK3HC`d}A= z7(%Dx=JmxaIqs|Jae2p=E4_`uf%cQiZN9J&CqvUI*2yfJIQFZJ5m~nb5Q`c1oz+Iw zwuT9--nZ3bFrjlvjdd^ML=xSTe2G-Ax;=&#V4wSXsr&7q$+!d~SGQ*y1?uN{?1}y3N!Nd7p673_eFR7P@;0(1GUY2C z*%bv|M{x!VG-o|pL&gZ4gpuY+jmy|lX9bI&+J(~A${DWT(b_^D*t z0FH(hho1uQaybzhBhjg-uSs-c|12170+*XKqaQ}4P69n{j$c&YIYrtkD!$l_Tbt@9Fl z5n_4DvFd?pN%Pyw_SRjtEUV32)u#M zbu)>&G=i3%34UESbo7kUxf>B7SKFR7x1W7t4?L9vA6X!5rEP9w5`7Vee?KMOu0J}r z-D_87WID0NhJQnSRWl8)QhE|+zeA{u@g74p>$uY!5D8o*cYpf2wg04K`sbyG+iyv~ zt!D)zPC~J~>YRhRqPc6(0A|9sb zMxSR{8kiF{NSY)`sz@f?DL__r(0i;Q^Wn=8bHgL1D6bX2l)Dn&GA(5VyODmsGer&8 z44r1KB=qowF0y17{-qoKbsNp8U_DeK=8G0F$B$-r2^AQqrzl^@pkPmA%C5}iU-}jO zUJ^%V+KdFiZTBr#w(8A;j3UV-vy&A)VmMM=aob8c6bJ;|9EmD(k*fc;e_+-4sNu^*grFje3yV=o8e`>v>PVha#c-5(+ zc^n<-X!PQ&gymDw7=safH-;3g+b=D@!!tFJ757&izeDk!@>l2;jUnaT2^(y~rP=pE z)QhRXDz7>g%?^$VIku-c@QAG@TW)vM#`j3n{=pif&+=}myyKU)g)WZ1-R9Vr_UhK< zfqcq#vtL+^izSa5iRr$GeJ<}9VC7=OcHqWJtk1~al5HCIlt zP1Vq?dVr`Dgj^+A#ufEolm9fyJTIDSd2MTVKX^T-uB3obj@E?Ju|X_THP~=%$X0+> z<3vPFP^1*oDYR2i^;JVES>oYs5tDC6(b`$<09Ll6PxrW$YeLe@RSbrlnD*Xk7peFw z-zlKE+fV(YSXpw0xvq~jHayi;>G1GUJeq4G)+BWZmFAgD74;bgWY5!#)vvUV)edd6 ze<>9Zm@Sw|hQ|VromAOb zx?A{V+fN8j{Ax$1P%dvk~>P&U?qwdCfTsD-!q9+O*^VG z4ECFZuU#EBQPuJXY2#q!2}hNOsY_665?>|%cfzP_B(a49FIeob?B`w9s3CeJ`h@3Z zAEtPLZlF#)a^kFH^;&U1T$C$6I8lD;#H8YhD6(8v$FeZ7itD;?$HJ#ibR$zv?4=+Y zOqU6tqYen)q@+g8PpoXIGy=i^+zx&Du8Kpp-w0jeapc(>#S-6U22&;VNp2oH3phq@h2@^|_^F>5@ zOB~=8Vo&{DXWx7IZfq$O|9+FMOQ8{!W%it*^P6p%5k1?q!?T zz9{QvwCoQsA(*R4ceAJ*?>)m*F)bv?bIuRI+`5|oH7;5gZiIbhY!0&*(`>SY@cnaf z^RL=-C+sEG~lI_S4)dFVnNnd4WwzUzK|pfo(z%WoAATwRAGS8^|OB{5T3SS@*!OU zd3G13ClISzxikGgFOq&!CZm=0!=z-E6Y73C*2jA2`}RkaX!Wd_-W*}xrTi5pdItz% zcJ`u3hoBl)KZoG?A08z;v{2_MP0IMcZ#4;*bJ4#2XKA32_FELa+uAN?8EN}HZK>)P zW-l~}Xw-lg$6i}|nOEK9qJ;Ehpw3?TAD6&{l@*Ks;ba0 z{F>uB>F6UEUEc7NEPiB-iW@2QcSPJG^`kiM1lOssycJlP|Kif5z)F~7Xc0Xk8B%SuR43(XE zOjyrx|MCE&ykp=E4GVv@%8pL^jjI=(q+WMoC0G4&su-5>hQ#43+qNFUV zS%Sh`mmp2jkAN^S!=MIxkVTCVFxIBK%b3{CF zA$vAFiD3~RUXx$Y@zt|wwD@xY;^=r&n}KJcctN%)ck8Xs#l)WI;e*+!m~+-Um71f+ zFq5}{NB~gY59*e;e*=#bw|7V7Y?#|E6)j<9pCZxE8@s1->Y^`{BQ{4qnbE=%pM;zn zl4l9;kKt$RKV%dq4$Uy%AKx)pEH3pV!?Mf1kxC-tRYz1c-6g;yN1}MFs~0O4J{I11 zp@-~r&k$XrRCybkX=S6KUe>oae{($|Yf}ClF-Yjq*qUjvuuY)->UMO~&aGjL2jpBu zQ1!f_azBj!3Io)_N_TNuHI!v67`uwCpr`88^B3p6qC*g5Z&vU7C5-L$jbV>v8nu=! z44RUbLM?8fa?W>N%m}hke=Vu;SY@LABl9$TChIQHw}^$U&RnUPBHLDj%VogasTRDuw#SQe z-8fUza33&6jBbs(j>SD}%F~@tdQ4PvYFUl(8VT8_D{Z;!Jjw{ zMbDH!Ucyv-_)wF&R`GzS!86o2uGbiK&Ryl*DfLiGD&IIEKt6Z|85fIeKOKk^my`6; zfE?$-CvAi$8Wl<6T)y3cxpzS|Jg$fFW{S` zofADXA9o85WM$lL649x-m5`-)VprsJ*vU>-o|IOo`i1N}XgSgB_LhRo0~M);-$nYH zWtqGC#tp?T&saShCcKu$hNx|Sj=fm{aSw_Lse2ZMsR>CFFE~K*Ak?tfALLa(f2?so zrut9x_?jl`;85m~8Q|N@epqSy(F*zxz-dF@Han&XpvvUrX-E)^3hMN_^U*^q-B@!% z>^_Bc6bK#=;3M;E8?A%aa9`e0_L!Z6^V$N&d$bD-VO!}pR8k??EjIuozU7|@%_Q}5 zFDywz{?(ixgw(qyXssq_ea^T*Ex#LOTi&xIM^1QURC+m%8wZ40&ty;l4)c(7Q{5PF z(CJV&lGL6~_kF$QCql!yLR)_p6K(q53d-+4w~mXeD+JPujEo;nCrCI(&*jI+3i19Z z@@C;;vwsC>ZEO{y&zrFChctEyrm)HG5J>0oUQpdl09lYTP_AS*k zP8H`pY4Mt8fXJ*2AES+Vyu`f9Gh1?qJ$9%rJ5==^ZnWn``HvUnRSjHHP7}3U1SwBK z_Xx49GAXkjU72X@AG&S( zhx?q{+7sJ~(X6x@?qPsBV>F{&k*xWyIs8k(X}fBX+(=}hf>CT?bVND1P?RVWEanks zOB@Mc@6SEL=Y=lKpIGJBe$_DSW6Mi#DIqa0vdkguI~Jvj#|D3oEdW%t?TD9F4w7Ox zBmgwMDSfZmTST8fWFf(0B^UOj%w@2Tv7 z908SwyvBm2_V$)0jc2!FxC&}CU6vhuZF*R_a>x5P3KkT*BYA!6#WX<~@&J=hd0nj; z?Un`b@YQIblG@pvi_4n-Wl_Xgn-LU?V5?{oKwJ+TuKVAdf}>_L~K^D`S_Q&X640PSQKA7 zA^+rb0g#>aK{O9N?p${D9Iej%Iuu~DHi12M!=?(B7I=bPjIJ4_>$3u%z`Mr#YwQqnrRklReq+xz3cAh}m zRw5}EDK;Q_?>Pdto1Gs@IoP!B9sAE*s~bqqAOMNKL+4O0TqBr|8a3G(x&hP4g(}s` zK|O6m^f7-}I5t0uRPD+%msjBEAW$|PwF0WH`3ko)5Y|o=Ls(o=7^u{AYqF<%#;wNk zl9@KSo-&!z!O`bA^;-)~B;gS&-6QmoND+N{B|fV@_L_;<_8xxXR*zJIPO_6Go!sY5b`Yveout+m3v=_hF5)<~0vy}t7mDK;yQ_^Q&n_Q~}QvGTR#i1&?JqK(iyehv5!buY+sqJfd=(*&~8dv!(gbUS5 z0kP_C)z|Nb=+c?dLB}5;n)Pd-Gw1o6y<`+zf(t3(tN z1p~xtPB^G{|2Xu1of-=1`BJGx0oAMch-=*?h|DjJ6dIPUiYP!W^vcT0Vo5y=@YP?c z7|tt<&|cUm7Hs|OF`A4+Edy^4IH5yE&|8aekLETP>KB+zRH01L0S9zQ11_i2Yicag zI)mgXSDc$aM9~sY-W6PVEg=FPQIsxh%kQRWQ9M5lLCc&Hh48iSsh5FP>PbP2X{Tu7 z7@!U%e@e)?3wO~E^54+TrSwN$YoUPL&P)xS@<*mOQTu07{yTW`Hf75|P(9awMs2Zt zlXMQ40s&^h1O88L{@*TuQ6@S$M zEs=iBdZMoCLAWW(A}sF7DKM0qya^bJ+*mnQX7*(W zvmDzat>HM6Rk+!kBYBt?(ec1-K&naPvmuvoDI)|e%8`2t6G*N8zOfU3_k^@$irzc$ zS#k3GNoBKiP$;^wR32^sc4UKNZ$@G4FmdLhLsT|tV~(9p2>CgmcD%W0&sz1|DahZF zkvy)yxp=};8A8?QS$g_`(cF|}!Yr7R8|{BadBi53Yxt~)`PWJ15HaJ*6&T_$vu8yL zRy+=`AH%kTI~T=HO9S8gkG|9iU%X+?LVhE^cOrV=12k$CU{P|jaCXZ$1+|1n#~8jE zh_o_^t5)+SZR+d8GJkw@re}9fw(fa4kUYwN@bIoSs!(#iH_LAk$L5rfrL-Z6Ke){PuADpI8IdQ$HCmfO3<@P zx!u@or@`FdCIbVHumXF#=-)Nr8uGR|y^16~s?%O;-h_fVc;8rdxT5*jkY6i;LZw>Z z9YT3zAIBYU-lUfn`H7#C^X1ywnJ4V{9A_N_Qsdluvg_9y#mAP#g?)p$z5b|Coj$#o z(0P*ejWV3@JL)u8PvrIKpSEY~UXY4dmC)D6sz$yG2w-BnP_p^?vE%P5We!Qlfv?xQ zxBGei3W!waYKBS4TYXhHd>P@f@Hf9UORxO4aJRPJv#&+VoN9vy^hsRQ()k=Us*ySB z3BU2p8Fjk~hfmjh_YzK>Iz{d^kUIGF&L2FgMsawj2v>iSYKlh4!FiAy7ju5>K@bBY z`7FR7&-R26yxR^XC@7}%_U&64qh|$HibaErLfFOQ1~}#yK5AU9?KfS{{Rv0pOwZl!n*D^{KQ0MQ)#a_uq1z#IG%G1Tu0JrOJQRH!&y~ z4rNOe_puH>Dlu!gAIZeTnuojVqpxF<6Q3%-Odt?AqRZVIc-N?<2|7bD4W4OE4S2y6 zk3mtUfBq?|*gT8g{Hr8P+ORoVA7bxGkk{3X?DSrVpOo|aTYd9rVW`yY+i31m>z0P0 z!&A*s2T4aZAIM!1N=$<3p(*P*}>cpRewW+Dk` zHMPcX{-zl1z0ZDUS{mjzPzT#grhxooSt-F@KF^JtGI^CEP2Xl#;tWv^pPrW+RZY*= zyhM%Nao;>Gf6(b8@#42d!c#sq9WSH2-gxmRNZ)ntgdS@vtA)k!c_GCqCtidKAu?)2w*t)4m;I z0J>8+*cKvL%8;69>FD}lH89brpIN0%#w8Q-BwjU|;3uec#k6h*NkXcu)4E-pJn%Iq z8CFYsYF+b9rI6KrZPu5Vn14D*;&+ltVn>(v=6wFFUrBU-^O+YvzJ}Z!-AFX)&B}&H z^jKGlmKKy~BRUL1*%iJwsS_Z63Hi)+g+?oj6W$cB)+)(v%2TJ@T0;aPvv74jXv9-E zceCajQJB{%o&l?@qP)~tsS(3lY!+v2z8bpQ^YM9r`=oL14?7fj&41xVAB>O+^7AoP zEUCp;0;r{h#UW^2q#h)%X-f3$3u3Eoxb!pZu+rC`e}zL~p92}V^Y$iPM0S%R<;=Pb zi$->eU|b@mHsNt{&x_u@JEd=6mH`&5gq!o6@^O8Yo5UTXJC=48e43m>z(iG{Y!#yp zJI!|;EwQJiEmgvu>qP`I!g=#6D!K|gxBqVNhw`l4@sG#?sPrWA@#Aj5I`S9uR7=tD zlDb)?Vw02{ciW`xUQ*g(P>lVZGGwGkb9{*|KwSP)oB)i;DZ_M}t@u(H0MwTcYfZrxv>4; z*(WhxURHH;%R1V95LCd#bqSB!RX2K-w^}>Tegrn=?Pie2p0$Kw^%QnXa9YGGjEwWF z&jPYHS||T}rFwMHwQ@w(y7FgxEX+sFhb5mrRM_q&bMQz`P9d`Sp-*s>z|T<2`65L* zgWf>(P*@3{COh`JE`lTxMZi|%kcdXkuSU-M>IwZnKuVxo!Tctr67 zeT>XPNYu)B7H>GVf#*%ZaA=Y{$drP`!8weI?88{8+Gow4=1o~00u?51;G1mB^4 zi-AKMvxxQ=1ADix#iT~$=bC#x2tV3ylEfWB&^>Gh6(A7QQi$(bYJ=59Fo2~?ug8hD zNxXI3uGz9-SRu(r52)$20A}LZ5=>A#&b#^1YCDc#<)z1`4vbZxT>j>Rg(Q}w{y1S+ zLf4yAnKIe{D>>O;-;%Z4JMZ&^4UUFSk`~1QO5E^nHIhGUk!#-#8|vsuIM^i2bDwYl zjxqP@EhQw)S1W4}c0pY;A&YxJ8ziv);L_&8lLpU{HYX8TkJXXQONH0f7Lxs5ClPVJ zjd+2JC|AQU$t?K57?I-=$B=GY5JN?&RKn9lIhW*E5%c`)Zo`7I#q^F)?hMuXg{pEF z*POw@npcB+1CAq(KPNIS6^^JyYRFo}`qoLAb^cnBB@XZhGchsc)k&Ebf0?$xA=+XP ze>SKPM=6XFR)f;SPiyl%ikAStxqprm91arUveO*Mvd-`e}_J;iAtxl2}F&#)v4W;W9W^{R^;^i^`0S) z^op5{Eu&ek{GPe*7TV69z^mr&PBf{1lYM;ndk6$7ySQDvMzZ(Ig3aEhFbN4%;>mJh zg^6SR?5t~yv)8RZc!4M~P-BLNm(u#02VN9-K~TRt*|PpT@e-~D4Ep+n57Ma-Z)FM+Jx^+3OZlRMArM>+*!y-9Ygsto^&u-DbhY=`vA zIJi#4C@-XqzQ7erndQ?bRo{@mrV9w2{q5=tfO4__OSwLYYszb1>3N_Vp zPFK~}$9xVB9mu=zz`Y~cI8nO9k%hyY8@?1xOI|o<8P8$%%CC(Vg#!p!yzl_!P4KwR z_gzS!ycFAoymLFL2eEguI+$zzCKDc8+JAhg^dazc;fae{qHpV+6z?SmDr%Y3y25Lv zbBRO_)Sh!;o~%<{PEYiV@0<@|&^)!+Q*p1VTu6UYni#rG zxPJ~wGO4%+)RwC2jBhfN`rf~P?zl0CYzMp{u^WcUtjWP z0EAiC?-UdgRL>5DF_7=70SQ|Kq{tihd>NqQAn3oJ^5eEYE*74eJ_W=IoYMb@=QgHN(*arAmEruhX(_`kOD>Y$sBhk%zlKOtBXtH6%$ z$#g+)&M`F@fqa$YIX%!id3_WuC*%(09)Vb0=NTRax`;f#+CL6uPeiDJJga4|jYj}| zM;3A|`6K+>$$Q`(TrN#kO)`KJH*cGO6tce!p06gS%gUC+eeGYpTKs(V z6eN?8k@2l~M2hPOtSL7h6EMkSyGiz3^xqu}1_J_}{9{tQGnM2NnSAWfJ0J!&x$DlF zjByxE8rKLIK4+kyhgdnltkXkBaCy(D?pjwG8x*2?#8g0ecRH|z8k(59;oyQ1Ed5Sz^&I^B$$>rTV#=g2uqlV)gu*0NP;VScFNMkCa#;K5{>vO0JJuPm zcQ;DjakR2S>mii}(&~z^4|j{>YHE~;uGMhQFh)=q;N!6Aft-K261AuE+CvIm9A(Cq0>iI?ODQ8_D<7mwVo{#SJ0n1x z|Es5Q>sjdYohfN6TtWZdgtKVZ59TxkyAy%31PTZi4wld5eAg=)KHbSHY2lZ_+zLzd zdi^{-6Zkt%LvD&>;=#My%H-L~ro;g)a&ytTK08|d=>kDG^0O8TwjYNMnhM=hxj~6P zxuH_E?yUV8IMmWiUMnVxsvqZmifM*ZLDFBZ;Zi1GBN2|^NpcYMzvJgQmty<8t&cINyl|7@IL2fM)U@HH%0CKpJ+b!w; cM=p_&G5OA={yY4?$*-lRtnsi!$>QDr0PO;YIRF3v literal 0 HcmV?d00001 diff --git a/config/styleguide-visual/reference/HorizontalActionList_basic_desktop.png b/config/styleguide-visual/reference/HorizontalActionList_basic_desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..4479cafefbe0308b7671e09a5e9e1c92cbf51afa GIT binary patch literal 7760 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

?QbDZPHL;uSgRa}N!K|mz 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 literal 0 HcmV?d00001 diff --git a/src/components/ActionLink/ActionLink.md b/src/components/ActionLink/ActionLink.md index 68222834..46862c76 100644 --- a/src/components/ActionLink/ActionLink.md +++ b/src/components/ActionLink/ActionLink.md @@ -42,3 +42,13 @@ const text = 'SharePoint Document Library website'; ``` + +Compact: + +```js { "props": { "data-description": "with compact" } } +const Like = require('../Icon/icons/Like').default; + +

+ +
+``` diff --git a/src/components/ActionLink/ActionLink.test.tsx b/src/components/ActionLink/ActionLink.test.tsx index 7db880ed..e10becc1 100644 --- a/src/components/ActionLink/ActionLink.test.tsx +++ b/src/components/ActionLink/ActionLink.test.tsx @@ -82,4 +82,23 @@ describe('', () => { expect(component).toMatchSnapshot(); }); }); + + describe('with compact set to true', () => { + beforeEach(() => { + component = shallow( + , + ); + }); + + it('matches its snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); }); diff --git a/src/components/ActionLink/ActionLink.tsx b/src/components/ActionLink/ActionLink.tsx index 52473639..9f38cca2 100644 --- a/src/components/ActionLink/ActionLink.tsx +++ b/src/components/ActionLink/ActionLink.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { join } from '../../util/classNames'; import Block, { TextSize } from '../Block'; import Clickable from '../Clickable'; +import Strong from '../Strong'; import { FixedGridRow, FixedGridColumn, GutterSize } from '../FixedGrid'; import { IconSize } from '../Icon'; import NavigationLink from '../NavigationLink'; @@ -15,17 +16,20 @@ import { ActionLinkProps, NavigationActionLinkProps, ClickableActionLinkProps } */ export default class ActionLink extends React.Component { public render() { - const { ariaLabel, className, icon: Icon, text } = this.props; + const { ariaLabel, className, compact = false, icon: Icon, text } = this.props; + + const gutterSize = compact ? GutterSize.XSMALL : GutterSize.SMALL; + const iconSize = compact ? IconSize.SMALL : IconSize.MEDIUM; // Remove Block around Icon when this is addressed: https://github.com/Microsoft/YamUI/issues/327 const content = ( - + - - + + - {text} + {compact ? {text} : text} ); diff --git a/src/components/ActionLink/ActionLink.types.ts b/src/components/ActionLink/ActionLink.types.ts index d1133e2c..a616aefe 100644 --- a/src/components/ActionLink/ActionLink.types.ts +++ b/src/components/ActionLink/ActionLink.types.ts @@ -17,6 +17,11 @@ export interface BaseActionLinkProps extends BaseComponentProps { * The visible text. */ text: string; + + /** + * A more compressed format. + */ + compact?: boolean; } export interface NavigationActionLinkProps extends BaseActionLinkProps { @@ -35,7 +40,7 @@ export interface ClickableActionLinkProps extends BaseActionLinkProps { /** * A click handler. */ - onClick: ((e: React.MouseEvent) => void); + onClick?: ((ev?: React.MouseEvent | React.KeyboardEvent) => void); } export type ActionLinkProps = NavigationActionLinkProps | ClickableActionLinkProps; diff --git a/src/components/ActionLink/__snapshots__/ActionLink.test.tsx.snap b/src/components/ActionLink/__snapshots__/ActionLink.test.tsx.snap index 9d5c5b4e..a65c3123 100644 --- a/src/components/ActionLink/__snapshots__/ActionLink.test.tsx.snap +++ b/src/components/ActionLink/__snapshots__/ActionLink.test.tsx.snap @@ -33,6 +33,41 @@ exports[` with additional className matches its snapshot 1`] = ` `; +exports[` with compact set to true matches its snapshot 1`] = ` + + + + + + + + + + + Download + + + + + +`; + exports[` with href and ariaLabel matches its snapshot 1`] = ` action('clicked like'), + }, + { + key: 'reply', + icon: Reply, + text: 'Reply', + onClick: () => action('clicked reply'), + }, + { + key: 'share', + icon: Share, + text: 'Share', + onClick: () => action('clicked share'), + }, + { + key: 'flag', + icon: Flag, + text: 'Follow in Inbox', + onClick: () => action('clicked follow'), + }, +]; + +
+ +
; +``` + +```js { "props": { "data-description": "counts", "data-action-states": "[{\"action\":\"none\"},{\"action\":\"hover\",\"selector\":\".y-clickable\"}]" } } +const Like = require('../Icon/icons/Like').default; +const Reply = require('../Icon/icons/Reply').default; +const Share = require('../Icon/icons/Share').default; + +const items = [ + { + key: 'like', + icon: Like, + text: 'Like', + unlinkedText: '4', + onClick: () => action('clicked like'), + }, + { + key: 'reply', + icon: Reply, + text: 'Reply', + unlinkedText: '2', + onClick: () => action('clicked reply'), + }, + { + key: 'share', + icon: Share, + text: 'Share', + onClick: () => action('clicked share'), + }, +]; + +
+ +
; +``` + +```js { "props": { "data-description": "no overflow" } } +const Like = require('../Icon/icons/Like').default; +const Reply = require('../Icon/icons/Reply').default; +const Share = require('../Icon/icons/Share').default; + +const items = [ + { + key: 'like', + icon: Like, + text: 'Like', + unlinkedText: '8', + onClick: () => action('clicked like'), + }, + { + key: 'reply', + icon: Reply, + text: 'Reply', + onClick: () => action('clicked reply'), + }, +]; + +
+ +
+``` diff --git a/src/components/HorizontalActionsList/HorizontalActionList.styles.ts b/src/components/HorizontalActionsList/HorizontalActionList.styles.ts new file mode 100644 index 00000000..8c3a22e9 --- /dev/null +++ b/src/components/HorizontalActionsList/HorizontalActionList.styles.ts @@ -0,0 +1,21 @@ +/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ +import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling'; +import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities'; + +export interface HorizontalActionListClassNameProps { + theme: ITheme; +} + +export const getClassNames = memoizeFunction((classNameProps: HorizontalActionListClassNameProps) => { + const { theme } = classNameProps; + + return mergeStyleSets({ + unlinkedText: { + color: theme.semanticColors.link, + paddingLeft: '0.2rem', + }, + menuButton: { + top: '0.1rem', + }, + }); +}); diff --git a/src/components/HorizontalActionsList/HorizontalActionList.test.tsx b/src/components/HorizontalActionsList/HorizontalActionList.test.tsx new file mode 100644 index 00000000..5c73add6 --- /dev/null +++ b/src/components/HorizontalActionsList/HorizontalActionList.test.tsx @@ -0,0 +1,76 @@ +/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ +import * as React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import { HorizontalActionList } from './HorizontalActionList'; +import { HorizontalActionListItem, HorizontalActionListProps } from './HorizontalActionList.types'; +import Reply from '../Icon/icons/Reply'; +import Like from '../Icon/icons/Like'; +import { darkTheme } from '../Customizer'; + +describe('', () => { + let component: ShallowWrapper; + let items: HorizontalActionListItem[]; + + beforeEach(() => { + items = [ + { + icon: Like, + text: 'like', + ariaLabel: 'like', + key: 'like', + unlinkedText: '1', + unlinkedTextAriaLabel: '1 person has like this post', + onClick: jest.fn().mockName('likeOnClick'), + }, + { + icon: Reply, + text: 'reply', + ariaLabel: 'reply', + key: 'reply', + onClick: jest.fn().mockName('replyOnClick'), + }, + ]; + }); + + describe('with one item', () => { + beforeEach(() => { + component = shallow(); + }); + + it('matches its snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); + + describe('with all items', () => { + beforeEach(() => { + component = shallow(); + }); + + it('matches its snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); + + describe('with all items, and maxVisibleItemCount of 1', () => { + beforeEach(() => { + component = shallow( + , + ); + }); + + it('matches its snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); + + describe('with a theme', () => { + beforeEach(() => { + component = shallow(); + }); + + it('matches its snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/HorizontalActionsList/HorizontalActionList.tsx b/src/components/HorizontalActionsList/HorizontalActionList.tsx new file mode 100644 index 00000000..945f417b --- /dev/null +++ b/src/components/HorizontalActionsList/HorizontalActionList.tsx @@ -0,0 +1,69 @@ +/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ +import '../../yamui'; +import * as React from 'react'; +import { LayoutList, LayoutListItem, GutterSize } from '../LayoutList'; +import { CustomizableComponentProps, defaultTheme, customizable } from '../Customizer'; +import { join } from '../../util/classNames'; +import { HorizontalActionListProps } from './HorizontalActionList.types'; +import { getClassNames } from './HorizontalActionList.styles'; +import MenuButton from '../MenuButton'; +import ActionLink from '../ActionLink'; +import { FixedGridRow, FixedGridColumn } from '../FixedGrid'; +import Block, { TextSize } from '../Block'; +import { IconSize } from '../Icon'; + +export class HorizontalActionList extends React.Component { + public render() { + const { className, overflowMenuAriaLabel, items, maxVisibleItemCount, theme = defaultTheme } = this.props; + const classNames = getClassNames({ theme }); + + const visibleItems = items.slice(0, maxVisibleItemCount); + const overflowItems = items.slice(maxVisibleItemCount || items.length); + + return ( + + {visibleItems.map((item, key) => ( + + + + + + + {item.unlinkedText && ( + {item.unlinkedText} + )} + + + + ))} + {overflowItems.length > 0 && ( + + + + )} + + ); + } +} + +/** + * A set of links that dispaly in a horizontal list. When a maxVisibleItemCount + * prop is provided, items that exceed this value will show in a overflow menu. + */ +@customizable('HorizontalActionList', ['theme']) +export default class CustomizableHorizontalActionList extends HorizontalActionList {} diff --git a/src/components/HorizontalActionsList/HorizontalActionList.types.ts b/src/components/HorizontalActionsList/HorizontalActionList.types.ts new file mode 100644 index 00000000..e69890e8 --- /dev/null +++ b/src/components/HorizontalActionsList/HorizontalActionList.types.ts @@ -0,0 +1,36 @@ +/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ +import { BaseComponentProps } from '../../util/BaseComponent/props'; +import { ClickableActionLinkProps, NavigationActionLinkProps } from '../ActionLink'; +import { MenuButtonItem } from '../MenuButton'; + +export interface HorizontalActionListProps extends BaseComponentProps { + /** + * Items to show in the list. + */ + items: HorizontalActionListItem[]; + + /** + * Aria label for the overflow menu button. + */ + overflowMenuAriaLabel: string; + + /** + * The maximum number of items to display in the list. The remaining will show in the menuButton. + */ + maxVisibleItemCount?: number; +} + +export interface HorizontalActionListLinkItem extends NavigationActionLinkProps, MenuButtonItem { + unlinkedText?: string; + unlinkedTextAriaLabel?: string; + href: NavigationActionLinkProps['href']; + icon: NavigationActionLinkProps['icon']; +} + +export interface HorizontalActionListClickableItem extends ClickableActionLinkProps, MenuButtonItem { + unlinkedText?: string; + unlinkedTextAriaLabel?: string; + icon: ClickableActionLinkProps['icon']; +} + +export type HorizontalActionListItem = HorizontalActionListLinkItem | HorizontalActionListClickableItem; diff --git a/src/components/HorizontalActionsList/__snapshots__/HorizontalActionList.test.tsx.snap b/src/components/HorizontalActionsList/__snapshots__/HorizontalActionList.test.tsx.snap new file mode 100644 index 00000000..15bb2ff2 --- /dev/null +++ b/src/components/HorizontalActionsList/__snapshots__/HorizontalActionList.test.tsx.snap @@ -0,0 +1,239 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` with a theme matches its snapshot 1`] = ` + + + + + + + + + 1 + + + + + + + + + + + + + + +`; + +exports[` with all items matches its snapshot 1`] = ` + + + + + + + + + 1 + + + + + + + + + + + + + + +`; + +exports[` with all items, and maxVisibleItemCount of 1 matches its snapshot 1`] = ` + + + + + + + + + 1 + + + + + + + + +`; + +exports[` with one item matches its snapshot 1`] = ` + + + + + + + + + 1 + + + + + +`; diff --git a/src/components/HorizontalActionsList/index.ts b/src/components/HorizontalActionsList/index.ts new file mode 100644 index 00000000..4ff7c4e0 --- /dev/null +++ b/src/components/HorizontalActionsList/index.ts @@ -0,0 +1,3 @@ +/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ +export { default } from './HorizontalActionList'; +export * from './HorizontalActionList.types';