Remove ha-alert actionText (#10646)

This commit is contained in:
Joakim Sørensen 2021-11-19 01:09:13 +01:00 committed by GitHub
parent 0d19f4792f
commit 0ca35d7012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 41 deletions

View File

@ -9,7 +9,6 @@ const alerts: {
description: string | TemplateResult;
type: "info" | "warning" | "error" | "success";
dismissable?: boolean;
action?: string;
rtl?: boolean;
iconSlot?: TemplateResult;
actionSlot?: TemplateResult;
@ -76,13 +75,13 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action",
type: "error",
action: "restart",
actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
},
{
title: "Unsaved data",
description: "You have unsaved data",
type: "warning",
action: "save",
actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
},
{
title: "Slotted icon",
@ -106,7 +105,7 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action (RTL)",
type: "error",
action: "restart",
actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
rtl: true,
},
{
@ -129,7 +128,6 @@ export class DemoHaAlert extends LitElement {
.title=${alert.title || ""}
.alertType=${alert.type}
.dismissable=${alert.dismissable || false}
.actionText=${alert.action || ""}
.rtl=${alert.rtl || false}
>
${alert.iconSlot} ${alert.description} ${alert.actionSlot}

View File

@ -176,11 +176,6 @@ class HaGallery extends PolymerElement {
this.addEventListener("alert-dismissed-clicked", () =>
this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
);
this.addEventListener("alert-action-clicked", () =>
this.$.notifications.showDialog({ message: "Alert action clicked" })
);
this.addEventListener("hass-more-info", (ev) => {
if (ev.detail.entityId) {
this.$.notifications.showDialog({

View File

@ -151,14 +151,18 @@ class HassioAddonInfo extends LitElement {
.title=${this.supervisor.localize(
"addon.dashboard.protection_mode.title"
)}
.actionText=${this.supervisor.localize(
"addon.dashboard.protection_mode.enable"
)}
@alert-action-clicked=${this._protectionToggled}
>
${this.supervisor.localize(
"addon.dashboard.protection_mode.content"
)}
<mwc-button
slot="action"
.label=${this.supervisor.localize(
"addon.dashboard.protection_mode.enable"
)}
@click=${this._protectionToggled}
>
</mwc-button>
</ha-alert>
`
: ""}

View File

@ -151,24 +151,28 @@ class HassioSupervisorInfo extends LitElement {
></ha-switch>
</ha-settings-row>`
: ""
: html`<ha-alert
alert-type="warning"
.actionText=${this.supervisor.localize("common.learn_more")}
@alert-action-clicked=${this._unsupportedDialog}
>
: html`<ha-alert alert-type="warning">
${this.supervisor.localize(
"system.supervisor.unsupported_title"
)}
<mwc-button
slot="action"
.label=${this.supervisor.localize("common.learn_more")}
@click=${this._unsupportedDialog}
>
</mwc-button>
</ha-alert>`}
${!this.supervisor.supervisor.healthy
? html`<ha-alert
alert-type="error"
.actionText=${this.supervisor.localize("common.learn_more")}
@alert-action-clicked=${this._unhealthyDialog}
>
? html`<ha-alert alert-type="error">
${this.supervisor.localize(
"system.supervisor.unhealthy_title"
)}
<mwc-button
slot="action"
.label=${this.supervisor.localize("common.learn_more")}
@click=${this._unhealthyDialog}
>
</mwc-button>
</ha-alert>`
: ""}
</div>
@ -466,6 +470,9 @@ class HassioSupervisorInfo extends LitElement {
white-space: normal;
color: var(--secondary-text-color);
}
ha-alert mwc-button {
--mdc-theme-primary: var(--primary-text-color);
}
a {
text-decoration: none;
}

View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiAlertCircleOutline,
mdiAlertOutline,
@ -23,7 +22,6 @@ const ALERT_ICONS = {
declare global {
interface HASSDomEvents {
"alert-dismissed-clicked": undefined;
"alert-action-clicked": undefined;
}
}
@ -37,8 +35,6 @@ class HaAlert extends LitElement {
| "error"
| "success" = "info";
@property({ attribute: "action-text" }) public actionText = "";
@property({ type: Boolean }) public dismissable = false;
@property({ type: Boolean }) public rtl = false;
@ -63,12 +59,7 @@ class HaAlert extends LitElement {
</div>
<div class="action">
<slot name="action">
${this.actionText
? html`<mwc-button
@click=${this._action_clicked}
.label=${this.actionText}
></mwc-button>`
: this.dismissable
${this.dismissable
? html`<ha-icon-button
@click=${this._dismiss_clicked}
label="Dismiss alert"
@ -86,10 +77,6 @@ class HaAlert extends LitElement {
fireEvent(this, "alert-dismissed-clicked");
}
private _action_clicked() {
fireEvent(this, "alert-action-clicked");
}
static styles = css`
.issue-type {
position: relative;
@ -133,6 +120,10 @@ class HaAlert extends LitElement {
align-items: center;
width: 100%;
}
.action {
width: min-content;
--mdc-theme-primary: var(--primary-text-color);
}
.main-content {
overflow-wrap: anywhere;
}
@ -140,9 +131,6 @@ class HaAlert extends LitElement {
margin-top: 2px;
font-weight: bold;
}
mwc-button {
--mdc-theme-primary: var(--primary-text-color);
}
ha-icon-button {
--mdc-icon-button-size: 36px;
}