javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Liam DeBeasi
2021-09-15 10:02:19 -04:00
committed by GitHub
parent 73a1daf0aa
commit bd96a81ff8
29 changed files with 268 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/action-sheet/action-sheet-interface.ts
View File

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

9
core/src/components/action-sheet/action-sheet.tsx
View File

@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h, readTask } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { ActionSheetAttributes, ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { Gesture } from '../../utils/gesture';
import { createButtonActiveGesture } from '../../utils/gesture/button-active';
import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@ -90,6 +90,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;
/**
* Additional attributes to pass to the action sheet.
*/
@Prop() htmlAttributes?: ActionSheetAttributes;
/**
* Emitted after the alert has presented.
*/
@ -228,6 +233,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
render() {
const { htmlAttributes } = this;
const mode = getIonMode(this);
const allButtons = this.getButtons();
const cancelButton = allButtons.find(b => b.role === 'cancel');
@ -238,6 +244,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
role="dialog"
aria-modal="true"
tabindex="-1"
{...htmlAttributes as any}
style={{
zIndex: `${20000 + this.overlayIndex}`,
}}

8
core/src/components/action-sheet/readme.md
View File

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

18
core/src/components/action-sheet/test/basic/e2e.ts
View File

@ -111,3 +111,21 @@ test('action-sheet:rtl: basic, scroll without cancel', async () => {
test('action-sheet:rtl: basic, custom backdrop', async () => {
await testActionSheet(DIRECTORY, '#customBackdrop', true);
});
// Attributes
test('action-sheet: htmlAttributes', async () => {
const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
await page.click('#basic');
await page.waitForSelector('#basic');
let toast = await page.find('ion-action-sheet');
expect(toast).not.toBe(null);
await toast.waitForVisible();
const attribute = await page.evaluate((el) => document.querySelector('ion-action-sheet').getAttribute('data-testid'));
expect(attribute).toEqual('basic-action-sheet');
});

3
core/src/components/action-sheet/test/basic/index.html
View File

@ -71,6 +71,9 @@
await openActionSheet({
header: "Albums",
subHeader: 'This is a sub header inside of an action sheet',
htmlAttributes: {
'data-testid': 'basic-action-sheet'
},
buttons: [{
text: 'Delete',
role: 'destructive',