From 805b75a6eb0471f1d2c1f791b2a654f3638dcd64 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com> Date: Mon, 9 Dec 2024 09:54:29 +0000 Subject: [PATCH] feat(textarea): added highlight and focus styles to ionic theme (#30062) Issue number: internal --------- ## What is the new behavior? - Fixed highlight validation to include ionic theme - Added styles on ionic scss partial for focus and highlight - Added focus state test to textarea ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - Textarea [basic sample](https://ionic-framework-git-rou-11444-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic) --- .../textarea/test/states/textarea.e2e.ts | 18 ++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2906 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 4572 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2860 bytes .../textarea/textarea.ionic.outline.scss | 7 ++++ .../components/textarea/textarea.ionic.scss | 34 ++++++++++++++++++ core/src/components/textarea/textarea.tsx | 2 +- 7 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts b/core/src/components/textarea/test/states/textarea.e2e.ts index 8bc048589f..dc6b3ef5fa 100644 --- a/core/src/components/textarea/test/states/textarea.e2e.ts +++ b/core/src/components/textarea/test/states/textarea.e2e.ts @@ -28,3 +28,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('focused'), () => { + test('should render focused textarea correctly', async ({ page }) => { + await page.setContent( + ` +
+ +
+ `, + config + ); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-focused`)); + }); + }); +}); diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d852023217f6ecdc0fa04d873151c2cc225222a9 GIT binary patch literal 2906 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8bff7a64ab3033695b94a98df5fc1c4e47bc9c86 GIT binary patch literal 4572 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4951923b775bb237edf2155fd49dce902536cc00 GIT binary patch literal 2860 zcmeHJ_fwNu7k-1-=%5RNlqG+I;!27FHT;TphgL)l2PB$ZT*2|W%bO7L)Lm_V53;vxkW9xBtN4kBJ){ki> z*Bh%^oYhfohZ9#`G_@ zgv}MhqHEp7zQwUt?V|Of?@bH-WHSS?8h+AaR$(tI*8`0sKW!|Rll3%?P%^CtL;aEC z-ja8K>nHuH%mLu=Iv%)q^Iz!vAY;ywu)Sl;G2BH?h$mg^I}7jOp0VIF)c5Mx(0F=q z8&!aQFz-wD4gGGXC8xgRpKrXgizeizFF^Kry|ZfT{|Ye93X7)o_CfsqD^DS47?jr) z++!hmdHWRKd#nz#khOkOn;7#Z#sg=n0uoPjg$R}GW&;3(||aQ zC)*tlbv9#{ce-^7r{#!|@7sL2LIAdt5V<3dt;AH&P|I_g+EixW*5E5Z!{`%o;xOor zdYV5M&bdRv{2@e}5`Ez2)(N9#C3j0Ypm`63{kNU5jH%jP@)3U3E z?8l5d->ck=?^SIpnNRTW;&DkYX8K*~`H@~zKL2N)TQ{~!yHqIneB6L*VTO+th{P@$ zTH6fmQEG$CoV#D`orGK|bU}-6x9O%i~pi-$U7Ry^_W@2K3Ng@}O--$>t&LSXv^n=YkB*Ms&e77+a){V@5ibb~Z>q1?oGsd;MMiEd z4NNy;vF`3@k_Xz}e)e&GL}1tMu-kSC5i`}~<7{d=z^nRBDCPEIq)og`#P+b}F@6C7 z7<;{LbaXUF8;jc-(5}WXVH_dAbvnSv(#mRtqS_Yz_4E6@yu9x2ZY7wfmly8)X3wqS zl9H10^76ND4{Ca(+4D)Nh)49XN?PO*=cnn7sRsI&zVv4TQo6xkKPQ|~++|E_AKrC# zUeG+IrKxGx8veGte6_NXsvExlHEg3rd-Sxq26xn?Uv8@|`=e6zjNgy})Y8T#XudNc zL1vN^u|83=UAEE6W>(pgjf{<@dM>G`h^8ebCW28VOz&-PhjVtuL97lu8)q*-t6O%b zIt1bG!uFVjg;3$iMl9{#v4DU8DTC1M9BeBZbRWMyS+`8yXwBL7D3frStaZ7@P6aai z1F{v4$GqQ`iN5}`NP@}tl@GDJNutWWrS@cN3Yc$N2`9e>3>|m@Sqw z5`9@o>DjYqh6NU^#o?km)vc479kM|GpEHW?eRu_;ihW|2)8gVHhr=nbcvV+dS6RvU zey~MwY1taoOV$6@+sU9%D2-s3JRZt>{*Q<`gx8Qrq>74l^OLVDD&Fl;!BWpogI{QD zj1;s%_2+?uiI0?-FF!g3XlU-Cz6I-BTU*m`Y)>5S5Cqr8!Qp6k8Y`pgzcOMDZ#g<- zZ@k+YG|jncUqdD8KYOXN%Nhc)9L3WB&35sN5{pT z5I*?YAy|#E%L7}})oF}qgh?738?ynsBHbK@e&cvUK#e z{!Tbm4>}(xp2f`c!E?b35l%jMZbze<-{hc>qjkmdpJ_sA(GT@Tq#*q=;8cv~7VF31 zjd)CjSIH)Lz+}~_O&O|iD~nb+=>P1K2$7O8_eLtgmvO>TWbT!Q2+3aMl5(I+Gj^%5 z(H>+33ed8lQuSG}_Hge~MFps_v3*r?QpRX=vF*p1I9YI(8_L9ZVwp`wcOMWVy%Xk*4nkSgvOH9+-`$BAr+N# z5h7G0{V$?IRMPx$D@c%az^d=I zjHP!qGc-GVYODL)IuGU$P|+YRSkbR3Wfyz3m!b~byeDAP9~N8n7pelNPy2~-DLHrX zKk7JTrZBSi7W-iRLCc3+nchPW;CsVwMS~zE0F#J6dwd{!+8~4~{*z-VNwLq__LrPw3k@LO}Wp Npl+EVs%|