From 20b6374ca6f0449db5f701e94d054aefb6b9aeab Mon Sep 17 00:00:00 2001 From: Alexander Lobyntsev Date: Fri, 22 Sep 2023 16:01:57 +0700 Subject: [PATCH] feat(plasma-ui): add labels for time pickers --- ...TimePicker -- label with controls.snap.png | Bin 0 -> 15501 bytes .../plasma-ui TimePicker -- label.snap.png | Bin 0 -> 14145 bytes .../components/Pickers/Pickers.stories.tsx | 3 + .../Pickers/TimePicker.component-test.tsx | 47 +++++++++++++ .../src/components/Pickers/TimePicker.tsx | 62 ++++++++++++++++-- 5 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png create mode 100644 cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png diff --git a/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..632aa40666cd2bc0a53c32ee31646e3f1625bb48 GIT binary patch literal 15501 zcmeHuc|6tY+P7pEZBbHbqEw1xh(sCM6_v3q36UsChDhcqTO|owrp&e5i!GTm7b2}> zSV=6kgiI?T^OWiN-a6+w=j^l3e&5ggywCfdKc3Gg4Qu^|`@Zh$`d;7bdtLb*(>%O% z$=W3>EG$cp9yz4V!m?n5{ID;=CzTB?w^&%@b&ekTLC1MP?=v?mLl=*dKH6lgeb;$f zvTu$n;=i`+0DEm7?*aBr*Dg3O*@S;e%U{Q5o7TpW&z3FKBA?y7kw`u}RCb(v z_RB}%`P&Bmf8OTP6RJwd>&sy{&y3Os&33K%`t|EXr?{72f8f3^_Z~c0Na3Yu`_(0C z9T$rj%zpgXmSLS+`}Xa%o`RTtPJ!><=|@FJzbp1q3O6%h$kf%<-3|yCZ1v%O)6{f3 z!Q$=3-9kb_FVAN+iE=AVOYGROW4)4ROo=h zUVJw$?)=4zOaAWj7Vm|NUrR65sFU@amMyv<{pujM!gGJ|qL&}be2*s9T?@EUj$b3zL>259vL7+Fkg~Yhp}nYyz+Bt)88kvbcEh7lV{tGBPTP@yw6D0_UBb@2XM` zsHuIwaN)w+w{O30Xi%}V+(8Wzpso&3art!L*Lkpf^_sP7P3JHCslUW~VO3R?ZTFk4 z1qB6pJ*kE4j~+c5@Hd`j#VJNp&xB}bXbd)-y7W<&OF=0R{~!)j_Y9sAxZ%S3mc z*H#VIOcdr_@;EoQU6$+QE(wXN+P9J`n8Qt;Q+?0d?R0f@KYjYNF`kCKQUf=XIemJ) z36{PaA8#(T=EgIaOxA5oG(yZskjL*{=mENeP4SGQX6#<&d_y7rAbVWBYSk+C$2mEf zms%8W`1&U4CS!-`PW`9b24!(fSFT+7nZ_KH4+{8Hpos-l?`heB`&vB4v13#FHHL|< zPc@GpU*UJ?r?9Y@qkHoWxs3A- z&tJZLM_tIL|7Gyz2}62k>GkiMtU^LUdOs9K>}huPDJoJtfBt-9#@WRtam?EH?{As# ziHeD3HUw`z%pM&XxhbNu_QQwj>))@&?pvGk?X9jSBnUmM7s<-Xn!q1LIwH!uBF|m8 za5Mdop!fVsPJ7Kb;2TA%-OJ9)SDc*eKbC&Cckft*+E3_g;co_-Zr6McAa2j7Mb zonCX}UXvACo~4t+O#RAXdBI@zeNJDtq(6D0zJ=$0Vc|L>x}?U6%FOLys)q!ZJAP^M zOYPah!vR+;r>I2?2vhJ20Z4bqfA`|Wi^hEWZD-G(ePn*-%++Bg4c_a+gAD4zI%7Hv7=*4=jF(msqqz9 zH?P0)mnXxTIQYC(J9q9B6&2lhZCP8FWaFXA%E~Gl&A#L1@{8GP{r&y#Civ0p)@#Pd zJ}W6t9f*!mIo_xw-A9`f|z7@icm5OiafcidyfxEZ_V0H@V|5a+_WK>+4V0 znzq~cyFc5!Fr9XepwwRm0V`8w~Y9-Zc0edc-b82?khS(z^V=1|BpW4&Y+p2P` zFXyj^6Uzj7H}Y)LjA@e*PEcQ9=g~9@Gm* z%D&n6U|HKgUAQAMDhla0Al$&C>;DJsEnn1Gnx{QVJq3Hre=m z&SkXzrmVui3@eAmcE8`*&mxf1x+eGywV;dYne|!Ti+9SFe^NCnrDJ#vimI zK*i1|!ZhP$N|m$*GDJaYyS-5avIPvoap=L1zz9`gX^paBc|$tIASJV);ME^osUMVJ zfn!Oqm{@Y1mDoJ)nUIu5$hlp92^O+}K5!V$vU_@>rVJVH3(~5B!TW`;(}v}3%n~e+ zW@@FEQtbvJ6Z}m0fH78#7psG)wGJC-!vhvkH*hN;Hpkk2$F4top5@k%qnu?WOc(z7 zqc#oM%ENKR$Q&?#;Qs#m$L{GSBXc9qu|-8i!DBV*eyhK@opMaoZim_yo=*ieu*CHP z-nceJ_aNN?7qQC*9?Z}?XJX=g{rY#|;o$?_1)9=pJ9Wd3Y^8DM@24H8Z!dHw)=#Cw;%G49Rp?&LOw(32DlwU%T+?VN!Md<74-8-H3AoPH6 zd5Y*N|NEg}J3PPXCU2+QJS4~#9uc8$WVH1RLng=iL1?K2r_BkR7KImtV}G`Rvas?N zo=sH}oT8Pb4o0~4N6-`!xnmNIhYC_3^z4meek>4MKzD%QjOZMpm1e9_3D|jHyKV9t z^3k9?H{F2)X(_b_yH>$c=?+$mF5O>y_TtE0_)~j$Y>ieM(Q6%I)5F78g=&lL-1*Uk zfBw69%RUo&BfXTu8^>JU<-)Hj>>ibXuPud%DU<)`8|4Q-0%cNrGLfiLj?_tqYCFdr zzRPskP9ew2bosT;;+NX($QF$`0oqF_gk0wYJrf#|=bnE_g2h_AB#xO8o?tP5UdjLT zjV|(HN(v~ao}ONbgOQDL9P@r?>9BmMw8p`C|AIS*n|)+}rXVwKe3Y2zJ2~m{s&f~4 zRiNn#xj-N7C1ny4oIY1g_>cveE{_h^Ny9QYpjUS5L$&#Cc$@ICahC0;JIK?{rgU|k z2eHI{!7#y9az&_i$5c)D7TqveCc(LI-o)`He9m#cOqaj@MvRT;0?Qj+7eznPO%6V? zW5#~zGaZ2q6fa4qytBK1+sz| zNKUT5h@7vT#5+7ZJOS($RtD`kDG~-!a1DNHY%EYzQE`+&nSzgo?snb_Ha6!$JQ12q z7qA9-+50J?4?e<18{WRk-|7&t*uii9c@9Jsto8N#_o~us%TFfP=ebW3 z9=#vOmz3luLE*h&at{_DjIOGRGbJSjutV5DWrXxwDh3$IZzJ~gG zWpndwDE9ak)|x@{5b(XHC?M z#p$m2)ZcH8GIzq&)s;^`U>hP|5(`5V!-XfLHO?|?Vw>!!8!klMNCQ9h^W(_5^Jn*4 zAsvA%0UI)`qxYkt8*g?KM}9CC2{YZdo${%>dz05-IG** zkq!6IRp}0_z@L=xBU{*Yl20@oPp)TwZYnABi^WO+`h^$1p_l^rR8Tr>t z0eG}ubk$~%BzL&WVF3?bH}rnjxBr-Cw?Rjna)14N?TZ1@8h?VOFF`eq{IUl)P0NHf$iSjv7c#u0r>?>hb~k zpwYZkwf(~7*>9u+4hjB%h?;bd>$?{!2*Bw9`Ge=CAGlxg`7@#cg<{c>EeAxx1jAH6 z`cvCEIXP|Ho^t>wn+zB2L6!xr$l%wg14}Ba2TgBn-RO<_5((tpMNo*>(gCB0#S**q z4aY@SRh-Y70PoAskJJ$<58SYi2nL{HkXAD54e49&S*-1;l@7StE_*Fj-sR4Y?w+3Z z9EMF9y`kZT_7b|o@&oL4!+cFFR6F*&2^FrKWgB7CbwB{ram(P10RaJ$Qc`7(K)kEq z_EZT@V!*h0-na1)0L*7GcUwK@DXy-~lOv>{0&Kx?^Gy z9FT4rAeyl2h^$QgH7hH`t^et2lt1!8q(H5${V_)k0?o1@s=gLr?^u#fo-Q;TQwN8Y z@!Ge5$vFnU{~CsM;a{Lp2U*e1eofO=(~KheZ(5Yjp!KxH?RFe%jACIZAS~}gA zmSe3MuUHMFWh5bEzdW}KNWpYr3)KepvqI_HFBp7JJIQt{A)VXqg_yqcd3&0U z$l!a+G)bgT$5V!e&vUHZ5f}iLQdc)ONuUQs8~J7hQ0L>b#R9(;7Dnrds_03tHM6x{ zM&b2VrIhOa$!*A6h5bd*4Gp?D(W*?*MT-}6K&U&GMkfaj>#)!r;5pEmR<|@ibt9Fx zcG5Eca_}a$%y*(D)z#JOWo@s*lYvpVS)cYU%Un22)oSIR-e;*l@2!fA96%n07l|&N zLfNWH;W<_9V1(zojejZ6g|ddaKS@UfcmS5=Z6%|2H^JhHqvM-*@BGqEry)FUn4pj{ zftv6a+<#r}zxt?92$2BQghD{9N&%6_j~~A_IyMF&fE^ziLaMRK_FpZIVh7uyLZ`wV z*E)w?P}i~#%Lhr!v(RkFg|ZHxc^RE;<^FgORx*g{1|VyKfCc=^@c13lqm7J6|LyHR zGhK)@ihK`_QE`rEo+-e)#3DAw)9P*_hn+ij4Uh)ndPFD$hi%OO!GHpRCuTRh_Ur_3 zBH2NXT`^yDwEzX+UdV1BC;{!VR;y{lP+RUNC;Q_mSPHh!kO52^iX8?UNx7U~1(}a9 zN*)dr_7a?+BD%>ximr-;LTqP8WQS8_XF@tI%i*2$&m-M+F^V2hDnD0tLgzEwL3aS} zG;?$e|IbetIYiF^a@%b9H`V9YOy2?lAi^VbX^Vxt9cHW@g|%nP;h7NIh^mNDDY-LV;I{pY90Q(|pF$GcI~3kDu+_%(#?<#D1Kk z-yv2CFN8Npv^8-Gl^JKLC|aimAMQU6TKf$)=6o`Ppbn9Xl2BY}}kQniA zM30P*XF|=Mo}emqwam@5ATkV5_B!`wP@TzjMAZiq!?m>Gyer*2K(023Tu%l{zn7nz z9ws!weNpjG-rftE$BV{;)rItT%qJeGp{=!t1v=NYOe`YGA~Pv5uB~Y53##S@hzNcv z50H1jJgAK3F`3z^;<@P6#_qwu}AYMT?wAY7bAo*i-bZv5}A7 zQ?swXB)qADZ{zSZ;AFGv13IP8Y3Z7yET;YI49=Nqtvj$3+CQz~sxrpFV#! zRd5^Y{ekX~8fL=xq{pb=6e+lg6UXE}Q6?Z1seXAkDy|^+j?IL>Du9@4$q%wIOdwX9 z$GO}X8*@xeKt>>cFZ@#Azhg2>X-X>2rE3k5?nyl%UhZ&Ab+98u%am^s>Tx;yE>7_$ z1FT9@?`V*Dw~DR}7@BAgvfqh16yhcUh3fNQHIK~khU$dSwu)`>2qV_ip37ZTYfd|V z{LXVMD_(N%UR3~W=O9&p>H37J(Elt`G$+c0Z~8;a%m#QBa_BU++L0AMBRV(0Jy!xV zeqRa~oOqk4Snf(ZXTVR(ofU~2aFdZCiER7=4W0J(c9g21VbPVXdpWtd-as@*@-CY0 z6ekLNDZg{;f;iXD!mO~F$@rHK>YAFF4FI5GTp;(YbzzzU);)~#p2FF(fNHHxj}9xR!$Q8Csk|Z}Zb=(52Kaa`4S={abDED&jf169Fv~OW_~v zjXBl0x*YwZBaQtt&HaP^a%(uKNz(3fINs<-Jpfr;+%gfX=@W~nVTJd zC(`dib7PLYv(AOo1NmADp{k9fBGqJ_n#D!cUvoRgW4A0N`&8>><$El+E|7^)4zhDzCG;-fEMYNG`7U2+Pe z0|Sjm&_6T@YzM)~zk_^V`leg@n{ox6FwTAGC@XSVzem5Dl@NDO0P)OpAT;W%{5$T7 zT6#`Sd*-k9<=P@aYFzOncEIe(wswc@t zC*+60cNQ`{0V*8Hy2)1OpkzWKNwCmPqwDv4==a=%YH6azspud@`=iRr+1>u5I(r^g z+?(i?UT0xrBV^^`5*fg|Sc8xdNWgo5dJM73mV$@`rYyR=R6=PqVilafsTVdY^IwBbx za3Vxx34q4c@DR;FD~8Y`6i8@G4I^g|zi!Me8r=zjW}=a*sM1OZHk1ue0g_z!eJpiS zbUFOXO}A5QjUq-tQ%j-ClLg`lS#gM*!NXo7hw-^PXdME5ur7W!wEEZ|-n1eQASjED zrU{7vmwvaFN)`0OrQ#s47P<*E!g7*^lFv-M+ zlK4r`{G*Miy7rJhaXK7N<&D7S@?Nzwj}ISJ$o3C-+v7kw@;!ZhovHvFj_By<%~0iS zaz=bzC8v1!`hL{b>NDLOrg|NcPU)B8InUH{wzfZ~?`d%lDap5IvR9tlg{m3y`!*{J z3l2h5)a*8>96rpk565uwGN6)(G8~o{FOrrUg_r&dG^cccc=pghUKC2tQZ50-s<0-H z@ekL`vh+(yV{F3)vny9Z@g1JC=J)@=_9Z~!zkLirC^gKNT0h;kx_DzR&RpQ+P^!~Y z|8$`9ax#j5d<5gk4?bUESb@O}jARH}nVQbePkjPL{~owb+7ERc zB~*hI&0;2I4xWs>QM;xv^71aVUold$&X`dFvzRw)TO7&jpj;I`kqWDPu~mDx5OjWhkCPUgixZ@?A=o^ zGCDf=`XKlHP{Ce|$B=4ECjOZNmVC);ia}BW@PqXmu}+UeId4x>pk@PFQF99hpV_Q5 zH%TLnRwP|Xyh~)AfKRg?7{ek(!?|F338^@642F877fk!ZleGkMI#h(NhKw%2eKd%1m?)p z!9|3P^YkE0IXRl*6p5fm<_->F5yqa8S?09NygbZMl{*-P zYNJVUBKZWKfa>YV*U!oFQ@vR+N?vi%NyoO^j(qwN-$W(Mx04`qft7%zd(IBW598#J z7M=&7eka5Yu)q4Wvv;%wRIN0RK1;M#0F`S4Kp44sassyYyI~)q zNc6q^AsY9T9oSiKRp`Gbsh4PIQ zgElMwtgQke*~Z~dE@(fAei|tW6#qB+AOVnRp^)XB7#Sb0!#Eat>#J6;hTaWQ1-eoM z0UF93MoYF~xyy+7fWB-Tn*NU6|BFsZAe2b(x^;eNQR9(Bp&N!mN8trJu#rhM#rSQn zTUuyE9#aFOBO?-uiZx-6A3uKm;X}YB3{pV%b<|d^CBXSM={OFF73E4VBbVD4%nty2 zEi&Qg8MKQq#S`{tZ4CEIMUz70=cK9rDsIJzjYVMT;7CMI9Tv9PFBI}jg3}$s6(Q|1 z(dFM1%X7Ob(6us$DoJE50=R{koCJM9#}pkgl0eC{L4XQTgeG!=g%*q+WqCtSAXAosB#_q@$qPrP~ zthXbK7}Vzy2n~=CgMf^k!AF*1kl;}wT4XoNO<`0&asHs;PY;5A>DdcRVaR}P6G=}_ z&d-`*_j6r!FQ7 z7EtZ>H=44FG3U6zEuzx2%J1dB{k+9A~eR8CP_7j37o zBTu-Jen6<86|yNA4PCcx-2-$qlaKvf|3X<0Eg)#@j2yf5i;W??hY{g?puF7|NHjF z!N!V^ZTWXF>S$BgCqsIN^OQTK15d}u0R~>!)>A*Kf@-2@EWvylsZztAE&YdXL@PSy zNNb_m6VPG^0n!W7zD4w_iPIjVC(zz{wt}>nGa&h3QU_hgiEMF#HjiB4JB9 zFRw9vdYbvE_JQG1!QfUhrV1ed|Fp_R&PPy7a3W%XHJEc=4$@f;bin>D=c|`wiUJBN zIxnL}M(uS*e-%nrHt@9h<^B21Rj!!2W`~xI*(kydM$z@{DS)PfkoUjT-~1H9-dK!Z0xST8vRvq_A``*y zao|?l{_N@I3g{jp&o2M#wj~?4KtnYYqn^in>h!0>N^QCrOPTL1eCs0w2u4(rK^1-g zpupS&mGo?OZ%5d$*Z#j6=U>yrhE<>2wFVAZgvLN=DJvGUU!LC_dg>!{@HLdrHp+i+ z4P+n8*#e`^Vq6>fPRzJSJ>RfPxBl(hLqZ{&)&{g8i(m|wH1E)Kh0uk8k8hVEpP=w2 zAl$Iu>k6I_LmHvpECo zHpXtlR58t2e{rQTwpoyhC?hNe<1!QTlWaC8{^j-Z{8R^{^XBGg>P5Px;jXrbG#Ure>T0Kx6|Ux7;@?n%E2^d5pcv;dnE|9lz78ro$s zR=}EVfU!nAjpRAnnHAk+5DZ`T6d-Rrb1;(D*j(jcKNg_0^=G4J{u^Beoe-{tIN4$JM?v&Y5R`K4zujc+rJMw`TcugJ7M zr5FVRS~0@q%)4S-_Plr*BUSi8te;;%V0d8QXJ21m(aJj?Y$B$nrmEzICnoq=omOYpdj>m{l}u@&Yl( zLL>a@ipj?SX}{-q;gcs%Iz~rP8}G?4E~eS!RuU=N{g8bP-eo`kP=CDJnvp50_E4n7 zeORMtvMc(Do4b3}@UT70#Mji}9q)5?p1nPNM^Z%$t0`}9KRa7rR(9}9e}7g>|8On# zC8^?B!MAxeBd62!cJRYj#&cikk9wl~v1tg)UM~~1;xie2#140?8M|J*6kl_;!<3O@ zI6XUFOdB0_fY9L8K^5?-DxaD0Q1qIOAvgA2^7@{|_+;lvX=WAQX8RhQ6U_iS*ucSP zxc^B}(fOLlpbIsT}w41l3d1jSJRS*cDQ+XRL4j;IXSsF+1rQ6nKw987iz^T zQXUT3%UK!otEQh57jve_e)y5e}uV&$`*;>xeK6O%|s33!P5K zp*cB4IN?Mh?av$04d)#LmId-O_l?5`a9@t~g4UjbnzUYbMJC2R-t~`94t1)L!+pUg z7f*9>a&wD*_$tRbzY*TYceZ14Qcj?D(!B=Un;c4KWrSg`W8rPd%W#h`c*g9kBDR{3 z<(0z)zWL^FHB5VA?HSK_apR&6(_9AD2oLj@RB3R~IMMm><0hCx=LE4M+tsxGy~UY$ zhP;A8=h&Fci7;Fi7auS6;$>k(L`3iSl+KBHzjJYOL!hg@;G4YJ+}u1gG7`#QFmz6c zz2I~4^sM3A+<)5GILrE!jg5`=39@qdW?EX>>olOtwY>v zQVn4wG7tg>ftlP<4NtZU%-x+!Df{?yfAO5+)QqBWkvj)Valn%44m`q$j?1RIwY*+^ zw0-GyS$6$pd4BthR7=go<17=_I<4C(GrwJCxIT!wp38Syi_7<5AoZ*m+_U@2t4z@a zt+_vX&*g}!;SPLOKImM9Cl&8q&n3qnl&?qMomeManaOswMe{q)^ZMa2nu#P@+XwGr zK~BD9o2c!Qs}V}`yI~n%JS-{J3*U-+@L8L)e3z|k2Y%r%rbcw!D_Y6J;_0?>;=6xX zRuI(?53TDCHPdG;p&s*|LnBo#R+Gf#-$zM*Vj->bS9cypA=03S$8O&6wq=vgV=G1808v58}vl A{r~^~ literal 0 HcmV?d00001 diff --git a/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3f2748a167b03c21faa60b55e1dbc445b83752e6 GIT binary patch literal 14145 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 { } }); }); + + it('label', () => { + mount( + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('label with controls', () => { + mount( + + + , + ); + + // отключение анимаций на всех div'ах внутри окружения, TODO: перенести в plasma-cy-utils? + cy.get('div').invoke('attr', 'style', 'transition: unset; animation: none; scroll-snap-type: none;'); + + cy.get('div > div:nth-child(1)').contains('03').click({ force: true }); + cy.wait(150); + cy.get('div > div:nth-child(3)').contains('04').click({ force: true }); + cy.wait(150); + cy.get('div > div:nth-child(5)').contains('06').click({ force: true }); + + cy.wait(1000); + + cy.matchImageSnapshot(); + }); }); describe('plasma-ui: TimePicker update value', () => { diff --git a/packages/plasma-ui/src/components/Pickers/TimePicker.tsx b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx index dd7c7f74ba..c2eae17cc0 100644 --- a/packages/plasma-ui/src/components/Pickers/TimePicker.tsx +++ b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx @@ -1,11 +1,13 @@ import React from 'react'; import styled from 'styled-components'; import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core'; +import { whiteTertiary, footnote1 } from '@salutejs/plasma-tokens'; import { PickerDots } from './PickerDots'; import { SimpleTimePicker, SimpleTimePickerProps } from './SimpleTimePicker'; import { getNewDate, getNormalizeValues, getRange, getTimeValues, getValuesInRange, isChanged } from './utils'; -import type { PickerItem, TimeType } from './types'; +import type { PickerItem, TimeType, PickerSize } from './types'; +import { DEFAULT_PICKER_SIZE } from './types'; const StyledWrapper = styled.div` display: flex; @@ -13,6 +15,37 @@ const StyledWrapper = styled.div` align-items: stretch; `; +const labelFontSize: Record = { + l: '0.875rem', + s: '0.75rem', + xs: '0.625rem', +}; + +const StyledSimpleTimePicker = styled(SimpleTimePicker)` + &[data-label] { + margin-top: 2rem; + } + + &[data-label]::before { + content: attr(data-label); + position: absolute; + left: 0; + margin-top: ${({ controls }) => (controls ? '-2.5rem' : '-1.5rem')}; + width: 100%; + color: ${whiteTertiary}; + ${footnote1}; + font-weight: normal; + font-size: ${({ size = DEFAULT_PICKER_SIZE }) => labelFontSize[size]}; + } + + &[data-label] + ${PickerDots} { + &::before, + &::after { + top: calc(50% + 1rem); + } + } +`; + const defaultOptions = { hours: true, minutes: true, @@ -66,6 +99,21 @@ export interface TimePickerProps extends Omit { const normalizeValues = React.useMemo(() => getNormalizeValues(getTimeValues, getSeconds)(value, min, max), [ @@ -217,7 +268,7 @@ export const TimePicker = ({ return ( {options.hours && ( - )} {options.hours && options.minutes && } {options.minutes && ( - )} {options.minutes && options.seconds && } {options.seconds && ( - )} {enableNativeControl && }