Skip to content
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

feat(toast): add icon property to show icon at start of toast content #23596

Merged
merged 10 commits into from
Jul 23, 2021
Merged

feat(toast): add icon property to show icon at start of toast content #23596

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f8cd175
feat(toast): optional icon.
domske Jul 8, 2021
6eda23f
Refactoring: Fix linter issues.
domske Jul 8, 2021
7db5e52
Replace name with icon prop.
domske Jul 11, 2021
01f34fc
Change requests applied.
domske Jul 20, 2021
9732846
Additional prop info.
domske Jul 23, 2021
a32270f
run build
liamdebeasi Jul 23, 2021
b880b86
fix usage examples
liamdebeasi Jul 23, 2021
763dcaf
add docs, update styles
liamdebeasi Jul 23, 2021
53912cf
Merge branch 'main' into feat-toast-icon
liamdebeasi Jul 23, 2021
29a8b85
Merge remote-tracking branch 'upstream/next' into feat-toast-icon
liamdebeasi Jul 23, 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
8 changes: 8 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2565,6 +2565,10 @@ export namespace Components {
* Header to be shown in the toast.
*/
"header"?: string;
/**
* Name of the icon to display. See `ion-icon`. https://ionic.io/ionicons
*/
"icon"?: string;
/**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
*/
Expand Down Expand Up @@ -5894,6 +5898,10 @@ declare namespace LocalJSX {
* Header to be shown in the toast.
*/
"header"?: string;
/**
* Name of the icon to display. See `ion-icon`. https://ionic.io/ionicons
*/
"icon"?: string;
/**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
*/
Expand Down
16 changes: 14 additions & 2 deletions core/src/components/toast/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
Position Middle
</ion-button>

<ion-button expand="block" onclick="openToast({header: 'Toast header', message: 'Toast message'})">
<ion-button expand="block" onclick="openToast({header: 'Toast header', message: 'Toast message', duration: 2000})">
Header Toast
</ion-button>

Expand Down Expand Up @@ -83,6 +83,18 @@
Show HTML Toast
</ion-button>

<ion-button expand="block" id="toast-with-icon" onclick="openToast({ header: 'Bluetooth', message: 'Device connected.', icon: 'bluetooth', duration: 2000 })">
Toast with Icon
</ion-button>

<ion-button expand="block" id="toast-with-icon-2" onclick="openToast({ message: 'An error has occurred!', icon: 'warning', color: 'danger', duration: 2000 })">
Toast with Icon 2
</ion-button>

<ion-button expand="block" id="toast-with-icon-3" onclick="openToast({ message: 'Debug me...', icon: 'bug', buttons: ['Close'] })">
Toast with Icon 3
</ion-button>

<ion-grid>
<ion-row>
<ion-col size="6">
Expand Down Expand Up @@ -211,4 +223,4 @@
</style>
</body>

</html>
</html>
11 changes: 10 additions & 1 deletion core/src/components/toast/toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,15 @@
justify-content: center;
}

.toast-icon {
/* stylelint-disable property-blacklist */
margin-left: 15px;

padding: 10px;
/* stylelint-enable property-blacklist */

font-size: 1.4em;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* stylelint-disable property-blacklist */
margin-left: 15px;
padding: 10px;
/* stylelint-enable property-blacklist */
font-size: 1.4em;
@include margin(0, 0, 0, 15px);
@include padding(10px, 10px, 10px, 10px);

We need to include the mixins here to account for RTL mode. Currently, the styles are not consistent between LTR and RTL modes, but the mixins will handle this switch for us.

Also, no need to add the font size here as it should apply in the same block as .toast-button-icon (see my other comment)

}

.toast-message {
flex: 1;
Expand All @@ -141,7 +150,7 @@
z-index: 0;
}

.toast-icon {
.toast-button-icon {
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
font-size: 1.4em;
}

Expand Down
12 changes: 11 additions & 1 deletion core/src/components/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;

/**
* Name of the icon to display. See `ion-icon`.
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
* https://ionic.io/ionicons
*/
@Prop() icon?: string;

/**
* Emitted after the toast has presented.
*/
Expand Down Expand Up @@ -243,7 +249,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
<ion-icon
icon={b.icon}
slot={b.text === undefined ? 'icon-only' : undefined}
class="toast-icon"
class="toast-button-icon"
/>}
{b.text}
</div>
Expand Down Expand Up @@ -281,6 +287,10 @@ export class Toast implements ComponentInterface, OverlayInterface {
<div class="toast-container" part="container">
{this.renderButtons(startButtons, 'start')}

{this.icon !== undefined &&
<ion-icon class="toast-icon" part="icon" icon={this.icon}></ion-icon>
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
}

<div class="toast-content">
{this.header !== undefined &&
<div class="toast-header" part="header">{this.header}</div>
Expand Down