From 01130e12e1d73bbf558da9d4dffd7122822ff39c Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 22 Nov 2023 11:07:43 -0500 Subject: [PATCH] fix(datetime): allow disabling datetime with prefer-wheel (#28511) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issue number: Internal --------- ## What is the current behavior? It is possible to navigate the columns of a disabled Datetime with `prefer-wheel` via the keyboard. https://github.com/ionic-team/ionic-framework/assets/14926794/9c9dafc4-4b77-45a6-a276-70201c5c3ea5 ## What is the new behavior? - Picker Column Internal has a disabled state that disables the full column - When a Datetime is disabled with `prefer-wheel`, the columns in the Datetime will be disabled - It is no longer possible to navigate the wheels in a disabled Datetime via the keyboard Comparison of native & Ionic components: ![Screenshot 2023-11-10 at 10 58 25 AM](https://github.com/ionic-team/ionic-framework/assets/14926794/e2bec1b3-30f8-4f64-8658-27b971884b7a) ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: ionitron Co-authored-by: Liam DeBeasi --- core/src/components.d.ts | 8 +++ core/src/components/datetime/datetime.tsx | 21 +++++--- .../datetime/test/disabled/datetime.spec.tsx | 39 +++++++++++++++ .../datetime/test/disabled/index.html | 5 ++ .../picker-column-internal.scss | 15 ++++-- .../picker-column-internal.tsx | 24 ++++++--- .../test/disabled/index.html | 27 +++++++--- .../disabled/picker-column-internal.e2e.ts | 46 +++++++++++++++--- ...led-column-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1934 bytes ...ed-column-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2034 bytes ...led-column-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 1532 bytes ...bled-column-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 2455 bytes ...led-column-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2625 bytes ...bled-column-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1985 bytes 14 files changed, 153 insertions(+), 32 deletions(-) create mode 100644 core/src/components/datetime/test/disabled/datetime.spec.tsx create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 81ccd9db23..14d14454de 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2043,6 +2043,10 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * If `true`, the user cannot interact with the picker. + */ + "disabled": boolean; /** * A list of options to be displayed in the picker */ @@ -6683,6 +6687,10 @@ declare namespace LocalJSX { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * If `true`, the user cannot interact with the picker. + */ + "disabled"?: boolean; /** * A list of options to be displayed in the picker */ diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index d2c6cd6d0b..599dd718d1 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1538,7 +1538,7 @@ export class Datetime implements ComponentInterface { } private renderCombinedDatePickerColumn() { - const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this; + const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this; const activePart = this.getActivePartsWithFallback(); @@ -1617,6 +1617,7 @@ export class Datetime implements ComponentInterface { { @@ -1728,7 +1729,7 @@ export class Datetime implements ComponentInterface { return []; } - const { workingParts } = this; + const { disabled, workingParts } = this; const activePart = this.getActivePartsWithFallback(); @@ -1736,6 +1737,7 @@ export class Datetime implements ComponentInterface { { @@ -1772,7 +1774,7 @@ export class Datetime implements ComponentInterface { return []; } - const { workingParts } = this; + const { disabled, workingParts } = this; const activePart = this.getActivePartsWithFallback(); @@ -1780,6 +1782,7 @@ export class Datetime implements ComponentInterface { { @@ -1815,7 +1818,7 @@ export class Datetime implements ComponentInterface { return []; } - const { workingParts } = this; + const { disabled, workingParts } = this; const activePart = this.getActivePartsWithFallback(); @@ -1823,6 +1826,7 @@ export class Datetime implements ComponentInterface { { @@ -1888,7 +1892,7 @@ export class Datetime implements ComponentInterface { } private renderHourPickerColumn(hoursData: PickerColumnItem[]) { - const { workingParts } = this; + const { disabled, workingParts } = this; if (hoursData.length === 0) return []; const activePart = this.getActivePartsWithFallback(); @@ -1896,6 +1900,7 @@ export class Datetime implements ComponentInterface { return ( { diff --git a/core/src/components/datetime/test/disabled/datetime.spec.tsx b/core/src/components/datetime/test/disabled/datetime.spec.tsx new file mode 100644 index 0000000000..9d6f6c8553 --- /dev/null +++ b/core/src/components/datetime/test/disabled/datetime.spec.tsx @@ -0,0 +1,39 @@ +import { h } from '@stencil/core'; +import { newSpecPage } from '@stencil/core/testing'; + +import { Datetime } from '../../../datetime/datetime'; +import { PickerColumnInternal } from '../../../picker-column-internal/picker-column-internal'; +import { PickerInternal } from '../../../picker-internal/picker-internal'; + +describe('ion-datetime disabled', () => { + beforeEach(() => { + // IntersectionObserver isn't available in test environment + const mockIntersectionObserver = jest.fn(); + mockIntersectionObserver.mockReturnValue({ + observe: () => null, + unobserve: () => null, + disconnect: () => null, + }); + global.IntersectionObserver = mockIntersectionObserver; + }); + + it('picker should be disabled in prefer wheel mode', async () => { + const page = await newSpecPage({ + components: [Datetime, PickerColumnInternal, PickerInternal], + template: () => ( + + ), + }); + + await page.waitForChanges(); + + const datetime = page.body.querySelector('ion-datetime')!; + const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal'); + + await expect(columns.length).toEqual(4); + + columns.forEach((column) => { + expect(column.disabled).toBe(true); + }); + }); +}); diff --git a/core/src/components/datetime/test/disabled/index.html b/core/src/components/datetime/test/disabled/index.html index 764d3a42ca..b0a8ac364b 100644 --- a/core/src/components/datetime/test/disabled/index.html +++ b/core/src/components/datetime/test/disabled/index.html @@ -66,6 +66,11 @@

Inline - No Default Value

+ +
+

Inline - Prefer Wheel

+ +
diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts index 9629f4345d..5e6464c22a 100644 --- a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts +++ b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts @@ -35,7 +35,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { * This behavior does not vary across modes/directions. */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('picker-column-internal: disabled'), () => { + test.describe(title('picker-column-internal: disabled items'), () => { test('all picker items should be enabled by default', async ({ page }) => { await page.setContent( ` @@ -55,9 +55,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - const pickerItems = page.locator( - 'ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)' - ); + const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, [disabled])'); expect(await pickerItems.count()).toBe(3); }); @@ -80,7 +78,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled'); + const disabledItem = page.locator('ion-picker-column-internal .picker-item[disabled]'); await expect(disabledItem).not.toBeEnabled(); }); test('disabled picker item should not be considered active', async ({ page }) => { @@ -130,7 +128,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.waitForChanges(); const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); - await expect(disabledItem).toHaveClass(/picker-item-disabled/); + await expect(disabledItem).toBeDisabled(); await expect(disabledItem).not.toHaveClass(/picker-item-active/); }); test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => { @@ -154,8 +152,42 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ); const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); - await expect(disabledItem).toHaveClass(/picker-item-disabled/); + await expect(disabledItem).toBeDisabled(); await expect(disabledItem).not.toHaveClass(/picker-item-active/); }); }); }); + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('picker-column-internal: disabled column rendering'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/picker-column-internal/test/disabled', config); + }); + + test('disabled column should not have visual regressions', async ({ page }) => { + const disabledColumn = page.locator('#column-disabled'); + await page.waitForChanges(); + + await expect(disabledColumn).toHaveScreenshot(screenshot('picker-internal-disabled-column')); + }); + }); +}); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('picker-column-internal: disabled column'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/picker-column-internal/test/disabled', config); + }); + + test('item in disabled column should not be interactive', async ({ page }) => { + const secondItem = page.locator('#column-disabled .picker-item:not(.picker-item-empty)').nth(1); + await expect(secondItem).toBeDisabled(); + }); + }); +}); diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2553d3aefd50ec61fef7d95fd0d1facab66ac9b4 GIT binary patch literal 1934 zcmV;92XXj`P)Px+NJ&INRCt{2UEOlqC>T8;$&#JKGkt(gruzoH?HhF8x;xv8&h!Dc)7d`3w%JW% z%a#P}Mdl+&mTV^m>;mV8pbrO*-~i&6DWw!50Y7&Fd?Jwz6^U%9NMu7rA{#0a*-(+l zhKfWsR3x&YA}+EtDiedt8DmgNAqJPF0k=RAAK6Q&JbbubHMJg(z8j{R{SO=$sT&k$J(iwc3sy?0NF{y!-~mP{Jm$s`o?YB z0(jD{lu|cGoO2XK;W`=qKJlm~9!8gCne%QUL6fBp0Kt{t>`0hJ*Gv3n&iW#JE`J(b z3>BK}FoQ$%>#rWFJVN#-&4!Bj$od*7IJcWL8!F->du}Zy%{oAQ#W)ru&DuiSwovME zc5Z40PfCfVX?pXtMNv$KKLt((f25SC>sk|-nyzfy7Msnc_e=}In;UDp86%bBt8+wB%gDO6R} z3s)2cX0sWTQfQjSO1jA9Kz~5{6qgcvb92+1ts9%TYTH(i7Z2@aS?Vx0)7Q({DI9Ar z%M$bXe8)EY{cu^q&`wjE6wX%qdO16VW9?Hl=5 zOtQAH6Pv9fv(LUS%rMt&#=oOkb5w5ZA3WDSBxhD;!`jmPy}3}#R{BOY>)LNFJD3V@ z7IjBr3tfH zc&UA#=BlcKQVMll?<9D&T7fZ!vMf)Ee`wF?fe9b}*=&Z*W`nkE@$m4_>mo`iQ51!q zjkguQ^C|DCrhqYqo0}V~Rx7k^tGk8(P*oKci-q;HFe#;)Dtf+L(kWw1uX1w|pL)dE zi28KX=whgdkL*-K9GaUn8!DnAo8R62d+s!NLsU7N$cBnUHdG|Cp&}}>&WB~Bl=$-H zFKo9BZf|e#>eZ{0!kq%AWbg0)!-o%l;QRM~007J7a+Jie;ZB7!vR}V`#ivi7Af>?d z^)((I9!?5p15Pyi`SWLd{P-v4^9t|Z|BlzMU!N4t7M$el{rx@Oy!j39-n~On6!`Y- z?~}sWf)lcD-@ZLcbH|3W1t-P$SOPwY0+F?|iEOAyWJ5(F8!8gnP{DruxJz?AAtI3t z6^U%9NMu6=>$)zQb~Y^_2^DD_RH%rr7{`L7*-#NxF?Ko`O&fxXqL|#$-82o_w$-QM zW?6=+st)d)d2thb}m+;Ducdjy)M z!Fs)hQc9nkd3AM#*=*Jew_2^xG>zV1OgUNCH8z_KIOkX{msWGws%GoD#%i_F2^|t7 zDD}8mDbI5(7KICth8+Xf2W;_=hmckU8CzdeK3b@jGj|*4*zz$)iw0kSr<0^J}b}vpNM8zw$o(Uj_<4=0$tbX-V)`gOE}f+Scih_LI~7#4bJ&aFUnPV z^qzNWpKSUGLpuPh*K7SZeH{%6XIa+UHa(rl=RimcO_ck>9)sgXnT z=0o67U*@UTHsNHo3|;3)$AHop(=ePFMk%FT#_1n9C0K>C)BAfK|@~07*qoM6N<$g1-U6VE_OC literal 0 HcmV?d00001 diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..da5bca77aa2e59cc4b1cda01f356c093672794e7 GIT binary patch literal 2034 zcmbW2YdjMQ1ID+OyHSqfh~-3Hmn||gw~1O7&00}vE<<8Sl(Ae2u~e>a=90PAVb-uN zOldByb8^lcGs`9S`z;$1SuS~fJfGhW&-48LU!IT8^AL~2fEBeA0RRBl`3(BPZlZSe zx4i7GXZzXA0044tozaf&w|ykVo#)h@)!X76?n*&soN9QJYiRFQ~=-tz_vw=Yb zVmiy(&^O&;u_?9KV7JB(kQd8~FWzVf{{?w}LAfxltr)1Zq>>ieKgb*8dHxMrG>c>R zxouQ_A2a|jv576QFreMhcykgk8hE~>g*N6~29&+-@6TgZ6_pkhVb#7kmvssRAqAF( z+Iy@*CN(8`N+jJ>YlBL?SBXx+NzKs`0@glZ0((4EA-g-6DCNgM#mW|D3Nmeob{l$A4ZhTt1`2$VhNL9Bi5E*fcK2Qoo z)>YX&SvMPMexy{z&4#1+Ol9MEy8bC=AV_61afq@1zc-VKRc}ug{fPe@Mkl1iGM5)-D~wmy-O=hZrhiUq z_B$kGC7)y?=J2X{7e;8uPBZbguJiwbxTVph%uz_Ptd16vN^4j?hOY93yUzP+9J~c` zBb=?u$jAtxP#OqcUe$Sdd4!h0pdiM;(2zJQ&DCRl5f=KyjcMF*W|rl_eok5X$pkKr zY?l+fz1MivY_UsfQ`6hqyD>SO)5GVxpq~HO`Z0hMrpKMQvr%`VDbfpOYU;7Rv~w91v*HORYOm6f z2^Yghe|n?hrICky%b(&l%b2sBB`6lePReYI3}TiH#%@Xb%*&tjkZ|ugj_@$OP6QH_5Xw5wei1zlp);E2`oy}0}l9BbQ&JC$)U;T%z9 zu;wpYvp9imZlwv(@=+$yAK1^0LPP#Z1Z@?jn7E>DjP_0prX!Ma3|-|?qGR`2G$H5HNfK;N zIv}bd)v+Do6hKnXEN0#rFWFnTTzOcsXFo6?q@$_r)x8@xCVS#XGeh-f{g=|pYU{+5 zF=LpqYC9*)lL9tD&T(zX4{j2!feG!e-wyZD1g`sGaoAv3=S(!w%?5e8PJFzg-i|(a z$8~;4z3WvQt#{@6jdestq#L>&vb#z_^rd`AolFy#{O+xhOgF|)sNseWA<=;bVh%dRvTp z6kFV^Txa#4-^IFeL15VMCvmAJ83k3~OX70MkH!zW2b zhN8sr@^5VF>^6pEd$+DpK~r5pNg@)bR$a?XV}%RqqBw}Fi>o8m)b10m_2l-N+f6mg s>P$2}<`;^NG7tE(jQ(%PtPt&hfJ{0qK=u-E_sap!r*Y`olfL)<2Pd=X9smFU literal 0 HcmV?d00001 diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7939d8892de633212e57105da5d8fa2e14dc05dd GIT binary patch literal 1532 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 S&~EY95P-EISaZ&}-}(n-kpX}J literal 0 HcmV?d00001 diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d94af6fdb64c9f11ca56e356fbec557aec52f9aa GIT binary patch literal 1985 zcmZ{l2~-l;8pm-Nqe4M*5;e=ESLm1{DppE4I^u#$Vp&<_Zl5(R`h3VJ}Yn<@AfhLLl-)eC?ugcu(5K9NSx>im`?Lj-Cstt`zkB*Fv zEqEp*Ok&?0KT+DWZ*=;!YWEf^Al{~*QZzQ)H#mRaoIBtPkVT{g=FkURFjtr`D{oC5 z<6T*rc&AJUBUJhC?mqHEmG@_%1bc`VTHOH}{KEW<4?Y5$c0nL%|2Q2Balo2o8m4<8 z_Y30mn90z$<{-V7&!LBNUCnfq?c2tjfT0%JC=3^@5Rh2JWOuA4gq*eU@eRWYDdpNR5a@o52ZP&jYHDgHlh*IUUW-Hxtl9j~`MJ6C z`Hl7UhL5biRgb&0)LfAAtbgZfQ9lO@#2`wnrMTQh9goD5c#u zJW=fVKp+sD!mX`cVZ6OhoxI+Xi*LbZd*dt$tdW3o+Z_jC{dQd8QZBx_dZx9{Qj_7N zeU1vZe&n2ZmLpS~3jeGRbW&9wU?}y!O%s2vvvb#=vt=J~y;sp*j;#N-lRuZFSc#rfX`qQoP8 zKqQLgOsq`xudS^iJbI>9s;h@08rK#-7W7Qq1s~YeoS8AwwEd}j54W%~TwPzrrhhizkll1`qJyyySUA= zw4wfccEM!9&`_&?z2~9ao}M14aN$X)kpYh}94UT&XUA3;3Zo)#EEYv?=H}+Q|6WyP zOn&^nRqJP03-UGDz?%O>VENe^JY0$Zt4rM|;tuHO*jN|TpN;d;hjbuqm{%U3kF?Su zkw~0M=eNc`e*Ce*dw6`jFT_HA*KJIv-%w~_`BT%`-jbt)zz>{M{~K-@L@--;tj>?^ ztvNByzFFk%gv|W%oh4 ziVL!;Di0&GlO;pfN@oRi{;jd$Td>^XFQhJds4pR~VRXK>wwA`&NJ@#0j%LDynKWxr z`{K$rt(qSps|kAi{vq8$2>L_+{ZD0ko88nMGK9zMAs}p6(}g1`ng+~SoJpQeb8VM7 zFw+V1sWrN7YymAg6F}C}(@Uh?g-=TM$_0P;mUA5u9=1j3{mod<2ZQ9tG-_dWb