From 0d67c83c21c8ddb525385d6d3992bf4a5eb51494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Rio?= Date: Thu, 22 Aug 2024 16:23:15 +0100 Subject: [PATCH] feat(input-password-toggle): add ionic theme design (#29787) Issue number: ROU-4860 --------- ## What is the current behavior? Input Password Toggle does not have styles for the ionic theme. ## What is the new behavior? - Added color style - Set margins ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Figma Design | Implemented Input Password Toggle | | --- | --- | | ![Figma Design](https://github.com/user-attachments/assets/285c4766-267b-4c73-b0fc-801b130c6fb2) | ![Implemented InputPasswordToggle](https://github.com/user-attachments/assets/a768cbfe-3bf4-4d49-89ce-0b142d29d3b0) | - [Basic Preview](https://ionic-framework-git-rou-4860-ionic1.vercel.app/src/components/input-password-toggle/test/basic?ionic:theme=ionic) --------- Co-authored-by: Brandy Carney --- .../input-password-toggle.common.scss | 4 ++++ .../input-password-toggle.ionic.scss | 12 ++++++++++++ .../input-password-toggle.scss | 0 .../input-password-toggle.tsx | 5 +++-- .../input-password-toggle/test/basic/index.html | 9 ++++++++- .../test/basic/input-password-toggle.e2e.ts | 2 +- ...gle-ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 747 bytes ...le-ionic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 649 bytes ...gle-ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 773 bytes ...password-toggle-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 777 bytes ...assword-toggle-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 878 bytes ...password-toggle-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 741 bytes 12 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 core/src/components/input-password-toggle/input-password-toggle.common.scss create mode 100644 core/src/components/input-password-toggle/input-password-toggle.ionic.scss delete mode 100644 core/src/components/input-password-toggle/input-password-toggle.scss create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input-password-toggle/input-password-toggle.common.scss b/core/src/components/input-password-toggle/input-password-toggle.common.scss new file mode 100644 index 0000000000..2d922de630 --- /dev/null +++ b/core/src/components/input-password-toggle/input-password-toggle.common.scss @@ -0,0 +1,4 @@ +@import "../../themes/native/native.globals"; + +// Input Toggle Password +// -------------------------------------------------- diff --git a/core/src/components/input-password-toggle/input-password-toggle.ionic.scss b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss new file mode 100644 index 0000000000..c5ce03da15 --- /dev/null +++ b/core/src/components/input-password-toggle/input-password-toggle.ionic.scss @@ -0,0 +1,12 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@use "./input-password-toggle.common.scss"; + +// Ionic Input Toggle Password +// -------------------------------------------------- +:host ion-button.button-has-icon-only { + --padding-end: inherit; + --color: #{globals.$ionic-color-neutral-500}; + --margin-end: calc(-1 * var(--padding-end)); + + @include globals.margin(0, var(--margin-end), 0, 0); +} diff --git a/core/src/components/input-password-toggle/input-password-toggle.scss b/core/src/components/input-password-toggle/input-password-toggle.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/core/src/components/input-password-toggle/input-password-toggle.tsx b/core/src/components/input-password-toggle/input-password-toggle.tsx index 879c941718..4e2c3c527e 100644 --- a/core/src/components/input-password-toggle/input-password-toggle.tsx +++ b/core/src/components/input-password-toggle/input-password-toggle.tsx @@ -21,8 +21,9 @@ import type { Color, TextFieldTypes } from '../../interface'; * and we will default to MD mode. */ styleUrls: { - ios: 'input-password-toggle.scss', - md: 'input-password-toggle.scss', + ios: 'input-password-toggle.common.scss', + md: 'input-password-toggle.common.scss', + ionic: 'input-password-toggle.ionic.scss', }, shadow: true, }) diff --git a/core/src/components/input-password-toggle/test/basic/index.html b/core/src/components/input-password-toggle/test/basic/index.html index e4232be7fc..558cc9a973 100644 --- a/core/src/components/input-password-toggle/test/basic/index.html +++ b/core/src/components/input-password-toggle/test/basic/index.html @@ -48,7 +48,14 @@

Default

- +
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts index 637c9ac3c4..375d54dee8 100644 --- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts +++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input password toggle: states'), () => { test('should be hidden when inside of a readonly input', async ({ page }) => { await page.setContent( diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b873b4474171f7229ec1534afdfff0f96110a1e8 GIT binary patch literal 747 zcmVPx%rAb6VR9J=Wmdj7-KorK0m+DY~2qF)WXkxp{!yMk!T=< zCb%FWbU~m{W6`GN(Sf8cnlv{ocu8V%Z@=Aqo%wzznRD9i7={7Aq(8p}w%In@X4`C= zy;TvL9qaXagTdhI>kDIiaB$%DdV|5B+wEQ}WM{4Kn5wFcMnez;gpkkY+uz?O2x2rE zjYgw>zaI<+X_}@eYWr+a6dxZS5kiSX;{5!4?&)wisZ@#}2#j<<-V#x~?A{9ww8?P$&cdk|aGmJRpQJnat8FSc%3%PE)3_xJZ0V{@r#S}vC}D_EcBu-2n0?} zPF`MKhQpy{9vvOcg?@Z|0D#}`x16V^r`c?FadELZ8vt%^ZxKQq$5{@;FoGcPJg=(i zbUJOf+oe*8rfHYUWp1d~>)mdbWm%8Mvmkk;K35c_P$>9(zH~ZGk|Y2$8jVV&Vr>YA z!z|10?d<^o&-3+qone^E%ge>FtIoG9%N)lUhH-s;ZC<~kDDUs@=6pvY5dir7{H#{1 zy)1?Ml3E0`)=|mi`Fy6;YDJgJ zg|^!*YYPU0{6r!VeqO1UL>`Yvn$2b`5ETlA$nW>_1L6Dqo`nYj0m^2xlt?5zY4t2} zv)RySG-5&6Je^MS_uJa-b~K;Q3G+d;R4RQt?|ik9x#e=1sXHy#B0&XWa=9GSLqSx(-zV5FWB9&aubEsd7UOvs8xDs& zzgDX`ChAHgEW;+LREh~o!FK$u(P&(4Je^M2YI7VyyWK96u2d?HU^*6wx9@a16pcoi zj#(H-E@7`(_)WXrW-;aohxH(Dx}lQE!{NXL3WdVmDQ&e{Z1b&1Y}{-%uPm2%U@ZtQ z7K=}5Iwpyg#MWxHdKG+7LEYLX@u=79+%u&R85}U=(j0%J)|E&(ART)QRP2^TV0*9EyK5!VH_^PM%oZh1;KV!4qO9YJr2I%)2|nc}ky{2Y z0pg%3y%3~95cAO$+}=E%L`wK!Cz`s?=c8mY$=4rR3krfxrxPugOa2tw-8Au+NSgV9 z7~I{k8x+lgcrp&33cVlgeNkP)8Sh3cUdaxzpAwop);>kbLTkf7j zp&(+cqP9g8lt4Goilkzjrpd-N`woFn-l4Ts5Z=q&=3Dmrv76bMKuRh2rC@#w9I+#I z#E#ez`$r=-!5-Ij5kjx8ul;`C_kEUS1wqJUGIMitWBI_b=9q2U)oNAObqJv#2+3rU zVHn48+U+*Rcy@MnV`C$m&Hg-F*Y!%JGBq_-DwXp2Jj=4-5~cLz<>mhVzSU|iFE1;K zGPwF(_TAlGyBYqbA*5I=PR<4ZD2l>y zT)A9!94AmDNit3I{QSJz?P83do}R9+uM34j_!X|Mt`I`o+uJ z%--IfAP4|}Mx$|gc^O`^D2lQy$6~RMj}J}L8jZ%**4EnE+Hl*izHi&M%jI&X(^+3% zFBXf_)6;~IcDwDmZaSUjIF3?^5W2a!!5Axwva+%=(sPWy_WAi)tJNMJ9w3C-Y<6K` zf#><4r<$gT5bE`MOG`_#EGLu6uNaQk&jA4ae*gLT86ouk{vPg~nVDH!Tr3m{V~vxs z*_z+rOs_v3&4Z;99uJ7P!de~tYIw0gEkXh1X#00000NkvXXu0mjf D`#XE) literal 0 HcmV?d00001 diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b7c0b5820e48bc13f2cd9b64cec9ee5046c74fc0 GIT binary patch literal 777 zcmV+k1NQuhP)Px%!%0LzR9J=WmR(2`Q51mB-I<*kx0&5^g;ETyAX`fmB_c^Bd@w>Rs1!mY!H1M0 zDC!}jqM#lWEUXC1z!0G*qmrcXA%h}OBryUlqYzdDQ%CoIer^xi?p{T9XO;5des6O* z_uOyJaL!zWF@{xu>3<8%Lp?~S2MP5cp&lgEgM@mJP!AGznfoz@xeE+JfY3kpz!+2w zUJnFX-+7&rIzq^Vpdf=Q&*RgR8HO>O5XEpG8yVMcb$T9s@Q+Pviv%He6MJ^QSeC~b zDvx20XFY+c+p_Fkv@=f$rF_Oke-VBi6y3oP3y!8hq0HCSUEea@WBhiC{qsq+=Z^R>_@)&ZeF5kkk zB}i!4sfMpOCv`;yyR zlGvT;tX*OTeyCl8p^mj#(4A`Qk$irMOw02C09}W>Z@gEZxW{FEshHa0xC;lxq<8~^ zJ(m9q04OSS^eNB#eC;27vwjR10ASB{?!XTI@GfE9S`=|$tc=GTx(=ESU&pi=FW#2I zS_EKXz0WMmV+C0)_c7{0LOn>R2MP5cp&lgEgM@mJtQLcLIt)w#{qZs!<--A%)@JB8pJxG&>(?mp*pzUQ|yK_&zL z*$_DN3hfv-y+WeFO>@)#Fu>!%I~ z8*zNUUX^{-&>e$*)OAUae2e{S`)fOV6zA&kuttQ%7+Y>sK{q`1;A+1|0VJ*x&{`&< zAX|qu$pVJI1kltwgEyakDe88l>Cj(iLdIGRb6#SGZY03X3jjZFG-LBREp9#Y&L777 zEFB8B>2S<81^cjH0hnshV8~{HRb(?B6ZHK-A1d!jQTc7JGNE)|A~LF-inu&EXTqUu z@_DTb)83#0d?ztJY%@c{AePwQA91~{fcVhwUy)dz0ml%JLf}3_P$+;4m=G@ttg3?wA_90&sTv?t0 z-Dkz+gQhtxxh7#C>dOT@Z&*FQm?KS-3V;&_4Cp!|BE80m?=EFLOi2RXw^*=g{nGQn zY?{)zre);RyWofb$j{W_#YHoE-}+JCJp=b_5VXDBtuUf}(2MguWCy~}91+lQT0}*W zVab+hVNB3;B5h>{FHJ&<$aZm#9-Y-9s6h&-Ay1oq7A<`qvIyllXs;4cd6*4Y6*QeZ z_A^Lw>c&S$Afi`muxmpC0oP#U+Z-I@BobkUMY5pQG9xM(4TruYX49b;OpvIw4MZQl z#r8XIYa(u(O2+Pu2~3d)FIEj5dKtZcJbLLR2h<;7UO=ivKwg#}0_Au2j-`)edb8DuK)l507*qoM6N<$ Ef{`3F8{b2$@cyAAPN^wRmakj3}kbn%e7ez{I$PV^GiJ8Sl+@@vuyre{`1%VL6*qT z8U0(iyf_5-M3e4r{PLlHhUfeVuFujx|CHJ+Ic;C{pKtQa%*?{dhacJ4$tRcX>@h#F zF>UF&stth?S_2jch}P@d|2sY7tEBIR>oaoi{gW4PH!v{x^ZWdTEx)wo)fYFLNpISe zY+mnw?_ci%QJ0;MKhCa?uUo(_ZO;Dq_WA!4T<_KWJAdH7fx`zomVNqGob$7br(8mN z|K6JYR#M;)w-A~h3v}8hxh2jr4~-{$cy}a z)oE&Jq1^mgDw_@TgI95<=gXY$T5O+Z=lo+{=fp%uzWI|Z9_lzd)$RQIXMOPF-|G2- zg%e+#FjSm4yLO}p=($IO2}U!VV9;O^u5@NB_jm16~$PW891|NpDJcF&Io{4p)_ zyDvJdOkB@LU$zimdKI;Vst E05gztLjV8( literal 0 HcmV?d00001