Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 29, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfefb64
feat(alert): add `id` to AlertButton
devinshoemaker Aug 4, 2019
889cf82
Merge remote-tracking branch 'upstream/next' into add-id-alert-button
liamdebeasi Jun 29, 2021
af9b409
add alert usage
liamdebeasi Jun 29, 2021
8cff62c
add id for action sheet too
liamdebeasi Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core/src/components/action-sheet/action-sheet-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion core/src/components/action-sheet/action-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions core/src/components/action-sheet/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down Expand Up @@ -120,6 +121,7 @@ async function presentActionSheet() {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down Expand Up @@ -234,6 +236,7 @@ export const ActionSheetExample: React.FC = () => {
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down Expand Up @@ -291,6 +294,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down Expand Up @@ -363,6 +367,7 @@ export default defineComponent({
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked')
},
Expand Down
5 changes: 5 additions & 0 deletions core/src/components/action-sheet/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@
--ion-backdrop-opacity: 1;
}

#delete-button {
color: #eb445a;
}

</style>
<script>
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
Expand All @@ -75,6 +79,7 @@
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/action-sheet/usage/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/action-sheet/usage/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ async function presentActionSheet() {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/action-sheet/usage/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const ActionSheetExample: React.FC = () => {
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/action-sheet/usage/stencil.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export class ActionSheetExample {
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
handler: () => {
console.log('Delete clicked');
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/action-sheet/usage/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default defineComponent({
text: 'Delete',
role: 'destructive',
icon: trash,
id: 'delete-button',
handler: () => {
console.log('Delete clicked')
},
Expand Down
1 change: 1 addition & 0 deletions core/src/components/alert/alert-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion core/src/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions core/src/components/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down Expand Up @@ -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')
}
Expand Down Expand Up @@ -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');
}
Expand Down Expand Up @@ -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');
}
Expand Down Expand Up @@ -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')
},
Expand Down
5 changes: 5 additions & 0 deletions core/src/components/alert/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
--min-width: 0;
--max-width: 200px;
}
#delete-button {
color: #eb445a;
}
</style>
</ion-app>

Expand Down Expand Up @@ -79,6 +82,7 @@
'Open Modal',
{
text: 'Delete',
id: 'delete-button',
role: 'destructive',
},
'Cancel',
Expand Down Expand Up @@ -185,6 +189,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/alert/test/standalone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}
Expand Down
1 change: 1 addition & 0 deletions core/src/components/alert/test/translucent/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
id: 'cancel-id',
handler: () => {
console.log('Confirm Cancel')
}
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/alert/usage/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/alert/usage/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/alert/usage/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/alert/usage/stencil.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/alert/usage/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
},
Expand Down