From 5e47412e1fcceee96f85301082f787eccc460c87 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Tue, 28 Nov 2023 16:17:28 -0500 Subject: [PATCH] refactor(picker): rename internal picker components to ion-picker and ion-picker-column (#28589) --- .github/CODEOWNERS | 4 +- core/api.txt | 12 ++ core/src/components.d.ts | 110 +++++++++--------- core/src/components/datetime/datetime.scss | 2 +- core/src/components/datetime/datetime.tsx | 34 +++--- .../datetime/test/custom/index.html | 10 +- .../datetime/test/disabled/datetime.spec.tsx | 8 +- .../datetime/test/minmax/datetime.e2e.ts | 16 +-- .../test/prefer-wheel/datetime.e2e.ts | 4 +- .../test/presentation/datetime.e2e.ts | 2 +- .../datetime/test/values/datetime.e2e.ts | 12 +- core/src/components/datetime/utils/data.ts | 4 +- .../picker-column-internal.ios.scss | 1 - .../picker-column-interfaces.ts} | 0 .../picker-column/picker-column.ios.scss | 1 + .../picker-column.md.scss} | 2 +- .../picker-column.scss} | 2 +- .../picker-column.tsx} | 23 ++-- .../test/basic/index.html | 10 +- .../test/basic/picker-column.e2e.ts} | 22 ++-- .../test/disabled/index.html | 16 +-- .../test/disabled/picker-column.e2e.ts} | 80 ++++++------- ...ed-column-ios-ltr-Mobile-Chrome-linux.png} | Bin ...d-column-ios-ltr-Mobile-Firefox-linux.png} | Bin ...ed-column-ios-ltr-Mobile-Safari-linux.png} | Bin ...led-column-md-ltr-Mobile-Chrome-linux.png} | Bin ...ed-column-md-ltr-Mobile-Firefox-linux.png} | Bin ...led-column-md-ltr-Mobile-Safari-linux.png} | Bin ...-disabled-ios-ltr-Mobile-Chrome-linux.png} | Bin ...disabled-ios-ltr-Mobile-Firefox-linux.png} | Bin ...-disabled-ios-ltr-Mobile-Safari-linux.png} | Bin ...r-disabled-md-ltr-Mobile-Chrome-linux.png} | Bin ...-disabled-md-ltr-Mobile-Firefox-linux.png} | Bin ...r-disabled-md-ltr-Mobile-Safari-linux.png} | Bin .../picker-internal-interfaces.ts | 9 -- .../components/picker/picker-interfaces.ts | 9 ++ .../picker.ios.scss} | 4 +- .../picker.md.scss} | 4 +- .../picker.scss} | 8 +- .../picker-internal.tsx => picker/picker.tsx} | 41 +++---- .../picker.vars.scss} | 0 .../test/a11y/index.html | 8 +- .../test/a11y/picker.e2e.ts} | 4 +- .../test/basic/index.html | 42 +++---- .../test/basic/picker.e2e.ts} | 44 +++---- ...line-diff-ios-ltr-Mobile-Chrome-linux.png} | Bin ...ine-diff-ios-ltr-Mobile-Firefox-linux.png} | Bin ...line-diff-ios-ltr-Mobile-Safari-linux.png} | Bin ...nline-diff-md-ltr-Mobile-Chrome-linux.png} | Bin ...line-diff-md-ltr-Mobile-Firefox-linux.png} | Bin ...nline-diff-md-ltr-Mobile-Safari-linux.png} | Bin ...odal-diff-ios-ltr-Mobile-Chrome-linux.png} | Bin ...dal-diff-ios-ltr-Mobile-Firefox-linux.png} | Bin ...odal-diff-ios-ltr-Mobile-Safari-linux.png} | Bin ...modal-diff-md-ltr-Mobile-Chrome-linux.png} | Bin ...odal-diff-md-ltr-Mobile-Firefox-linux.png} | Bin ...modal-diff-md-ltr-Mobile-Safari-linux.png} | Bin ...over-diff-ios-ltr-Mobile-Chrome-linux.png} | Bin ...ver-diff-ios-ltr-Mobile-Firefox-linux.png} | Bin ...over-diff-ios-ltr-Mobile-Safari-linux.png} | Bin ...pover-diff-md-ltr-Mobile-Chrome-linux.png} | Bin ...over-diff-md-ltr-Mobile-Firefox-linux.png} | Bin ...pover-diff-md-ltr-Mobile-Safari-linux.png} | Bin .../test/keyboard-entry/picker.e2e.ts} | 40 +++---- .../angular/src/directives/proxies-list.ts | 2 + packages/angular/src/directives/proxies.ts | 58 +++++++++ .../standalone/src/directives/proxies.ts | 64 ++++++++++ packages/react/src/components/proxies.ts | 4 + packages/vue/src/proxies.ts | 17 +++ 69 files changed, 439 insertions(+), 294 deletions(-) delete mode 100644 core/src/components/picker-column-internal/picker-column-internal.ios.scss rename core/src/components/{picker-column-internal/picker-column-internal-interfaces.ts => picker-column/picker-column-interfaces.ts} (100%) create mode 100644 core/src/components/picker-column/picker-column.ios.scss rename core/src/components/{picker-column-internal/picker-column-internal.md.scss => picker-column/picker-column.md.scss} (71%) rename core/src/components/{picker-column-internal/picker-column-internal.scss => picker-column/picker-column.scss} (98%) rename core/src/components/{picker-column-internal/picker-column-internal.tsx => picker-column/picker-column.tsx} (95%) rename core/src/components/{picker-column-internal => picker-column}/test/basic/index.html (85%) rename core/src/components/{picker-column-internal/test/basic/picker-column-internal.e2e.ts => picker-column/test/basic/picker-column.e2e.ts} (76%) rename core/src/components/{picker-column-internal => picker-column}/test/disabled/index.html (81%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts => picker-column/test/disabled/picker-column.e2e.ts} (66%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Chrome-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-ios-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Firefox-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-ios-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-ios-ltr-Mobile-Safari-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-ios-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Chrome-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Firefox-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-column-md-ltr-Mobile-Safari-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Chrome-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-ios-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Firefox-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-ios-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Safari-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-ios-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Chrome-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-md-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Firefox-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-md-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Safari-linux.png => picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-md-ltr-Mobile-Safari-linux.png} (100%) delete mode 100644 core/src/components/picker-internal/picker-internal-interfaces.ts create mode 100644 core/src/components/picker/picker-interfaces.ts rename core/src/components/{picker-internal/picker-internal.ios.scss => picker/picker.ios.scss} (86%) rename core/src/components/{picker-internal/picker-internal.md.scss => picker/picker.md.scss} (82%) rename core/src/components/{picker-internal/picker-internal.scss => picker/picker.scss} (87%) rename core/src/components/{picker-internal/picker-internal.tsx => picker/picker.tsx} (93%) rename core/src/components/{picker-internal/picker-internal.vars.scss => picker/picker.vars.scss} (100%) rename core/src/components/{picker-internal => picker}/test/a11y/index.html (86%) rename core/src/components/{picker-internal/test/a11y/picker-internal.e2e.ts => picker/test/a11y/picker.e2e.ts} (74%) rename core/src/components/{picker-internal => picker}/test/basic/index.html (81%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts => picker/test/basic/picker.e2e.ts} (74%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-ios-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-ios-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-ios-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-md-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-md-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-inline-diff-md-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-ios-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-ios-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-ios-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-md-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-md-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-modal-diff-md-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-ios-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-ios-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-ios-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Chrome-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Chrome-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Firefox-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Firefox-linux.png} (100%) rename core/src/components/{picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Safari-linux.png => picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Safari-linux.png} (100%) rename core/src/components/{picker-internal/test/keyboard-entry/picker-internal.e2e.ts => picker/test/keyboard-entry/picker.e2e.ts} (79%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 01912c4da1..db19fc0c2a 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -51,8 +51,8 @@ /core/src/components/nav/ @sean-perkins /core/src/components/nav-link/ @sean-perkins -/core/src/components/picker-internal/ @liamdebeasi -/core/src/components/picker-column-internal/ @liamdebeasi +/core/src/components/picker/ @liamdebeasi +/core/src/components/picker-column/ @liamdebeasi /core/src/components/radio/ @amandaejohnston /core/src/components/radio-group/ @amandaejohnston diff --git a/core/api.txt b/core/api.txt index 76ad30213e..beefc2ff7c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -906,6 +906,18 @@ ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second ion-note,prop,mode,"ios" | "md",undefined,false,false ion-note,css-prop,--color +ion-picker,shadow +ion-picker,prop,mode,"ios" | "md",undefined,false,false +ion-picker,event,ionInputModeChange,PickerChangeEventDetail,true + +ion-picker-column,shadow +ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,'primary',false,true +ion-picker-column,prop,disabled,boolean,false,false,false +ion-picker-column,prop,items,PickerColumnItem[],[],false,false +ion-picker-column,prop,mode,"ios" | "md",undefined,false,false +ion-picker-column,prop,value,number | string | undefined,undefined,false,false +ion-picker-column,event,ionChange,PickerColumnItem,true + ion-picker-legacy,scoped ion-picker-legacy,prop,animated,boolean,true,false,false ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 07ffad0592..7e3d72661b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -23,8 +23,8 @@ import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface"; import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface"; import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface"; import { ViewController } from "./components/nav/view-controller"; -import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; -import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; +import { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; +import { PickerColumnItem } from "./components/picker-column/picker-column-interfaces"; import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; @@ -59,8 +59,8 @@ export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface"; export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface"; export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface"; export { ViewController } from "./components/nav/view-controller"; -export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces"; -export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces"; +export { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; +export { PickerColumnItem } from "./components/picker-column/picker-column-interfaces"; export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; @@ -1948,7 +1948,14 @@ export namespace Components { */ "mode"?: "ios" | "md"; } - interface IonPickerColumnInternal { + interface IonPicker { + "exitInputMode": () => Promise; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + } + interface IonPickerColumn { /** * 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). */ @@ -1979,13 +1986,6 @@ export namespace Components { */ "value"?: string | number; } - interface IonPickerInternal { - "exitInputMode": () => Promise; - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - } interface IonPickerLegacy { /** * If `true`, the picker will animate. @@ -3322,13 +3322,13 @@ export interface IonNavCustomEvent extends CustomEvent { detail: T; target: HTMLIonNavElement; } -export interface IonPickerColumnInternalCustomEvent extends CustomEvent { +export interface IonPickerCustomEvent extends CustomEvent { detail: T; - target: HTMLIonPickerColumnInternalElement; + target: HTMLIonPickerElement; } -export interface IonPickerInternalCustomEvent extends CustomEvent { +export interface IonPickerColumnCustomEvent extends CustomEvent { detail: T; - target: HTMLIonPickerInternalElement; + target: HTMLIonPickerColumnElement; } export interface IonPickerLegacyCustomEvent extends CustomEvent { detail: T; @@ -4019,39 +4019,39 @@ declare global { prototype: HTMLIonNoteElement; new (): HTMLIonNoteElement; }; - interface HTMLIonPickerColumnInternalElementEventMap { + interface HTMLIonPickerElementEventMap { + "ionInputModeChange": PickerChangeEventDetail; + } + interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLIonPickerElement: { + prototype: HTMLIonPickerElement; + new (): HTMLIonPickerElement; + }; + interface HTMLIonPickerColumnElementEventMap { "ionChange": PickerColumnItem; } - interface HTMLIonPickerColumnInternalElement extends Components.IonPickerColumnInternal, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } - var HTMLIonPickerColumnInternalElement: { - prototype: HTMLIonPickerColumnInternalElement; - new (): HTMLIonPickerColumnInternalElement; - }; - interface HTMLIonPickerInternalElementEventMap { - "ionInputModeChange": PickerInternalChangeEventDetail; - } - interface HTMLIonPickerInternalElement extends Components.IonPickerInternal, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLIonPickerInternalElement: { - prototype: HTMLIonPickerInternalElement; - new (): HTMLIonPickerInternalElement; + var HTMLIonPickerColumnElement: { + prototype: HTMLIonPickerColumnElement; + new (): HTMLIonPickerColumnElement; }; interface HTMLIonPickerLegacyElementEventMap { "ionPickerDidPresent": void; @@ -4645,8 +4645,8 @@ declare global { "ion-nav": HTMLIonNavElement; "ion-nav-link": HTMLIonNavLinkElement; "ion-note": HTMLIonNoteElement; - "ion-picker-column-internal": HTMLIonPickerColumnInternalElement; - "ion-picker-internal": HTMLIonPickerInternalElement; + "ion-picker": HTMLIonPickerElement; + "ion-picker-column": HTMLIonPickerColumnElement; "ion-picker-legacy": HTMLIonPickerLegacyElement; "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement; "ion-popover": HTMLIonPopoverElement; @@ -6579,7 +6579,14 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; } - interface IonPickerColumnInternal { + interface IonPicker { + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; + "onIonInputModeChange"?: (event: IonPickerCustomEvent) => void; + } + interface IonPickerColumn { /** * 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). */ @@ -6603,19 +6610,12 @@ declare namespace LocalJSX { /** * Emitted when the value has changed. */ - "onIonChange"?: (event: IonPickerColumnInternalCustomEvent) => void; + "onIonChange"?: (event: IonPickerColumnCustomEvent) => void; /** * The selected option in the picker. */ "value"?: string | number; } - interface IonPickerInternal { - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent) => void; - } interface IonPickerLegacy { /** * If `true`, the picker will animate. @@ -8084,8 +8084,8 @@ declare namespace LocalJSX { "ion-nav": IonNav; "ion-nav-link": IonNavLink; "ion-note": IonNote; - "ion-picker-column-internal": IonPickerColumnInternal; - "ion-picker-internal": IonPickerInternal; + "ion-picker": IonPicker; + "ion-picker-column": IonPickerColumn; "ion-picker-legacy": IonPickerLegacy; "ion-picker-legacy-column": IonPickerLegacyColumn; "ion-popover": IonPopover; @@ -8181,8 +8181,8 @@ declare module "@stencil/core" { "ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes; "ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes; "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes; - "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes; - "ion-picker-internal": LocalJSX.IonPickerInternal & JSXBase.HTMLAttributes; + "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes; + "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes; "ion-picker-legacy": LocalJSX.IonPickerLegacy & JSXBase.HTMLAttributes; "ion-picker-legacy-column": LocalJSX.IonPickerLegacyColumn & JSXBase.HTMLAttributes; "ion-popover": LocalJSX.IonPopover & JSXBase.HTMLAttributes; diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 5d6d65b512..db00e15c82 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -34,7 +34,7 @@ * widest item in the column. Setting a minimum * width avoids this layout shifting. */ -ion-picker-column-internal { +ion-picker-column { min-width: 26px; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 878483ca50..e7752a22a8 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -9,7 +9,7 @@ import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward import { getIonMode } from '../../global/ionic-global'; import type { Color, Mode, StyleEventDetail } from '../../interface'; -import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces'; +import type { PickerColumnItem } from '../picker-column/picker-column-interfaces'; import type { DatetimePresentation, @@ -1527,7 +1527,7 @@ export class Datetime implements ComponentInterface { forcePresentation === 'time-date' ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)] : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)]; - return {renderArray}; + return {renderArray}; } private renderDatePickerColumns(forcePresentation: string) { @@ -1613,7 +1613,7 @@ export class Datetime implements ComponentInterface { : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`; return ( - + > ); } @@ -1733,7 +1733,7 @@ export class Datetime implements ComponentInterface { const activePart = this.getActivePartsWithFallback(); return ( - + > ); } @@ -1778,7 +1778,7 @@ export class Datetime implements ComponentInterface { const activePart = this.getActivePartsWithFallback(); return ( - + > ); } private renderYearPickerColumn(years: PickerColumnItem[]) { @@ -1822,7 +1822,7 @@ export class Datetime implements ComponentInterface { const activePart = this.getActivePartsWithFallback(); return ( - + > ); } private renderTimePickerColumns(forcePresentation: string) { @@ -1897,7 +1897,7 @@ export class Datetime implements ComponentInterface { const activePart = this.getActivePartsWithFallback(); return ( - + > ); } private renderMinutePickerColumn(minutesData: PickerColumnItem[]) { @@ -1926,7 +1926,7 @@ export class Datetime implements ComponentInterface { const activePart = this.getActivePartsWithFallback(); return ( - + > ); } private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) { @@ -1958,7 +1958,7 @@ export class Datetime implements ComponentInterface { const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale); return ( - + > ); } @@ -2345,7 +2345,7 @@ export class Datetime implements ComponentInterface { * This will correctly scroll the element position to the correct time value, * before the popover is fully presented. */ - const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column-internal'); + const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column'); // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column cols.forEach((col) => col.scrollActiveItemIntoView()); }} diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index f6912ed8be..a76f458246 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -52,28 +52,28 @@ } /* - The second selectors that target ion-picker(-column)-internal + The second selectors that target ion-picker(-column) directly are for styling the time picker. This is currently undocumented usage. */ .custom-grid-wheel, - ion-picker-internal { + ion-picker { --wheel-highlight-background: rgb(218, 216, 255); --wheel-fade-background-rgb: 245, 235, 247; } - ion-picker-internal { + ion-picker { background-color: rgb(245, 235, 247); } .custom-grid-wheel::part(wheel-item), - ion-picker-column-internal::part(wheel-item) { + ion-picker-column::part(wheel-item) { color: rgb(255, 134, 154); } .custom-grid-wheel::part(wheel-item active), - ion-picker-column-internal::part(wheel-item active) { + ion-picker-column::part(wheel-item active) { color: rgb(128, 30, 171); } diff --git a/core/src/components/datetime/test/disabled/datetime.spec.tsx b/core/src/components/datetime/test/disabled/datetime.spec.tsx index 9d6f6c8553..8e6abe2d3a 100644 --- a/core/src/components/datetime/test/disabled/datetime.spec.tsx +++ b/core/src/components/datetime/test/disabled/datetime.spec.tsx @@ -2,8 +2,8 @@ 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'; +import { PickerColumn } from '../../../picker-column/picker-column'; +import { Picker } from '../../../picker/picker'; describe('ion-datetime disabled', () => { beforeEach(() => { @@ -19,7 +19,7 @@ describe('ion-datetime disabled', () => { it('picker should be disabled in prefer wheel mode', async () => { const page = await newSpecPage({ - components: [Datetime, PickerColumnInternal, PickerInternal], + components: [Datetime, PickerColumn, Picker], template: () => ( ), @@ -28,7 +28,7 @@ describe('ion-datetime disabled', () => { await page.waitForChanges(); const datetime = page.body.querySelector('ion-datetime')!; - const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal'); + const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column'); await expect(columns.length).toEqual(4); diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index ae25f71f49..a4ff72bcd1 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts @@ -109,12 +109,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => await page.click('.time-body'); await ionPopoverDidPresent.next(); - const hours = page.locator( - 'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)' - ); - const minutes = page.locator( - 'ion-popover ion-picker-column-internal:nth-child(2) .picker-item:not(.picker-item-empty)' - ); + const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)'); + const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) .picker-item:not(.picker-item-empty)'); expect(await hours.count()).toBe(12); expect(await minutes.count()).toBe(60); @@ -219,7 +215,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => ); const hourPickerItems = page.locator( - 'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)' + 'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)' ); await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']); }); @@ -243,7 +239,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => ); const hourPickerItems = page.locator( - 'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)' + 'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)' ); await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']); }); @@ -360,9 +356,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => await ionPopoverDidPresent.next(); - const hours = page.locator( - 'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)' - ); + const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)'); await expect(await hours.count()).toBe(4); }); diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts index f00c313889..79ad3c64a6 100644 --- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts +++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts @@ -308,7 +308,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await page.waitForSelector('.datetime-ready'); - const columns = page.locator('ion-picker-column-internal'); + const columns = page.locator('ion-picker-column'); await expect(columns.nth(0)).toHaveClass(/month-column/); await expect(columns.nth(1)).toHaveClass(/day-column/); @@ -329,7 +329,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await page.waitForSelector('.datetime-ready'); - const columns = page.locator('ion-picker-column-internal'); + const columns = page.locator('ion-picker-column'); await expect(columns.nth(0)).toHaveClass(/day-column/); await expect(columns.nth(1)).toHaveClass(/month-column/); diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index 7bff588cab..9462cc2af4 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -227,7 +227,7 @@ class TimePickerFixture { } async expectTime(hour: number, minute: number, ampm: string) { - const pickerColumns = this.timePicker.locator('ion-picker-column-internal'); + const pickerColumns = this.timePicker.locator('ion-picker-column'); await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour); await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute); diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts index e785e484e0..4039dc93fe 100644 --- a/core/src/components/datetime/test/values/datetime.e2e.ts +++ b/core/src/components/datetime/test/values/datetime.e2e.ts @@ -51,7 +51,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'); + const items = page.locator('ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'); await expect(items).toHaveText(['1', '2', '3']); }); test('should render correct minutes', async ({ page }) => { @@ -62,7 +62,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'); + const items = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)'); await expect(items).toHaveText(['01', '02', '03']); }); test('should adjust default parts for allowed hour and minute values', async ({ page }) => { @@ -93,13 +93,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.waitForSelector('.datetime-ready'); - const minuteItems = page.locator( - 'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)' - ); + const minuteItems = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)'); await expect(minuteItems).toHaveText(['00', '15', '30', '45']); await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/); - const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)'); + const hourItems = page.locator('ion-picker-column:nth-of-type(1) .picker-item:not(.picker-item-empty)'); await expect(hourItems).toHaveText(['2']); await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/); @@ -107,7 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => * Since the allowed hour is 2AM, the time period * should switch from PM to AM. */ - const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)'); + const ampmItems = page.locator('ion-picker-column:nth-of-type(3) .picker-item:not(.picker-item-empty)'); await expect(ampmItems).toHaveText(['AM', 'PM']); await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/); }); diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts index 8841e58ffc..24f8e4a81a 100644 --- a/core/src/components/datetime/utils/data.ts +++ b/core/src/components/datetime/utils/data.ts @@ -1,5 +1,5 @@ import type { Mode } from '../../../interface'; -import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces'; +import type { PickerColumnItem } from '../../picker-column/picker-column-interfaces'; import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface'; import { isAfter, isBefore, isSameDay } from './comparison'; @@ -380,7 +380,7 @@ export const getMonthColumnData = ( * @param minParts The minimum bound on the date that can be returned * @param maxParts The maximum bound on the date that can be returned * @param dayValues The allowed date values - * @returns Date data to be used in ion-picker-column-internal + * @returns Date data to be used in ion-picker-column */ export const getDayColumnData = ( locale: string, diff --git a/core/src/components/picker-column-internal/picker-column-internal.ios.scss b/core/src/components/picker-column-internal/picker-column-internal.ios.scss deleted file mode 100644 index cd7baef3ec..0000000000 --- a/core/src/components/picker-column-internal/picker-column-internal.ios.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./picker-column-internal.scss"; diff --git a/core/src/components/picker-column-internal/picker-column-internal-interfaces.ts b/core/src/components/picker-column/picker-column-interfaces.ts similarity index 100% rename from core/src/components/picker-column-internal/picker-column-internal-interfaces.ts rename to core/src/components/picker-column/picker-column-interfaces.ts diff --git a/core/src/components/picker-column/picker-column.ios.scss b/core/src/components/picker-column/picker-column.ios.scss new file mode 100644 index 0000000000..0fd8ad9b6e --- /dev/null +++ b/core/src/components/picker-column/picker-column.ios.scss @@ -0,0 +1 @@ +@import "./picker-column.scss"; diff --git a/core/src/components/picker-column-internal/picker-column-internal.md.scss b/core/src/components/picker-column/picker-column.md.scss similarity index 71% rename from core/src/components/picker-column-internal/picker-column-internal.md.scss rename to core/src/components/picker-column/picker-column.md.scss index 144947e88c..2247139a83 100644 --- a/core/src/components/picker-column-internal/picker-column-internal.md.scss +++ b/core/src/components/picker-column/picker-column.md.scss @@ -1,4 +1,4 @@ -@import "./picker-column-internal.scss"; +@import "./picker-column.scss"; @import "../../themes/ionic.globals.md"; :host .picker-item-active { diff --git a/core/src/components/picker-column-internal/picker-column-internal.scss b/core/src/components/picker-column/picker-column.scss similarity index 98% rename from core/src/components/picker-column-internal/picker-column-internal.scss rename to core/src/components/picker-column/picker-column.scss index 7d6eef98cc..3e0a1937ae 100644 --- a/core/src/components/picker-column-internal/picker-column-internal.scss +++ b/core/src/components/picker-column/picker-column.scss @@ -1,6 +1,6 @@ @import "../../themes/ionic.globals"; -// Picker Internal +// Picker Column // -------------------------------------------------- :host { diff --git a/core/src/components/picker-column-internal/picker-column-internal.tsx b/core/src/components/picker-column/picker-column.tsx similarity index 95% rename from core/src/components/picker-column-internal/picker-column-internal.tsx rename to core/src/components/picker-column/picker-column.tsx index 73b8dd3435..f615eed530 100644 --- a/core/src/components/picker-column-internal/picker-column-internal.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -7,33 +7,32 @@ import { createColorClasses } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; import type { Color } from '../../interface'; -import type { PickerInternalCustomEvent } from '../picker-internal/picker-internal-interfaces'; +import type { PickerCustomEvent } from '../picker/picker-interfaces'; -import type { PickerColumnItem } from './picker-column-internal-interfaces'; +import type { PickerColumnItem } from './picker-column-interfaces'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. - * @internal */ @Component({ - tag: 'ion-picker-column-internal', + tag: 'ion-picker-column', styleUrls: { - ios: 'picker-column-internal.ios.scss', - md: 'picker-column-internal.md.scss', + ios: 'picker-column.ios.scss', + md: 'picker-column.md.scss', }, shadow: true, }) -export class PickerColumnInternal implements ComponentInterface { +export class PickerColumn implements ComponentInterface { private destroyScrollListener?: () => void; private isScrolling = false; private scrollEndCallback?: () => void; private isColumnVisible = false; - private parentEl?: HTMLIonPickerInternalElement | null; + private parentEl?: HTMLIonPickerElement | null; private canExitInputMode = true; @State() isActive = false; - @Element() el!: HTMLIonPickerColumnInternalElement; + @Element() el!: HTMLIonPickerColumnElement; /** * If `true`, the user cannot interact with the picker. @@ -123,7 +122,7 @@ export class PickerColumnInternal implements ComponentInterface { }; new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el); - const parentEl = (this.parentEl = this.el.closest('ion-picker-internal') as HTMLIonPickerInternalElement | null); + const parentEl = (this.parentEl = this.el.closest('ion-picker') as HTMLIonPickerElement | null); if (parentEl !== null) { // TODO(FW-2832): type parentEl.addEventListener('ionInputModeChange', (ev: any) => this.inputModeChange(ev)); @@ -215,7 +214,7 @@ export class PickerColumnInternal implements ComponentInterface { * needs to check if it is the one being made available * for text entry. */ - private inputModeChange = (ev: PickerInternalCustomEvent) => { + private inputModeChange = (ev: PickerCustomEvent) => { if (!this.numericInput) { return; } @@ -428,7 +427,7 @@ export class PickerColumnInternal implements ComponentInterface { * exportparts is needed so ion-datetime can expose the parts * from two layers of shadow nesting. If this causes problems, * the attribute can be moved to datetime.tsx and set on every - * instance of ion-picker-column-internal there instead. + * instance of ion-picker-column there instead. */ return ( diff --git a/core/src/components/picker-column-internal/test/basic/index.html b/core/src/components/picker-column/test/basic/index.html similarity index 85% rename from core/src/components/picker-column-internal/test/basic/index.html rename to core/src/components/picker-column/test/basic/index.html index bce7cc8898..5ffad89f8a 100644 --- a/core/src/components/picker-column-internal/test/basic/index.html +++ b/core/src/components/picker-column/test/basic/index.html @@ -2,7 +2,7 @@ - Picker Column Internal - Basic + Picker Column - Basic @@ -39,16 +39,16 @@ - Picker Column Internal - Basic + Picker Column - Basic

Default

- - - + + +
diff --git a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts b/core/src/components/picker-column/test/basic/picker-column.e2e.ts similarity index 76% rename from core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts rename to core/src/components/picker-column/test/basic/picker-column.e2e.ts index 5bda52a79a..a80d1036c8 100644 --- a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts +++ b/core/src/components/picker-column/test/basic/picker-column.e2e.ts @@ -5,33 +5,33 @@ import { configs, test } from '@utils/test/playwright'; * This behavior does not vary across modes/directions. */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('picker-column-internal'), () => { + test.describe(title('picker-column'), () => { test.beforeEach(async ({ page }) => { - await page.goto('/src/components/picker-column-internal/test/basic', config); + await page.goto('/src/components/picker-column/test/basic', config); }); test('should render a picker item for each item', async ({ page }) => { - const columns = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty)'); + const columns = page.locator('ion-picker-column .picker-item:not(.picker-item-empty)'); await expect(columns).toHaveCount(24); }); test('should render 6 empty picker items', async ({ page }) => { - const columns = page.locator('ion-picker-column-internal .picker-item-empty'); + const columns = page.locator('ion-picker-column .picker-item-empty'); await expect(columns).toHaveCount(6); }); test('should not have an active item when value is not set', async ({ page }) => { - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + const activeColumn = page.locator('ion-picker-column .picker-item-active'); await expect(activeColumn).toHaveCount(0); }); test('should have an active item when value is set', async ({ page }) => { - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + await page.locator('#default').evaluate((el: HTMLIonPickerColumnElement) => { el.value = '12'; }); await page.waitForChanges(); - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + const activeColumn = page.locator('ion-picker-column .picker-item-active'); expect(activeColumn).not.toBeNull(); }); @@ -40,12 +40,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test.skip('scrolling should change the active item', async ({ page, skip }) => { skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + await page.locator('#default').evaluate((el: HTMLIonPickerColumnElement) => { el.scrollTop = 801; }); await page.waitForChanges(); - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + const activeColumn = page.locator('ion-picker-column .picker-item-active'); expect(await activeColumn?.innerText()).toEqual('23'); }); @@ -55,7 +55,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => const ionChangeSpy = await page.spyOnEvent('ionChange'); - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + await page.locator('#default').evaluate((el: HTMLIonPickerColumnElement) => { el.value = '12'; }); @@ -68,7 +68,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => const ionChangeSpy = await page.spyOnEvent('ionChange'); - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + await page.locator('#default').evaluate((el: HTMLIonPickerColumnElement) => { el.scrollTo(0, el.scrollHeight); }); await page.waitForChanges(); diff --git a/core/src/components/picker-column-internal/test/disabled/index.html b/core/src/components/picker-column/test/disabled/index.html similarity index 81% rename from core/src/components/picker-column-internal/test/disabled/index.html rename to core/src/components/picker-column/test/disabled/index.html index fbfad1c540..89090228f4 100644 --- a/core/src/components/picker-column-internal/test/disabled/index.html +++ b/core/src/components/picker-column/test/disabled/index.html @@ -2,7 +2,7 @@ - Picker Column Internal - Basic + Picker Column - Basic @@ -39,22 +39,22 @@ - Picker Column Internal - Disabled + Picker Column - Disabled

Even items disabled

- - - + + +

Column disabled

- - - + + +
diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts similarity index 66% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts rename to core/src/components/picker-column/test/disabled/picker-column.e2e.ts index 5e6464c22a..a4a93d47d5 100644 --- a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts +++ b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts @@ -5,16 +5,16 @@ import { configs, test } from '@utils/test/playwright'; * This behavior does not vary across directions. */ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('picker-column-internal: disabled rendering'), () => { + test.describe(title('picker-column: disabled rendering'), () => { test('should not have visual regressions', async ({ page }) => { await page.setContent( ` - - - + + +