feat(action-sheet, loading, modal, picker, popover): pass HTML attributes to host element (#23929)

core/src/components/picker/picker-interface.ts

@@ -1,3 +1,5 @@
+import { JSXBase } from '@stencil/core/internal';
+
 import { AnimationBuilder, Mode } from '../../interface';
 
 export interface PickerOptions {
@@ -11,11 +13,14 @@ export interface PickerOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: PickerAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 
+export interface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+
 export interface PickerButton {
   text?: string;
   role?: string;

core/src/components/picker/picker.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
+import { AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerAttributes, PickerButton, PickerColumn } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
@@ -81,6 +81,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
+  /**
+   * Additional attributes to pass to the picker.
+   */
+  @Prop() htmlAttributes?: PickerAttributes;
+
   /**
    * Emitted after the picker has presented.
    */
@@ -213,11 +218,16 @@ export class Picker implements ComponentInterface, OverlayInterface {
   }
 
   render() {
+    const { htmlAttributes } = this;
     const mode = getIonMode(this);
     return (
       <Host
         aria-modal="true"
         tabindex="-1"
+        {...htmlAttributes as any}
+        style={{
+          zIndex: `${20000 + this.overlayIndex}`
+        }}
         class={{
           [mode]: true,
 
@@ -226,9 +236,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
           ...getClassMap(this.cssClass)
         }}
-        style={{
-          zIndex: `${20000 + this.overlayIndex}`
-        }}
         onIonBackdropTap={this.onBackdropTap}
         onIonPickerWillDismiss={this.dispatchCancelHandler}
       >

core/src/components/picker/readme.md

@@ -62,12 +62,19 @@ interface PickerOptions {
   mode?: Mode;
   keyboardClose?: boolean;
   id?: string;
+  htmlAttributes?: PickerAttributes;
 
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
 }
 ```
 
+### PickerAttributes
+
+```typescript
+interface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
 <!-- Auto Generated Below -->
 
 
@@ -228,6 +235,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` |
 | `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` |

core/src/components/picker/test/basic/index.html

@@ -115,6 +115,9 @@
             value: '12'
           }]
         }],
+        htmlAttributes: {
+          'data-testid': 'basic-picker'
+        }
         cssClass: customClass
       });