From a31e1e594d4ed7bbcf690b27eee143da232f2bdc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Jan 2023 11:07:08 -0500 Subject: [PATCH] fix(input): clear button uses contrast when setting color on item (#26592) resolves #26337 --- core/src/components/input/input.scss | 6 ++++-- core/src/components/input/input.tsx | 3 ++- .../src/components/input/test/basic/input.e2e.ts | 15 ++++++++++++++- ...on-item-color-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 4137 bytes ...n-item-color-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1662 bytes ...on-item-color-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 4186 bytes ...ton-item-color-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 3406 bytes ...on-item-color-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1525 bytes ...ton-item-color-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 3453 bytes 9 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index f516133a6d..9a126385b3 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -158,12 +158,14 @@ background-color: transparent; background-repeat: no-repeat; + color: $text-color-step-400; + visibility: hidden; appearance: none; } -.input-clear-icon ion-icon { - color: $text-color-step-400; +:host(.in-item-color) .input-clear-icon { + color: inherit; } /** diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index f409595b16..d600d60de9 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -12,7 +12,7 @@ import type { } from '../../interface'; import type { Attributes } from '../../utils/helpers'; import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers'; -import { createColorClasses } from '../../utils/theme'; +import { createColorClasses, hostContext } from '../../utils/theme'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. @@ -454,6 +454,7 @@ export class Input implements ComponentInterface { [mode]: true, 'has-value': this.hasValue(), 'has-focus': this.hasFocus, + 'in-item-color': hostContext('ion-item.ion-color', this.el), })} > { */ test('should keep the input focused when the clear button is pressed', async ({ page }) => { await page.setContent(` - + `); const input = page.locator('ion-input'); @@ -200,4 +200,17 @@ test.describe('input: clear button', () => { await expect(nativeInput).toBeFocused(); }); + + test('should inherit color when used in item with color property', async ({ page }) => { + await page.setContent(` + + + + `); + + const item = page.locator('ion-item'); + expect(await item.screenshot()).toMatchSnapshot( + `input-with-clear-button-item-color-${page.getSnapshotSettings()}.png` + ); + }); }); diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..29f9df8bc5a3e870cd53f92f30fb97399b11b14a GIT binary patch literal 4137 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 literal 0 HcmV?d00001 diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..adbe7cbfd0d7ddade29a31ffe58c9081fcb8b30d GIT binary patch literal 1662 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 ZE#W`OiS2@;APRuZ4ae&hSO5C^{{UN*I5GeL literal 0 HcmV?d00001 diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d1edfee7f55cdfea0367a33a1d539f1447ac8165 GIT binary patch literal 3406 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 literal 0 HcmV?d00001 diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6fb9add3efe08f72b852caab3a37db893434374f GIT binary patch literal 1525 zcmcgs`#;lr82`>?jpH(sP|94=%iWeK;{5V?yP^7Jj_K&Go_2G%bu=0j8?zI_H8ykcmfFVW3;(wGeeY+u3M~$iy@F#Ej^`SQcTZ zWZ1$+TsAPakh%VJnA16x+#8aXG;bf@JY7L>bo_t@U~)(_GXuRD^&~bOkU{AAcv15w z_`l-SCTQ%Rk$O}pj8s1*i;$ve`5U-OyN^oJEGrorhLlx$RsUBUL0=8MC6&-{qvr2^ zeM+N0|Valqe@>eD^@WT7Tr91dL63mcd4 zdsNAVqN&xX4>KzCl8>yVo+bxdQu>=F8yi0zHz)^Ad%QN~X?IG`YoVw$-hUo^ZNRdR z$9A`1YYz5uM`E*|RWmBpT)Hz4MmDa_7lWmgNpW+k>D-v#nRDK{7Unm1^_(bW_encd zGK7^MdbE$ALviwJOD(G6M4k63k_lSP`IK~WtH^1#dZ>Cn{|oVPhkGUKChOwttohu; ziUPeO5!8`EJTsm^EedagCB{2+G&r(B-;aQAifj7z>I^r&cjhhp-E@_aygyc`1~%)0 zj0lhMja|x4{EU!)*n;TkrMEb7$E{uF=NV-I#<%T`whDz&EoqX`@W`HULs<$68b~Ap zuc&zcRfP4rl71g`@uyu&{+9>dt;?svxII>Jah{Z7Y$t&{_PalSrDZgGo2g?$6Q>>f zt!vOyb3EiZp`JY)GebLD>3jWNV?^T+5!^Jw(rxdsX5yud+n$_YGV9B;xo#=Psni$d zhHg8`Uuh(NuIFhIe=Nr4PKt4PwS|NHZ<(8T6*zD#8>@Suq2*f;km2R*V-j>dez}$Q&=`f<={VJ7(zJT2aWxLmH<0Iap*WTq~pu&8z@9 z3-T73Pqc{4)Ve){hVcutDtUE=hW~C)=DPvuU*$~Zf|gBc<`TPFH$9|1v%iD2WP7Tb z;leGiT_w5W+9X)XWD?C`p@2JXRLhRNa_3}W3XjP3=B6%N5ue_$hskt+hK(;^$bQiOQrAJ!o6FM~mg(&2i+=t(zrUfA{?~y7fd6Y)~?nl9) z0*8_xngeqytagz{wras(ydkXNv)}Ya0EuCQq!>Wszlhi#+P>RTA||zxue?c#cl2V9 zmJ`wrxQC;xgX?XFodqT%@LA#+N5u6Dg=6nZX-{gz{LOE7dPI+VXFZL_tn=cgl0csF z%cRtiuJWd@&&wDO-Zu9}Nj*Ro_qg1kZHdQM?Yb7{$dUB_{B+hH4g&pKr5DepI;p%K z=*t#w6fcC~opcT|&f`h!OVHNnA)zxyIKlCd1_EP>#$p_7HL@T~gWQ0Z2iqbQ?^i^s z_p2ypN_SWwkDxD}MaxUio((wz+r@<>#R)KH{U2IBFsWoMfKr=#?W6U7$TRP*OCr9l lZ^H_%RLVfT0_j#VKLL2m$Org3#UHYB0O#tBsdEm@_zxMepWOfe literal 0 HcmV?d00001 diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-item-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c9111934f5ae42d5eb440f5fb9ae1144d78443cd GIT binary patch literal 3453 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 literal 0 HcmV?d00001