From 5b62a1eafc1ac9b856c5cb05806c0a86e97e967a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 4 Apr 2024 11:14:18 -0700 Subject: [PATCH] fix(input): update error text color for ionic theme (#29270) --- core/src/components/input/input.ionic.scss | 10 ++++++++-- .../input/test/bottom-content/input.e2e.ts | 2 +- ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 1063 -> 1079 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 1214 -> 1206 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 914 -> 911 bytes 5 files changed, 9 insertions(+), 3 deletions(-) diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index e18e831762..6dd8c61da0 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -3,8 +3,10 @@ // Ionic Input // -------------------------------------------------- - - +:host { + // TODO(FW-6113): Verify the ionic design token is correct once it's available and remove the hardcoded value. + --highlight-color-invalid: var(--ionic-color-error-600, #970606); +} // Ionic Input Sizes // -------------------------------------------------- @@ -20,3 +22,7 @@ // TODO(FW-6112): Verify the design token is correct once it's available and remove the hardcoded value. color: var(--ionic-color-neutral-600, #535353); } + +.input-bottom .error-text { + color: var(--highlight-color-invalid); +} diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts b/core/src/components/input/test/bottom-content/input.e2e.ts index d0c780da85..5abe30d54d 100644 --- a/core/src/components/input/test/bottom-content/input.e2e.ts +++ b/core/src/components/input/test/bottom-content/input.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ directions: ['ltr'], modes: ['md', 'ios'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input: bottom content'), () => { test('entire input component should render correctly with no fill', async ({ page }) => { await page.setContent( diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png index 258244d3059d674a4432807603858c036d0af36e..42a822d5345c91140d54647bf08112117799941d 100644 GIT binary patch delta 1045 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 IM6N<$g5*Lrr2qf` diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png index 5425933b205f1373134ebf068bc7419b6b012ae8..0eef557c63a0051eebe8e59f390d5d6300756e1c 100644 GIT binary patch delta 870 zcmV-s1DX7i2agAkHh)A(L_t(|obB9ONKgY%x>_R0XE4-kw zuyE>w4~^_8NbsTOte2pK&-D#D%vzT58-vpOx+wzGcTJvJy^EV z+CW+d_x(Jb^FQDJh5y5kbAclf1c3km#6kMM7XSe86G{>Qh<^x55&(z@N)iBw2uczF zh{&!=lAGt-)#{+JRhR2QZ0v3(0)PmCyCeV*5mA>U!SDayO8|hdlDdY6jT()$zWz~a z>a*P3x!&HMs;Y+yMdz6_U#6#t$bA0%P*c-p`ejkk$0tvI89)&F8X6v_r$0Y>bYWy< zvu(b=|3zM2n}1UIrnc6%yu6il^Sn``v0S`p%*yK2YCWT)JLcUy->y=Gad54P#^bwc1x@Ww~{Amp^?Zz(ab^ZD!yWQ{g+JEle4a|R?ojp=lXBZzpSYH12 z%9TImS6r^l%E}s>EnNEm0HPozB8Fu(H8s(RiCjfRQg*hwv@|*);lSCmixU$>#8p(x z4-Bk0oeqm7H9vn}N=jgVhGlcFUX{hg9nk3(Cnt%>VX-7~9H-aI80JWQy}i3TFdv(g zl%~}Z(SNaP*XDYA*FByc^9;)#HW*~_@nPEt01yLN;E7ZwlSW5x9!sL4gpCa%Vpujc zKi_UP&seS8g$utAAd!6U8x`gE`G{zFX2xZ+wJDWEM1l~bQ0zQ0!^FttD^6#Kc>st6 zvfz;)&u(*leWz~R2pWz{OUo!MEH|6CT2@`I?SHZL#lW=J=g`n(SC`-Cb66}x&CP*VR~HthOeX*O`oOJQX$1u_3dP^^ z01#0^DoF`yb;|MMhqgbp?IboiS=Z4qc>8vnQrUm=rmCbQ@M?@)KGE6Pu2z43_pYe5 zHD72R03wPc#Q!CAm6a7VHnJyA?q)JK&zp3*T8Cpdg8;xD7W`e3-|L;RTEEWDvL{Z2 wVL<>8$%2=p;d}Q!w6v5Ojawhr0091xZv_uXExG3n5&!@I07*qoM6N<$g0()Uc>n+a delta 873 zcmV-v1D5=c2a*SnHh)J+L_t(|obB9ONKkBA(|706-YT|9Sub0NQKgLY?AYF1ZSMa#nM zDVPEP5DqaBjk!I_jq7rH9Ev=XJ-;}u@=&ht^^AEL-fK6BNK;&1Iuzz5rxlL8H zCHi`<*Eb_0-Pq$uF4*Y4SWQHcz(`kV#oTkJa=k8|<9|GtuSMrW-j8WV59jna)Fp-8 z2P%J;=X`ydon_hfhN+qd01yN*5ivS#O2saTLay0SEL)nzZYhw+XS0Ro&#&JSk$QX4 zNK-4<>l?JzDNIHtMH78Jqtm8W9um)zskUt%d-INn2Ca2T3k;g_60t04&haAywNIk+ zQngB%XMZB1IVX<=>TQvs;h1?wr`7J;BbhyGs^$Rz1VI|TBa%wR4D)SUBH<(BM8xQ{ z3X^f5);jd`xw@?A=LSTg@A+_;h(aFkNNal|t0yAjc`2J5vtzL=Nvc$Ey}ktV05Ba$ z<41@z<)wbhqd-IRyz{5yhMDx#-KYYZ8!-Lj3PxX!Hv*EsezvVF>3c1f;Qmk7m zNml+j4*=6jLM3UYey)7=su)jgu}IabrIx$ysw*~D-*dK#HRng4l_(Yc_bpASS;Nm> zEMmG{6E_b4(~2m;|0Ov#6&tFnI?QFcA6%1Z1OWbH@!uu!95?jzdC2=w zo`bK10O0S6Uy?jmYrNNQExvbqVsQ-s;4k?C6v<0M$4=Vc00000NkvXXu0mjfv2&%j