From 9fbaaf95eb65ebf034b8b54ccbee58b4634f5c3c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Apr 2022 14:11:30 -0400 Subject: [PATCH] chore(): simplify overlay attribute types (#25074) --- angular/src/directives/proxies.ts | 2 +- core/api.txt | 16 +- .../action-sheet/action-sheet-interface.ts | 7 +- core/src/components/action-sheet/readme.md | 10 +- core/src/components/alert/alert-interface.ts | 18 +- core/src/components/alert/readme.md | 22 +- core/src/components/item-sliding/readme.md | 4 +- .../components/loading/loading-interface.ts | 7 +- core/src/components/loading/readme.md | 9 +- core/src/components/modal/modal-interface.ts | 7 +- core/src/components/modal/readme.md | 9 +- .../src/components/picker/picker-interface.ts | 7 +- core/src/components/picker/readme.md | 9 +- .../components/picker/test/basic/index.html | 265 +++++++++--------- .../components/popover/popover-interface.ts | 7 +- core/src/components/popover/readme.md | 9 +- core/src/components/segment-button/readme.md | 14 +- core/src/components/select/readme.md | 28 +- core/src/components/toast/readme.md | 9 +- core/src/components/toast/toast-interface.ts | 7 +- 20 files changed, 221 insertions(+), 245 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 529ac88d23..2ef6ce4330 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1775,7 +1775,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane { /** * Expression to be called when the split-pane visibility has changed */ - ionSplitPaneVisible: EventEmitter>; + ionSplitPaneVisible: EventEmitter>; } diff --git a/core/api.txt b/core/api.txt index 08e3a24d30..2514eb9138 100644 --- a/core/api.txt +++ b/core/api.txt @@ -27,7 +27,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-action-sheet,prop,header,string | undefined,undefined,false,false -ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false +ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-action-sheet,prop,keyboardClose,boolean,true,false,false ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false @@ -72,7 +72,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,header,string | undefined,undefined,false,false -ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false +ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-alert,prop,inputs,AlertInput[],[],false,false ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false @@ -681,7 +681,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false ion-loading,prop,duration,number,0,false,false ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false +ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-loading,prop,keyboardClose,boolean,true,false,false ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false @@ -769,7 +769,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-modal,prop,handle,boolean | undefined,undefined,false,false -ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false +ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false ion-modal,prop,isOpen,boolean,false,false,false ion-modal,prop,keyboardClose,boolean,true,false,false @@ -848,7 +848,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false ion-picker,prop,duration,number,0,false,false ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false +ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-picker,prop,keyboardClose,boolean,true,false,false ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-picker,prop,mode,"ios" | "md",undefined,false,false @@ -886,7 +886,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa ion-popover,prop,dismissOnSelect,boolean,false,false,false ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-popover,prop,event,any,undefined,false,false -ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false +ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-popover,prop,isOpen,boolean,false,false,false ion-popover,prop,keyboardClose,boolean,true,false,false ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false @@ -1122,7 +1122,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false ion-segment-button,prop,mode,"ios" | "md",undefined,false,false ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false -ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false +ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false ion-segment-button,css-prop,--background ion-segment-button,css-prop,--background-checked ion-segment-button,css-prop,--background-focused @@ -1361,7 +1361,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false ion-toast,prop,duration,number,0,false,false ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,header,string | undefined,undefined,false,false -ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false +ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 1e19094da6..55c72eb01c 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode } from '../../interface'; export interface ActionSheetOptions { @@ -19,7 +17,10 @@ export interface ActionSheetOptions { leaveAnimation?: AnimationBuilder; } -export type ActionSheetAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ActionSheetAttributes = { [key: string]: any }; export interface ActionSheetButton { text?: string; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 5118dee711..d0051e663d 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -65,19 +65,13 @@ interface ActionSheetOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ActionSheetAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### ActionSheetAttributes - -```typescript -interface ActionSheetAttributes extends JSXBase.HTMLAttributes {} -``` - @@ -569,7 +563,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `ActionSheetAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index fbcde7c7a4..9cc650179d 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -23,7 +21,10 @@ export interface AlertOptions { leaveAnimation?: AnimationBuilder; } -export type AlertAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertAttributes = { [key: string]: any }; export interface AlertInput { type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; @@ -42,8 +43,15 @@ export interface AlertInput { tabindex?: number; } -export type AlertTextareaAttributes = JSXBase.TextareaHTMLAttributes; -export type AlertInputAttributes = JSXBase.InputHTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertTextareaAttributes = { [key: string]: any }; + +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertInputAttributes = { [key: string]: any }; export interface AlertButton { text: string; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index c99b964ae7..151a1d39f8 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -71,16 +71,11 @@ interface AlertInput { min?: string | number; max?: string | number; cssClass?: string | string[]; - attributes?: AlertInputAttributes | AlertTextareaAttributes; + attributes?: { [key: string]: any }; tabindex?: number; } ``` -### AlertInputAttributes - -```typescript -interface AlertInputAttributes extends JSXBase.InputHTMLAttributes {} -``` ### AlertOptions @@ -95,7 +90,7 @@ interface AlertOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; - htmlAttributes?: AlertAttributes; + htmlAttributes?: { [key: string]: any }; mode?: Mode; keyboardClose?: boolean; @@ -106,17 +101,6 @@ interface AlertOptions { } ``` -### AlertAttributes -```typescript -interface AlertAttributes extends JSXBase.HTMLAttributes {} -``` - -### AlertTextareaAttributes -```typescript -interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes {} -``` - - @@ -1784,7 +1768,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `undefined \| { [key: string]: any; }` | `undefined` | | `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index aa23ff1f7c..9a92a0a187 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -873,7 +873,7 @@ export default defineComponent({ ### `close() => Promise` -Close the sliding item. Items can also be closed from the [List](../list). +Close the sliding item. Items can also be closed from the [List](./list). #### Returns @@ -883,7 +883,7 @@ Type: `Promise` ### `closeOpened() => Promise` -Close all of the sliding items in the list. Items can also be closed from the [List](../list). +Close all of the sliding items in the list. Items can also be closed from the [List](./list). #### Returns diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index c9a80c5ad7..ed76940e29 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -21,4 +19,7 @@ export interface LoadingOptions { leaveAnimation?: AnimationBuilder; } -export type LoadingAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type LoadingAttributes = { [key: string]: any }; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index f72094383d..1d8af440fa 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -54,18 +54,13 @@ interface LoadingOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: LoadingAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### LoadingAttributes - -```typescript -interface LoadingAttributes extends JSXBase.HTMLAttributes {} -``` @@ -380,7 +375,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `LoadingAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` | diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts index 30e062a789..8e43390615 100644 --- a/core/src/components/modal/modal-interface.ts +++ b/core/src/components/modal/modal-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; export interface ModalOptions { @@ -33,4 +31,7 @@ export interface ModalAnimationOptions { backdropBreakpoint?: number; } -export type ModalAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ModalAttributes = { [key: string]: any }; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 2d9cec7d27..4438ca8494 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -122,7 +122,7 @@ interface ModalOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ModalAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -134,11 +134,6 @@ interface ModalOptions { } ``` -### ModalAttributes - -```typescript -interface ModalAttributes extends JSXBase.HTMLAttributes {} -``` ## Accessibility @@ -1383,7 +1378,7 @@ export default { | `breakpoints` | -- | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] | `number[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `handle` | `handle` | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. | `boolean \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `ModalAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `undefined \| { [key: string]: any; }` | `undefined` | | `initialBreakpoint` | `initial-breakpoint` | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. | `number \| undefined` | `undefined` | | `isOpen` | `is-open` | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. | `boolean` | `false` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index 58b9bcebd6..6fed197756 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode } from '../../interface'; export interface PickerOptions { @@ -19,7 +17,10 @@ export interface PickerOptions { leaveAnimation?: AnimationBuilder; } -export type PickerAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type PickerAttributes = { [key: string]: any }; export interface PickerButton { text?: string; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index c661f46422..7fedbad88d 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -62,18 +62,13 @@ interface PickerOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: PickerAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### PickerAttributes - -```typescript -interface PickerAttributes extends JSXBase.HTMLAttributes {} -``` @@ -235,7 +230,7 @@ export default { | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `PickerAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html index 0e5cd2d956..e166d44f17 100644 --- a/core/src/components/picker/test/basic/index.html +++ b/core/src/components/picker/test/basic/index.html @@ -1,133 +1,142 @@ - - - - Picker - Basic - - - - - - - - - - - - - - Show Picker - Show Custom Picker - - - - - - + + + + - + + + + Show Picker + Show Custom Picker + + + + + + + diff --git a/core/src/components/popover/popover-interface.ts b/core/src/components/popover/popover-interface.ts index 8e5c42480e..a70691b9c7 100644 --- a/core/src/components/popover/popover-interface.ts +++ b/core/src/components/popover/popover-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, ComponentProps, @@ -43,7 +41,10 @@ export interface PopoverOptions { triggerAction?: string; } -export type PopoverAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type PopoverAttributes = { [key: string]: any }; export type PopoverSize = 'cover' | 'auto'; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index f1300471e0..6d84a66a32 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -98,7 +98,7 @@ interface PopoverOptions { mode?: 'ios' | 'md'; keyboardClose?: boolean; id?: string; - htmlAttributes?: PopoverAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -112,11 +112,6 @@ interface PopoverOptions { } ``` -### PopoverAttributes - -```typescript -interface PopoverAttributes extends JSXBase.HTMLAttributes {} -``` ## Types @@ -962,7 +957,7 @@ export default { | `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` | | `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `HTMLAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `undefined \| { [key: string]: any; }` | `undefined` | | `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index 921a9d8b2f..f2fb8f0c3d 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -798,13 +798,13 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` | -| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | -| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------- | +| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` | +| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | +| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + ids++` | ## Shadow Parts diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 042a495455..37335a5c55 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -1367,20 +1367,20 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------- | -| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` | -| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` | -| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` | -| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](../alert), the [ion-action-sheet docs](../action-sheet) and the [ion-popover docs](../popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` | -| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` | -| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` | -| `value` | `value` | the value of the select. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------- | +| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` | +| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` | +| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` | +| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` | +| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` | +| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` | +| `value` | `value` | the value of the select. | `any` | `undefined` | ## Events diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index ead2432bd7..1b336f1887 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -42,7 +42,7 @@ interface ToastOptions { translucent?: boolean; animated?: boolean; icon?: string; - htmlAttributes?: ToastAttributes; + htmlAttributes?: { [key: string]: any }; color?: Color; mode?: Mode; @@ -54,11 +54,6 @@ interface ToastOptions { } ``` -### ToastAttributes -```typescript -interface ToastAttributes extends JSXBase.HTMLAttributes {} -``` - ## Accessibility ### Focus Management @@ -447,7 +442,7 @@ export default defineComponent({ | `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `undefined \| { [key: string]: any; }` | `undefined` | | `icon` | `icon` | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons | `string \| undefined` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | | `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 079bb2e568..64ce592051 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Color, Mode } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -24,7 +22,10 @@ export interface ToastOptions { leaveAnimation?: AnimationBuilder; } -export type ToastAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ToastAttributes = { [key: string]: any }; export interface ToastButton { text?: string;