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

feat(action-sheet, alert): add id to AlertButton and ActionSheetButton (#18992)

Browse Source 
resolves #22959

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
This commit is contained in:
Devin Shoemaker
2021-06-29 13:17:19 -05:00
committed by GitHub
parent bdc1f2360d
commit 9e24a0b493
20 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,5 +21,6 @@ export interface ActionSheetButton {
role?: 'cancel' | 'destructive' | 'selected' | string;
icon?: string;
cssClass?: string | string[];
id?: string;
handler?: () => boolean | void | Promise<boolean | void>;
}

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

@ -264,7 +264,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
</div>
}
{buttons.map(b =>
<button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
<button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
<span class="action-sheet-button-inner">
{b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
{b.text}

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

@ -63,6 +63,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
@ -120,6 +121,7 @@ async function presentActionSheet() {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
@ -234,6 +236,7 @@ export const ActionSheetExample: React.FC = () => {
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
@ -291,6 +294,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
@ -363,6 +367,7 @@ export default defineComponent({
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked')
},

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

@ -58,6 +58,10 @@
--ion-backdrop-opacity: 1;
}
#delete-button {
color: #eb445a;
}
</style>
<script>
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@ -75,6 +79,7 @@
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}

1
core/src/components/action-sheet/usage/angular.md
View File

@ -19,6 +19,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}

1
core/src/components/action-sheet/usage/javascript.md
View File

@ -8,6 +8,7 @@ async function presentActionSheet() {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}

1
core/src/components/action-sheet/usage/react.md
View File

@ -72,6 +72,7 @@ export const ActionSheetExample: React.FC = () => {
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}

1
core/src/components/action-sheet/usage/stencil.md
View File

@ -16,6 +16,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}

1
core/src/components/action-sheet/usage/vue.md
View File

@ -21,6 +21,7 @@ export default defineComponent({
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked')
},

1
core/src/components/alert/alert-interface.ts
View File

@ -46,5 +46,6 @@ export interface AlertButton {
text: string;
role?: string;
cssClass?: string | string[];
id?: string;
handler?: (value: any) => boolean | void | {[key: string]: any};
}

2
core/src/components/alert/alert.tsx
View File

@ -538,7 +538,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
return (
<div class={alertButtonGroupClass}>
{buttons.map(button =>
<button type="button" class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
<button type="button" id={button.id} class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
<span class="alert-button-inner">
{button.text}
</span>

10
core/src/components/alert/readme.md
View File

@ -99,11 +99,13 @@ export class AlertExample {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}
@ -412,11 +414,13 @@ function presentAlertConfirm() {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay')
}
@ -759,12 +763,14 @@ export const AlertExample: React.FC = () => {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: blah => {
console.log('Confirm Cancel: blah');
}
},
{
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}
@ -1064,11 +1070,13 @@ export class AlertExample {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}
@ -1402,12 +1410,14 @@ export default defineComponent({
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: blah => {
console.log('Confirm Cancel:', blah)
},
},
{
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay')
},

5
core/src/components/alert/test/basic/index.html
View File

@ -42,6 +42,9 @@
--min-width: 0;
--max-width: 200px;
}
#delete-button {
color: #eb445a;
}
</style>
</ion-app>
@ -79,6 +82,7 @@
'Open Modal',
{
text: 'Delete',
id: 'delete-button',
role: 'destructive',
},
'Cancel',
@ -185,6 +189,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}

1
core/src/components/alert/test/standalone/index.html
View File

@ -185,6 +185,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}

1
core/src/components/alert/test/translucent/index.html
View File

@ -165,6 +165,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}

2
core/src/components/alert/usage/angular.md
View File

@ -48,11 +48,13 @@ export class AlertExample {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}

2
core/src/components/alert/usage/javascript.md
View File

@ -36,11 +36,13 @@ function presentAlertConfirm() {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay')
}

2
core/src/components/alert/usage/react.md
View File

@ -92,12 +92,14 @@ export const AlertExample: React.FC = () => {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: blah => {
console.log('Confirm Cancel: blah');
}
},
{
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}

2
core/src/components/alert/usage/stencil.md
View File

@ -45,11 +45,13 @@ export class AlertExample {
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay');
}

2
core/src/components/alert/usage/vue.md
View File

@ -53,12 +53,14 @@ export default defineComponent({
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-button',
handler: blah => {
console.log('Confirm Cancel:', blah)
},
},
{
text: 'Okay',
id: 'confirm-button',
handler: () => {
console.log('Confirm Okay')
},