From 2f99aeae6f71d5ffd1880f2c549227ecf71becf3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 20 Dec 2023 09:13:00 -0500 Subject: [PATCH] fix(datetime): selected today button renders correctly on ios (#28740) Issue number: Internal --------- ## What is the current behavior? We removed the background color from today's calendar day button if selected when implementing the calendar-day button shadow part feature: https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04#diff-8e2912d52559aa44c9c6dc062c8d683e7b51c92c7b7ba420ad6f7587f1e1a61aL139 We did not catch this because we do not have test coverage for this use case. We typically avoid rendering datetime on today's date because "today" could be something totally different depending on the test machine's locale/configuration. ## What is the new behavior? - Adds the background rule that was removed - Added test coverage. I mocked today's date to be a fixed date so it never changes ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Co-authored-by: ionitron --- .../src/components/datetime/datetime.ios.scss | 4 +- .../datetime/test/basic/datetime.e2e.ts | 38 ++++++++++++++++++ ...dar-button-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1078 bytes ...ar-button-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 973 bytes ...dar-button-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 1052 bytes ...ndar-button-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1097 bytes ...dar-button-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 976 bytes ...ndar-button-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1264 bytes 8 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index 145053d2f7..5f9aa2d040 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -249,9 +249,11 @@ /** * Day that is selected and is today - * should have white color. + * should have base background color + * with contrast text. */ :host .calendar-day.calendar-day-today.calendar-day-active { + background: current-color(base); color: current-color(contrast); } diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index c0ef49adf6..b72a7f2c3a 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -458,6 +458,44 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); }); +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('datetime: today button rendering'), () => { + test('should render today button correctly when selected', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'FW-5808', + }); + await page.setContent( + ` + + + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot( + screenshot(`datetime-today-calendar-button`) + ); + }); + }); +}); + /** * The calendar day highlight does not render * on iOS and has the same behavior across directions. diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bcca67fe4f52987f7b0e6a8560a3f19ed3616baa GIT binary patch literal 1078 zcmV-61j+k}P)Px&@JU2LR9J<@m}zWORTRg6GYoBMOYO8pprwnXKm!&m&_HQuj1mk=8x>P!iIr~# zzbYnvA`l41Vj@}~3K)$M4GFCvTYvyY*0d$Eg%FogDJbc*O_@>#rZapvGxKJ7Q|8@y zGyNwo?`}EwmwWHI%dvR9UN4I3eE{wMz_l*u>V>;~aHm)5^6ikHE&mw>P&pa0#;EmU zF$&r3guNHw%uV>~p0UoRO@yi`u&fgDG7|vV?SvoBKuasQ+{WO-m1=`G=EBPA*kGRu zX(n8_{ICrRAv-;KJL_;p+#c9{8h$=+J|KwApU%VAC#A1wiaL`0gYe-Vxbm<0aC#~) zgvRCi&ZP@EC*e^7yx6E*ZutIpEgyiq(+B(8M*>M-zqDzi z8Gzh%3OvfEIE>4ZBk#?*uwaVhnyH`I*0I!gn* z_%|%w0xxca559v3zR`Q7946(c+4r+qL4B&r3$^s-1KL7w?|>thwYsSjR1x9kf4=Ds z-jj@I&pB;JxZ4+67rZ_PTx#|KdYnGU9!1Do-TLMEc3504>D~d&0aWC0`lefTB=uy^ zfGsN^Jw@`L{tAzW)a?ZzQ*2Lb8k=%6p{W5%@+9AM98N1bWw5M%U%AFpyVO@b`23*e+2Iki4JXbzyC%?6MY2V_YeeAyrmDz^vLH^Z^3<^cNHY#{sC ziEG9Ul#Yk3?}FX;h`Q7vj#ED`wB4Wot9$s=2|mc0GT45?xPiLa8X!mjpmK6#yS*3H zA#2KfYqBH{igMMABvM7W!WP(k=9e13WPE;DzC@{}O#XrU)8|S@+a{n7?rKiH`8Z93JnUM->mnIu2QlHdnXFuq?yB9wXtE!WU z6slF#@bZk%GTjKqnnmzJv0hDLRaGi|hf5dI0&J?6OGC2sY!+;IOZtxB87@BQ_Q*ci z+#0QgIjWltAH4>)D1peBBE8LR(0DMuce$Rd7WlXp>MDkB7jroJmIHn~3y1yycN{lu zkkHhzcF&xK+1N-;-B~EkTlJU4v+Gu!v4lJ*dH5jW5Lk8>0ZMouI?}Gb-(Ekve w52Y?M4aTNPgkxqQyfhuA7pV0U7i6;Z1YZ|C$@f>lPXGV_07*qoM6N<$f(Hox0RR91 literal 0 HcmV?d00001 diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..840fd08af40fd9f471b64bc672a6cfd477312cc4 GIT binary patch literal 973 zcmV;;12X)HP)K=wWb{&z)k9DeQbAS(VOWqwWdvqWVbp`Bp*<88^-vL{FHxYB1ffA@ zRFZF6FGUo6QI>scWk_F|n5NbF?{(H$_rsYxvzs1RhS|My<~RRy?>%SEM*S7T0JkV7 zkT05mTh9R=KYa)4S-+5kb4$Ho zAXJsG!7L~w!%INUy+|16DnSEWFDh#n3UtOAzLQa-C60|zVg{Idx0D4AcT>O#9V zE)KYwtFGd%z}>;H_!#+ak2-tP3~V}O*Si|eI@ANXSwh{nV720siWv)~xfN(`>Ah-f zEO0GPoj+*=wwGA(=s$*qvj=kFAw377uF6XV)+MPCg;Ix>-`2lJSRmI+{>|;lzfV5^ zS!ZR=%7W50*CEpvsO^Z>_!ZcBPNsoO1t;bzWM(q3W0}Hf5WrofzVlQU)B~Au8hEL> zj~O@461Xh_NvjuM+2?_8ZMs;!*G-cw=4cBtTyZbkC}E~OY5?*sxK~Mew;(5*IXCUJ zc?$5iEDk1x_D+8VEAIiFl6~x&cQe;bi=(0?o8()&ZOU<=rQO6U5NwNlOA<5?T+SE>z)qLK4LIrawq%-5ztn{Dw3fO6k_v(_S>K2VD^Wo zs@toctC;FJZlW4b#O;ZNh?53_SskjkZK;dxXtQ%>rZRb7VRO}Pu4gW050YhFSQ`6* v76YrN`)}2U@O=ws7OaGsJ6U~n|04MZFH*M&C7o-X00000NkvXXu0mjf*J8&( literal 0 HcmV?d00001 diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ac81896e59225c958528f48ec051036f38846084 GIT binary patch literal 1052 zcmV+%1mpXOP)E)L zYKV)wTQZ}I@x}}Bn=DFj20t#0#%SVV9O60|W@L;dW^;qVCP~~5MO2rv`Jv=(>XMH8{0Lv3W?)RPlbW1)?A=az!BW}&n=~Ki z)UX_NzIGIIpc-3-B>T)2-u{v4TT2IrWiiqC6x%ilvwt3-$;Dh~x!|xA9j`sXlUoGX z-~UESXKJYP^=dUwZ;kI$f=Aa7hki*t7-;F_}MA2!MkV<mD3tLMqK2wDn4Z0kaVWB-SO6Z{zd5ILrh?yxF!ya2TowHf4!!FAv-K_yyLb1N4t# zHBrAUR(sheG1Uw0=z+3)4xbeYs4dgLK*dHXHpbQda882l%tr~c(?oNG)ad>-l;uV4 zifFMD_=cu6sNHt%cFF|DuJC5R_wm^^6uEFuyRs#?B5kBN3BKK z)K#oF`u zs*=2UbPsc=6Q9i0KPtPKS9Vibw5UV!_m)5qS3if(a&=Oanrr3R$Ek6$=DvHmC1;1F zstjJG$4&2_T=6aNB%xO*w6mpv$|4?JFVsa*_Iw3Hc&E5_BlfPx(14%?dR9J=0nO$fcRTze!ncdCoZZnN9szhg_)-Zf=Kqlk0 zvW0!}FkGIkGMR-G1zH;5R9|tMYIVb_Ctx~NZ7gf)IwX?NA1iJvg8g_@5_~ql9%$Ce z=Hc8$I6h{+Zh~FPz|j$yE0N&WLvv~PU>Gt5Y0?CH=nUi?Exzt+;LPgrRoFxdM$T_6 z*t`yd=U~Rj?^j_z9fRfUjl!~5HYYv=3Sb8(ZtSG8Q#LP#2@KfDgnR2fh%xb4CdJB> z&Om$`ydZuw=fYdPy%i4bhFhEEeC$tn`%6eJI*Xgj3!@6~a~u|yodpbPaA+U=@E1HB z6;H7_41L|s;)1Y^Uoc?*O*#*_ZLI3l?*k%H4d!L}{VV*^}H8pB}51?%_YBs>x| zUu$WAi&M^HgV<9Qs-{2TD?)_8;s3Sc84DVS}f z;o$Sa?z>l0tLek{b-QB~-BKgwK2J`;=Eqj)^Z#Io$Z!DdZP_;<%W+qS#q@Z%D?JTibSz zDpkYYN1?~9GX07&IjKE;^DCqsI5b6(mFclgc>VG6YYY|rwKOvi$G($F$-;8^C49{% z4yvmIo_}cVroSTCLdB=$O^?TA2RggBx&aOOp&=k?@Sb*A&f7Ls{;dB2gn&&eu9hSM P00000NkvXXu0mjf!4w9& literal 0 HcmV?d00001 diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a4af82c283217351d290437d5a91e420a2801c73 GIT binary patch literal 976 zcmV;>126oEP)jTVzrp24zE*qCLnWEGtqWDiy-C zh18JjeEz1_Z|C zd%&INz{`GM^bhd!m%p&2Nq~IM`{0c1=a>4K#Q)iGis&ayx zMNn7TRoL8G;63H~cpNjSmS`*1Xf~rNhQZ&eM#zb}$`#m_ZlLCdxMOju z+~EY~kQWaO1I?X4`va?F#`zo>cCJ=nw_N}p_KFEjoeEsq4m8~bZj${kP6JA_fs$t6 z{%bMW47-Hnd2QBt1Q;0=6PUjO$fWwTpnhD=$xXnUPjqV6#bop9>B$PLnLsOZxj>%V$P@hn1(aH z2BN&Gbtt_Vg}qFE^p>jqrs&%++h{HIY!P23Yj>tb2}J`U&ZDkXWa+&=nC!5c)h=YS zIC@p-ghim0wH)wEsZcljYGVmjYs>Ywbk|Lx;C27;b{ zaWQCuNVxEV8{kTAB#Oi+QDdTsi5MZ?hz3-20$F5=Cb$G}V~j*TJ4P9!U0b%cYrD3` zi*{_QEbZw&p1X6-`~H7V+xPT6=P#(LO3wI0Ty)XiO}CdGAK@s25sZ2aGUY{7m9Vgq z1}Dza+)E)7{Q z=5IRApv%qSR^rJij!&TqboLMk^JVJ<2GKbCk5ggc!NAnVr%0;wJ>=v+bliEI!I5)V z6}sHh6`vvyrqaTP&BT-A4SXR^T;QI6dgD`c_Mj6veR;gWx96$0(;u7(13(b?=CAaU z6oGh>U)s4Jn4x&!S}y`za*Y`LeFK}q{f9GW0N4~xbpS}f`RnOzO%r8B>}h1_JYorc z>*Dhkh7%g5_xN#nQB@@1l1uYHzfR<%*KqsTbrhSz{+Ecv_~NXF3Z4PVin#4XjK%2< z;MRB-)KySz=fF?g=%ei>$J%&ifwl@jX(2cJ5bydZokb#4X;7>+%D+s>VBt0^||eVcZJB;gp+ zq{3lkEj!k->j*=`c~%fjvbMWuEDjq7nmE*)=WZg3mXlXl~DE zIv@&I%t&)>cm~jk+HMC?;Jqe%L5{UyQ_?2~BRM@uKOz>#VMEgEm|ctt-Chlot4df= z1Mu_S(UWf7@H{N2#?dPo*(2XRI8psmwzKq*9 zjZ0D|VlQM%15b?koa5e^>MD5iIRpVq4xIE>|nH9;p0;{OX-+g z2cyPLD9Y3G+1;q6gOTD+KkuL9;SiF@b?sdoo5CC`_x$YHz_WD|4$I!jI@8Hle_+sK zl)2VRG~50ws8pAu6mZ+ai_3Up&13o|8Vph-Ra&po+|K1593>d^3`OyU2*(IUFv=M8 zSk394ncGjHfyR0^H&A5ET01v`M+CxLa?#$6%ZuB`V1!@