From 5e96b5766ef82ba8220649ed6d88fe8afa7af1eb Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Tue, 11 Jun 2024 09:56:04 -0700 Subject: [PATCH] [Emotion] Convert basic form controls (#7823) Co-authored-by: Lene Gadewoll --- ...ms_EuiFieldNumber_Controlled_Component.png | Bin 873 -> 881 bytes ...esktop_Forms_EuiFieldNumber_Icon_Shape.png | Bin 1307 -> 1310 bytes ...esktop_Forms_EuiFieldNumber_Playground.png | Bin 865 -> 863 bytes ...ktop_Forms_EuiFieldPassword_Playground.png | Bin 913 -> 918 bytes ...esktop_Forms_EuiFieldSearch_Playground.png | Bin 1123 -> 1131 bytes ..._desktop_Forms_EuiFieldText_Icon_Shape.png | Bin 2317 -> 2321 bytes ..._desktop_Forms_EuiFieldText_Playground.png | Bin 1888 -> 1907 bytes ...ome_desktop_Forms_EuiSelect_Playground.png | Bin 2105 -> 2115 bytes ...esktop_Forms_EuiSuperSelect_Playground.png | Bin 1902 -> 1909 bytes ...e_desktop_Forms_EuiTextArea_Icon_Shape.png | Bin 1862 -> 1865 bytes ...e_desktop_Forms_EuiTextArea_Playground.png | Bin 993 -> 1001 bytes ...ms_EuiFieldNumber_Controlled_Component.png | Bin 1983 -> 2006 bytes ...mobile_Forms_EuiFieldNumber_Icon_Shape.png | Bin 3099 -> 3086 bytes ...mobile_Forms_EuiFieldNumber_Playground.png | Bin 1945 -> 1951 bytes ...bile_Forms_EuiFieldPassword_Playground.png | Bin 1923 -> 1957 bytes ...mobile_Forms_EuiFieldSearch_Playground.png | Bin 2492 -> 2509 bytes ...e_mobile_Forms_EuiFieldText_Icon_Shape.png | Bin 5443 -> 5439 bytes ...e_mobile_Forms_EuiFieldText_Playground.png | Bin 4298 -> 4311 bytes ...rome_mobile_Forms_EuiSelect_Playground.png | Bin 4995 -> 5022 bytes ...mobile_Forms_EuiSuperSelect_Playground.png | Bin 4458 -> 4479 bytes ...me_mobile_Forms_EuiTextArea_Icon_Shape.png | Bin 4592 -> 4617 bytes ...me_mobile_Forms_EuiTextArea_Playground.png | Bin 2456 -> 2472 bytes packages/eui/changelogs/upcoming/7770.md | 7 + packages/eui/changelogs/upcoming/7776.md | 3 + packages/eui/changelogs/upcoming/7799.md | 1 + packages/eui/changelogs/upcoming/7802.md | 5 + packages/eui/changelogs/upcoming/7812.md | 5 + .../form_controls/form_control_layout.tsx | 17 +- .../form_controls/form_controls_example.js | 10 - .../src/views/form_controls/prepend_append.js | 41 +-- .../super_date_picker/super_date_picker.tsx | 11 +- .../basic_table/in_memory_table.test.tsx | 2 +- .../__snapshots__/color_picker.test.tsx.snap | 24 +- .../color_picker/_color_picker.scss | 14 +- .../color_palette_picker.test.tsx.snap | 14 +- .../components/color_picker/color_picker.tsx | 8 +- .../column_selector.test.tsx.snap | 6 +- .../__snapshots__/date_picker.test.tsx.snap | 2 +- .../date_picker_range.test.tsx.snap | 34 +-- .../__snapshots__/auto_refresh.test.tsx.snap | 6 +- .../components/date_picker/date_picker.tsx | 51 ++-- .../date_picker/date_picker_range.styles.ts | 23 +- .../date_picker/date_picker_range.tsx | 37 +-- .../react-datepicker/src/index.d.ts | 4 +- .../date_picker/react-datepicker/src/index.js | 11 +- .../super_date_picker.test.tsx.snap | 4 +- .../quick_select_popover.test.tsx.snap | 10 +- packages/eui/src/components/form/_index.scss | 10 - .../__snapshots__/field_number.test.tsx.snap | 16 +- .../form/field_number/_field_number.scss | 8 - .../components/form/field_number/_index.scss | 1 - .../form/field_number/field_number.styles.ts | 59 ++++ .../form/field_number/field_number.test.tsx | 5 +- .../form/field_number/field_number.tsx | 35 +-- .../field_password.test.tsx.snap | 22 +- .../form/field_password/_field_password.scss | 14 - .../form/field_password/_index.scss | 1 - .../field_password/field_password.styles.ts | 59 ++++ .../field_password/field_password.test.tsx | 66 ++-- .../form/field_password/field_password.tsx | 119 ++++---- .../__snapshots__/field_search.test.tsx.snap | 16 +- .../form/field_search/_field_search.scss | 22 -- .../components/form/field_search/_index.scss | 1 - .../form/field_search/field_search.styles.ts | 63 ++++ .../form/field_search/field_search.test.tsx | 5 +- .../form/field_search/field_search.tsx | 38 ++- .../__snapshots__/field_text.test.tsx.snap | 12 +- .../form/field_text/_field_text.scss | 8 - .../components/form/field_text/_index.scss | 1 - .../form/field_text/field_text.stories.tsx | 22 ++ .../form/field_text/field_text.styles.ts | 58 ++++ .../form/field_text/field_text.test.tsx | 5 +- .../components/form/field_text/field_text.tsx | 38 +-- .../src/components/form/form.styles.test.tsx | 237 +++++++++------ .../eui/src/components/form/form.styles.ts | 190 +++++++++--- .../_form_control_layout.scss | 1 + .../form_control_layout/_num_icons.test.ts | 60 ++++ .../form/form_control_layout/_num_icons.ts | 37 +++ .../form_control_layout.tsx | 283 +++++++++--------- .../__snapshots__/dual_range.test.tsx.snap | 40 +-- .../range/__snapshots__/range.test.tsx.snap | 34 +-- .../__snapshots__/range_input.test.tsx.snap | 2 +- .../form/range/range_wrapper.styles.ts | 15 +- .../components/form/range/range_wrapper.tsx | 5 +- .../select/__snapshots__/select.test.tsx.snap | 14 +- .../src/components/form/select/_index.scss | 1 - .../src/components/form/select/_select.scss | 42 --- .../components/form/select/select.stories.tsx | 13 +- .../components/form/select/select.styles.ts | 67 +++++ .../components/form/select/select.test.tsx | 67 ++--- .../eui/src/components/form/select/select.tsx | 83 ++--- .../__snapshots__/super_select.test.tsx.snap | 14 +- .../super_select_control.test.tsx.snap | 20 +- .../components/form/super_select/_index.scss | 2 - .../form/super_select/_super_select.scss | 16 - .../super_select/_super_select_control.scss | 36 --- .../src/components/form/super_select/index.ts | 7 +- .../form/super_select/super_select.styles.ts | 104 +++++++ .../form/super_select/super_select.tsx | 53 ++-- .../super_select_control.test.tsx | 5 +- .../super_select/super_select_control.tsx | 43 +-- .../form/super_select/super_select_item.tsx | 55 ++++ .../__snapshots__/text_area.test.tsx.snap | 4 +- .../src/components/form/text_area/_index.scss | 1 - .../components/form/text_area/_text_area.scss | 39 --- .../form/text_area/text_area.styles.ts | 98 ++++++ .../form/text_area/text_area.test.tsx | 5 +- .../components/form/text_area/text_area.tsx | 47 ++- .../inline_edit_form.test.tsx.snap | 16 +- .../markdown_editor_drop_zone.styles.ts | 2 +- .../markdown_editor_text_area.styles.ts | 13 +- .../__snapshots__/search_bar.test.tsx.snap | 8 +- .../__snapshots__/search_box.test.tsx.snap | 4 +- .../__snapshots__/selectable.test.tsx.snap | 2 +- .../selectable_search.test.tsx.snap | 6 +- ...selectable_template_sitewide.test.tsx.snap | 8 +- 116 files changed, 1737 insertions(+), 1116 deletions(-) create mode 100644 packages/eui/changelogs/upcoming/7770.md create mode 100644 packages/eui/changelogs/upcoming/7776.md create mode 100644 packages/eui/changelogs/upcoming/7799.md create mode 100644 packages/eui/changelogs/upcoming/7802.md create mode 100644 packages/eui/changelogs/upcoming/7812.md delete mode 100644 packages/eui/src/components/form/field_number/_field_number.scss delete mode 100644 packages/eui/src/components/form/field_number/_index.scss create mode 100644 packages/eui/src/components/form/field_number/field_number.styles.ts delete mode 100644 packages/eui/src/components/form/field_password/_field_password.scss delete mode 100644 packages/eui/src/components/form/field_password/_index.scss create mode 100644 packages/eui/src/components/form/field_password/field_password.styles.ts delete mode 100644 packages/eui/src/components/form/field_search/_field_search.scss delete mode 100644 packages/eui/src/components/form/field_search/_index.scss create mode 100644 packages/eui/src/components/form/field_search/field_search.styles.ts delete mode 100644 packages/eui/src/components/form/field_text/_field_text.scss delete mode 100644 packages/eui/src/components/form/field_text/_index.scss create mode 100644 packages/eui/src/components/form/field_text/field_text.styles.ts delete mode 100644 packages/eui/src/components/form/select/_index.scss delete mode 100644 packages/eui/src/components/form/select/_select.scss create mode 100644 packages/eui/src/components/form/select/select.styles.ts delete mode 100644 packages/eui/src/components/form/super_select/_index.scss delete mode 100644 packages/eui/src/components/form/super_select/_super_select.scss delete mode 100644 packages/eui/src/components/form/super_select/_super_select_control.scss create mode 100644 packages/eui/src/components/form/super_select/super_select.styles.ts create mode 100644 packages/eui/src/components/form/super_select/super_select_item.tsx delete mode 100644 packages/eui/src/components/form/text_area/_index.scss delete mode 100644 packages/eui/src/components/form/text_area/_text_area.scss create mode 100644 packages/eui/src/components/form/text_area/text_area.styles.ts diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png index 897272a25fc3390474414323597c05d1bb16c89c..76c83b3b9e5198af0f2328e4ca52491d5b27cc74 100644 GIT binary patch delta 829 zcmV-D1H%022Jr@vL4O-bL_t(|obBArZW~nqhT-p=nI2DV$4L{Bs1oV2r0h^xAyHLu z0Z6?776>Fjq6@fz3JIYIiqx*EiXw3fmADN;`Ui*&5Y$qKxOQU4Gn4sY5eVw4_{eC+ zGUVTNEFTbylJK6!@*zmdnxpL(bS!;FU#x<>f z`mr`P@9N82Ur&1*0HDSu4#+P*|Eg~{HucemALz`PRe!y(c2;k{^`>s${zhe4KKl&- z0RIaU2jqtzf6~gzvX+(>kIv4$cus@Ct{y)6eX8RC0QEI-Kz4U`)#=PVbvEDWNRkGF z!E{yu0BUbazrs5F=!$>!1%TsY;(#nH%&Xsj`bwkM>mNQgzc8Iu0D#(?I3R0lXSKck zhaNxf9)F$PyLVqpi>Gw@^vYDn0RZZ2;()BKKChS0zohl`FSNDwn;ty)UN>)krAwFI z_%HSW0BXu?J$zIyKes&5i*|ZXboJ_WZESp}lToDCUcadK-hD?wz>Vzya2#~EyM6%y z032`K?Joa?1px3vKmY(<2nYbc3jqNDcp)GF0Dmt81OVWLfB*oz5D)->7i*1GQ5040 z007L0q9|mIl?{VH2U%A29st0MILI=EK_Kg*rpBXD)q4N{Gh#d%$wf`s$T>;U-f&p) zBmh9&?G1-A#wc=5W*lc_mgnmCdkTU;&1O^1IR!yb^-cgl4di*QG)=X?zptVww0LS! z#x~f)fc*WWB#o8EiPAh%S@Oj?06;Rv$_1fZ)KJ4kN9TV6?)~RZTz*JG00000NkvXX Hu0mjfSJQg% delta 821 zcmV-51IqmI2I&TnL4OlTL_t(|obBB~iyLJe$MN6u%#)dHH=9kn(6wOet*pI?J$WdC zy%+4=iwaUu1U)MVVyUIj-WE~tCG^m@(eARgTD+9D)a|yLZDMveGkIplLo}csx_L;+ zEct$pPbT4i`|@OxXUu-zm-<_pdG%8-?+caXXc+)7!;CR<&VQ<&I3=+gtvg97ib8+x zW->-j3}=LO=ijK?n!{AP4~g00bc*0DvF_1OO0(fB*o3 z5D)-B5cl#+{%?D`tt;PO*ZTT~;w09&bMNT$&o0TippOFp96~`mkgvY}R@Pdru3p!b z%im~iZ9_l&`17P^0{~Rm*a3O);Gu5cS=X0ee5yB2oqyEI%4vP{;Rm{T^A-=G0)QDZ zc0hi+|GSo#k85e^*l6v{nK#wxboJzq&4~^N0I0691Jdnuwb)$v*V*>?2 z(b~o@cYn2X?5IwhSf1!`0D$TmJ0Pb{zOJ)xzoqXkU(>@!k9F_vuUcLGNf+P0@G9m5 z092HD^rTb1cDymxo3`6Kx_b47Zr@qcT)nRM&cCZmpM0z+;*aeBFbg)fdSL+p0L-?{ ztsZA#0RX}f5CA|B0s;UCLO=ijK?n!{AP4~g0DlA_AOL_M1OxyO#2RZ<6g&tD0B|rx zQOZ~&>msXx&!;^P0N{`q_*^csvh}2<-tJ)9^8f%2iQeu&^`s`7#E~Sa+e@cB5&)p; zy1i7!NJ$*Y?Du_{=cU@6Jw=gG<4CL|jyPEt03b=q^FnEstGAb_D5RyQu*6A@9~BuRp0TaZc}goub{ zCl&}15jnyFAtEA2SRh11B}A`Zg6a)m$+KHy@^8)|~psHzO)W{r2u zM?8_lU(xYm;}Q{(ONuIxi|6*kFm)_!TLS>lDu3rft7-rMENoi?!_;x{TyH@;lZhmJ z{yEcTn%@TiNFC z8~o^sh^X8+E|4?FK0xz=$I;N#nwwSE-HEE&rrhI(rdBlFw+v^FZOwbHruh+%C8o_{ zv442(7!eVb2S)`mJ~o8&r}trLXZN)E;%7GF;iooDn=S3^#`)8GF&Q1nYj@-Pd6<}- zLUep0H@kZE7gSbisI3V)iAzL8w}7Jp=|A`u+QJ)ey3b?(_Aq*PbWEH10`+JMZ^VfM zZ{)Q*6sp5Lci)Bmy`Liz`4hv}MsW1YuYa-lp*AN`iHPVHDY!s}2m28n9YpK0^*0|B z0+M|5y@{>M)+0JPh~dHhysq)m+LfsAsMxk+H}-zmgGDV1u>7$lg+?VJqFYFe{Qid> zst@IT!oDr7cw|L4niqr%y3o*1Ut!?zyLkDXZwt*xL_}pKG8QTPr%Y_vIJoNtM}HTr zZMfIbc|=51ehPjELPSIq8H?}_rHF{g85Rf;5jnyFAtEA2SRh11+{NN?2xcMRRaJ;o+OQ4N#Kc4tvMj^r^FdWr$g*7OoJ2%a z229h0uIor9ldvocHNhGPA>AmDf1i}m)6mly=%xYN<`?TkL<9&SL6sG#UJpE~H#h$q XRQYj-&1gq%00000NkvXXu0mjf!F)x^ delta 1258 zcmVtZ5hK?opb1flB^LWrUbOGHGa!}C1Y_Klp#m^Px3Af%KK zlNs9^OQaDF2M~<}i#;b15tXpdc0vyL`1huN&(OHz)KGzB2vNt zAtE9r3=kqBQo;ZsA|fRW5F#Q{;%k7IljE>56MnWNBBB!ITY$Ju79Afxg^spnc&_7D zTOuMVQN9JpZzn!Qw5kS1tQx;|@Aa!K5fPOredZ-IOMg#X!eN9lD5MIEtn<@8a0LEd>ua@b^_zRaPJtGjg?i7Tk?g zDvgoR>jn2GA|f>f1;~Z7`{CFY>X&T*07NS0A%9X)4FITLwgHZ9;lkMi1r3-^O(GI0 zn^udImrw0W7u1`Gh}0p&= z3IVCz`fTFTm76g#*n|F_ZlxhNzSN3PD1f$)+VS~U2hmXfAf8iBJzhAxSH_h z%`s+PIi>xbC0OzNE-b2R&g($E7mne?k+-mE$1nNLNJK;>W^g!}|Eo+qcsTU&T7RVj z&aPgp^gALVDm{5$fe;Z94Gt&yK`A04Qo{ftA|fRW5F#Q{!T=#6A|(tEA|g`403jkG zB~nNM*X4(qh=}O+xUL5w1*EP?WNoL|^AHiy9U^Nx&@~Ae4h4`*Ws5xz5fR-XlBq1h zp#Wqkr~v@RlV*`eA|j$vH=Z;h1Y-~iY7mnd+jATbqlq*$O~5D*A{5l1X}rHqL_~n& zxG*gT$+QL61!h&2K?rdpKyEHFEgKorhHbm>Jlyfw+O)9~+qM027!>VPVg=cu-_P+) z96h(M5+^aUtn~UzUSuk=Tt!vN`&s}17-QvvP_Exo&-MQ~pMPbguj@)lGLei?6h#Wd zP{x=R=K=t_!h5f>ES09I7d0ANY1grUl+lC6Es z4RZj%zhCK@co@9{`}E8odMg;KPq)tkL`Ly{mWLeoH&M zd-~$m*Nff;0O+u}1M=Ii`}*$tUA_6n4Go8vwY7OguYbJsf^L8Ft-SYVzW@N>e_`%` z-23q-ZLD9?#kJMbv#rNAm84Vsad5cMaR7ksnmZuVbgDsg;i0oQ8c34Tbh?;T0D#V0 z$hWY(_~;4%&YQUd633B}N&3*)WRjdd1^_r8<_^f#<`s>Pj&*Q2K0Uj8_Xn-5#d>68 zeWBw30Ds*zcR+^2%X;#O$MwG8fQ~ZvfBwY}A05th z(eZJj?N4uNXJ=PE=k)BgXY}fg7iBF!YzKhzV6;DK77zfy`8L`g@n2W~fMy5?0H6^9 z0sv@)fB*m*As_&NMhFN1pb-KB0BD4O000`X)_+*lb=~$30Kk%{>sr=W*)RxnQkHG+ z0RSwCld@D81hTF_&@4^Qz5)OMNwYMS>knl6&PkFcNz(Ep06^DGl0?QB^_`QMWu-5x zO5^c?f*{afFpzUjK@haP69CWwRaL1d3Qea|)pf0n^$i(g9|Yv@C*?(^BFj}&rM&0H pIwSx<&TxAsS}lWb=4%#4R_gT=#c9wM0~ z@7FEg%;9@`Gc(DI*&q2@2lB#elzVw!sjequ0Kft>#>hFVc7NiO#BMTol2lcd_6CKF zk-BLt=d6q|b6XYw&>VGL%lqe@80B6oomkddnf;NkpZ11ow_952#Pi-00MKClELTyK zTJ0{$=0z!ME%5*V9IBfpGR7z`O4(69)=Ek|002jmc3K+cV_9ETYB@XaeE* zfFSPhL;kDZ&vfnj4Q*`RlWRG>bN-w@y?RAa6wP`+06;?poq>G&-H$TH=$o&<)K_18 zu8qz6`uX;+v)&B=&|p&sWar`Ey1TKZ&p!EBubx`d`hVFo`tb7m`tA2WcnK8%ERd-K zvi;WsomhQE-EKOWy|Mnf27{p6OE1kj%gYDf4QI0z0HE<^ z^ee1`OIJM97XTK<)B)+F%i7BZFU?+jPSeh8wgLb&-qZnEKYK>K-kzR5>rG~xTifcc zq&j(Gb$_PI0RWn7>VTX+wWhbN`!vC=!0HC4F_Jdyi z+UfN0Bmbqpm+6P=H+5%YOG(_)d+(mt)sH@qwfwOi02aZ{ZWb000Kj6~+0A$s762d& z0RaF6As_&NAOr*e5QKmL0D=$@06-7|0ssg?Kz{%LL9DSxRmF>-002i*Rke&YvM#b3 z`*Pm<0054Ou`lH!E89+5$_C?k?*jlhCbGd;?W84}#E~SapXGC22>{S^{VbO;QW8fp z`y*eMWvwT@p`yqrU5=H+k)nwE>i__$EGy+jsccxNs-(5mB^hI$2js;;dEqt6y}Ykf r*CyOp2LMRM7&&LvPMnh1P3HdqkMZMcyTk(&00000NkvXXu0mjf!!3Um diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png index f11c7d56bc7b2af133b9d396c18077ac3bdabd93..e65ce7349ef7bb99a2270defdb21e9a4f9297064 100644 GIT binary patch delta 866 zcmV-o1D*Vl2bKqrL4QC=L_t(|obBDsj}%25#_^}Bo1SrI5SA>tB$kb%ky@Qj-8}&SCd6ayw&G|cn`W7I z`F`E~001V$E`Q%wnq{(ik@LbF0I*}$TIEG9TX!P>fXPIF002rMKmY)x5Fh}6QV0+L zKq-}+-(6i@)8)@T*RQ|)CP{k!h39nPfzh@Zf_xn3X(0Dk~S@f`>Npp;4j z9{|9F*h*9Ro+leLTN(|Ab@u}Rm=L4kP(iaL+YACp(jeptb^ySC8-$^ZF=_^Z%qU8W zG+WEGzP={U^VDj!6a;}h&#Svn0DuFsEK`ys+T7e!p6A*(wNJ*_y8-ggq&SI`M6r@A sRZ;L_9RMI1V-um02obYs-;0blyzmLR%|ET z4*+0~XvL9SS%1m;%5z{202rCIM!xc5>j3}=LVy4Of)F48fFJ}203Zkf0ssgS?>=RB z>+2i(;L?Y>di6I+(#eyL>Eb)fI(Trlj`9G21{!+@vcA5dm(RYg<4cd~^6H8%udZlu zaY1L#oma2lucJo*Km(cXA3Z;JxD#C9z4tHa&;y6`#((+O{x|;7$De3e6nguu3*+_( z0BD$-x3ckfAV2@|tIj-k`mXWk&z#l|KmIgsc>q8|jU6C2Zv3gaxx;sjADw?#-R|$> zmInYdRPZaT7hZft*Sgn7n!EVOf>u9Wx#u+i0L^ssRu=vh*0t_+t$q8&NOPZl=Go9? z000fee}5nVfFQL7$lBT!eRt*iI!gio8mhJc`RwyAwfyG0y0CmvUw!>eU1b3P4OLr! zY;JAuJoo!qU1b3P4OLr!Jay{vo#!V{JyBO#06;_4au=2)^>1f-_1sI6q+YM5BS#*r zt26+hfocno6HCW*V(D02Sfp n07%9d#j#a8jg=<0;nb1ZH}n^lveah+9T<7m-1Qh2=t-;6+HqSWD?9=br@$;mT=kYv=6z z+4H9h3ll2O^Qb$|#`|@7_&$6;cOQN{=lqV5%R9dQQYhwC%zqbDbRGG=CjbBp!<22s zWXCI1VaKn1p36JF=ef#c#w5c~GMQ8?7L#EZWsC~|hzj5LWOviOKBNi)n9ss};F(Vd}1Y0C3GndJ@w0GOI6 z5CA|Z6bJwy6bb|Y5DEnX00`x#zP~#<`iBl4Jf!~qGde%;qa>+uaf6mETdJ0pO-iNs zaUuXrSD{ZJCr*5&En8YOJTk29FTS8--G_Co`>?icdw*WPUb>`bx3sFKr}tK71pq{d z@$=v>{_NV>fgbAm;;0TB_)u?l?9n|7@BY`B^XCS%W9M#d-P)>+8y~(ESpfhMF?4w- z_zC3V#X)s;zO6UfUjEPWkfg70hd%2H6%GIpU4aXvx3^F09$H)S{Q7lk^=;qDplbjC5f`{XhK4R{ zX>(J_^9_v+8oW3dbPWI?;sO_lWm)ol|Hgy=;CsR50RYh#xIpUb=jn9+nUd!R&JSpA z-Q1vS000pexIk8}T%jXJx=Wrv+;vnBu6`is8h-#l#04&pXP(}y@A^)a^kV#*uX}X% z>^Ze;emqn-06=sFE|6KXYP5UzPNmcPbn?{q|2zBcdmreDO^>Onsxovy06;WZ+h5x8 zdNLX8&Z-3q=BvJLp4!{@>Zc1AOXT%&W^MeEn0Y6cL4xyzfgB!h0)x!MEmx(E4`<4GS&eACc&hfKmY*K z%cPw^007eu1p)vFg#rNpghGJ;079Wa0Dl0Xn5JRM^SpBB002x8p6AIlOqnsu(uCub zI}ZS0ikNU5#Vkvv9Zx8i&6Yb40APy9WwWy537K)*mL!d3GG&eg0EoJ=Oh$%bC~n&_ za(TyhTvsC_zss^LB@zkQwk^xD%AFGc5CN|1s#q*)e0*G<=c(q-8X1OpwLtzJDl!!F zD&`9+x{iFG7wZ53$uLaWR!nxhLKXJ4zwP)F6ZAB6)40G<00000NkvXXu0mjfdU6S! delta 1073 zcmV-11kU^G2;&HlL4OTNL_t(|obBCTXjXL`$MMhaoU`Y7)}BpCl(M-cHfLKb8%1OZ z3Izr2B9b*s=)wyxq6@VMGnmy>Qa2;IEBXUbqkkJFiC$DBX&Xv6I{yU*F)_2o*0cGX zXXj5BmLOz%&T;NJTkqH9;d}Uf?mqnZ!S81-<-JgUa|@pGu74-b3lxS|J_7*$$BZ#@ z97~zBqjbu-^4*c7APDs5XhFtERoRpr$C5FoWMKgS$q|O3JnwQ(-HijFDULW#!#*Rc0v< z06=lF6=ll1US%)Bb%u+P|+y>(@W4^MB`m)#^2C_5GnACNnDlAVJJ8 z=Z3>u=4B)O)Z4pP@4o+`c6V;qqD2e;b>`HmGurt4OIo*Xty&&`bTYC6021Q-g`uaMxw{Oypop0#k#ow3As{-f&apZH+>;K4&Waq^Vf zTAz#+4gio`kqczboSU_I^9$HAv{`jA>Z@=?_T30=xs;bJ^0RaHXWN+BGX-l>u z+MDPLZ?9ENO|@Qq?RA|!`?LHY(Ck^WR9>FBYOc0+fx33TrG~~Onm_;6$;=G^D52bF zA%Ff|SPwn;fVw|=PjlzZRZq{CYHfQ)`wx75)l75qQg!XxruHq{bnMu`bq59jBuA{f zu%a3mIH?ymwX3Uho9gaZbVJty0Ni-7?!t1VNqQ5YuOC23X00000NkvXXu0mjfD)R&F diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png index ce79e9cbd46d62a7426d911649fc55f2f1f5f535..3c079f73a92fbf9dc63328642dceb439b6955826 100644 GIT binary patch delta 2280 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 BlNA5} delta 1844 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 bKN1iXI$QkPJrS)=0e&DXk?>jzkA(jKtr8;; literal 2105 zcmb7Fc{J2*8=ml@F_vlLwfC#+vX-$#@smN~C6YC-EhWZaEMtq(XhyR1jv2;8hQvEa zwjwlYXfR)-$TD`aXKX3F^PTVS?|kQb{&=4IzRrE_`&`dC_jRQ?T(%O0N<$$Kh^RFZ zbc8?-6!7A+!h*be3*1NWo&({IR^||TkL)*IA`otFeMOje;)MNh5QxyEHF)7lbpFyv z49dCx0Q37wJl6G;h{|yZMVwrz1j*|D{4QYbTR{_v--2kZ*68YoNXAB zIAyRk9M0BJ;|mag!{K>|5R4EAPHh&A@iKSSXb^07fy%?-)sK^{Krop0f5Fo?aW=`1 zmF_%A3vvSiw?#J)Y}JN&oE9>z6sasV3Zbh(Tb!J~=aCv3w*F$N%5EGF&ees>2ETai?I z%b;riygZF2nTEe@xiV^YeF_Kr`ZCCKHnuKgq{la7gSmv!+n(hwgWU^3CaSCPX}G_6 z5dU+}<{b^X+*qpaRO0vX6pbqyWDicc1TM(2#~J&6pXRJR8c>2F+B*HAGJ6A5Lt~LuJEXqN}?E_7v%h;EMHaKpi>suZMsVsd(3T~;>ty>nD{od!N;u(Bqs&!xAI`YdWL zuDfnb)hH60beUr0wGn4yqpZQ2`1DPWm_ehRv$;eNXJ||1{$=CkW$N$0=QcF>de;7A z)D8Az5I^em$nXeFudHl$8^y6AvQF08PTf)15Paf`7MhrxR8diBn&FIX5o^Y-HWE6z zT4%YQHBC6A@7iMVcY^c}ePhh>`1BxG_&$TkCY5v&NZ|vuKQjowQ#xz1-&>75T*?*! zGQU#OrLJ&9Yn#hsRn$#Q#gekPv$vYx%&iAyWe& z>T@i+Ky#*X*1H(H6+-B^R9RcWn|cOwNy(1fUKKH@rl!W%v^nnq!13SME$wY7_oD-P z5versM*7)ck%CQY>+}7HKkGv{%@e<>eVJiKl#@zz@AS)+MDMojh)V3u`|KH{l$n}8 z?yni0cV}dtup(^^i@@Y_F3zCtJ;V)v<+Wj~`UspoxJ6F}bR+ zXPSnM=R6&aYA_=!bSY!leMay=!#yE|25N5Z{PBvnMSVmws$sYwLmP?2mDf@*w};T{ zt{2jMnfCdLI;uL)6R1YdB#~MI~7=ZY6t}$bJk$1U19*0~yy^|t!(HR3aqYs=%$d2QCZ4nf~ZgTW$ zY(9cQuH+epgqXX4I%8YQ`Oj+-QC6^29}n-caSmtUK(5 fw+m&X_hu7IoXHlyn6b?~`-fOtUIyvr*OUJNaS#hF diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png index 682f2f6532b885b1e176e7eb64711cb9a0b6c808..782e071a80cececd2b1430ddaea735dd0ea78708 100644 GIT binary patch delta 1865 zcmV-P2e$a`4)qR@L4O}fL_t(|obBCfa8zd<$MNsk-E20OQgeeTxsZlLM;)zGY%8`p z&Zrm&5=P1;TnaX!KmtqwY2%cngCtNHoGIy0Kr9qGEe$k`l(uP6r&SzhPJ5fQ_%;j}w&x*~~mx~`XZc+F5SXyNg+fng966NAIyz%Yz{3|B-%ZWp0Y2-7ra zZ*PZCh}hVBu-WWa6G%(zCpaS`iH(Wr?>I$7nrY=1s)2hp*y{T-8thzt->F){eO9oS6EBEsS5?|4K+WPpfpI4~^>TQC&V zgt>@_^qS3PBNz%|>+e8BL}Xx60ud3Buqc6uh)7tJKtx0&EJ`3EA`%uQ5D^gxixP;4 zh=k>~N+2(;UB`3FmiKoUA|lcYVSj>NTU*E0ZEtYsP=5`rt(QrNkKG4jkf7fBXQu-Tt}tB_eXC3u^>& z?D*fvFDRn5A>;y`dJxf*9ZZ0)6Fl5LOezANR2?_CJkIu#C z^W$>4Sg>Fob#-+#Ha1aS_B;SJHAi{*r5V?su3oCm*}rM#W1TxO};l zL4)q)(4iVyT3X1?{vq?`7Th%MzwSRsd|Vt?I<8PyxJV-q5xFCsI(eEWWBU!|vZ!lAfMQdHHIb&ImTFuK-}r+dCPboAasQnpm{Bn4GbrdGFm_ zl&^T6>i74ubLTDq91c4lez=bj4?e)wS2wcu#nrt2dL<`Mp1Nt=k39TMva*Kv^>#%> z29)8M8RX?nq;f|Ut5&Tc6bju?Cm0M;R)79WDtAW+nCy;aJ&jXNg|NS>T zpP89KFc{>*g^QhK;e(!gz!=EIp0P z%;9X?w*7`@YnElP{mr*{?6GeX73JzIudlz*d3^EWMGV6rF)5+jev*@ia(}wEu1ndO zvu8<8N$zXNA|iLKCuU5guy8hqYmRdC*l`xjpUbqVlW$4eVZFxt%rj4O+QjkBh%YQXVNr{xLDCIYs zx3RWj9f^sF%$hl!@wsEey3v&{tl`i5{?hsT@rly_C|OoacJ>d#YEwjHp!njKvTk{s zef|!lFWTBXWRD)tYg;#wG5qFlZHb7;z!TPYAR;0naGNcrC?X;Q$LIP8OGHHOOnQVR zA|hc^0ud3Buqc6uh<`{}lt4s8BrHlGA|etNo6WEh40gY=u84@pHNjvIn_3I)5Kx7V{^Kq>1c27?|4K+WPs>sZ^!A1#^!Q50ci7dzeAvih)A2qgJBrB zoKB1muNg8eiw@ex5sWVGm45%00000NkvXXu0mjf DIoOrc delta 1858 zcmV-I2fg_94(<++L4O!YL_t(|obBCdP*vvv#_|6-cL4-V6wpKjQP4~$)3FnqWK5H3 zXWFVnCYZ!%0wly8A;D!jYHK95qBf3giqTQC*hsCFL^4$y)O5+Tb~+Om5YskkV->*_ zv9iit&ONsuNU&7Oa-*Z@^ZRn|eb2j{FZY>q-m@4j9xKS_ynj9mkJrMoY=XhIVi6I! zjTwf4(`gbO<|NGRY%6yH*tSh$vk$|7eo=0mP7}j0ZrEf+MC9fX3Lh;&a>qzjMNk7)<u$>w&qqW=dI^`)ffcYZgLY60<{~1}ZKi1u zw1eo-LqtSEq5u&Qk&q}rL_{Pc3J?(y35fzkL_|WO01*+9kSIVzL?k3PRe-!&xSk&@ zS$3nRAtEB(;Ox3e$Bv(gpQ! zVg6!@wrpbI!g+l9kI#61+8nB@Pj{;ykH^ESh3oPAEdb)<<478w7|N8o^!LAg!n7H= z3>p}7U4Qx)5xH4ZRiEm1-R}Nhcf_bZQy;u*U{tpo1cN~`GG{O(K8{ybEo=7}6u;lk z)af}4jE&`|KUqm#T|Frio+N+iB6gJQ2HiD?f@Loe9X)`tN#Sc7X{fKK-yL^w_)s~Q z>gq^I`7SxxGdi62M+Xkkzkh#PE?*`)XTFX=MC6uq?AURh&6>s2Q=VjQ-keVB7OvgE z_Tm!WEiPinkik6~=Uh!w&yPTkAFt#@5)eEO2&ai5BD?rzEKoy*~Hqy)ok5b%xA~`)#1D!eBkSh9Ff%1-4zk(Rg#m3 zlb-$*+lxzBxpGa1ZV4?kYDj9}1a!S|L>R(6CJ za%Yi|KKVr(a&$Eph^?%i?wx2k05{JV!b(g`U_^2fTZ(>l z)w#7mAi%cmJ9y;bhlq#>Z!51peYWlUxpU_*41?I%=uXEOGI%h@PgJ%mJAYYKMO=Jb zPp2#*a@)#!E}h(*nUs}RP*L$Qc`sy>nK9*>^c~V=yo(mjqx{HG=FR^;Wo1XGsy@Ym zgNMk@na{=Ai_Fc-Zdd=;JAXsXg<6`Ln)&6n9gM#3YeYsy5*`)?z{#p=T3S5q+Ke0b zZK|tJv1|7p0)YUZeELsz?SCpIHDzo_J6d1g!1vVeVP#?lUccZDbRY~$Nl$@X4dRHW=_v)*CsYLhJO_W`Mmj75kD(j zPi#yKQ?oLeI59P(9bK_%4g2^1rS10=?p zG&VLdcKk%P7QI1IQpZv{@HL_}^)I)x=7A|X?N zh=@o?6d)oZ5)uW7h<}KLL;)fqA|Wvi)4;Z`eqOwYh)73lJBVQ#m`;a@-wJfyLPSIa z@LK_#4ihsx%tcePzv~tvA|gOjv!C!V7iO5d^|iANO?nZNh=_Eqp~;J3K$zQs(c-a! zfk2Rd*I&lrFo^2oCd}=?;n4cJh=@QSVB_@#Xu9mfwjuh?2s;eJXbq4rDtUbt9RISF%Lc?-yY0LO4@X9Tk|CIA2c07*qoM6N<$g8O=rrT_o{ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png index e3fb5d6648af985cd6c5ed41cb398c144327fb94..499c602733f007d6829a6cac09d5ac7b4252deb7 100644 GIT binary patch delta 1386 zcmV-w1(o{74#^IXL4Wf}L_t(|obB9OjND}%$KmfBI=k(*wk5QdmKI3RSP11LAQUJG z7eXW`8jP%$zwZ z)oSg{fb4p0XBvHdnK>{p+2;gcAGUjVIPI~q%>K}vR9mC1R4Wzn0N}rxHFIVvNm`?= zR9hp>%$PZIvNX>Gzz4+ifq}F}nyI!solL9OC;L1Ad_YXA*VFEFQtkG-F3bUV&#KjG zy1j0ylYI~XKA5wA0j2?y&;b*Fk@{pG0D$+$?>4@iJD*yc^+Q8>e(04X$t~8QR@$R^0xL%$+_XgXf%opG6;<{f_%K z?An>D?)`Cgw_17h$}gr~o!E`W_Mz?WKmewauRi=>rd4aX@8ZkfH6BT_WX|0D;*u*f ztyay~9(kx}mVf|E5oATzc#Y(e=V=@D6R z$f4tF=N!H)tIxeKXMODO@wMX@AC$YFSvTQ%oxK5^Sk zS+n8g^wn#rRVx#oCm;Y*#Igm8vTo~^tT^P*%$+_x*WQ26JMQcCdb#Gldoq7uR!&@U zaQ?VuOO86=zzNTP6A*wY;>ZIQ=9yQvBuRd7{zZ9y+xA@k(;sEa>#vRP`P;6Yx#TBz z<%L&=vijT$lO*f5ZpzUM7fpDcKN12=5ijm|HD}!M?W|dKefA$1$Y`gNuRrlfZv6El zSu}fg+TCup5AV*GPCY%>pL|;C)oQlxem$oQ-jatte{~Lj*>Au1JZt;Vb^!sHN^X4o z;XL}%i@E=ESB$TXbvju;v@NwtH6Pi3UZ%bE>XKfsmorxn=8TUn&2`IHOlXdOq617Z z*DpUUuZ=YGsnxe<^IJb%O{>*%#Dax6?86JjCTyx?nMYBAC08BBX zold^;s|PcG_=n%*y5*2-(?41CGDSaO z0Zd`<=j+@B1b`y$KmaHvAOI8*5CDn@2mlju^{SOg1O$KyxO&yf3=R$^NvhRKHQjD^ zl8*$yzHVHq)$ delta 1392 zcmV-$1&{j44#p0UL4WW`L_t(|obBCPjGSd1$MN6$?(6}!M*_9Bw1tEap`i$-0+v%k zV&#GuQNVx+V1X2Z8o2S!Q{olzNDvmHwMK}CAW?%#6e=JhR6_xUMg*ayr!BSgyt6w8 zFA5tq5ZOn`*7ftbnTaj&!W@9NtgfqcJKcEn z0F&_oJCm>ie3P&Oe3P&Oe3P&O41dy?>;nMs_W0d~7qj|_wOPM?d!8NMnj|@4&fJ`E z)SO&#>e9S-!J_}@{RISIiWzOU^O;}$Ja;_)Xg;;(i(wcB8R%c&|GUfT`pQ58RjDx+nKue$|`CBS{v{nw?)< zc};qI>U?p{FNLU;44}Y6BPI#Vx08A0LuYEL^EO~bp%$$`Zx#v$$<(_Ar&id`! z#`iq2`Q`lh*+1sq_0J?p7R{QS3l}fRH-G=wgy*?L2bdz(zcQSUzvr~^*Ee7A;e7DK zlXA|n$BnODxOhocUvz0Mc-P|bwbK?X%J-jMH{p4nKmewQ=U&;KGk+EyGyeL>!NGiV z$tnM|r>d%4dh)56-rqmIw)E(QSwFlj6D1%3Q$$}+PpTvj{`D_8{noFg*=oJ%-e#+n z)4uVQJo?g$>2LI;r>-VEPe1^sh?D2e&$=y}bI!5HW%j^f`NU7}e#3p;Za3He%ZF%gv8*=2}U`E^ReCgpe zx#^)bIeO;Iv^t$^+q);9KKs1fc-FaT)OEJ(*_~y#eLeTDxPLCk9&yB5p0#y&uYdqd zB{x0vK-RqQe13Mt)#Gbp?RK8szAZgfo#T%@D!s4$bV;|{&GJ=4Isf<*a>JSDOlXd8 zq617ZH=cQJb~O*={8hJS(`z4H_4f2+$=rEa{EoTf@!0U{&MaRwlmo4?eDZx~70vPl z0x-plw%hsq{eSo6w#OdH4a?5W(gh2$bpFCL+pRpgWmDF^yfI(?&98Ia>1XD%=PfV# zF-0F?0Zd_U=g+wd2mnRgfdEiUKmaHrAOI8*5CA6R+LbGl2nYZZaP7*K85$Z&lGIgQ zrPJw7@{s^I)V&^$R=bm`u2MI8>WsD8lYK4#4q>myqkq%wW~|jtqo+1Tl7s(VSREK?jo+X*M_UF;Zdum2r(X3?=qysMM|0000x4-LI7CoEOv~|5X*kDGL6g+^ zv11lx0I`8S8)u~JT7LQ#&+cBl&2Sv&`qSxrtn=|y=V`2Yz7_y9O$+;1X2H1t+=_XgYaGWq91d0UTy4AEeYNfCb3lIk{bTj( zb?vs>rFQ~w!=Cs18ZVdn=Id{(J)KY0HjQ`y@SpB?yK1WHbUsykIu3QW+bz8bfLG$H z?Y2(Gq1thp>P^=zy$66-;!W4pI8D`F=c|J`0RLOtwsoDa)h;~*fY(X0(E&XHlVAd? zf4<23cMnx1AOL)U_wOF+@$s>$s@k?`>w3K|JPCkX_Y#lGI91!U)pn~@UB+?gT>#v$ zmv~Iqxh~^a-D*{Bzqza7a9Da905|HN@u;f$`QfMPH+R);`o5~Fp7;AD_W^K&{vD4W ze|TGuzdqKc?>`^W@3!|feEL*RPfs-rRYOhFwCG>}miH2m^JT1I80zi!-_?f?zf{$# zs;ZjdILKukEc3MW6iU}IsjEo(^kLgs^6?@-EaPS{{yyDq4s(6 delta 461 zcmV;;0W$vS2jK^hL4S)$L_t(|obB1mZk$CFh0#;xzc1j6ctlV@>O4?{%p)QpL}I&d z|Aj%Yg_w}+NjGAxVU70eQ|Yw*VO;7j$J1Dc<5=T3*Rs4l1MolATB~8`wcQN0Sr2dT zLsiv0&-Ll~RIOD#+^uUEdbQRrHWq;Eu`ElCfvrvt+hIyrs{{|x$f`81As4cce|>? z@mzhJ=2{K?(t7~-k5~;iHBNK&WnLW20r+CQw_4_#h25)9XA=m)-@y6?=`xyexGd zry6d0_3dU=PtWH|Zv)^;{XHI4RlD7;wwqP;&HARQsy;p)FS!qZEA-EJy!-K|`sMMl zHtUFhajKX7xxWA5U48iQb5*sfs%rbg z_;x`*p2j*H#~R1Emc?NmfU4G74MVT(W~j}2czgd7MuwjNn$xrN00000NkvXXu0mjf D6i@iC diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png index f60a83766ba2da040e8ac6f4b910776b22f895f6..e1782502e20337a6089567ea175b6cf2cce3e466 100644 GIT binary patch literal 2006 zcmcIl`9G9t0Ds9w&K#d5jH^-PitJb+voRQD6qd$qMRH_CLo+eRF(V-|o7+0Jl?;ht zow*W1%sOV7hH@)qcf5E;#ywCf*&-eR%zR&l$$d@p-5~7Nt5Cln}?W~<3 zNRS4;FNqum@AnA^cTfmKI@z9ws3Xd&pdu7`9_=Cmo;xB}Nf0C)kGB57C8m(WM5ime z!QwY-pR_z7;9Jb>?F#$y2H1;PN!CBfldO`iO zGJhb|B!`ZuCv^#sQNComm;sH@egxdYf^Ok8!R+%xC=qNB_HO--tPSHW!UAuU<6O1Z z9#nVs6a#}b(oI?HQ7_*l4OCQI-RES((c>YS8X9E(Y`A*$RMq2Kq%zKSiB9Oy&F;a{ z(RaSk%mEdS&UPu1QH+dyJ^CHFZ0G6H^KOKJD87AtIftP;Y)60So}WD#+`Gv*AOq+} z_kxQj0SSes?N= z)qIOCL<;pxoP#2;7=`5!12*n#5q9JxIvZZ}i&k1ttz{N$*)+gZT}3kWXjoC48ffqm zuh%_ZQyJnImTJYG-+OihU4vK{19}x=&K|_mX1X`oV|zoib2Ygj)V{!SKU>rfo)jf{ zLj@YJ)zTbl9Ezp%D!DD=%O3%jKB7QEsYZ2MlP~>V+yfNfbkzZ_)6xI268wDU&0S%s z&8beMXX}fZx4c08)u=$j3}8&~()H<%J8ZZQchKs~>L}4Pq-HGW=L2rZ zoWCmf=iKAKsP@s^WX`x#rm*Uc;K5mZIvm~nVI(?|?m)N#d%88l;;j7h>v415PPEom z;{N)6%#Z$GNn;mmGjpL<>hyOLQuxIOw!53ogsQ1E^Uu>gv$!?Af{>hnq*{wF5}((( z-=MSq>D}%ex;15hxupWw$@9GfvPhJViU$@upI5?_i6?AuUmd$FcC_EH z-tS+Gf46$-CCJ+edFsea?0&K4s2H@~v36)>HYY%PgRnt>b|z|x&V5$^M$}HzZ$ERT z_|RN_buD{Pr-`^UpJDb^9+xCjvUGnJs5FGvF41d77pwYKd3fb<>itwQX6j*KxbE`)9 zE2hpxhSnD(gw$i~PR|-M-A7Y*U9Rz6UjeRd$_0?c8_Lx^^q+84QuTZcheZ5 zf_3Ap-A{@1se;Ji|CHQ(Vl^QHRm*1!9Si+U89Ob3+dn!N0S9QmDtPGj`#+@PSA1d; zHe>2J9mHZ>@6@mfCvVS_pMWh$V6v(0NPHae1xreK8pq;si9&NUk8r=ZxQ;ab@|Gjn zcYppo6F$>cI6rWb7&T%cETzI`aEZ{IRdjo2+A}^T%f1_trg4s2i+?IKeXEaJMVz*hiY)ujrFWq5kmxCinR?yb0mqVgvg(&C*^`c8JVG|S z?St3GT*7EvN^&yOxx@;<=O3Y`i`V<)eb|dt&c=!o)Xp1Y2KPWHs|WScG&5F&847sP z)z^RhZUO8;xkvUL<|jb2LxGVyH+&u|ETmn46(d;B8P#|0R4HD-cPwtA}zoL zz(E#hngh~|>Ov?YGW^+57NNE%!y*3sSBTNZ>Kftdm|*QWS^in!b;o8+qTsh<5tIN3 zoahUiF_cK~8@&={u5w0MQs7m6dNbwESHarWZ#cMX=EZ#3xE7|q^(DtM?C-H=>(!>L z6d9WZ>Gq{1?5Gx?a(-`WdmUt+DC1s(sEf-8(?bU}nL*-*V<~ux!TLgG1yCP1eHeg_ zzE18cl|r^MPozy!14)Og%ZC%aj(t2P?h290A7LK%yfka(V|ABMT~19y6`p3TG)B;P z=twxVM4ATmm|wenn|zbIoC3$#Jx|wlnDQRH-~RL>pwLZJGPTnZ+qAT{3OBEEO7D_L zxP6&=V+;QSte@EFymYMh`h!gK8UAvpRmJL6P6W&L4`4%9#AhT>m$NcOZBQdujRK9d yO-dH+`FagFha1+)C;trA#^yiZjXM8D=gQ0aed~rwR!anTGlWKAtf}XH6aNJaajHQ8 literal 1983 zcmcIl`#Y3t7k-iQb*(lm0 zgK^C8O)++aoX26(?8|u^hB3^H^Y_dT-_>8R-yh!hUDtZnz3zLh=UVIWRYyD7gQ^E1 z2$Dr#Lb*VYcpdn^DzzWH7Zc8Uf{$3Ji=8z@{;I|X#=cN%^eL)UCg3~QD93Z3HoDk zTS+Z-WNc&e?>-OO`M%HL=&62|$kP~)S0lH!7<%2TPS(?h$$fU}*76qDl)O8stE z)bbhuRBjWAWRR?ET9 zjDBjW@yS>crD*?5pmCrDJ2FftBZNL)?>BfE_$E|r6qY@$GS#Pa!o8IQygu#begrqe zAApaUQV@mD$pvFG7bl(!jMXSRMVt}AsefU}2OhYOKCkBHbsAuxscp8caw$V|8q97L z9iVUAzxc*NW8k)i5ldfJWCs@C&}L`~fDgWOFS#7lAkl9GL>fr_gGM=Kd#<|Y6n84y ziMP2>kzHbtmX`Jn->a_Yr|nHP)jF284%7I`!5b5^ zd1`GcCi0b%s~2 zs_1eh5PgtU*CiHdF>ys!VLgK7>B1C^!tvnHy;uQ$Z7zJWmPBgUinf{>(WYsm72`HO z_L#*8dr`Ab;b@m5j;}o>RX2I=^~~u$y9e?gU(nW)PB}{-`fL;t$CEq#Awct{$7*j# zx~WkP5Fy@wX#~j^7Ig5$=W|#Ns7G$>adgnT!ZJNoU z?rsVs@H1T=j!kzdkNZT`AlkO@H{Pm1>a$x=zxh(kjp^r$)hDZ zH6aXXJ{Y!6i!Hq4IB=9tB8 z8$vOh>T^HJXzNT5VhK+`8J4^Itadwk3{w4@{#&yq&f4ThKn?S~TIX2XuXO(s(fYaQ zg%e^J+A=IC5N5;*IGXsykr1($1qGAyWi0!8=1mM+5`w|_cviDu1-V=SW==mdY<2KN zFMfm(-rXv1^~F#lGV@wRzJ{+;)}vz~+xijT;*O=I9neFjfU>t3J+B;JeEXoei#<@v zuCY)<# z6UIc;&PCTDi{NJ<-RZNF$xpN<;78TRV6AskwMFe;{$|_ymjb;UuIh~-VMLb*-u&A! zS>~NKdb!(~Ml%x}7#1~DoCz*hm%bEsxNhfDCS?sNBD^Gb(_=tWM(lQJ2bee}4#fC# zIne|8jsP_(@4GukLChoP&}Z%(!IxJZbmtE>xA*VmN-PRNiZz&ekHGYcy)@ozYI~bDNZ?#YTm_PuN?QeP;qYT zaGSyw%sjy3Owv=)s4HJBn(De+5VbQ}TWxGmZ9EzoYd<1Bb-&|s1hk-6M^Nnh>KTBs zwy-BozWc-l5o>!S#L3knEyK(EH!?}*1!t0*dFo&>*oXBdk9Z%i4D=w*17ZmkF=WbxZYr)d|{(< ULQs(OKCpx#w2dQ*Z0(o$KWs3+Pyhe` diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png index b549f45fe900383d99ddb6a1e1c56eb9bf9812b3..0e7ddb8bc0a8a30bbe75ff8464e4e5bac8c36f47 100644 GIT binary patch literal 3086 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 Q!6ggfT?o#Nj^R0f16#v>Bme*a literal 1945 zcmcIk`CC(G7LF7}QD8dNAw(9Z4a-mwt%B4bDT|>uP?QLv1VI=USp^0mBCDd&BI0n7 zP)rDwpqL8@YXTS&whAJ{5@o_JR4Y6L!%~8jK*D^Pd7k+XdVje0JLi4Rci-=v^PL~g zdAaN9Vsud`lpgf08wrKd5`gu&-Mhg1!*zQK`0Pj`xx1iv1IF{f&`xrJe0GB;eRtR$ z6iUYxa&z{%%9Kw{-Mv6H=~)?EqOu}BhS+aD2%L!gEVsbABf2B|&i7SZiuTT>w28f& zBZ^Mk&XsbabE8x65XtHZdH8cX3FX+Ue@<1;M^G&qaB~}1j~Ot+%{(iTEH+nF&oHxF zw2dI~#tLrk#~`NPDWdP+dUc;i@jkcpArp}NAbp@JJvgs`56}7Axm@&~fx3-FTeY=Z zgoqRQh#W>F_?>_vI}b(Mr+;_SwZv6x{hQGUe@@CtQ~AGWk1CHY@7HE&O~0g&3<2+* zAHAr))rWq7*x(XHQP`r{(km556(70Nh60?Blk(1!0IyZg1{B-~-ZlXIZ0JQjDWLTG zaBl=Yar!_s@@XFLey2T@G&OGlS412?7c;wT69kCCBm^NYvjG%Shi-I#KOx$F6UQ&TTzz7}%)1sIzWZ9TlG8F4`S%`uZHC)^ z`lRw;*yjPiRI}Y zLqmH9@s$ntnMQ$WA4_ayw{6?X`{LD5TdU%sQ|d48D1rV+%n1-qY{64FnhM&q-9Z(WLAJp7UITRMS(q$fRo^66CxC6 zdccj1%?Tf#32SP&)5Z&)8pH!24GmvF(ftF)!poO=cFIZlVt%p(z?vVk7(K8XykENq zfAg=)>pV;7l(Yl@GjvL)y=|_#EcH#@f@9XwHTwI|(mepU%rTE;AAL|EDf~1a4j+3H zU!G8Xd}GLL z=9%KGb$5u=Fg7HUMVTj-^E<}IIh-eA)mGA}t_{tQoMbb$7m3K%u~o>c`03wsj;Lmn zFr)oP7`6YNarGzn9MROq^aPt`N06>6 z83O+x&jc)R&8YPbN-@1k)_hh;Q6W>)4$bjhw6%;c7dC^o`_&A`zo} z-qPLxi1^y2wA2mrVU#jxrJHfC|O3Wd{QO7f{l@1kGV~gpQ9HOS6%$cPY>%B6&cBY)r{}Z q@VshH*y*#^FCCzXwYGzY^i?|ADg#HCRb~@_QP3GLH=axIjsF0G>Rb;1 diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png index b8de798f53ffc61397e2a467e54d4d33cd520495..526e6d26a7bf4c6da145d4e3758b543815c68e7e 100644 GIT binary patch literal 1957 zcma)7c{p478a`?JT&aqyi#>|Dp-OV2!`P~}YBi{KP_@-oq4s9D)^;paW34ty7a>~v z?F3z-`vo&xogs;Rb%TIWvp0#6m?<9x696uZoC z@}}}wn$07VsDsXRC8r}4A7iu%9{YVN#`~uE=shCFha_xp9z2-t7DOK9O+}CKjbgWd zY>4k=7fp;w)@RIn4;s(&R4*10F=2KFgewW7aV@H<7gK%77=kwrfv7gDa@XHqm~VKX zz(&DWA~I0qVVAz;Q7*TQWIky(AdoRMs@!STTdtvri$bPTH2x@^W?b#pi0k3J{oeV| zsk@cgb-ucC_vF8Usr2ZVPNUHSE^htC)y4F*ap#pT`{FxhZ2}QHcUdro{cR4t=e(?w z`;!Zg^}HwiwLs1#+lMtA4ySJ+UhBr%8Y;iA06*@Jr4u5`lPl#rK7Upz&e@ysch5I4 zm-Z6Nt}|8R^qL~-oZVG(93Uj3KfW|s;#yDh&@b@@6cj}ZS?8gjf9n?Fd}D8)qg%iu zZjWgw9%o(WzV4(C7`T(fpbS^f42Uc;hdQxK~mrhfmYcp9(j4wqz(RO+7G4rIe zJ$vEqvNMKjdx=nKBaf1xbW0=UVXeF-zzxPV)zxRmQ`$NAYTBB5-ou*fdfKlaR;f_s zX>PA-_fV1!r=3W#V%Ns61n}rIsP*gO#Fk_qetj&qefrZ+nx6_xYeaLVZ6%?;u&(>* zdURHyG~Xz+{7CLMZQ`;R5=(>15bQKuIzG}IafJG6cG~hkm71|rU4-bZ)h_~mN~lW? z+~JiUq=^E4LWHGga6i;0Wyau-HVc~*gk_dnle;0y_0Q86FFgbEP$jiyDD$Y&sY8VR zDLOBjxVdspIy^5FP4Od{Yn6lHMtM%kKu6VB-f|wEDc3PL$Y=i;D&4sbwO-pOj39$H z32%;U1|63O!ytMTlQbe6i*plJJ{#WoGWswWMEh6YGr1;e&!PN+0-U%E=R=29=X_#l z1YKAnbu2H+U*(_Hj%Wuc&Vt{Z`wy^~_VX1PV~Ul;=dk4cLEl$bNf%iB7bNlx8KM7> z%oX^x-r7N+maHzfC{-&ZJFHo4aEqQ;HGn>|-n`cA>%%vvCWig%<>Dww99`4PWc>Rw zn24}MIgXkSSaTsY@M$rI;HvEz39NEQD#4&)r;QR1%Qo8{s2ppK$!*y6E7@L<0Oh-{YjI5j6P>Nb-~m zeo7lwcWU?;-u!=rDVi(9G3eLDICIP$;7yatyP%ZSrA-_oej>eb?zTN_XOLFjvO((3 zQh!9_w$4u&0I4bM_KKt?&CQS_YF#Ay|HE!D_`@GgCOO;&g>I|9Q-yVeRsY%Cdu|r8 zOrj_=W&4yzNaB?Xn&Qz2Q`*=2aA|qqW6EU5#ru@jkdMFnEVE+Wv^Wi0X11sC9F+~3 z_`ft4Vgb27w=7j`Ir+PdikaOW0J<6QCuU~+)lg3ol>Zn8hb>iT}r=dOCP=L3*3;f|W3*_#h_y7O^ literal 1923 zcma)-dpuid8pq$FblPfn$E~$veRiZSR9q8HTob(vDXG}0kVIVSk|BtcAgu&*?Cxj!$NaPB^PbCl&h!4>bKd9sd(Mv+ zP_F6+bq@jn)RAt^-T)}kpz8|gR~=e0hc z)c6M8d8^<@i}t9Fnp?ptS}M*ql(Y3t$&Z@y+RtMDRw?$VEl+P|_69yinGT;Rm%W&8 zy_e2T_hPW(ucot;ZhW|oD)Ff!*$5`gp4y30Iz?y~@A9n_0Q}%C#S{-L)#|=(=<#MQ zq3XJ_bVmU!3i0f)^te>{R2 zuexB^uW*V9mp_LdWF3N%7jx=MzMH?P56nNx0u|39k=_K3E@e51Q~(%>V%Yek}xA zLAMLIec;$9H_QPr_?o;Q1jCFWyl$%WYJ;5OpFRe^@as`lv~iEp1d?;^bytfZ!EATO`>#g!GqR2fSMaiGKCWVY>*t?q z#@~s&=4QD;t@zdE6ly`V1X*&M5e#N4y<;O2PkjiQnAuPU9jVOXRP&obp4`qK`J!!yRw!+ftYW~ljC9~&A z+#tPnbw{ns=9^-?F<#P{E!@>#ro#hhIQA9pr3t1l6hO&+z}s2>g?X{jUh(QtmfIem z$6kft*B8b~R0C`4-|xsLW!?CZF}Y=CkUjzWKr>YeZ&J}=Uq9;5I`8u_Od-w2P&db= z*^B2s1>j%3XSD_Tj*3=vOp(K;^Z!P!wKuEjx7Sbo86wO|*%ksjXSn(!&HqK8_pXdd zduU(2M>YGBPP4pq$Tm{m>8Js6rdy^p1on6bqDa&_y4@ids$hG zN0?J28Oh7{1Ar1dzc^3eg+gx1`#;_E2kTWfl##SetBu*yMfiM5b~v{ zlsDqBNa&TmUr4Dpvq2yUs~NEgMX_{@d-2@AUuR|y?*q?t_3jb9iXZ>-q}q(tJIgSH z7uBABBVLCp-g3MX0BOptNsY;fy($@Z+>4T27~A-57&g&|F!z2nC8F@O51MuY%99_7 zG*HaH{+Z+Cd4h*$VXd+D(R0SX>e!j8Z}Kt`QfWS1E4)}#=NWB-&B{9rfDxA3W&2g@ zEv#sHY*1qZR}s|^=vc`!MAnZCE|ViDHe~Y{m%hJ*Mss40$8)?(dsX|?z}rERKwLet z0<{|c;$!ai5c3$#GwwY7>WpjhMJ)kLw2?uyAN64Jq4IV37CD1hXFhAfN*tly))s_| zQI?G;xHtt)kAu@me#AKl!sBR7ll(8j8%r}9JszDZ-Qq1ebuCYQ)3C!%4@fPBexv~D Lf^u$h3cmIm?_{g) diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png index 899a5b6e612eb66affd7d735ea6933dd5393e113..5873d9f73454c7440bd1367580ba15151168e5f1 100644 GIT binary patch literal 2509 zcma)8XH-+$5A*yI` z;?fPbzoa`?mx~$}%Jl5<3kXrgzs!Bop1XZwAm6fQAKdGzQk;)orgVNirT zUZap`e9*S>LAHd*(Fa|QOaB}a9SdxuE<^|ti;H!Tp)nftj50UZyGRN$#;`_9XLe_A zFM6{#$B%S8i=<-Scwh0MkeH&_fjd3NlycM37;)~|aO~q;Zh>rLBh3Q%hhYmm4Jz_C zBW|xQF;LV|V&IH=!9d%5oH8~WK6HkAQCj*9YYv{p9}(4PTC18WUsBSBRHhV!rH1L+ zDitdfTM2XPiDkjD*#T8JvQVDYomZLakQ1rq4`|uUq1+PHoYAG9i;0Wh+fQxnaKq&e z!@H+LNjhqT#nYO)S_h1XM845#gh){B zbz=_cdc|}JY02{;nlK}(G6r7`jR)jZawVi=j}6W|b1|&~Nn9v4J7SC|ENg1oAOG&1 zaJo0Y4G*(>=esf!_H4AnRtdyhOeQ#scgqO~DB7F`gv`#Sm^`HkYv=c(LJUBye+67b z;F-PPvlO2!#m7RT2Y4(SL$(t@*Mktv0tm~2Mhn0z3W=8Avb8M7L1k<~Vq+*WIc3!3 z99+>hkQ!d+1d94D=(gp(%9KklSMyOHvC4*%8*KbW6w~?3Yuy%y9E-F5?d6yR;TT9o1VZJQ3H+Ct$>VqX z0W^Cg2feZ48MV!NNeQ3V;^pN9=2$H6*2IZ(v@b?^(&5~E(v799IUpy0sukhuloVH( z+FbRe&p2|sbmY!0=Cw5>6&lDS2hr$souAL`by%ebu?p^lJUCVa0&x;ImlPq8qGt@< zYS(-`Vph$8v9YmJ?2+lpbHR`dvBlR*`gD6l{$Yu6D^E|^&0W^D-75@zzzaw$_!C7Lw-H7aNq=K7cRRuf?>^FjB8u&=;+v*uDRBy zc5PMC!ouQWP|)mq>*lt17+IJ6hTk6GBL+Kfj~0b4Spj*fdWqI*F5k)%*h3bnm={-u z%FwIr_JAAlo36o?5qT8JkrNni-I3wIk^s*s3xr$v3812A?L_m-%ZrHXuJPmJQVh>X z9@6)A4A;5nPp>yNHyL40oLG@)JWR(Y40Roy?(XAp$u)6{y+QOz9ly9FSlnDx$8m)h za}VoKckMU;m55e$HGQu=bfBuDK2k%x8eM-OT&+3k7;(8yd~b(=M6a~8p`LJJJ7b^k zMVwbP4&LOR%PN+GPl^Qy*hhz}$+BmGpCRy2NV! zA?xeq6<=lzE3Jxy^?U1Y%vl|Lj;v=DDIP!&X!IXW@?$P={#r^GqdqbQG zTPIuB>aVtcW=%xOZfgh4tc5!>DwoFU<|QPgzI2uRG23TkW4KfeiWI&WZJm1X0759BFAw1Inyfk_!C>%Q$J&O_u5sWcxW5cSwlNNBRYVS9J~~z zk>OV@ALaatf)()8#;)d!%}*VY)jmt~8Lg`-;FQ+{ux7uJI{z7L^5W8-ih86 zu`$y(kfYSaGK__N>-3jOGL=1m#U8XNu|_lrP>WR3498KRJ* z(oGr6FS#a>bDD1S4~G1EaN++wYyZ~~&22VhsFZ7U{y3*AM!XA4wat{{&&C3;aO5l` zhY+2h+s12blzIOEwM?Dx#Re3;M-=wgl6|w~3as{5|LPZ8cgi&hy2bKczM6ojAWzS9 z$kADFVs?aUgIl?sB9Phb%a7|8EpYf#L>-MD|F{b3N{f+bG(_N{wI6??@3$8<{W>mb z4;&C0x?00?hdFzseNtD;g6x*aPoq6+8PuVIhy*P@BLl-Pbqju9bs6ol0rS z>F?J;4%7=$0kD5QeJcErTqv1soE@fMs!&{gxd+-<$yx2Ha(-{Jx1|O|Aj7;T_p33V zfQT<8w7c{Jv+1R2Ezcu|o*OrB;#8ukzgqfj8zoz3=R7&frIiI#(&BUQdXZ;h<(*|! zW>Y58SNR3(WZ2-x9yx{JE|=o`HCYgrbJhFZmwQ}(_LC<0cDDz?D;a<_KW$cR;+6O> DZz!MF literal 2492 zcma)8dstH07H7&PQyiNyd-!Tfn6k8)3@uaCGDlI$mp)?X}ik>)bx! z>Y$;fqXvV)G%$|GJYcXj5E!3O{TjSKUNiRr;;U#6hodl7hn^ICs6-#dc&UQtvTD#R z7;M8?%&{Y0aSx`%VRyU~+gjwK76cYKC*}yD|Ku;;%yTYvW$v2_jB#9g@j1p^(hs2( zT%0GK>%&a(QDx%1Qr3wawan6P|6CP5^g|jQ>+UW;`deSQJ?@q|ocFwvXGxEirRI2x z*Srnx82&54KfFT{pGTSJ+pK=sZg?-|vi_avy#!v{xPD#w-p+%F)jz0f0mtAoTTPF* z*0{Xdxx>CWJ80|rD@(Rb!g)$s&`ev9zW&llfO&Y~GDePbY?t4gT@RqDc@tl1^xdGTJrTUN3GoY!<`ab$<&H0P=9iwFwlrn* zhX}KGv~payy9(8AwmbtCFt6+3ltds;MqGdiO<&Z_bl z{~A5+D;Vr*sGJgD*Bl>g3L%(WWNAp0M3{*X$x*WfCqzOWq+ku;I=(fz01}qHmA`PB z>Wak1^Vs%HnZ+*VHqi3JDl;GM5#>Tu!|v~B=W8ozLJ$!#{ zm-ywRzf0q(DuJmU$uWA>?3TIaEy@i^?rrSG>9CKMftTIkK(8px{6#~Xx(FDr6I&1#RY-9NxEQ2#9 z>E|RYrw(zX0Ym5~4op8IjE4i^W`={S;EuExMV>Rxz1TCm#|xtq}AseCfewb&42=q7pkSr|}Ep2OC*&R&%sz4NdBYf}7j>>@-)7 zNDFqn3fynvccEzfK|INR9FVaMFLz@5JzGKgQQ8$5#RmwTJw3=&&21s80f*7Wy61fh zPx*^?V|=(X=DDQF*5G_?;4($Q+a{RmBoZ27K>$iT~4xK5~%O5bz8eKITnJ%8Y)52k*6mrc(g;m5AuKa_1A zk+r_n@6yrOh^Jq&^C+K^YWkD`US>M7 z8wgXBjADM{m8ik6fQ1J2RP-kkayTF=pgzAoC97V=i=c@9mm8)SmX~4&Wk2G&DxhOW zBc3e>gbxm#np*(KGR5(AqUr_<W{u zE$wbjrU$53wxsI%XCc~iJy$esm3vyN7!cj814~3uk*ezf&#iN}~bHmY_%Lr{j zis^v@Jbly~s&}S~OT9vCI}W`=-fK;mB$X`J>$es&7}poe zw*dl^cCQkv5bgI5I`FgiVNp7Lk7YvHlKQ@Gel>B)i+g@mVyYkQLWhV`z1pXIi)b{O zshhG~kOKd6iE+KPql1<9spp01xt2)nj(oKA{Wj1@wE6~VUZ(Mxfxivxkip^b$r^rj z4|!T4yP;J&*~THdC!ixzBh3(%G(r`LnsPDcF&^rMqUY zlSG~R)jVv~iJjd#FP{LDvLj~S5}nP7aVI;`^NAyIpKY8p;Gv@<4UGL1Mgn)Hs|ma3 zhA7GAiPQ4(@}yKMWb|DsGoh)*g#u$iB0~+5+;y4~zTj62I`ny{5^{~OveC{#uNyn{ z8$fJid$6lMP+Jl+T?|S_S>DW!B1=wiSpH`J*pjd3KUU4*lpO9RZ-9E%k3kg`&dU2j ztzJ6EbpZF#HVNg$&Qcqj`_xxkA^T7yA^US%Ksg2TZw!=`R4-5GJXKjszlr!CmG%EF z$cfS|tAARp8g2)nhlRG|lFi^b*(Y%vu6}KbA=np|?`zb|NDfLiE{g1)E4R=BQ-9vh zG9~T~YJ(?LzOcXf&knHQ(Z(KQBM<28QxOq6XtJ74WqVLG#ZZEy(-B5GkQ$lT{EKsP zF?O_@^xf>5>n2^5-AM06SEN7dT`OHMq?hGo z)gr8cBYgrhio4zM()s8a3WNlphtOY*)f7ALwDfT#=5}@&yeM*OBCYlCnGLasGkfnD zSq1%?JfyYXekWG@XXPKyYrcpzSNeD+mC$egsyQ^p;q@n~I+T&w$ zyRm5lKILcQoKp8DIq*Q_lM8-s@gmQW*et%~%&?~Q>n`DUo`zT1Cz*KC h9398HR<1$suWb1!Ns2pNxB>t$jJ@kI*3r|6{{VfCg+>4X diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png index 41ba657c2fa4d806af45399bb17f96a08665874d..65de86c68879bc048e96aac3ffb353ba635a2907 100644 GIT binary patch literal 5439 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 literal 5443 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 literal 4298 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 UPK-tr@IL~ir)>mAYC1gsA5SPdjQ{`u diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png index 69842e4a72114bc7eedb502487e221817c00c262..d31afe8a659a0230a5c395484a4060ba9d60012d 100644 GIT binary patch delta 4663 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 JguCgJ_&*9ZP&ohq delta 4646 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 acJw1sghd}D&%XmD_~0hi#??3ej{P41#Wy+t diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png index 056ab1e904a9d3d7be353e3a763dad24d1270f55..2702b2c7b6d75791c6514eed99534e23280dbf47 100644 GIT binary patch delta 4262 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 delta 3363 zcmXw630M=^mM(R=c@8Sm?Mkza4GJRy{bUVmJGQhX0#8Mdpe(Wk2#XrF1W1Xr@_dSD zXb2FNmcFbo0|A!?L6RtY5|fA|ga83aBoGqF6g}V6cfb0+y0_}wbN>6E|D3vK z_1W^#NvHz+>10q=r9z1PwJJ8Me_7m}xp?j_c+_xbSZ(|-HfO#G3;k&{`dlaW zDWV!p?xPhgxB!Y*;usxw+sDuI4VOyq6%cs#@lq8k_cPjID;!n8vAe$MN_EVIp~?$x5iG*#iJf z{{}*$bK}_WESz0q5FJ_%iV`R?96kAOW-r?c^v3{T!Aoeh;fOo&PD~oym&f#< zbRkte6T8u+14*f=cHJw;Ie2)D1yL>>1a5gzN90d=bM?F=@_Ts12b%s*&1WC_bODw2Wp45rWWTLuLzp-QF5Q0BCk_f^C|8=SLQTt^>W>x)G7Sxo?;4qC77^3PmC$ZjMyV zcR@C$;E`cVjf;ZvZ9s3`C{zAoA*-$`kup~PQ{hubsxp;?&X z8YZ%wDZB=+r^3reNObLX;MPV}Tiy=JjcEX?nOeViPQXQ&E2Qn@|)h0+hK z#Mtp&Mkw~1>&F^nHhX`ZG1?`W{mMYLzu%N}&>nGY1(_TXhyX8yvaaR2f_o70Gpy<@ z*xvEqKkiy$iU)givjxT}F6Qqu<5tvCnsw!`nchnp;{{Sn0m_YL5R!cE`=o8a)9wI> zK`OcmC3|0IGukrJoWS8QO04{orRv$MnzH;j&frU4K1k3`7{yBao?OXX^3sSLhz&fs z6*#kE@hH=R}kt@Izsf znc2Y3nyw#KpI;@tirYP-Yzr?YThOl)`?}<;2w7|m(~WZ1b><#MCM|%ddexA^C(@Oj zrFAK2Qm_EvX?Yy8iU@6f`oPRcHh0YqNa^@!$26sZ$_J;5xP_@%=mWbs951xRpgcmC zRH0C(lr39YZoye@bX6%f+SdF{$hp^o6^*c|>@q#^g(lGJZDxanTis zonn%W`o#|Dg`8S%PT$pSIEPq+BK_@y(#cbMNNGBHiIJpkB7$V0o2yP^3Kb7W=F*hx z*i1>S$@8~V*Ny8*ZPRfWwuHi~^)^-@DoD;383%Q<0 zU`%~XzMIA_Wj^Oyt}3s?=NnmZD8)(1v(Vds$^l|kHUCwHPsjRVZ1JXE-Ri;c7-v8? zCQ5q*!W32}SF$vYrd?V4L_7l8v*ZQFXy?p?#iC!fJUq%uU#&{Wa1T8JK_~Hg(2tJ5 zkDfH}TF~diM&279weU!Maad4^;S=gw;V2$31RAw4GZ~YUInSF80f3KxpBiN1tE~_# z|4goP0ZY9TKyNj{XULT(EZJ+Zy4JP0hDynNmT8}R^1x7Kxkm_M6QOl&0_kC$|IV z_8JvFv;twq@X!-iI^;-7!5vt2m>}%}NJvxZA?-*wUfYCyX`purv13LP`+E|3W}&(# ztJ2mc`cBFv>*t|hEU{l~yhUw)QzuLu;U3W`Nv*nMi_yPZuhcYfQJVGio|Va-aE1%& z3Jxr#Mi31O?$UEMKi+);PKb)Pc;?g+85vB7kp|CS)hiKxsxPk�e)abD)j|LR!XW zdW#|<-5o29CB{V8J)S=3<(=xO;e|c)YL5E8)~MPUeGt`y`HKKq{3m;vhd-o=m3B2N zK@`ofu`K2{5y^z8cSk`Q!-P!tqO74{a}A; z8RCk>1_HMd?|Xn}TlCzlL6a)#vn zrVKWMo#7Folj~LyT`=;38fS zA^TXKz1Sc9*KtBPZHd0zum|!#uxpp(4~+O%Ycn^9DSLhhS>q8*9aK=v&oy0OpEoe8 zBp-KkD_Dpm=EtIgWr!M<4chmvN-aCi)yt z&&gHoIkocs^55IN$vJb=p)CAWeCAYb&MJ+{-L?XWgeTPMq&;Ci<~xA0xUX^9st8$^ z{r#^|G7$}p`DE=d1gE4}dIQSQD?O+8>dU0_6VlHJ4CYTBRWN;?>Abb;ZnG2UV3uZ1 zg;}fY3~hj*`CYo%=-~+J(r2b6+n0sca+TE->X3u^x<5gJ z2+X;_S|>xLh>eYG++5h@XhYyfLcLHfx#%i-w2GJgu8WJY0*6B=QtbVrp@9OQ!viQvATn^Ht-{Ft~V)#xpQutu?aN8c`*4 z{28ZWYU-J>alnz1A&WzAba{E6*v;Fz<(7VFyJgYY?qEnjR_%wCZ{LfI2>5;)maKpL z8w}}>-@xevoZb?}eJB5avKK#pTg4SC8L);&_Ov4s#mj1j6^K(yV_->Uv>+0>?(;*( zy_FqS)$ljXH9YskK!lW6?wIZSEo`(GFPS<|vYH<+Is*PK^tVoT7eb9JxN#}kdGT~I zMOf~3xv?He@%L;`rt`Hix8XL*5ndn*gu~5aXD=ukFA=QRaVYW7w*Zh4nSGw5gI=k> z1YK0f8~t-8zlDAEq%YVc7E9QvxKo7saB2fTq~>pemgQi6@;r=VR?=kXXf-6l!YYOB z7l;Wg9AxK3LprbE?AUQ0Mokv%+gO8z;(I%Q-Z+o@d_#_p&vao%xM~h_bEu`CjBE-> zT6I?4Vx<+gZ?&SPVy&YAaLeBu9Cbk|y5=sSWWVeU=H80FFlH_WwY!Q;nq zQKZK^tyONaM2Gva+7c85I;NL)X>x83Z8K15B)BF zQ2)O9E4T~I?&s91yD;3haJw$6bo_?qMN6dP_n+d9=kNY9agln-(aEzqg-j|KFMNum z)KeMOaL2xmLpKK7W>3MOls$L(Ik{~tppFOD@iH9DpzIbihx~|2y*b{{mXv5v>3K diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png index ed1a199d0c5535f0180283ca8836b34321997283..ca7328088313e2399a88539e75bb4339777e5c6d 100644 GIT binary patch literal 2472 zcmeHJ?@yCg6h3u>fr2h3wt$RouEI6}BU1{}!Bh;sb7cb&L>wIo?a+dw#12MzVIzah zx`O<2SfB|k@Bv1}cNR+}WoZBlYBzDxQd+>aGz{NTCQ&u zKF|H>^Vk^A?LON9z!NzY9S^Wg20#jQb0u~{$@TD3Ao;aL{zH?&#gHssh`rr{6!*LT$*(cXE}fP| z`(1C{u^!feYlC(lSg|t>9Q%+~s-Tqo@#w`%0o|H46)w)K!r4`ZzTnmM`tYlgodC+} zljP)`Cu)Z>o-f%f#=L{cfyT&9W?F=1l@V2N(}7`TT;c-7yEw77sJx1pU4HCNuhhM0 z5Vvc%x~i&`9)Zo|H01bVJ_9$}&X!It9wb3AYZO&#e%EKvnRPAi>odh>Ucl1C#CuE6 zXOgCryJZ>{L!;9P({BcrWr#$g5Rs{D-37qzI(*oo!#Hv+i~{8=KbNj| z)YmuC5ZicBg{q_^5S{XP4M6afgJCr<9JX3HNTsTzc`Rl8bfpIpg7d?}^S$rIl$AA+ zp?JK$@8Zp7m1<16`8LAi%?Ii;KjH0>SveY(UsM?5K~K##=q(6iggxY)^B1P)ZtO!s z9yub#xaHVbb91x)0u|uFE#eGSo2TwEUz~5`Xt|;47Z&^tfUha-BQrPJ=6EA~Onpb* z9hxRTZ0*m)r|rx#&U+&XKGiDOxs3Dz%+1Fd=egK0{ZgS@VC*iYnbw2o|o`6phlHbJG}2 zUE$YSWYAp;yv;Th&pI`Jd{mTRnC)VKU|?<%ww^TGnTmO$Pz23&5<9Hg+;J}ReDtxMFxYV$vSdLk;7YDk!+ zd6H_@sgbFC0xCE)D;kwzhHQt^S~O%bnc4>qDTG6FeLAO&J>|eC;SmLmG;i_=Lb`c{ zt`q>2IeUFHfVKJVt2j{SNk1x;bMM0bWaAAfx{^`u$9QyEJ~%y%y|fmhf|X0Psu0t+ z4U1vyo>Yz(BheLlrPiaDyM}{@4`)O$>tuSaOiWYH&E*iaSx4svt*N@s9@#jH$c3hF zP-Kx{89yiO_x1H^JjpB%~E`YU_V2S#Rbg$av-}>7J guJz{#X4W>L>bv~s!ylkY#BU3bld;hq$G`mkUp|=j8vprazc7(Zph;RVUID0sncYQko`^aCh~6CweXXp2B!y248LZgbLiR0PIlm9|bI z&UmR=g1QFU8ClU&cyVegw(DhMgJ4&PqZfQjO{)WDuPBycFS2+4!annSc%Gc+oSgig zC+GZr&)LI_{mIMLE&~807aqtj0U$vQ0A*{^5;C)M^$e2?l=_nWc>o_-|BPI`S)W(P zOd_o%>5K0GSejRuzn9tE;dfTlq_frxxtqS6^QBL_?zYb-9GH0j_vBt?drjWDRhz$G zwl_!w&*$?dHb-e0+tvJco@6F|n$t-i@uI-`irjjTMooElQ1FMw6 zNvGruU=-8Gn2xdrPDR+JBwlimv0tLkmA^HzFAMJPu{7?oX}O8ur1uWfI;=zXWV2cI z1up$6^#IL2o2oSp`vgv_CJ2LC4~wtrwIl+UxJGtm?cn`36b{g=Zd!UxCcQIf+#+!5 zp2yaq(HGWhmHsviLO&6i`MOlNFtr?j(5!p6kk zrqC=mrh$j5Ns0KpQbLU8MESy*`ATGI1pt9d;tK?XL3t2D$QhwZrzc?(N!(@qTd*Ns z&f{t+rVV7@O&@%=Z*>v?!Ft3pVyb&|i(hKRH3|sZQ2h@`0x(LNS(dW+9h9Y16IQsp za{YgZ?wKS7e8kFq9qWeB6U7O-c!k3$>fzlUT@6k;+`{6h@7b7i>b^cc0%U{n@WkFsK_+)WQ&UV>;LO6}$Q%04{+p7n9r2 ztDfOhxqV39Qtm}qPhT|>rj*QT8>h3QM+q@)x~ETk0y)#V$p}FIhTu7(TijCaaDH4Q zTYtULstQHA)5`i5Zoicw3~?%s?g*>?JSYsu)dYUiEI_<^rCFm?^KtiR0&p!@3oI+2 zGS8qmIV8NM*#fjOBt1hF_w=Tm&vH2DZL-#HWM1E-e&10?0yuuIC!%Iht0CWUFTh!& zPHn5j$dQ~v^oAGD { Label} > - + { } append={Button} > - + { > @@ -150,7 +138,6 @@ export default () => { > diff --git a/packages/eui/src-docs/src/views/form_controls/form_controls_example.js b/packages/eui/src-docs/src/views/form_controls/form_controls_example.js index 04e18077c66..35e8b168289 100644 --- a/packages/eui/src-docs/src/views/form_controls/form_controls_example.js +++ b/packages/eui/src-docs/src/views/form_controls/form_controls_example.js @@ -477,16 +477,6 @@ export const FormControlsExample = { the controlOnly and type props of EuiFieldText as the wrapped control.

- - -

- The padding on the input itself doesn’t - take into account the presence of the various icons supported by{' '} - EuiFormControlLayout. Any input component - provided to EuiFormControlLayout is responsible - for its own padding. -

- ), props: { diff --git a/packages/eui/src-docs/src/views/form_controls/prepend_append.js b/packages/eui/src-docs/src/views/form_controls/prepend_append.js index 4e5751a1222..3dad35c7594 100644 --- a/packages/eui/src-docs/src/views/form_controls/prepend_append.js +++ b/packages/eui/src-docs/src/views/form_controls/prepend_append.js @@ -1,6 +1,7 @@ -import React, { Fragment, useState } from 'react'; +import React, { useState } from 'react'; import { + EuiFlexGroup, EuiButtonEmpty, EuiButtonIcon, EuiFieldText, @@ -19,24 +20,24 @@ export default () => { const [isReadOnly, setReadOnly] = useState(false); return ( - - setCompressed(e.target.checked)} - /> -   - setDisabled(e.target.checked)} - /> -   - setReadOnly(e.target.checked)} - /> + <> + + setCompressed(e.target.checked)} + /> + setDisabled(e.target.checked)} + /> + setReadOnly(e.target.checked)} + /> + { readOnly={isReadOnly} aria-label="Use aria labels when no actual label is in use" /> - + ); }; diff --git a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx index c2575fe0da0..71da95be5ac 100644 --- a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx @@ -5,6 +5,7 @@ import { EuiSpacer, EuiFormControlLayoutDelimited, EuiFormLabel, + EuiFieldText, EuiPanel, EuiText, OnRefreshProps, @@ -58,21 +59,19 @@ export default () => { Dates} startControl={ - } endControl={ - } /> diff --git a/packages/eui/src/components/basic_table/in_memory_table.test.tsx b/packages/eui/src/components/basic_table/in_memory_table.test.tsx index 5aedbd0eddc..6e0371bedfe 100644 --- a/packages/eui/src/components/basic_table/in_memory_table.test.tsx +++ b/packages/eui/src/components/basic_table/in_memory_table.test.tsx @@ -947,7 +947,7 @@ describe('EuiInMemoryTable', () => { // should render with all three results visible expect(component.find('.testTable EuiTableRow').length).toBe(3); - const searchField = component.find('EuiFieldSearch input[type="search"]'); + const searchField = component.find('input.euiFieldSearch'); searchField.simulate('keyUp', { target: { diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index 01a480b6704..371dea2b8a0 100644 --- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -27,7 +27,7 @@ exports[`renders EuiColorPicker 1`] = ` @@ -56,7 +56,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = ` + `); + + fireEvent.click(getByTestSubject('toggleButton')); + expect(getByTestSubject('toggleButton')).toMatchInlineSnapshot(` + + `); }); }); }); @@ -152,7 +164,7 @@ describe('EuiFieldPassword', () => { ); const input = container.querySelector('.euiFieldPassword'); - expect(input).toHaveClass('euiFieldPassword--fullWidth'); + expect(input!.className).toContain('fullWidth'); }); }); }); diff --git a/packages/eui/src/components/form/field_password/field_password.tsx b/packages/eui/src/components/form/field_password/field_password.tsx index cc09af063b4..9b90dc4cf47 100644 --- a/packages/eui/src/components/form/field_password/field_password.tsx +++ b/packages/eui/src/components/form/field_password/field_password.tsx @@ -10,23 +10,26 @@ import React, { InputHTMLAttributes, FunctionComponent, useState, + useMemo, + useCallback, Ref, } from 'react'; -import { CommonProps } from '../../common'; import classNames from 'classnames'; +import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services'; +import { CommonProps } from '../../common'; +import { useEuiI18n } from '../../i18n'; +import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../../button'; + import { EuiFormControlLayout, EuiFormControlLayoutProps, } from '../form_control_layout'; - import { EuiValidatableControl } from '../validatable_control'; -import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../../button'; -import { useEuiI18n } from '../../i18n'; -import { useCombinedRefs } from '../../../services'; -import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons'; import { useFormContext } from '../eui_form_context'; +import { euiFieldPasswordStyles } from './field_password.styles'; + export type EuiFieldPasswordProps = Omit< InputHTMLAttributes, 'type' | 'value' @@ -110,62 +113,73 @@ export const EuiFieldPassword: FunctionComponent = ( const [inputRef, _setInputRef] = useState(null); const setInputRef = useCombinedRefs([_setInputRef, _inputRef]); - const handleToggle = ( - event: React.MouseEvent, - isVisible: boolean - ) => { - setInputType(isVisible ? 'password' : 'text'); - if (inputRef) { - inputRef.focus(); - } + const handleToggle = useCallback( + (event: React.MouseEvent, isVisible: boolean) => { + setInputType(isVisible ? 'password' : 'text'); + inputRef?.focus(); - if (dualToggleProps && dualToggleProps.onClick) { - dualToggleProps.onClick(event); - } - }; + dualToggleProps?.onClick?.(event); + }, + [inputRef, dualToggleProps] + ); - // Convert any `append` elements to an array so the visibility - // toggle can be added to it - let appends = Array.isArray(append) ? append : []; - if (append && !Array.isArray(append)) appends.push(append); // Add a toggling button to switch between `password` and `input` if consumer wants `dual` // https://www.w3schools.com/howto/howto_js_toggle_password.asp - if (type === 'dual') { - const isVisible = inputType === 'text'; - - const visibilityToggle = ( - handleToggle(e, isVisible)} - /> - ); - appends = [...appends, visibilityToggle]; - } - - const finalAppend = appends.length ? appends : undefined; - - const numIconsClass = getFormControlClassNameForIconCount({ - isInvalid, - isLoading, - }); + const visibilityToggle = useMemo(() => { + if (type === 'dual') { + const isVisible = inputType === 'text'; + + return ( + handleToggle(e, isVisible)} + /> + ); + } + }, [ + type, + inputType, + maskPasswordLabel, + showPasswordLabel, + dualToggleProps, + handleToggle, + rest.disabled, + ]); + + const finalAppend = useMemo(() => { + if (!visibilityToggle) return append; + if (!append) return visibilityToggle; + + // Convert any `append` elements to an array so the visibility + // toggle can be added to it + const appendAsArray = append + ? Array.isArray(append) + ? append + : [append] + : []; + + return [...appendAsArray, visibilityToggle]; + }, [append, visibilityToggle]); const classes = classNames( 'euiFieldPassword', - numIconsClass, - { - 'euiFieldPassword--fullWidth': fullWidth, - 'euiFieldPassword--compressed': compressed, - 'euiFieldPassword--inGroup': prepend || finalAppend, - 'euiFieldPassword--withToggle': type === 'dual', - 'euiFieldPassword-isLoading': isLoading, - }, + { 'euiFieldPassword-isLoading': isLoading }, className ); + const styles = useEuiMemoizedStyles(euiFieldPasswordStyles); + const cssStyles = [ + styles.euiFieldPassword, + compressed ? styles.compressed : styles.uncompressed, + fullWidth ? styles.fullWidth : styles.formWidth, + (finalAppend || prepend) && styles.inGroup, + type === 'dual' && styles.withToggle, + ]; + return ( = ( name={name} placeholder={placeholder} className={classes} + css={cssStyles} value={value} ref={setInputRef} {...rest} diff --git a/packages/eui/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap b/packages/eui/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap index ef18f1ed02a..15aeba22095 100644 --- a/packages/eui/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap +++ b/packages/eui/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap @@ -11,7 +11,7 @@ exports[`EuiFieldSearch is rendered 1`] = ` @@ -49,7 +49,7 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = ` > @@ -65,7 +65,7 @@ exports[`EuiFieldSearch props isClearable is accepted 1`] = ` > @@ -82,7 +82,7 @@ exports[`EuiFieldSearch props isClearable is rendered when a value exists 1`] = > @@ -102,7 +102,7 @@ exports[`EuiFieldSearch props isInvalid is rendered 1`] = ` isinvalid="true" > @@ -118,7 +118,7 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = ` > @@ -135,7 +135,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = ` > diff --git a/packages/eui/src/components/form/field_search/_field_search.scss b/packages/eui/src/components/form/field_search/_field_search.scss deleted file mode 100644 index ea3b602e2fc..00000000000 --- a/packages/eui/src/components/form/field_search/_field_search.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 1. Fix for Safari to ensure that it renders like a normal text input - * and doesn't add extra spacing around text -*/ -// stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix - -.euiFieldSearch { - @include euiFormControlStyle; - @include euiFormControlWithIcon($isIconOptional: false); - @include euiFormControlIsLoading; - - -webkit-appearance: textfield; /* 1 */ - - &::-webkit-search-decoration, - &::-webkit-search-cancel-button { - -webkit-appearance: none; /* 1, 2 */ - } -} - -.euiFieldSearch--compressed { - @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true); -} diff --git a/packages/eui/src/components/form/field_search/_index.scss b/packages/eui/src/components/form/field_search/_index.scss deleted file mode 100644 index b9652e5dde1..00000000000 --- a/packages/eui/src/components/form/field_search/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'field_search'; diff --git a/packages/eui/src/components/form/field_search/field_search.styles.ts b/packages/eui/src/components/form/field_search/field_search.styles.ts new file mode 100644 index 00000000000..417fa27b643 --- /dev/null +++ b/packages/eui/src/components/form/field_search/field_search.styles.ts @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; +import { euiFormControlStyles } from '../form.styles'; + +export const euiFieldSearchStyles = (euiThemeContext: UseEuiTheme) => { + const formStyles = euiFormControlStyles(euiThemeContext); + + return { + euiFieldSearch: css` + /* Fix for Safari to ensure that it renders like a normal text input + * and doesn't add extra spacing around text */ + /* stylelint-disable property-no-vendor-prefix */ + -webkit-appearance: textfield; + + &::-webkit-search-decoration, + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + + ${formStyles.shared} + + &:invalid { + ${formStyles.invalid} + } + + &:focus { + ${formStyles.focus} + } + + &:disabled { + ${formStyles.disabled} + } + + &[readOnly] { + ${formStyles.readOnly} + } + + &:autofill { + ${formStyles.autoFill} + } + `, + + // Skip the css() on the default height to avoid generating a className + uncompressed: formStyles.uncompressed, + compressed: css(formStyles.compressed), + + // Skip the css() on the default width to avoid generating a className + formWidth: formStyles.formWidth, + fullWidth: css(formStyles.fullWidth), + + // Layout modifiers + inGroup: css(formStyles.inGroup), + }; +}; diff --git a/packages/eui/src/components/form/field_search/field_search.test.tsx b/packages/eui/src/components/form/field_search/field_search.test.tsx index 53e6541a35b..010fc17bcb0 100644 --- a/packages/eui/src/components/form/field_search/field_search.test.tsx +++ b/packages/eui/src/components/form/field_search/field_search.test.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { requiredProps } from '../../../test/required_props'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { render } from '../../../test/rtl'; import { EuiForm } from '../form'; @@ -21,6 +22,8 @@ jest.mock('../validatable_control', () => ({ })); describe('EuiFieldSearch', () => { + shouldRenderCustomStyles(); + test('is rendered', () => { const { container } = render( { ); const input = container.querySelector('.euiFieldSearch'); - expect(input).toHaveClass('euiFieldSearch--fullWidth'); + expect(input?.className).toContain('fullWidth'); }); }); }); diff --git a/packages/eui/src/components/form/field_search/field_search.tsx b/packages/eui/src/components/form/field_search/field_search.tsx index b3c9bc595ef..902d33fa932 100644 --- a/packages/eui/src/components/form/field_search/field_search.tsx +++ b/packages/eui/src/components/form/field_search/field_search.tsx @@ -8,19 +8,24 @@ import React, { Component, InputHTMLAttributes, KeyboardEvent } from 'react'; import classNames from 'classnames'; + import { Browser } from '../../../services/browser'; import { CommonProps } from '../../common'; -import { keys } from '../../../services'; +import { + keys, + withEuiStylesMemoizer, + WithEuiStylesMemoizerProps, +} from '../../../services'; import { EuiFormControlLayout, EuiFormControlLayoutProps, } from '../form_control_layout'; - import { EuiValidatableControl } from '../validatable_control'; -import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons'; import { FormContext, FormContextValue } from '../eui_form_context'; +import { euiFieldSearchStyles } from './field_search.styles'; + export interface EuiFieldSearchProps extends CommonProps, InputHTMLAttributes { @@ -74,8 +79,8 @@ interface EuiFieldSearchState { let isSearchSupported: boolean = false; -export class EuiFieldSearch extends Component< - EuiFieldSearchProps, +export class EuiFieldSearchClass extends Component< + EuiFieldSearchProps & WithEuiStylesMemoizerProps, EuiFieldSearchState > { static contextType = FormContext; @@ -205,6 +210,7 @@ export class EuiFieldSearch extends Component< render() { const { defaultFullWidth } = this.context as FormContextValue; const { + stylesMemoizer, className, id, name, @@ -230,19 +236,9 @@ export class EuiFieldSearch extends Component< _isClearable && value && !rest.readOnly && !rest.disabled ); - const numIconsClass = getFormControlClassNameForIconCount({ - clear: isClearable, - isInvalid, - isLoading, - }); - const classes = classNames( 'euiFieldSearch', - numIconsClass, { - 'euiFieldSearch--fullWidth': fullWidth, - 'euiFieldSearch--compressed': compressed, - 'euiFieldSearch--inGroup': prepend || append, 'euiFieldSearch-isLoading': isLoading, 'euiFieldSearch-isClearable': isClearable, 'euiFieldSearch-isInvalid': isInvalid, @@ -250,6 +246,14 @@ export class EuiFieldSearch extends Component< className ); + const styles = stylesMemoizer(euiFieldSearchStyles); + const cssStyles = [ + styles.euiFieldSearch, + compressed ? styles.compressed : styles.uncompressed, + fullWidth ? styles.fullWidth : styles.formWidth, + (prepend || append) && styles.inGroup, + ]; + return ( this.onKeyUp(e, incremental, onSearch)} ref={this.setRef} {...rest} @@ -281,3 +286,6 @@ export class EuiFieldSearch extends Component< ); } } + +export const EuiFieldSearch = + withEuiStylesMemoizer(EuiFieldSearchClass); diff --git a/packages/eui/src/components/form/field_text/__snapshots__/field_text.test.tsx.snap b/packages/eui/src/components/form/field_text/__snapshots__/field_text.test.tsx.snap index df2492e7a8a..68c5fee6a55 100644 --- a/packages/eui/src/components/form/field_text/__snapshots__/field_text.test.tsx.snap +++ b/packages/eui/src/components/form/field_text/__snapshots__/field_text.test.tsx.snap @@ -9,7 +9,7 @@ exports[`EuiFieldText is rendered 1`] = ` @@ -37,7 +37,7 @@ exports[`EuiFieldText props fullWidth is rendered 1`] = ` > @@ -54,7 +54,7 @@ exports[`EuiFieldText props isInvalid is rendered 1`] = ` isinvalid="true" > @@ -69,7 +69,7 @@ exports[`EuiFieldText props isLoading is rendered 1`] = ` > @@ -84,7 +84,7 @@ exports[`EuiFieldText props readOnly is rendered 1`] = ` > ( +
+ In Chrome: Type any text, press Enter, then go back and select the + autofill suggestion. Test light+dark mode as well as invalid state +
+
+ + + ), + ], + args: { + name: 'autofill-test', + }, +}; diff --git a/packages/eui/src/components/form/field_text/field_text.styles.ts b/packages/eui/src/components/form/field_text/field_text.styles.ts new file mode 100644 index 00000000000..dd1b194e8ca --- /dev/null +++ b/packages/eui/src/components/form/field_text/field_text.styles.ts @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; +import { euiFormControlStyles } from '../form.styles'; + +export const euiFieldTextStyles = (euiThemeContext: UseEuiTheme) => { + const formStyles = euiFormControlStyles(euiThemeContext); + + return { + euiFieldText: css` + ${formStyles.shared} + + &:invalid { + ${formStyles.invalid} + } + + &:focus { + ${formStyles.focus} + } + + &:disabled { + ${formStyles.disabled} + } + + &[readOnly] { + ${formStyles.readOnly} + } + + &:autofill { + ${formStyles.autoFill} + } + `, + + // Skip the css() on the default height to avoid generating a className + uncompressed: formStyles.uncompressed, + compressed: css(formStyles.compressed), + + // Skip the css() on the default width to avoid generating a className + formWidth: formStyles.formWidth, + fullWidth: css(formStyles.fullWidth), + + // Layout modifiers + inGroup: css(formStyles.inGroup), + controlOnly: css` + .euiFormControlLayout--group & { + ${formStyles.inGroup} + } + `, + }; +}; diff --git a/packages/eui/src/components/form/field_text/field_text.test.tsx b/packages/eui/src/components/form/field_text/field_text.test.tsx index cd811d10c6a..4cd427d2b93 100644 --- a/packages/eui/src/components/form/field_text/field_text.test.tsx +++ b/packages/eui/src/components/form/field_text/field_text.test.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { requiredProps } from '../../../test/required_props'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { render } from '../../../test/rtl'; import { EuiForm } from '../form'; @@ -25,6 +26,8 @@ jest.mock('../validatable_control', () => ({ })); describe('EuiFieldText', () => { + shouldRenderCustomStyles(); + test('is rendered', () => { const { container } = render( { ); const input = getByRole('textbox'); - expect(input).toHaveClass('euiFieldText--fullWidth'); + expect(input.className).toContain('fullWidth'); }); }); }); diff --git a/packages/eui/src/components/form/field_text/field_text.tsx b/packages/eui/src/components/form/field_text/field_text.tsx index fb89e2263b4..3f99adc1762 100644 --- a/packages/eui/src/components/form/field_text/field_text.tsx +++ b/packages/eui/src/components/form/field_text/field_text.tsx @@ -7,21 +7,19 @@ */ import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react'; -import { CommonProps } from '../../common'; import classNames from 'classnames'; +import { useEuiMemoizedStyles } from '../../../services'; +import { CommonProps } from '../../common'; import { EuiFormControlLayout, EuiFormControlLayoutProps, } from '../form_control_layout'; - import { EuiValidatableControl } from '../validatable_control'; -import { - isRightSideIcon, - getFormControlClassNameForIconCount, -} from '../form_control_layout/_num_icons'; import { useFormContext } from '../eui_form_context'; +import { euiFieldTextStyles } from './field_text.styles'; + export type EuiFieldTextProps = InputHTMLAttributes & CommonProps & { icon?: EuiFormControlLayoutProps['icon']; @@ -81,26 +79,19 @@ export const EuiFieldText: FunctionComponent = (props) => { ...rest } = props; - const hasRightSideIcon = isRightSideIcon(icon); - - const numIconsClass = controlOnly - ? false - : getFormControlClassNameForIconCount({ - isInvalid, - isLoading, - icon: hasRightSideIcon, - }); - - const classes = classNames('euiFieldText', className, numIconsClass, { - 'euiFieldText--fullWidth': fullWidth, - 'euiFieldText--compressed': compressed, - ...(!controlOnly && { - 'euiFieldText--withIcon': icon && !hasRightSideIcon, - 'euiFieldText--inGroup': prepend || append, - }), + const classes = classNames('euiFieldText', className, { 'euiFieldText-isLoading': isLoading, }); + const styles = useEuiMemoizedStyles(euiFieldTextStyles); + const cssStyles = [ + styles.euiFieldText, + compressed ? styles.compressed : styles.uncompressed, + fullWidth ? styles.fullWidth : styles.formWidth, + !controlOnly && (prepend || append) && styles.inGroup, + controlOnly && styles.controlOnly, + ]; + const control = ( = (props) => { name={name} placeholder={placeholder} className={classes} + css={cssStyles} value={value} ref={inputRef} readOnly={readOnly} diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index dcf015f0142..80ff5357c83 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -13,7 +13,7 @@ import { EuiProvider } from '../provider'; import { euiFormVariables, - euiFormControlSize, + euiFormControlStyles, euiCustomControl, } from './form.styles'; @@ -28,10 +28,9 @@ describe('euiFormVariables', () => { Object { "animationTiming": "150ms ease-in", "backgroundColor": "#f9fbfd", - "backgroundDisabledColor": "#eceff5", + "backgroundDisabledColor": "#eef1f7", "backgroundReadOnlyColor": "#FFF", - "borderColor": "rgba(211,218,230,0.9)", - "borderDisabledColor": "rgba(211,218,230,0.9)", + "borderColor": "rgba(32,38,47,0.1)", "controlBorderRadius": "6px", "controlBoxShadow": "0 0 transparent", "controlCompressedBorderRadius": "4px", @@ -53,9 +52,12 @@ describe('euiFormVariables', () => { "controlPlaceholderText": "#646a77", "customControlBorderColor": "#f5f7fc", "customControlDisabledIconColor": "#cacfd8", + "iconAffordance": "24px", + "iconCompressedAffordance": "18px", "inputGroupBorder": "none", "inputGroupLabelBackground": "#e9edf3", "maxWidth": "400px", + "textColor": "#343741", } `); }); @@ -73,105 +75,150 @@ describe('euiFormVariables', () => { }); }); -describe('euiFormControlSize', () => { - it('outputs the logical properties for height, width, and max-width', () => { - const { result } = renderHook(() => euiFormControlSize(useEuiTheme())); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 40px;" - `); - }); +describe('euiFormControlStyles', () => { + it('outputs an object of control states and modifiers', () => { + const { result } = renderHook(() => euiFormControlStyles(useEuiTheme())); + expect(result.current).toMatchInlineSnapshot(` + Object { + "autoFill": " + &:-webkit-autofill { + -webkit-text-fill-color: #343741; + -webkit-box-shadow: inset 0 0 0 1px rgba(0,107,184,0.2), inset 0 0 0 100vw #f0f7fc; - it('allows passing in a custom height', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { height: '100px' }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 100px;" - `); - }); + &:invalid { + -webkit-box-shadow: inset 0 0 0 1px #BD271E, inset 0 0 0 100vw #f0f7fc; + } + } + ", + "compressed": " + block-size: 32px; + padding-block: 8px; + padding-inline-start: calc(8px + (18px * var(--euiFormControlLeftIconsCount, 0))); + padding-inline-end: calc(8px + (18px * var(--euiFormControlRightIconsCount, 0))); + border-radius: 4px; + ", + "disabled": " + color: #98A2B3; + /* Required for Safari */ + -webkit-text-fill-color: #98A2B3; + background-color: #eef1f7; + cursor: not-allowed; - test('fullWidth', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { fullWidth: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 100%; - inline-size: 100%; - block-size: 40px;" - `); - }); + + &::-webkit-input-placeholder { + color: #98A2B3; + opacity: 1; + } + &::-moz-placeholder { + color: #98A2B3; + opacity: 1; + } + &:-ms-input-placeholder { + color: #98A2B3; + opacity: 1; + } + &:-moz-placeholder { + color: #98A2B3; + opacity: 1; + } + &::placeholder { + color: #98A2B3; + opacity: 1; + } - test('compressed', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { compressed: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 32px;" - `); - }); + ", + "focus": " + --euiFormControlStateColor: #07C; + background-color: #FFF; + background-size: 100% 100%; + outline: none; /* Remove all outlines and rely on our own bottom border gradient */ + ", + "formWidth": " + max-inline-size: 400px; + inline-size: 100%; + ", + "fullWidth": " + max-inline-size: 100%; + inline-size: 100%; + ", + "inGroup": " + block-size: 100%; + box-shadow: none; + border-radius: 0; + ", + "invalid": " + --euiFormControlStateColor: #BD271E; + background-size: 100% 100%; + ", + "readOnly": " + cursor: default; + color: #343741; + -webkit-text-fill-color: #343741; /* Required for Safari */ - test('compressed & fullWidth', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { compressed: true, fullWidth: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 100%; - inline-size: 100%; - block-size: 32px;" - `); - }); + background-color: #FFF; + --euiFormControlStateColor: transparent; + ", + "shared": " + + font-family: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif; + font-size: 1.0000rem; + color: #343741; - test('inGroup', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { inGroup: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 100%;" - `); - }); + + &::-webkit-input-placeholder { + color: #646a77; + opacity: 1; + } + &::-moz-placeholder { + color: #646a77; + opacity: 1; + } + &:-ms-input-placeholder { + color: #646a77; + opacity: 1; + } + &:-moz-placeholder { + color: #646a77; + opacity: 1; + } + &::placeholder { + color: #646a77; + opacity: 1; + } - test('inGroup & fullWidth', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { inGroup: true, fullWidth: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 100%; - inline-size: 100%; - block-size: 100%;" - `); - }); + + + /* We use inset box-shadow instead of border to skip extra hight calculations */ + border: none; + box-shadow: inset 0 0 0 1px rgba(32,38,47,0.1); + background-color: #f9fbfd; - test('compressed overrides custom height', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { height: '500px', compressed: true }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 32px;" - `); - }); + background-repeat: no-repeat; + background-size: 0% 100%; + background-image: linear-gradient(to top, + var(--euiFormControlStateColor), + var(--euiFormControlStateColor) 2px, + transparent 2px, + transparent 100% + ); - test('inGroup overrides compressed and custom height', () => { - const { result } = renderHook(() => - euiFormControlSize(useEuiTheme(), { - height: '500px', - compressed: true, - inGroup: true, - }) - ); - expect(result.current.trim()).toMatchInlineSnapshot(` - "max-inline-size: 400px; - inline-size: 100%; - block-size: 100%;" + @media screen and (prefers-reduced-motion: no-preference) { + transition: + box-shadow 150ms ease-in, + background-image 150ms ease-in, + background-size 150ms ease-in, + background-color 150ms ease-in; + } + + ", + "uncompressed": " + block-size: 40px; + padding-block: 12px; + padding-inline-start: calc(12px + (24px * var(--euiFormControlLeftIconsCount, 0))); + padding-inline-end: calc(12px + (24px * var(--euiFormControlRightIconsCount, 0))); + border-radius: 6px; + ", + } `); }); }); diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts index 57834bafb09..d47b4940fcc 100644 --- a/packages/eui/src/components/form/form.styles.ts +++ b/packages/eui/src/components/form/form.styles.ts @@ -15,10 +15,12 @@ import { makeHighContrastColor, } from '../../services'; import { + logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize, } from '../../global_styling'; +import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins'; export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; @@ -38,14 +40,21 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { controlCompressedPadding: euiTheme.size.s, controlBorderRadius: euiTheme.border.radius.medium, controlCompressedBorderRadius: euiTheme.border.radius.small, + iconAffordance: mathWithUnits(euiTheme.size.base, (x) => x * 1.5), + iconCompressedAffordance: mathWithUnits(euiTheme.size.m, (x) => x * 1.5), }; const colors = { + textColor: euiTheme.colors.text, backgroundColor: backgroundColor, - backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.1), + backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.05), backgroundReadOnlyColor: euiTheme.colors.emptyShade, - borderColor: transparentize(euiTheme.border.color, 0.9), - borderDisabledColor: transparentize(euiTheme.border.color, 0.9), + borderColor: transparentize( + colorMode === 'DARK' + ? euiTheme.colors.ghost + : darken(euiTheme.border.color, 4), + 0.1 + ), controlDisabledColor: euiTheme.colors.mediumShade, controlBoxShadow: '0 0 transparent', controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)( @@ -96,31 +105,67 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => { }; }; -export const euiFormControlSize = ( - euiThemeContext: UseEuiTheme, - options: { - height?: string; - fullWidth?: boolean; - compressed?: boolean; - inGroup?: boolean; - } = {} -) => { +export const euiFormControlStyles = (euiThemeContext: UseEuiTheme) => { const form = euiFormVariables(euiThemeContext); - const width = '100%'; + return { + shared: ` + ${euiFormControlText(euiThemeContext)} + ${euiFormControlDefaultShadow(euiThemeContext)} + `, - let maxWidth = form.maxWidth; - if (options.fullWidth) maxWidth = '100%'; + // Sizes + uncompressed: ` + ${logicalCSS('height', form.controlHeight)} + ${logicalCSS('padding-vertical', form.controlPadding)} + ${logicalCSS( + 'padding-left', + `calc(${form.controlPadding} + (${form.iconAffordance} * var(--euiFormControlLeftIconsCount, 0)))` + )} + ${logicalCSS( + 'padding-right', + `calc(${form.controlPadding} + (${form.iconAffordance} * var(--euiFormControlRightIconsCount, 0)))` + )} + border-radius: ${form.controlBorderRadius}; + `, + compressed: ` + ${logicalCSS('height', form.controlCompressedHeight)} + ${logicalCSS('padding-vertical', form.controlCompressedPadding)} + ${logicalCSS( + 'padding-left', + `calc(${form.controlCompressedPadding} + (${form.iconCompressedAffordance} * var(--euiFormControlLeftIconsCount, 0)))` + )} + ${logicalCSS( + 'padding-right', + `calc(${form.controlCompressedPadding} + (${form.iconCompressedAffordance} * var(--euiFormControlRightIconsCount, 0)))` + )} + border-radius: ${form.controlCompressedBorderRadius}; + `, - let height = options.height || form.controlHeight; - if (options.compressed) height = form.controlCompressedHeight; - if (options.inGroup) height = '100%'; + // In group + inGroup: ` + ${logicalCSS('height', '100%')} + box-shadow: none; + border-radius: 0; + `, - return ` - max-inline-size: ${maxWidth}; - inline-size: ${width}; - block-size: ${height}; - `; + // Widths + formWidth: ` + ${logicalCSS('max-width', form.maxWidth)} + ${logicalCSS('width', '100%')} + `, + fullWidth: ` + ${logicalCSS('max-width', '100%')} + ${logicalCSS('width', '100%')} + `, + + // States + invalid: euiFormControlInvalidStyles(euiThemeContext), + focus: euiFormControlFocusStyles(euiThemeContext), + disabled: euiFormControlDisabledStyles(euiThemeContext), + readOnly: euiFormControlReadOnlyStyles(euiThemeContext), + autoFill: euiFormControlAutoFillStyles(euiThemeContext), + }; }; export const euiCustomControl = ( @@ -165,14 +210,17 @@ export const euiCustomControl = ( export const euiFormControlText = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; const { fontSize } = euiFontSize(euiThemeContext, 's'); - const { controlPlaceholderText } = euiFormVariables(euiThemeContext); + const form = euiFormVariables(euiThemeContext); return ` font-family: ${euiTheme.font.family}; font-size: ${fontSize}; - color: ${euiTheme.colors.text}; + color: ${form.textColor}; - ${euiPlaceholderPerBrowser(`color: ${controlPlaceholderText}`)} + ${euiPlaceholderPerBrowser(` + color: ${form.controlPlaceholderText}; + opacity: 1; + `)} `; }; @@ -181,14 +229,16 @@ export const euiFormControlDefaultShadow = (euiThemeContext: UseEuiTheme) => { const form = euiFormVariables(euiThemeContext); return ` - box-shadow: inset 0 0 0 1px ${form.borderColor}; + /* We use inset box-shadow instead of border to skip extra hight calculations */ + border: none; + box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor}; background-color: ${form.backgroundColor}; background-repeat: no-repeat; background-size: 0% 100%; background-image: linear-gradient(to top, - var(--euiFormStateColor), - var(--euiFormStateColor) ${euiTheme.border.width.thick}, + var(--euiFormControlStateColor), + var(--euiFormControlStateColor) ${euiTheme.border.width.thick}, transparent ${euiTheme.border.width.thick}, transparent 100% ); @@ -207,7 +257,7 @@ export const euiFormControlFocusStyles = ({ euiTheme, colorMode, }: UseEuiTheme) => ` - --euiFormStateColor: ${euiTheme.colors.primary}; + --euiFormControlStateColor: ${euiTheme.colors.primary}; background-color: ${ colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.4) @@ -217,10 +267,80 @@ export const euiFormControlFocusStyles = ({ outline: none; /* Remove all outlines and rely on our own bottom border gradient */ `; +export const euiFormControlInvalidStyles = ({ euiTheme }: UseEuiTheme) => ` + --euiFormControlStateColor: ${euiTheme.colors.danger}; + background-size: 100% 100%; +`; + +export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => { + const form = euiFormVariables(euiThemeContext); + + return ` + color: ${form.controlDisabledColor}; + /* Required for Safari */ + -webkit-text-fill-color: ${form.controlDisabledColor}; + background-color: ${form.backgroundDisabledColor}; + cursor: not-allowed; + + ${euiPlaceholderPerBrowser(` + color: ${form.controlDisabledColor}; + opacity: 1; + `)} + `; +}; + +export const euiFormControlReadOnlyStyles = (euiThemeContext: UseEuiTheme) => { + const form = euiFormVariables(euiThemeContext); + + return ` + cursor: default; + color: ${form.textColor}; + -webkit-text-fill-color: ${form.textColor}; /* Required for Safari */ + + background-color: ${form.backgroundReadOnlyColor}; + --euiFormControlStateColor: transparent; + `; +}; + +export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme, colorMode } = euiThemeContext; + + // Make the text color slightly less prominent than the default colors.text + const textColor = euiTheme.colors.darkestShade; + + const { backgroundColor } = euiButtonColor(euiThemeContext, 'primary'); + const tintedBackgroundColor = + colorMode === 'DARK' + ? shade(backgroundColor, 0.5) + : tint(backgroundColor, 0.7); + // Hacky workaround to background-color, since Chrome doesn't normally allow overriding its styles + // @see https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1 + const backgroundShadow = `inset 0 0 0 100vw ${tintedBackgroundColor}`; + + // Re-create the border, since the above webkit box shadow overrides the default border box-shadow + // + change the border color to match states, since the underline background gradient no longer works + const borderColor = transparentize(euiTheme.colors.primaryText, 0.2); + const invalidBorder = euiTheme.colors.danger; + const borderShadow = (color: string) => + `inset 0 0 0 ${euiTheme.border.width.thin} ${color}`; + + // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles + return ` + &:-webkit-autofill { + -webkit-text-fill-color: ${textColor}; + -webkit-box-shadow: ${borderShadow(borderColor)}, ${backgroundShadow}; + + &:invalid { + -webkit-box-shadow: ${borderShadow(invalidBorder)}, ${backgroundShadow}; + } + } + `; +}; + const euiPlaceholderPerBrowser = (content: string) => ` - &::-webkit-input-placeholder { ${content}; opacity: 1; } - &::-moz-placeholder { ${content}; opacity: 1; } - &:-ms-input-placeholder { ${content}; opacity: 1; } - &:-moz-placeholder { ${content}; opacity: 1; } - &::placeholder { ${content}; opacity: 1; } + &::-webkit-input-placeholder { ${content} } + &::-moz-placeholder { ${content} } + &:-ms-input-placeholder { ${content} } + &:-moz-placeholder { ${content} } + &::placeholder { ${content} } `; diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss index b0b41443cf1..d94c5af5e36 100644 --- a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss +++ b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss @@ -5,6 +5,7 @@ // Let the height expand as needed @include euiFormControlSize($includeAlternates: true); + // TODO: Remove this once all form controls are on Emotion/setting padding via CSS variables $iconSize: map-get($euiFormControlIconSizes, 'medium'); $iconPadding: $euiFormControlPadding; $marginBetweenIcons: $euiFormControlPadding / 2; diff --git a/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts b/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts index 4b3f26693e7..2ac6beb228e 100644 --- a/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts +++ b/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts @@ -9,8 +9,68 @@ import { getFormControlClassNameForIconCount, isRightSideIcon, + getIconAffordanceStyles, } from './_num_icons'; +describe('getIconAffordanceStyles', () => { + const noIcons = { + icon: undefined, + clear: false, + isLoading: false, + isInvalid: false, + isDropdown: false, + }; + const allIcons = { + icon: { type: 'search', side: 'right' as const }, + clear: true, + isLoading: true, + isInvalid: true, + isDropdown: true, + }; + + test('empty object', () => { + const styles = getIconAffordanceStyles({}); + expect(styles).toEqual(undefined); + }); + + test('false values', () => { + const styles = getIconAffordanceStyles(noIcons); + expect(styles).toEqual(undefined); + }); + + test('all icons', () => { + const styles = getIconAffordanceStyles(allIcons); + expect(styles).toMatchInlineSnapshot(` + Object { + "--euiFormControlRightIconsCount": 5, + } + `); + }); + + test('some icons', () => { + const styles = getIconAffordanceStyles({ + isLoading: true, + isInvalid: true, + }); + expect(styles).toMatchInlineSnapshot(` + Object { + "--euiFormControlRightIconsCount": 2, + } + `); + }); + + test('left icon', () => { + const styles = getIconAffordanceStyles({ + icon: 'search', + }); + expect(styles).toMatchInlineSnapshot(` + Object { + "--euiFormControlLeftIconsCount": 1, + } + `); + }); +}); + describe('getFormControlClassNameForIconCount', () => { it('should return undefined if object is empty', () => { const numberClass = getFormControlClassNameForIconCount({}); diff --git a/packages/eui/src/components/form/form_control_layout/_num_icons.ts b/packages/eui/src/components/form/form_control_layout/_num_icons.ts index 95c792c4cf2..1dad9f03c73 100644 --- a/packages/eui/src/components/form/form_control_layout/_num_icons.ts +++ b/packages/eui/src/components/form/form_control_layout/_num_icons.ts @@ -51,3 +51,40 @@ export const isRightSideIcon = ( ): boolean => { return !!icon && isIconShape(icon) && icon.side === 'right'; }; + +export const getIconAffordanceStyles = ({ + icon, + clear, + isLoading, + isInvalid, + isDropdown, +}: { + icon?: EuiFormControlLayoutIconsProps['icon']; + clear?: EuiFormControlLayoutIconsProps['clear'] | boolean; + isLoading?: boolean; + isInvalid?: boolean; + isDropdown?: boolean; +}) => { + const cssVariables = { + '--euiFormControlLeftIconsCount': 0, + '--euiFormControlRightIconsCount': 0, + }; + + if (icon) { + if (isRightSideIcon(icon)) { + cssVariables['--euiFormControlRightIconsCount']++; + } else { + cssVariables['--euiFormControlLeftIconsCount']++; + } + } + + if (clear) cssVariables['--euiFormControlRightIconsCount']++; + if (isLoading) cssVariables['--euiFormControlRightIconsCount']++; + if (isInvalid) cssVariables['--euiFormControlRightIconsCount']++; + if (isDropdown) cssVariables['--euiFormControlRightIconsCount']++; + + const filtered = Object.entries(cssVariables).filter( + ([, count]) => count > 0 + ); + return filtered.length ? Object.fromEntries(filtered) : undefined; +}; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx index 5039efa0268..00b20ab9cca 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx @@ -8,21 +8,23 @@ import React, { cloneElement, - Component, + FunctionComponent, HTMLAttributes, ReactElement, ReactNode, + useCallback, + useMemo, } from 'react'; import classNames from 'classnames'; +import { getIconAffordanceStyles, isRightSideIcon } from './_num_icons'; import { EuiFormControlLayoutIcons, EuiFormControlLayoutIconsProps, - IconShape, } from './form_control_layout_icons'; import { CommonProps } from '../../common'; import { EuiFormLabel } from '../form_label'; -import { FormContext, FormContextValue } from '../eui_form_context'; +import { useFormContext } from '../eui_form_context'; type StringOrReactElement = string | ReactElement; type PrependAppendType = StringOrReactElement | StringOrReactElement[]; @@ -41,6 +43,11 @@ export type EuiFormControlLayoutProps = CommonProps & append?: PrependAppendType; children?: ReactNode; icon?: EuiFormControlLayoutIconsProps['icon']; + /** + * Determines whether icons are absolutely or statically rendered. For single inputs, + * absolute rendering is typically preferred. + * @default absolute + */ iconsPosition?: EuiFormControlLayoutIconsProps['iconsPosition']; clear?: EuiFormControlLayoutIconsProps['clear']; /** @@ -65,156 +72,134 @@ export type EuiFormControlLayoutProps = CommonProps & inputId?: string; }; -export class EuiFormControlLayout extends Component { - static contextType = FormContext; - - render() { - const { defaultFullWidth } = this.context as FormContextValue; - const { - children, +export const EuiFormControlLayout: FunctionComponent< + EuiFormControlLayoutProps +> = (props) => { + const { defaultFullWidth } = useFormContext(); + const { + inputId, + className, + children, + icon, + iconsPosition = 'absolute', + clear, + isDropdown, + isLoading, + isInvalid, + isDisabled, + readOnly, + compressed, + prepend, + append, + fullWidth = defaultFullWidth, + ...rest + } = props; + + const classes = classNames( + 'euiFormControlLayout', + { + 'euiFormControlLayout--fullWidth': fullWidth, + 'euiFormControlLayout--compressed': compressed, + 'euiFormControlLayout--readOnly': readOnly, + 'euiFormControlLayout--group': prepend || append, + 'euiFormControlLayout-isDisabled': isDisabled, + }, + className + ); + + const hasDropdownIcon = !readOnly && !isDisabled && isDropdown; + const hasRightIcon = isRightSideIcon(icon); + const hasLeftIcon = icon && !hasRightIcon; + const hasRightIcons = + hasRightIcon || clear || isLoading || isInvalid || hasDropdownIcon; + + const iconAffordanceStyles = useMemo(() => { + if (iconsPosition === 'static') return; // Static icons don't need padding affordance + + return getIconAffordanceStyles({ icon, - iconsPosition, clear, - fullWidth = defaultFullWidth, - isLoading, - isDisabled, - compressed, - className, - prepend, - append, - readOnly, isInvalid, - isDropdown, - inputId, - ...rest - } = this.props; - - const classes = classNames( - 'euiFormControlLayout', - { - 'euiFormControlLayout--fullWidth': fullWidth, - 'euiFormControlLayout--compressed': compressed, - 'euiFormControlLayout--readOnly': readOnly, - 'euiFormControlLayout--group': prepend || append, - 'euiFormControlLayout-isDisabled': isDisabled, - }, - className - ); - - const prependNodes = this.renderSideNode('prepend', prepend, inputId); - const appendNodes = this.renderSideNode('append', append, inputId); - - return ( -
- {prependNodes} -
- {this.renderLeftIcons()} - {children} - {this.renderRightIcons()} -
- {appendNodes} -
- ); - } - - renderLeftIcons = () => { - const { icon, iconsPosition, compressed } = this.props; - - const leftCustomIcon = - icon && (icon as IconShape)?.side !== 'right' ? icon : undefined; - - return leftCustomIcon ? ( - - ) : null; - }; - - renderRightIcons = () => { - const { - icon, - iconsPosition, - clear, - compressed, isLoading, - isInvalid, - isDisabled, - readOnly, - isDropdown, - } = this.props; - const hasDropdownIcon = !readOnly && !isDisabled && isDropdown; - - const rightCustomIcon = - icon && (icon as IconShape)?.side === 'right' ? icon : undefined; - - const hasRightIcons = - rightCustomIcon || clear || isLoading || isInvalid || hasDropdownIcon; - - return hasRightIcons ? ( - + - ) : null; - }; - - renderSideNode( - side: 'append' | 'prepend', - nodes?: PrependAppendType, - inputId?: string - ) { - if (!nodes) { - return; - } - - if (typeof nodes === 'string') { - return this.createFormLabel(side, nodes, inputId); - } - - const appendNodes = React.Children.map(nodes, (item, index) => - typeof item === 'string' - ? this.createFormLabel(side, item, inputId) - : this.createSideNode(side, item, index) - ); - - return appendNodes; - } - - createFormLabel( - side: 'append' | 'prepend', - string: string, - inputId?: string - ) { - return ( - - {string} + {hasLeftIcon && ( + + )} + + {children} + + {hasRightIcons && ( + + )} + + + + ); +}; + +/** + * Internal subcomponent utility for prepend/append nodes + */ +const EuiFormControlLayoutSideNodes: FunctionComponent<{ + side: 'append' | 'prepend'; + nodes?: PrependAppendType; // For some bizarre reason if you make this the `children` prop instead, React doesn't properly override cloned keys :| + inputId?: string; +}> = ({ side, nodes, inputId }) => { + const className = `euiFormControlLayout__${side}`; + + const renderFormLabel = useCallback( + (label: string) => ( + + {label} - ); - } - - createSideNode( - side: 'append' | 'prepend', - node: ReactElement, - key: React.Key - ) { - return cloneElement(node, { - className: classNames( - `euiFormControlLayout__${side}`, - node.props.className - ), - key: key, - }); - } -} + ), + [inputId, className] + ); + + if (!nodes) return null; + + return ( + <> + {React.Children.map(nodes, (node, index) => + typeof node === 'string' + ? renderFormLabel(node) + : cloneElement(node, { + className: classNames(className, node.props.className), + key: index, + }) + )} + + ); +}; diff --git a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap index 341ba7373e8..7b28bd5627b 100644 --- a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap +++ b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiDualRange props isDraggable renders draggable track when isDraggable=true 1`] = `