jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 05:06:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to new button

Browse Source
This commit is contained in:
Wendelin 2025-05-22 16:19:09 +02:00
parent bc3933d7d7
commit 9889d973aa
No known key found for this signature in database
70 changed files with 655 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
landing-page/src/components/landing-page-logs.ts
View File

@ -64,7 +64,7 @@ class LandingPageLogs extends LitElement {
protected render() {
return html`
<div class="actions">
<ha-button @click=${this._toggleLogDetails}>
<ha-button appearance="plain" @click=${this._toggleLogDetails}>
${this.localize(this._show ? "hide_details" : "show_details")}
</ha-button>
${this._show
@ -81,7 +81,11 @@ class LandingPageLogs extends LitElement {
alert-type="error"
.title=${this.localize("logs.fetch_error")}
>
<ha-button @click=${this._startLogStream}>
<ha-button
size="small"
variant="danger"
@click=${this._startLogStream}
>
${this.localize("logs.retry")}
</ha-button>
</ha-alert>

1
landing-page/src/components/landing-page-network.ts
View File

@ -67,6 +67,7 @@ class LandingPageNetwork extends LitElement {
${ALTERNATIVE_DNS_SERVERS.map(
({ translationKey }, key) =>
html`<ha-button
size="small"
.index=${key}
.disabled=${!dnsPrimaryInterfaceNameservers}
@click=${this._setDns}

10
src/components/buttons/ha-progress-button.ts
View File

@ -24,14 +24,16 @@ export class HaProgressButton extends LitElement {
const overlay = this._result || this.progress;
return html`
<ha-button
.raised=${this.raised}
.label=${this.label}
.unelevated=${this.unelevated}
.appearance=${this.unelevated
? "accent"
: this.raised
? "filled"
: "plain"}
.disabled=${this.disabled || this.progress}
class=${this._result || ""}
>
<slot name="icon" slot="icon"></slot>
<slot></slot>
<slot>${this.label}</slot>
</ha-button>
${!overlay
? nothing

11
src/components/data-table/dialog-data-table-settings.ts
View File

@ -152,10 +152,17 @@ export class DialogDataTableSettings extends LitElement {
)}
</ha-list>
</ha-sortable>
<ha-button slot="secondaryAction" @click=${this._reset}
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._reset}
>${localize("ui.components.data-table.settings.restore")}</ha-button
>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button
appearance="filled"
slot="primaryAction"
@click=${this.closeDialog}
>
${localize("ui.components.data-table.settings.done")}
</ha-button>
</ha-dialog>

68
src/components/ha-button.ts
View File

@ -25,7 +25,6 @@ import { customElement, property } from "lit/decorators";
*
* @cssprop --ha-button-font-family - Font family for the button text.
* @cssprop --ha-font-weight-medium - Medium font weight for button text.
* @cssprop --ha-button-line-height - Line height for button text.
* @cssprop --ha-button-border-width - Border width for the button.
* @cssprop --ha-button-theme-color - Main color for the button.
* @cssprop --ha-button-theme-darker-color - Darker variant of the main color.
@ -33,9 +32,10 @@ import { customElement, property } from "lit/decorators";
* @cssprop --ha-button-height - Height of the button.
* @cssprop --ha-button-border-radius - Border radius for the button.
* @cssprop --ha-button-text-color - Text color for the button.
* @cssprop --ha-button-font-size - Font weight for the button text.
*
* @attr {("small"|"medium")} size - Sets the button size.
* @attr {("primary"|"danger"|"neutral")} variant - Sets the button color variant. "primary" is default.
* @attr {("primary"|"danger"|"neutral"|"warning")} variant - Sets the button color variant. "primary" is default.
* @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
*/
@customElement("ha-button")
@ -57,6 +57,14 @@ export class HaButton extends Button {
--sl-transition-x-fast: 0.4s;
--sl-focus-ring: solid 4px var(--accent-color);
--sl-focus-ring-offset: 1px;
--sl-button-font-size-small: var(
--ha-button-font-size,
var(--ha-font-size-m)
);
--sl-button-font-size-medium: var(
--ha-button-font-size,
var(--ha-font-size-m)
);
--sl-spacing-medium: 16px;
--sl-spacing-small: 12px;
@ -64,23 +72,29 @@ export class HaButton extends Button {
--ha-button-theme-color: var(--primary-color);
--ha-button-theme-darker-color: var(--dark-primary-color);
--ha-button-theme-lighter-color: var(--light-primary-color);
--ha-button-theme-lighter-color: #dff3fc;
line-height: var(--ha-button-line-height, var(--ha-line-height-normal));
line-height: 1;
--sl-input-border-width: var(--ha-button-border-width, 0);
}
:host([destructive]), /* Deprecated */
:host([variant="danger"]) {
--ha-button-theme-color: var(--error-color);
--ha-button-theme-darker-color: var(--error-color-darker);
--ha-button-theme-lighter-color: var(--error-color-lighter);
--ha-button-theme-color: #b30532;
--ha-button-theme-darker-color: #64031d;
--ha-button-theme-lighter-color: #ffdedc;
}
:host([variant="neutral"]) {
--ha-button-theme-color: var(--primary-text-color);
--ha-button-theme-darker-color: var(--dark-primary-color);
--ha-button-theme-lighter-color: var(--light-primary-color);
--ha-button-theme-color: #545868;
--ha-button-theme-darker-color: #373a44;
--ha-button-theme-lighter-color: #e4e5e9;
}
:host([variant="warning"]) {
--ha-button-theme-color: #b45f04;
--ha-button-theme-darker-color: #9c5203;
--ha-button-theme-lighter-color: #fef3cd;
}
.button {
@ -94,12 +108,28 @@ export class HaButton extends Button {
}
.button,
.button--standard.button--default,
.button--standard.button--primary,
.button--standard.button--neutral,
.button--standard.button--danger,
.button--standard.button--warning,
.button--standard.button--default:active:not(.button--disabled),
.button--standard.button--primary:active:not(.button--disabled),
.button--standard.button--neutral:active:not(.button--disabled),
.button--standard.button--danger:active:not(.button--disabled),
.button--standard.button--warning:active:not(.button--disabled),
.button:active:not(.button--disabled) {
background-color: var(--ha-button-theme-color);
color: var(--ha-button-text-color, var(--white-color));
}
.button:hover:not(.button--disabled) {
.button:hover:not(.button--disabled),
.button--standard.button--default:hover:not(.button--disabled),
.button--standard.button--primary:hover:not(.button--disabled),
.button--standard.button--neutral:hover:not(.button--disabled),
.button--standard.button--warning:hover:not(.button--disabled),
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: var(--ha-button-theme-darker-color);
color: var(--ha-button-text-color, var(--white-color));
}
:host([appearance="filled"]) .button,
@ -121,6 +151,22 @@ export class HaButton extends Button {
background-color: var(--ha-button-theme-lighter-color);
color: var(--ha-button-text-color, var(--ha-button-theme-darker-color));
}
/* spacing */
.button--has-prefix.button--medium .button__label {
padding-inline-start: 8px;
}
.button--has-prefix.button--small .button__label {
padding-inline-start: 4px;
}
.button--has-suffix.button--medium .button__label,
.button--caret.button--medium .button__label {
padding-inline-end: 8px;
}
.button--has-suffix.button--small .button__label,
.button--caret.button--small .button__label {
padding-inline-end: 4px;
}
`,
];
}

9
src/components/ha-date-range-picker.ts
View File

@ -22,6 +22,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { TimeZone } from "../data/translation";
import type { HomeAssistant } from "../types";
import "./date-range-picker";
import "./ha-button";
import "./ha-icon-button";
import "./ha-icon-button-next";
import "./ha-icon-button-prev";
@ -197,13 +198,13 @@ export class HaDateRangePicker extends LitElement {
</div>`
: nothing}
<div slot="footer" class="date-range-footer">
<mwc-button @click=${this._cancelDateRange}
>${this.hass.localize("ui.common.cancel")}</mwc-button
<ha-button appearance="plain" @click=${this._cancelDateRange}
>${this.hass.localize("ui.common.cancel")}</ha-button
>
<mwc-button @click=${this._applyDateRange}
<ha-button @click=${this._applyDateRange}
>${this.hass.localize(
"ui.components.date-range-picker.select"
)}</mwc-button
)}</ha-button
>
</div>
</date-range-picker>

20
src/components/ha-file-upload.ts
View File

@ -117,11 +117,15 @@ export class HaFileUpload extends LitElement {
@dragleave=${this._handleDragEnd}
@dragend=${this._handleDragEnd}
>${!this.value
? html`<ha-svg-icon
class="big-icon"
.path=${this.icon || mdiFileUpload}
></ha-svg-icon>
<ha-button unelevated @click=${this._openFilePicker}>
? html` <ha-button
size="small"
appearance="filled"
@click=${this._openFilePicker}
>
<ha-svg-icon
slot="prefix"
.path=${this.icon || mdiFileUpload}
></ha-svg-icon>
${this.label || localize("ui.components.file-upload.label")}
</ha-button>
<span class="secondary"
@ -290,7 +294,7 @@ export class HaFileUpload extends LitElement {
color: var(--primary-color);
}
ha-button {
margin-bottom: 4px;
margin-bottom: 8px;
}
.supports {
color: var(--secondary-text-color);
@ -310,10 +314,6 @@ export class HaFileUpload extends LitElement {
margin-inline-end: 8px;
margin-inline-start: initial;
}
.big-icon {
--mdc-icon-size: 48px;
margin-bottom: 8px;
}
ha-button {
--mdc-button-outline-color: var(--primary-color);
--mdc-icon-button-size: 24px;

9
src/components/ha-multi-textfield.ts
View File

@ -73,7 +73,12 @@ class HaMultiTextField extends LitElement {
`;
})}
<div class="layout horizontal">
<ha-button @click=${this._addItem} .disabled=${this.disabled}>
<ha-button
size="small"
appearance="filled"
@click=${this._addItem}
.disabled=${this.disabled}
>
${this.addLabel ??
(this.label
? this.hass?.localize("ui.components.multi-textfield.add_item", {
@ -81,7 +86,7 @@ class HaMultiTextField extends LitElement {
})
: this.hass?.localize("ui.common.add")) ??
"Add"}
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
<ha-svg-icon slot="suffix" .path=${mdiPlus}></ha-svg-icon>
</ha-button>
</div>
${this.helper

6
src/dialogs/config-flow/step-flow-abort.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../types";
import { showConfigFlowDialog } from "./show-dialog-config-flow";
import type { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
import "../../components/ha-button";
@customElement("step-flow-abort")
class StepFlowAbort extends LitElement {
@ -38,10 +38,10 @@ class StepFlowAbort extends LitElement {
${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
</div>
<div class="buttons">
<mwc-button @click=${this._flowDone}
<ha-button appearance="plain" @click=${this._flowDone}
>${this.hass.localize(
"ui.panel.config.integrations.config_flow.close"
)}</mwc-button
)}</ha-button
>
</div>
`;

6
src/dialogs/config-flow/step-flow-create-entry.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -12,6 +11,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { navigate } from "../../common/navigate";
import { slugify } from "../../common/string/slugify";
import "../../components/ha-area-picker";
import "../../components/ha-button";
import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite";
import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
import type { DeviceRegistryEntry } from "../../data/device_registry";
@ -171,10 +171,10 @@ class StepFlowCreateEntry extends LitElement {
`}
</div>
<div class="buttons">
<mwc-button @click=${this._flowDone}
<ha-button @click=${this._flowDone}
>${localize(
`ui.panel.config.integrations.config_flow.${!this.devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}`
)}</mwc-button
)}</ha-button
>
</div>
`;

6
src/dialogs/config-flow/step-flow-form.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { isNavigationClick } from "../../common/dom/is-navigation-click";
import "../../components/ha-button";
import "../../components/ha-alert";
import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
import "../../components/ha-form/ha-form";
@ -88,12 +88,12 @@ class StepFlowForm extends LitElement {
`
: html`
<div>
<mwc-button @click=${this._submitStep}>
<ha-button @click=${this._submitStep}>
${this.flowConfig.renderShowFormStepSubmitButton(
this.hass,
this.step
)}
</mwc-button>
</ha-button>
</div>
`}
</div>

3
src/dialogs/generic/dialog-box.ts
View File

@ -106,6 +106,7 @@ class DialogBox extends LitElement {
@click=${this._dismiss}
?dialogInitialFocus=${!this._params.prompt &&
this._params.destructive}
appearance="plain"
>
${this._params.dismissText
? this._params.dismissText
@ -116,7 +117,7 @@ class DialogBox extends LitElement {
@click=${this._confirm}
?dialogInitialFocus=${!this._params.prompt &&
!this._params.destructive}
?destructive=${this._params.destructive}
variant=${this._params.destructive ? "danger" : "primary"}
>
${this._params.confirmText
? this._params.confirmText

6
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -299,7 +299,10 @@ class MoreInfoUpdate extends LitElement {
${this.stateObj.state === BINARY_STATE_OFF &&
this.stateObj.attributes.skipped_version
? html`
<ha-button @click=${this._handleClearSkipped}>
<ha-button
appearance="plain"
@click=${this._handleClearSkipped}
>
${this.hass.localize(
"ui.dialogs.more_info_control.update.clear_skipped"
)}
@ -307,6 +310,7 @@ class MoreInfoUpdate extends LitElement {
`
: html`
<ha-button
appearance="plain"
@click=${this._handleSkip}
.disabled=${skippedVersion ||
this.stateObj.state === BINARY_STATE_OFF ||

10
src/onboarding/onboarding-analytics.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-analytics";
import "../components/ha-button";
import "../components/ha-svg-icon";
import type { Analytics } from "../data/analytics";
import { setAnalyticsPreferences } from "../data/analytics";
@ -49,13 +49,9 @@ class OnboardingAnalytics extends LitElement {
</ha-analytics>
${this._error ? html`<div class="error">${this._error}</div>` : ""}
<div class="footer">
<mwc-button
unelevated
@click=${this._save}
.disabled=${!this._analyticsDetails}
>
<ha-button @click=${this._save} .disabled=${!this._analyticsDetails}>
${this.localize("ui.panel.page-onboarding.analytics.finish")}
</mwc-button>
</ha-button>
</div>
`;
}

8
src/onboarding/onboarding-core-config.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -6,8 +5,9 @@ import { LOCAL_TIME_ZONE } from "../common/datetime/resolve-time-zone";
import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-alert";
import "../components/ha-spinner";
import "../components/ha-button";
import { COUNTRIES } from "../components/ha-country-picker";
import "../components/ha-spinner";
import type { ConfigUpdateValues } from "../data/core";
import { saveCoreConfig } from "../data/core";
import { countryCurrency } from "../data/currency";
@ -80,11 +80,11 @@ class OnboardingCoreConfig extends LitElement {
</ha-country-picker>
<div class="footer">
<mwc-button @click=${this._save} .disabled=${this._working}>
<ha-button @click=${this._save} .disabled=${this._working}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.finish"
)}
</mwc-button>
</ha-button>
</div>
`;
}

7
src/onboarding/onboarding-create-user.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { genClientId } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize";
import { debounce } from "../common/util/debounce";
import "../components/ha-button";
import "../components/ha-form/ha-form";
import type { HaForm } from "../components/ha-form/ha-form";
import type {
@ -76,8 +76,7 @@ class OnboardingCreateUser extends LitElement {
@value-changed=${this._handleValueChanged}
></ha-form>
<div class="footer">
<mwc-button
unelevated
<ha-button
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
@ -87,7 +86,7 @@ class OnboardingCreateUser extends LitElement {
this._newUser.password !== this._newUser.password_confirm}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
</ha-button>
</div>
`;
}

2
src/onboarding/onboarding-integrations.ts
View File

@ -134,7 +134,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
)}
</p>
<div class="footer">
<ha-button unelevated @click=${this._finish}>
<ha-button @click=${this._finish}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.finish"
)}

7
src/onboarding/onboarding-location.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiCrosshairsGps,
mdiMagnify,
@ -14,6 +12,7 @@ import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-alert";
import "../components/ha-list";
import "../components/ha-button";
import "../components/ha-list-item";
import "../components/ha-radio";
import "../components/ha-spinner";
@ -194,11 +193,11 @@ class OnboardingLocation extends LitElement {
<p class="attribution">${addressAttribution}</p>
<div class="footer">
<mwc-button @click=${this._save} unelevated .disabled=${this._working}>
<ha-button @click=${this._save} .disabled=${this._working}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.finish"
)}
</mwc-button>
</ha-button>
</div>
`;
}

3
src/onboarding/onboarding-welcome.ts
View File

@ -22,7 +22,7 @@ class OnboardingWelcome extends LitElement {
<h1>${this.localize("ui.panel.page-onboarding.welcome.header")}</h1>
<p>${this.localize("ui.panel.page-onboarding.intro")}</p>
<ha-button unelevated @click=${this._start} class="start">
<ha-button @click=${this._start} class="start">
${this.localize("ui.panel.page-onboarding.welcome.start")}
</ha-button>
@ -94,6 +94,7 @@ class OnboardingWelcome extends LitElement {
}
.start {
margin: 32px 0;
width: 100%;
}
ha-divider {
--ha-divider-width: calc(100% + 64px);

6
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -227,7 +227,11 @@ export class DialogAddApplicationCredential extends LitElement {
</div>
`
: html`
<ha-button slot="secondaryAction" @click=${this._abortDialog}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._abortDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button

7
src/panels/config/areas/dialog-area-registry-detail.ts
View File

@ -258,19 +258,20 @@ class DialogAreaDetail extends LitElement {
${!isNew
? html`<ha-button
slot="secondaryAction"
destructive
variant="danger"
appearance="plain"
@click=${this._deleteArea}
>
${this.hass.localize("ui.common.delete")}
</ha-button>`
: nothing}
<div slot="primaryAction">
<ha-button @click=${this.closeDialog}>
<ha-button appearance="plain" @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
.disabled=${nameInvalid || !!this._submitting}
>
${entry
? this.hass.localize("ui.common.save")

17
src/panels/config/areas/dialog-floor-registry-detail.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import { mdiTextureBox } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -10,6 +8,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/chips/ha-chip-set";
import "../../../components/chips/ha-input-chip";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-aliases-editor";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-icon-picker";
@ -227,18 +226,22 @@ class DialogFloorDetail extends LitElement {
></ha-aliases-editor>
</div>
</div>
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
.disabled=${nameInvalid || !!this._submitting}
>
${entry
? this.hass.localize("ui.common.save")
: this.hass.localize("ui.common.create")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

21
src/panels/config/automation/action/ha-automation-action.ts
View File

@ -108,23 +108,26 @@ export default class HaAutomationAction extends LitElement {
)}
<div class="buttons">
<ha-button
outlined
appearance="filled"
.disabled=${this.disabled}
.label=${this.hass.localize(
@click=${this._addActionDialog}
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.add"
)}
@click=${this._addActionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
appearance="plain"
.disabled=${this.disabled}
.label=${this.hass.localize(
@click=${this._addActionBuildingBlockDialog}
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block"
)}
@click=${this._addActionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>

15
src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -101,7 +100,8 @@ class DialogAutomationSave extends LitElement implements HassDialog {
<ha-button
@click=${this._handleDiscard}
slot="secondaryAction"
class="destructive"
variant="danger"
appearance="plain"
>
${this.hass.localize("ui.common.dont_save")}
</ha-button>
@ -264,16 +264,16 @@ class DialogAutomationSave extends LitElement implements HassDialog {
${this._renderInputs()} ${this._renderDiscard()}
<div slot="primaryAction">
<mwc-button @click=${this.closeDialog}>
<ha-button appearance="plain" @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button @click=${this._save}>
</ha-button>
<ha-button @click=${this._save}>
${this.hass.localize(
this._params.config.alias && !this._params.onDiscard
? "ui.panel.config.automation.editor.rename"
: "ui.panel.config.automation.editor.save"
)}
</mwc-button>
</ha-button>
</div>
</ha-dialog>
`;
@ -378,9 +378,6 @@ class DialogAutomationSave extends LitElement implements HassDialog {
display: block;
margin-bottom: 16px;
}
.destructive {
--mdc-theme-primary: var(--error-color);
}
`,
];
}

21
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@ -157,23 +157,26 @@ export default class HaAutomationCondition extends LitElement {
)}
<div class="buttons">
<ha-button
outlined
appearance="filled"
.disabled=${this.disabled}
.label=${this.hass.localize(
@click=${this._addConditionDialog}
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add"
)}
@click=${this._addConditionDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
<ha-button
.disabled=${this.disabled}
.label=${this.hass.localize(
appearance="plain"
@click=${this._addConditionBuildingBlockDialog}
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block"
)}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</ha-button>
</div>
</div>

16
src/panels/config/automation/ha-automation-picker.ts
View File

@ -9,6 +9,7 @@ import {
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiOpenInNew,
mdiPlay,
mdiPlus,
mdiRobotHappy,
@ -804,18 +805,20 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
{ user: this.hass.user?.name || "Alice" }
)}
</p>
<a
<ha-button
href=${documentationUrl(
this.hass,
"/docs/automation/editor/"
)}
target="_blank"
appearance="plain"
rel="noreferrer"
size="small"
>
<ha-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</a>
${this.hass.localize("ui.panel.config.common.learn_more")}
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}>
</ha-svg-icon>
</ha-button>
</div>`
: nothing
}
@ -1454,6 +1457,9 @@ ${rejected
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty ha-button {
--mdc-icon-size: 24px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}

33
src/panels/config/automation/manual-automation-editor.ts
View File

@ -1,10 +1,9 @@
import "@material/mwc-button/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { load } from "js-yaml";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { load } from "js-yaml";
import {
any,
array,
@ -16,7 +15,14 @@ import {
union,
} from "superstruct";
import { ensureArray } from "../../../common/array/ensure-array";
import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
import { fireEvent } from "../../../common/dom/fire_event";
import { constructUrlCurrentPath } from "../../../common/url/construct-url";
import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import "../../../components/ha-markdown";
@ -35,20 +41,14 @@ import { getActionType, type Action } from "../../../data/script";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import "./action/ha-automation-action";
import type HaAutomationAction from "./action/ha-automation-action";
import "./condition/ha-automation-condition";
import type HaAutomationCondition from "./condition/ha-automation-condition";
import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
import "./trigger/ha-automation-trigger";
import type HaAutomationTrigger from "./trigger/ha-automation-trigger";
import type HaAutomationAction from "./action/ha-automation-action";
import type HaAutomationCondition from "./condition/ha-automation-condition";
import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import { constructUrlCurrentPath } from "../../../common/url/construct-url";
import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
import { showToast } from "../../../util/toast";
import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
const baseConfigStruct = object({
alias: optional(string()),
@ -130,11 +130,16 @@ export class HaManualAutomationEditor extends LitElement {
${this.hass.localize(
"ui.panel.config.automation.editor.disabled"
)}
<mwc-button slot="action" @click=${this._enable}>
<ha-button
size="small"
appearance="filled"
slot="action"
@click=${this._enable}
>
${this.hass.localize(
"ui.panel.config.automation.editor.enable"
)}
</mwc-button>
</ha-button>
</ha-alert>
`
: nothing}

11
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@ -109,14 +109,15 @@ export default class HaAutomationTrigger extends LitElement {
)}
<div class="buttons">
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add"
)}
appearance="filled"
.disabled=${this.disabled}
@click=${this._addTriggerDialog}
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add"
)}
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
</ha-button>
</div>
</div>

64
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@ -1,16 +1,16 @@
import "@material/mwc-button";
import { mdiOpenInNew, mdiClose } from "@mdi/js";
import { mdiClose, mdiOpenInNew } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-spinner";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown";
import "../../../components/ha-alert";
import "../../../components/ha-textfield";
import "../../../components/ha-button";
import "../../../components/ha-code-editor";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-header";
import "../../../components/ha-code-editor";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown";
import "../../../components/ha-spinner";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import type { BlueprintImportResult } from "../../../data/blueprint";
import { importBlueprint, saveBlueprint } from "../../../data/blueprint";
@ -137,7 +137,9 @@ class DialogImportBlueprint extends LitElement {
"ui.panel.config.blueprint.add.import_introduction"
)}
</p>
<a
<ha-button
size="small"
appearance="plain"
href="https://www.home-assistant.io/get-blueprints"
target="_blank"
rel="noreferrer noopener"
@ -145,8 +147,11 @@ class DialogImportBlueprint extends LitElement {
${this.hass.localize(
"ui.panel.config.blueprint.add.community_forums"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
<ha-svg-icon
slot="suffix"
.path=${mdiOpenInNew}
></ha-svg-icon>
</ha-button>
<ha-textfield
id="input"
.label=${this.hass.localize(
@ -157,47 +162,40 @@ class DialogImportBlueprint extends LitElement {
></ha-textfield>
`}
</div>
<mwc-button
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
.disabled=${this._saving}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${!this._result
? html`
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._import}
.disabled=${this._importing}
.loading=${this._importing}
.ariaLabel=${this.hass.localize(
`ui.panel.config.blueprint.add.${this._importing ? "importing" : "import_btn"}`
)}
>
${this._importing
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.importing"
)}
></ha-spinner>`
: ""}
${this.hass.localize(
"ui.panel.config.blueprint.add.import_btn"
)}
</mwc-button>
</ha-button>
`
: html`
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._save}
.disabled=${this._saving || this._result.validation_errors}
.disabled=${this._saving || !!this._result.validation_errors}
.loading=${this._saving}
.ariaLabel=${this.hass.localize(
`ui.panel.config.blueprint.add.${this._saving ? "saving" : this._result.exists ? "save_btn_override" : "save_btn"}`
)}
>
${this._saving
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.saving"
)}
></ha-spinner>`
: ""}
${this._result.exists
? this.hass.localize(
"ui.panel.config.blueprint.add.save_btn_override"
@ -205,7 +203,7 @@ class DialogImportBlueprint extends LitElement {
: this.hass.localize(
"ui.panel.config.blueprint.add.save_btn"
)}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;

20
src/panels/config/blueprint/ha-blueprint-overview.ts
View File

@ -4,6 +4,7 @@ import {
mdiDownload,
mdiEye,
mdiHelpCircle,
mdiOpenInNew,
mdiPlus,
mdiShareVariant,
} from "@mdi/js";
@ -11,10 +12,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { storage } from "../../../common/decorators/storage";
import type { HASSDomEvent } from "../../../common/dom/fire_event";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { navigate } from "../../../common/navigate";
import type { LocalizeFunc } from "../../../common/translations/localize";
import { extractSearchParam } from "../../../common/url/search-params";
import type {
DataTableColumnContainer,
@ -47,12 +50,10 @@ import {
import "../../../layouts/hass-tabs-subpage-data-table";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant, Route } from "../../../types";
import type { LocalizeFunc } from "../../../common/translations/localize";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import { configSections } from "../ha-panel-config";
import { showAddBlueprintDialog } from "./show-dialog-import-blueprint";
import { storage } from "../../../common/decorators/storage";
type BlueprintMetaDataPath = BlueprintMetaData & {
path: string;
@ -298,17 +299,18 @@ class HaBlueprintOverview extends LitElement {
style="width: 100%; text-align: center;"
role="cell"
>
<a
<ha-button
appearance="plain"
href="https://www.home-assistant.io/get-blueprints"
target="_blank"
rel="noreferrer noopener"
size="small"
>
<ha-button
>${this.hass.localize(
"ui.panel.config.blueprint.overview.discover_more"
)}</ha-button
>
</a>
${this.hass.localize(
"ui.panel.config.blueprint.overview.discover_more"
)}
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
</div>`}
.initialGroupColumn=${this._activeGrouping}
.initialCollapsedGroups=${this._activeCollapsed}

1
src/panels/config/cloud/login/cloud-login.ts
View File

@ -105,6 +105,7 @@ export class CloudLogin extends LitElement {
</div>
<div class="card-actions">
<ha-button
appearance="plain"
.disabled=${this._inProgress}
@click=${this._handleForgotPassword}
>

14
src/panels/config/cloud/register/cloud-register.ts
View File

@ -164,13 +164,6 @@ export class CloudRegister extends LitElement {
></ha-password-field>
</div>
<div class="card-actions">
<ha-progress-button
@click=${this._handleRegister}
.progress=${this._requestInProgress}
>${this.hass.localize(
"ui.panel.config.cloud.register.start_trial"
)}</ha-progress-button
>
<button
class="link"
.disabled=${this._requestInProgress}
@ -180,6 +173,13 @@ export class CloudRegister extends LitElement {
"ui.panel.config.cloud.register.resend_confirm_email"
)}
</button>
<ha-progress-button
@click=${this._handleRegister}
.progress=${this._requestInProgress}
>${this.hass.localize(
"ui.panel.config.cloud.register.start_trial"
)}</ha-progress-button
>
</div>
</ha-card>
</ha-config-section>

11
src/panels/config/core/ha-config-section-general.ts
View File

@ -8,6 +8,7 @@ import "../../../components/buttons/ha-progress-button";
import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-checkbox";
import type { HaCheckbox } from "../../../components/ha-checkbox";
import "../../../components/ha-country-picker";
@ -252,8 +253,12 @@ class HaConfigSectionGeneral extends LitElement {
"ui.panel.config.core.section.core.core_config.edit_location_description"
)}
</div>
<mwc-button @click=${this._editLocation} .disabled=${disabled}
>${this.hass.localize("ui.common.edit")}</mwc-button
<ha-button
appearance="plain"
size="small"
@click=${this._editLocation}
.disabled=${disabled}
>${this.hass.localize("ui.common.edit")}</ha-button
>
</ha-settings-row>
<div class="card-actions">
@ -261,7 +266,7 @@ class HaConfigSectionGeneral extends LitElement {
@click=${this._updateEntry}
.disabled=${disabled}
>
${this.hass!.localize("ui.panel.config.zone.detail.update")}
${this.hass!.localize("ui.common.save")}
</ha-progress-button>
</div>
</ha-card>

7
src/panels/config/devices/device-detail/ha-device-entities-card.ts
View File

@ -5,10 +5,11 @@ import { classMap } from "lit/directives/class-map";
import { until } from "lit/directives/until";
import { computeEntityName } from "../../../../common/entity/compute_entity_name";
import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name";
import "../../../../components/ha-button";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
import "../../../../components/ha-list-item";
import "../../../../components/ha-list";
import "../../../../components/ha-list-item";
import type { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
import { getExtendedEntityRegistryEntry } from "../../../../data/entity_registry";
import { entryIcon } from "../../../../data/icons";
@ -125,11 +126,11 @@ export class HaDeviceEntitiesCard extends LitElement {
</div>`
: nothing}
<div class="card-actions">
<mwc-button @click=${this._addToLovelaceView}>
<ha-button appearance="plain" @click=${this._addToLovelaceView}>
${this.hass.localize(
"ui.panel.config.devices.entities.add_entities_lovelace"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
`;

12
src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
View File

@ -22,6 +22,7 @@ import "../../../helpers/forms/ha-schedule-form";
import "../../../helpers/forms/ha-timer-form";
import "../../../voice-assistants/entity-voice-settings";
import "../../entity-registry-settings-editor";
import "../../../../../components/ha-button";
import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor";
@customElement("entity-settings-helper-tab")
@ -97,20 +98,21 @@ export class EntitySettingsHelperTab extends LitElement {
></entity-registry-settings-editor>
</div>
<div class="buttons">
<mwc-button
class="warning"
<ha-button
variant="danger"
appearance="plain"
@click=${this._confirmDeleteItem}
.disabled=${this._submitting ||
(!this._item && !stateObj?.attributes.restored)}
>
${this.hass.localize("ui.dialogs.entity_registry.editor.delete")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._updateItem}
.disabled=${this._submitting || (this._item && !this._item.name)}
>
${this.hass.localize("ui.dialogs.entity_registry.editor.update")}
</mwc-button>
</ha-button>
</div>
`;
}

28
src/panels/config/entities/entity-registry-settings.ts
View File

@ -1,11 +1,10 @@
import "@material/mwc-button/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import type { ConfigEntry } from "../../../data/config_entries";
import {
deleteConfigEntry,
@ -88,27 +87,31 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
${device?.disabled_by
? html`${this.hass!.localize(
"ui.dialogs.entity_registry.editor.device_disabled"
)}<mwc-button
)}<ha-button
size="small"
variant="warning"
@click=${this._openDeviceSettings}
slot="action"
>
${this.hass!.localize(
"ui.dialogs.entity_registry.editor.open_device_settings"
)}
</mwc-button>`
</ha-button>`
: this.entry.disabled_by
? html`${this.hass!.localize(
"ui.dialogs.entity_registry.editor.entity_disabled"
)}${["user", "integration"].includes(
this.entry.disabled_by!
)
? html`<mwc-button
? html`<ha-button
size="small"
variant="warning"
slot="action"
@click=${this._enableEntry}
>
${this.hass!.localize(
"ui.dialogs.entity_registry.editor.enable_entity"
)}</mwc-button
)}</ha-button
>`
: ""}`
: this.hass!.localize(
@ -130,20 +133,21 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
></entity-registry-settings-editor>
</div>
<div class="buttons">
<mwc-button
class="warning"
<ha-button
variant="danger"
appearance="plain"
@click=${this._confirmDeleteEntry}
.disabled=${this._submitting ||
(!this._helperConfigEntry && !stateObj?.attributes.restored)}
>
${this.hass.localize("ui.dialogs.entity_registry.editor.delete")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._updateEntry}
.disabled=${invalidDomainUpdate || this._submitting}
>
${this.hass.localize("ui.dialogs.entity_registry.editor.update")}
</mwc-button>
</ha-button>
</div>
`;
}
@ -258,7 +262,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
position: sticky;
bottom: 0px;
}
ha-alert mwc-button {
ha-alert ha-button {
width: max-content;
}
`,

11
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiAlertOutline } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -12,6 +11,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
import { stringCompare } from "../../../common/string/compare";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-list";
import "../../../components/ha-button";
import "../../../components/ha-list-item";
import "../../../components/ha-spinner";
import "../../../components/ha-svg-icon";
@ -161,22 +161,23 @@ export class DialogHelperDetail extends LitElement {
new: true,
})}
</div>
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._createItem}
.disabled=${this._submitting}
>
${this.hass!.localize("ui.panel.config.helpers.dialog.create")}
</mwc-button>
</ha-button>
${this._params?.domain
? nothing
: html`<mwc-button
: html`<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._goBack}
.disabled=${this._submitting}
>
${this.hass!.localize("ui.common.back")}
</mwc-button>`}
</ha-button>`}
`;
} else if (this._loading || this._helperFlows === undefined) {
content = html`<ha-spinner></ha-spinner>`;

46
src/panels/config/integrations/ha-config-integration-page.ts
View File

@ -564,11 +564,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
${flow.localized_title}
<ha-button
slot="end"
unelevated
appearance="filled"
.flow=${flow}
@click=${this._continueFlow}
.label=${this.hass.localize("ui.common.add")}
></ha-button>
>
${this.hass.localize("ui.common.add")}
</ha-button>
</ha-md-list-item>`
)}
</ha-md-list>
@ -599,15 +600,16 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
>
<ha-button
slot="end"
unelevated
appearance="plain"
.flow=${flow}
@click=${this._continueFlow}
.label=${this.hass.localize(
>
${this.hass.localize(
`ui.panel.config.integrations.${
attention ? "reconfigure" : "configure"
}`
)}
></ha-button>
</ha-button>
</ha-md-list-item>`;
})}
${attentionEntries.map(
@ -838,25 +840,33 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
: nothing}
</div>
${item.disabled_by === "user"
? html`<ha-button unelevated slot="end" @click=${this._handleEnable}>
? html`<ha-button
appearance="plain"
slot="end"
@click=${this._handleEnable}
>
${this.hass.localize("ui.common.enable")}
</ha-button>`
: configPanel &&
(item.domain !== "matter" ||
isDevVersion(this.hass.config.version)) &&
!stateText
? html`<a
? html`<ha-button
appearance="plain"
slot="end"
href=${`/${configPanel}?config_entry=${item.entry_id}`}
><ha-button>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.configure"
)}
</ha-button></a
>`
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.configure"
)}
</ha-button>`
: item.supports_options
? html`
<ha-button slot="end" @click=${this._showOptions}>
<ha-button
appearance="plain"
slot="end"
@click=${this._showOptions}
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.configure"
)}
@ -1074,7 +1084,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
${configEntry.supported_subentry_types[subEntry.subentry_type]
?.supports_reconfigure
? html`
<ha-button slot="end" @click=${this._handleReconfigureSub}>
<ha-button
appearance="plain"
slot="end"
@click=${this._handleReconfigureSub}
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.configure"
)}

13
src/panels/config/labels/dialog-label-detail.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-color-picker";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-icon-picker";
@ -133,17 +133,18 @@ class DialogLabelDetail
</div>
${this._params.entry && this._params.removeEntry
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting}
>
${this.hass!.localize("ui.panel.config.labels.detail.delete")}
</mwc-button>
</ha-button>
`
: nothing}
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${this._submitting || !this._name}
@ -151,7 +152,7 @@ class DialogLabelDetail
${this._params.entry
? this.hass!.localize("ui.panel.config.labels.detail.update")
: this.hass!.localize("ui.panel.config.labels.detail.create")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

1
src/panels/config/logs/system-log-card.ts
View File

@ -5,7 +5,6 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import type { LocalizeFunc } from "../../../common/translations/localize";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/buttons/ha-progress-button";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";

18
src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { slugify } from "../../../../common/string/slugify";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-form/ha-form";
import "../../../../components/ha-button";
import type { SchemaUnion } from "../../../../components/ha-form/types";
import type {
LovelaceDashboard,
@ -104,20 +104,22 @@ export class DialogLovelaceDashboardDetail extends LitElement {
? html`
${this._params.dashboard?.id
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteDashboard}
.disabled=${this._submitting}
>
${this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.delete"
)}
</mwc-button>
</ha-button>
`
: ""}
<mwc-button
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this._toggleDefault}
.disabled=${this._params.urlPath === "lovelace" &&
defaultPanelUrlPath === "lovelace"}
@ -129,10 +131,10 @@ export class DialogLovelaceDashboardDetail extends LitElement {
: this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.set_default"
)}
</mwc-button>
</ha-button>
`
: ""}
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._updateDashboard}
.disabled=${(this._error && "url_path" in this._error) ||
@ -149,7 +151,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
: this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.create"
)}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

10
src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View File

@ -22,6 +22,7 @@ import type {
} from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-fab";
import "../../../../components/ha-icon";
import "../../../../components/ha-button";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-list-item";
@ -237,12 +238,13 @@ export class HaConfigLovelaceDashboards extends LitElement {
></ha-icon-button>
`
: html`
<mwc-button
.urlPath=${dashboard.url_path}
@click=${this._navigate}
<ha-button
href="/${dashboard.url_path}"
size="small"
appearance="plain"
>${this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.open"
)}</mwc-button
)}</ha-button
>
`,
};

12
src/panels/config/person/dialog-person-detail.ts
View File

@ -236,7 +236,8 @@ class DialogPersonDetail extends LitElement implements HassDialog {
? html`
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${(this._user && this._user.is_owner) ||
this._submitting}
@ -245,13 +246,20 @@ class DialogPersonDetail extends LitElement implements HassDialog {
</ha-button>
`
: nothing}
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
>
${this._params.entry
? this.hass!.localize("ui.panel.config.person.detail.update")
? this.hass!.localize("ui.common.save")
: this.hass!.localize("ui.panel.config.person.detail.create")}
</ha-button>
</ha-dialog>

24
src/panels/config/repairs/dialog-repairs-issue.ts
View File

@ -1,4 +1,4 @@
import { mdiClose } from "@mdi/js";
import { mdiClose, mdiOpenInNew } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state, query } from "lit/decorators";
@ -8,6 +8,7 @@ import "../../../components/ha-alert";
import "../../../components/ha-md-dialog";
import type { HaMdDialog } from "../../../components/ha-md-dialog";
import "../../../components/ha-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-dialog-header";
import "./dialog-repairs-issue-subtitle";
import "../../../components/ha-markdown";
@ -122,14 +123,15 @@ class DialogRepairsIssue extends LitElement {
: ""}
</div>
<div slot="actions">
<ha-button @click=${this._ignoreIssue}>
<ha-button appearance="plain" @click=${this._ignoreIssue}>
${this._issue!.ignored
? this.hass!.localize("ui.panel.config.repairs.dialog.unignore")
: this.hass!.localize("ui.panel.config.repairs.dialog.ignore")}
</ha-button>
${this._issue.learn_more_url
? html`
<a
<ha-button
appearance="filled"
rel="noopener noreferrer"
href=${learnMoreUrlIsHomeAssistant
? this._issue.learn_more_url.replace(
@ -138,17 +140,13 @@ class DialogRepairsIssue extends LitElement {
)
: this._issue.learn_more_url}
.target=${learnMoreUrlIsHomeAssistant ? "" : "_blank"}
@click=${learnMoreUrlIsHomeAssistant
? this.closeDialog
: undefined}
>
<ha-button
@click=${learnMoreUrlIsHomeAssistant
? this.closeDialog
: undefined}
>
${this.hass!.localize(
"ui.panel.config.repairs.dialog.learn"
)}
</ha-button>
</a>
${this.hass!.localize("ui.panel.config.repairs.dialog.learn")}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
`
: ""}
</div>

15
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -9,6 +9,7 @@ import {
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiOpenInNew,
mdiPalette,
mdiPencilOff,
mdiPlay,
@ -780,15 +781,16 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
<p>
${this.hass.localize("ui.panel.config.scene.picker.empty_text")}
</p>
<a
<ha-button
appearance="plain"
href=${documentationUrl(this.hass, "/docs/scene/editor/")}
target="_blank"
rel="noreferrer"
size="small"
>
<ha-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</a>
${this.hass.localize("ui.panel.config.common.learn_more")}
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
</div>`
: nothing}
<a href="/config/scene/edit/new" slot="fab">
@ -1201,6 +1203,9 @@ ${rejected
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty ha-button {
--mdc-icon-size: 24px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}

10
src/panels/config/scene/ha-scene-editor.ts
View File

@ -361,7 +361,11 @@ export class HaSceneEditor extends PreventUnsavedMixin(
: mdiEye}
></ha-svg-icon>
</span>
<ha-button slot="action" @click=${this._toggleLiveMode}>
<ha-button
size="small"
slot="action"
@click=${this._toggleLiveMode}
>
${this.hass.localize(
`ui.panel.config.scene.editor.${this._mode === "live" ? "switch_to_review_mode" : "live_edit"}`
)}
@ -1258,10 +1262,6 @@ export class HaSceneEditor extends PreventUnsavedMixin(
display: block;
margin-bottom: 24px;
}
ha-button {
white-space: nowrap;
--mdc-theme-primary: var(--primary-color);
}
ha-fab.dirty {
bottom: 0;
}

15
src/panels/config/script/ha-script-picker.ts
View File

@ -9,6 +9,7 @@ import {
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiOpenInNew,
mdiPlay,
mdiPlus,
mdiScriptText,
@ -779,15 +780,16 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
"ui.panel.config.script.picker.empty_text"
)}
</p>
<a
<ha-button
appearance="plain"
href=${documentationUrl(this.hass, "/docs/script/editor/")}
target="_blank"
rel="noreferrer"
size="small"
>
<ha-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</a>
${this.hass.localize("ui.panel.config.common.learn_more")}
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
</div>`
: nothing}
<ha-fab
@ -1296,6 +1298,9 @@ ${rejected
--mdc-icon-size: 80px;
max-width: 500px;
}
.empty ha-button {
--mdc-icon-size: 24px;
}
.empty h1 {
font-size: var(--ha-font-size-3xl);
}

17
src/panels/config/tags/dialog-tag-detail.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-qr-code";
import "../../../components/ha-switch";
@ -134,17 +134,18 @@ class DialogTagDetail
</div>
${this._params.entry
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting}
>
${this.hass!.localize("ui.panel.config.tag.detail.delete")}
</mwc-button>
</ha-button>
`
: nothing}
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${this._submitting || !this._name}
@ -152,9 +153,9 @@ class DialogTagDetail
${this._params.entry
? this.hass!.localize("ui.panel.config.tag.detail.update")
: this.hass!.localize("ui.panel.config.tag.detail.create")}
</mwc-button>
</ha-button>
${this._params.openWrite && !this._params.entry
? html`<mwc-button
? html`<ha-button
slot="primaryAction"
@click=${this._updateWriteEntry}
.disabled=${this._submitting || !this._name}
@ -162,7 +163,7 @@ class DialogTagDetail
${this.hass!.localize(
"ui.panel.config.tag.detail.create_and_write"
)}
</mwc-button>`
</ha-button>`
: ""}
</ha-dialog>
`;

37
src/panels/config/users/dialog-add-user.ts
View File

@ -190,24 +190,25 @@ export class DialogAddUser extends LitElement {
`
: nothing}
</div>
${this._loading
? html`
<div slot="primaryAction" class="submit-spinner">
<ha-spinner></ha-spinner>
</div>
`
: html`
<ha-button
slot="primaryAction"
.disabled=${!this._name ||
!this._username ||
!this._password ||
this._password !== this._passwordConfirm}
@click=${this._createUser}
>
${this.hass.localize("ui.panel.config.users.add_user.create")}
</ha-button>
`}
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._name ||
!this._username ||
!this._password ||
this._password !== this._passwordConfirm}
@click=${this._createUser}
.loading=${this._loading}
>
${this.hass.localize("ui.panel.config.users.add_user.create")}
</ha-button>
</ha-dialog>
`;
}

47
src/panels/config/users/dialog-user-detail.ts
View File

@ -219,28 +219,31 @@ class DialogUserDetail extends LitElement {
: nothing}
</div>
<div slot="secondaryAction">
<ha-button
class="warning"
@click=${this._deleteEntry}
.disabled=${this._submitting ||
user.system_generated ||
user.is_owner}
>
${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
</ha-button>
</div>
<div slot="primaryAction">
<ha-button
@click=${this._updateEntry}
.disabled=${!this._name ||
this._submitting ||
user.system_generated}
>
${this.hass!.localize("ui.panel.config.users.editor.update_user")}
</ha-button>
</div>
<ha-button
slot="secondaryAction"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting ||
user.system_generated ||
user.is_owner}
>
${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
</ha-button>
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${!this._name || this._submitting || user.system_generated}
>
${this.hass!.localize("ui.common.save")}
</ha-button>
</ha-dialog>
`;
}

49
src/panels/config/voice-assistants/assist-pref.ts
View File

@ -206,11 +206,16 @@ export class AssistPref extends LitElement {
`
)}
</ha-list>
<ha-button @click=${this._addPipeline} class="add" outlined>
<ha-button
appearance="filled"
@click=${this._addPipeline}
class="add"
size="small"
>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.add_assistant"
)}
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
</ha-button>
<ha-settings-row>
<span slot="heading">
@ -230,30 +235,30 @@ export class AssistPref extends LitElement {
></ha-switch>
</ha-settings-row>
<div class="card-actions">
<a
<ha-button
appearance="plain"
href="/config/voice-assistants/expose?assistants=conversation&historyBack"
>
<ha-button>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</ha-button>
</a>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</ha-button>
${this._pipelineEntitiesCount > 0
? html`
<a href="/config/voice-assistants/assist/devices">
<ha-button>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.assist_devices",
{ number: this._pipelineEntitiesCount }
)}
</ha-button>
</a>
<ha-button
appearance="plain"
href="/config/voice-assistants/assist/devices"
>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.assist_devices",
{ number: this._pipelineEntitiesCount }
)}
</ha-button>
`
: ""}
</div>

26
src/panels/config/voice-assistants/cloud-discover.ts
View File

@ -81,31 +81,35 @@ export class CloudDiscover extends LitElement {
</div>
</div>
<div class="more">
<a href="https://www.nabucasa.com" target="_blank" rel="noreferrer">
<ha-button
appearance="plain"
size="small"
href="https://www.nabucasa.com"
target="_blank"
rel="noreferrer"
>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.and_more"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
</div>
</div>
${isComponentLoaded(this.hass, "cloud")
? html`
<div class="card-actions">
<a href="/config/cloud/login">
<ha-button>
<ha-button appearance="plain">
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.sign_in"
)}
</ha-button>
</a>
<a href="/config/cloud/register">
<ha-button unelevated>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
)}
</ha-button>
</a>
<ha-button href="/config/cloud/register" appearance="filled">
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
)}
</ha-button>
</div>
`
: nothing}

13
src/panels/config/voice-assistants/dialog-expose-entity.ts
View File

@ -1,5 +1,4 @@
import "@lit-labs/virtualizer";
import "@material/mwc-button";
import { mdiClose } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@ -12,6 +11,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-check-list-item";
import "../../../components/search-input";
import "../../../components/ha-dialog";
import "../../../components/ha-button";
import "../../../components/ha-dialog-header";
import "../../../components/ha-state-icon";
import "../../../components/ha-list";
@ -95,7 +95,14 @@ class DialogExposeEntity extends LitElement {
>
</lit-virtualizer>
</ha-list>
<mwc-button
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._expose}
.disabled=${this._selected.length === 0}
@ -104,7 +111,7 @@ class DialogExposeEntity extends LitElement {
"ui.panel.config.voice_assistants.expose.expose_dialog.expose_entities",
{ count: this._selected.length }
)}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

15
src/panels/config/zone/dialog-home-zone-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
@ -6,6 +5,7 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-form/ha-form";
import "../../../components/ha-button";
import type { HomeZoneMutableParams } from "../../../data/zone";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@ -76,13 +76,20 @@ class DialogHomeZoneDetail extends LitElement {
@value-changed=${this._valueChanged}
></ha-form>
</div>
<mwc-button
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${!valid || this._submitting}
>
${this.hass!.localize("ui.panel.config.zone.detail.update")}
</mwc-button>
${this.hass!.localize("ui.common.save")}
</ha-button>
</ha-dialog>
`;
}

22
src/panels/config/zone/dialog-zone-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-form/ha-form";
import "../../../components/ha-button";
import type { SchemaUnion } from "../../../components/ha-form/types";
import type { ZoneMutableParams } from "../../../data/zone";
import { getZoneEditorInitData } from "../../../data/zone";
@ -102,25 +102,33 @@ class DialogZoneDetail extends LitElement {
</div>
${this._params.entry
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting}
>
${this.hass!.localize("ui.panel.config.zone.detail.delete")}
</mwc-button>
</ha-button>
`
: nothing}
<mwc-button
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${!valid || this._submitting}
>
${this._params.entry
? this.hass!.localize("ui.panel.config.zone.detail.update")
? this.hass!.localize("ui.common.save")
: this.hass!.localize("ui.panel.config.zone.detail.create")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

16
src/panels/developer-tools/action/developer-tools-action.ts
View File

@ -168,7 +168,8 @@ class HaPanelDevAction extends LitElement {
<div class="button-row">
<div class="buttons">
<div class="switch-mode-container">
<mwc-button
<ha-button
appearance="plain"
@click=${this._toggleYaml}
.disabled=${!this._uiAvailable}
>
@ -179,7 +180,7 @@ class HaPanelDevAction extends LitElement {
: this.hass.localize(
"ui.panel.developer-tools.tabs.actions.yaml_mode"
)}
</mwc-button>
</ha-button>
${!this._uiAvailable
? html`<span class="error"
>${this.hass.localize(
@ -211,7 +212,10 @@ class HaPanelDevAction extends LitElement {
has-extra-actions
.value=${this._response}
>
<ha-button slot="extra-actions" @click=${this._copyTemplate}
<ha-button
appearance="plain"
slot="extra-actions"
@click=${this._copyTemplate}
>${this.hass.localize(
"ui.panel.developer-tools.tabs.actions.copy_clipboard_template"
)}</ha-button
@ -306,10 +310,12 @@ class HaPanelDevAction extends LitElement {
)}
</table>
${this._yamlMode
? html`<mwc-button @click=${this._fillExampleData}
? html`<ha-button
appearance="plain"
@click=${this._fillExampleData}
>${this.hass.localize(
"ui.panel.developer-tools.tabs.actions.fill_example_data"
)}</mwc-button
)}</ha-button
>`
: ""}
</ha-expansion-panel>

1
src/panels/developer-tools/assist/developer-tools-assist.ts
View File

@ -150,6 +150,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
</div>
<div class="card-actions">
<ha-button
appearance="filled"
@click=${this._parse}
.disabled=${!this._language || !this._validInput}
>

4
src/panels/developer-tools/event/developer-tools-event.ts
View File

@ -79,7 +79,7 @@ class HaPanelDevEvent extends LitElement {
<div class="card-actions">
<ha-button
@click=${this._fireEvent}
raised
appearance="filled"
.disabled=${!this._isValid}
>${this.hass.localize(
"ui.panel.developer-tools.tabs.events.fire_event"
@ -171,7 +171,7 @@ class HaPanelDevEvent extends LitElement {
max-width: 400px;
}
mwc-button {
ha-button {
margin-top: 8px;
}

4
src/panels/developer-tools/event/event-subscribe-card.ts
View File

@ -62,7 +62,7 @@ class EventSubscribeCard extends LitElement {
</div>
<div class="card-actions">
<ha-button
raised
appearance="filled"
.disabled=${this._eventType === ""}
@click=${this._startOrStopListening}
>
@ -75,7 +75,7 @@ class EventSubscribeCard extends LitElement {
)}
</ha-button>
<ha-button
raised
appearance="plain"
.disabled=${this._eventType === ""}
@click=${this._clearEvents}
>

16
src/panels/developer-tools/statistics/dialog-statistics-fix-units-changed.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-dialog";
import "../../../components/ha-button";
import "../../../components/ha-formfield";
import "../../../components/ha-radio";
import {
@ -107,14 +107,18 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
></ha-radio>
</ha-formfield>
<mwc-button slot="primaryAction" @click=${this._fixIssue}>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._cancel}
>
${this.hass.localize("ui.common.close")}
</ha-button>
<ha-button slot="primaryAction" @click=${this._fixIssue}>
${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.fix_issue.fix"
)}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this._cancel}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

33
src/panels/developer-tools/statistics/dialog-statistics-fix.ts
View File

@ -1,16 +1,16 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-spinner";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-spinner";
import { clearStatistics, getStatisticLabel } from "../../../data/recorder";
import { haStyle, haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix";
import { showAlertDialog } from "../../lovelace/custom-card-helpers";
import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix";
@customElement("dialog-statistics-fix")
export class DialogStatisticsFix extends LitElement {
@ -148,26 +148,25 @@ export class DialogStatisticsFix extends LitElement {
</p>
${issue.type !== "entity_not_recorded"
? html`<mwc-button
? html`<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._cancel}
>
${this.hass.localize("ui.common.close")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._clearStatistics}
class="warning"
variants="danger"
.disabled=${this._clearing}
.loading=${this._clearing}
>
${this._clearing
? html`<ha-spinner
size="small"
aria-label="Saving"
></ha-spinner>`
: nothing}
${this.hass.localize("ui.common.delete")}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this._cancel}>
${this.hass.localize("ui.common.close")}
</mwc-button>`
: html`<mwc-button slot="primaryAction" @click=${this._cancel}>
</ha-button>`
: html`<ha-button slot="primaryAction" @click=${this._cancel}>
${this.hass.localize("ui.common.ok")}
</mwc-button>`}
</ha-button>`}
</ha-dialog>
`;
}

10
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -7,6 +6,7 @@ import { classMap } from "lit/directives/class-map";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-alert";
import "../../../components/ha-spinner";
import "../../../components/ha-button";
import "../../../components/ha-code-editor";
import "../../../components/ha-card";
import type { RenderTemplateResult } from "../../../data/ws-templates";
@ -149,14 +149,14 @@ class HaPanelDevTemplate extends LitElement {
></ha-code-editor>
</div>
<div class="card-actions">
<mwc-button @click=${this._restoreDemo}>
<ha-button appearance="plain" @click=${this._restoreDemo}>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.reset"
)}
</mwc-button>
<mwc-button @click=${this._clear}>
</ha-button>
<ha-button appearance="plain" @click=${this._clear}>
${this.hass.localize("ui.common.clear")}
</mwc-button>
</ha-button>
</div>
</ha-card>

15
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@ -1,16 +1,16 @@
import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { componentsWithService } from "../../../common/config/components_with_service";
import { stringCompare } from "../../../common/string/compare";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-spinner";
import type { CheckConfigResult } from "../../../data/core";
import { checkCoreConfig } from "../../../data/core";
import { domainToName } from "../../../data/integration";
import { stringCompare } from "../../../common/string/compare";
import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant, Route, TranslationDict } from "../../../types";
@ -144,20 +144,21 @@ export class DeveloperYamlConfig extends LitElement {
`}
</div>
<div class="card-actions">
<mwc-button @click=${this._validateConfig}>
<ha-button appearance="plain" @click=${this._validateConfig}>
${this.hass.localize(
"ui.panel.developer-tools.tabs.yaml.section.validation.check_config"
)}
</mwc-button>
<mwc-button
class="warning"
</ha-button>
<ha-button
variant="danger"
appearance="plain"
@click=${this._restart}
.disabled=${this._validateResult?.result === "invalid"}
>
${this.hass.localize(
"ui.panel.developer-tools.tabs.yaml.section.server_management.restart"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
<ha-card

16
src/panels/energy/cards/energy-setup-wizard-card.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -15,6 +14,7 @@ import "../../config/energy/components/ha-energy-gas-settings";
import "../../config/energy/components/ha-energy-grid-settings";
import "../../config/energy/components/ha-energy-solar-settings";
import "../../config/energy/components/ha-energy-water-settings";
import "../../../components/ha-button";
import type { Lovelace, LovelaceCard } from "../../lovelace/types";
@customElement("energy-setup-wizard-card")
@ -93,17 +93,17 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
></ha-energy-device-settings>`}
<div class="buttons">
${this._step > 0
? html`<mwc-button outlined @click=${this._back}
>${this.hass.localize("ui.panel.energy.setup.back")}</mwc-button
? html`<ha-button appearance="plain" @click=${this._back}
>${this.hass.localize("ui.panel.energy.setup.back")}</ha-button
>`
: html`<div></div>`}
${this._step < 4
? html`<mwc-button unelevated @click=${this._next}
>${this.hass.localize("ui.panel.energy.setup.next")}</mwc-button
? html`<ha-button @click=${this._next}
>${this.hass.localize("ui.panel.energy.setup.next")}</ha-button
>`
: html`<mwc-button unelevated @click=${this._setupDone}>
: html`<ha-button @click=${this._setupDone}>
${this.hass.localize("ui.panel.energy.setup.done")}
</mwc-button>`}
</ha-button>`}
</div>
`;
}
@ -170,7 +170,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
max-width: 700px;
margin: 0 auto;
}
mwc-button {
ha-button {
margin-top: 8px;
}
.buttons {

9
src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
View File

@ -6,6 +6,7 @@ import { cache } from "lit/directives/cache";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
@ -159,14 +160,14 @@ export class HuiCreateDialogCard
)}
<div slot="primaryAction">
<mwc-button @click=${this._cancel}>
<ha-button appearance="plain" @click=${this._cancel}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${this._selectedEntities.length
? html`
<mwc-button @click=${this._suggestCards}>
<ha-button @click=${this._suggestCards}>
${this.hass!.localize("ui.common.continue")}
</mwc-button>
</ha-button>
`
: ""}
</div>

30
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -8,6 +8,7 @@ import type { HASSDomEvent } from "../../../../common/dom/fire_event";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-spinner";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button";
@ -238,39 +239,38 @@ export class HuiDialogEditCard
</div>
${this._cardConfig !== undefined
? html`
<mwc-button
<ha-button
slot="secondaryAction"
@click=${this._toggleMode}
.disabled=${!this._guiModeAvailable}
class="gui-mode-button"
appearance="plain"
>
${this.hass!.localize(
!this._cardEditorEl || this._GUImode
? "ui.panel.lovelace.editor.edit_card.show_code_editor"
: "ui.panel.lovelace.editor.edit_card.show_visual_editor"
)}
</mwc-button>
</ha-button>
`
: ""}
<div slot="primaryAction" @click=${this._save}>
<mwc-button @click=${this._cancel} dialogInitialFocus>
<ha-button
appearance="plain"
@click=${this._cancel}
dialogInitialFocus
>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${this._cardConfig !== undefined && this._dirty
? html`
<mwc-button
?disabled=${!this._canSave || this._saving}
<ha-button
?disabled=${!this._canSave}
@click=${this._save}
.loading=${this._saving}
>
${this._saving
? html`
<ha-spinner
aria-label="Saving"
size="small"
></ha-spinner>
`
: this.hass!.localize("ui.common.save")}
</mwc-button>
${this.hass!.localize("ui.common.save")}
</ha-button>
`
: ``}
</div>

22
src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
View File

@ -3,10 +3,11 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import "../../../../components/ha-spinner";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
@ -14,11 +15,11 @@ import { isStrategyView } from "../../../../data/lovelace/config/view";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
import "../../cards/hui-card";
import "../../sections/hui-section";
import { addCards, addSection } from "../config-util";
import type { LovelaceContainerPath } from "../lovelace-path";
import { parseLovelaceContainerPath } from "../lovelace-path";
import "../../cards/hui-card";
import { showCreateCardDialog } from "./show-create-card-dialog";
import type { SuggestCardDialogParams } from "./show-suggest-card-dialog";
@ -124,27 +125,32 @@ export class HuiDialogSuggestCard extends LitElement {
`
: nothing}
</div>
<mwc-button
<ha-button
slot="secondaryAction"
@click=${this.closeDialog}
appearance="plain"
dialogInitialFocus
>
${this._params.yaml
? this.hass!.localize("ui.common.close")
: this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${!this._params.yaml
? html`
${!(this._sectionConfig && this._viewSupportsSection)
? html`
<mwc-button slot="primaryAction" @click=${this._pickCard}>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._pickCard}
>
${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.create_own"
)}
</mwc-button>
</ha-button>
`
: nothing}
<mwc-button
<ha-button
slot="primaryAction"
.disabled=${this._saving}
@click=${this._save}
@ -156,7 +162,7 @@ export class HuiDialogSuggestCard extends LitElement {
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
</mwc-button>
</ha-button>
`
: nothing}
</ha-dialog>

17
src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts
View File

@ -191,10 +191,19 @@ class DialogDashboardStrategyEditor extends LitElement {
></hui-dashboard-strategy-element-editor>
</div>
<ha-button class="danger" @click=${this._delete} slot="secondaryAction">
<ha-button
variant="danger"
appearance="plain"
@click=${this._delete}
slot="secondaryAction"
>
${this.hass!.localize("ui.common.delete")}
</ha-button>
<ha-button @click=${this._cancel} slot="primaryAction">
<ha-button
appearance="plain"
@click=${this._cancel}
slot="primaryAction"
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._save} slot="primaryAction">
@ -228,10 +237,6 @@ class DialogDashboardStrategyEditor extends LitElement {
--dialog-content-padding: 8px;
}
}
.danger {
--mdc-theme-primary: var(--error-color);
}
`,
];
}

20
src/panels/lovelace/hui-root.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import {
mdiCodeBraces,
@ -34,6 +32,7 @@ import {
} from "../../common/url/search-params";
import { debounce } from "../../common/util/debounce";
import { afterNextRender } from "../../common/util/render-status";
import "../../components/ha-button";
import "../../components/ha-button-menu";
import "../../components/ha-icon";
import "../../components/ha-icon-button";
@ -75,9 +74,9 @@ import { getLovelaceStrategy } from "./strategies/get-strategy";
import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
import type { Lovelace } from "./types";
import "./views/hui-view";
import "./views/hui-view-container";
import type { HUIView } from "./views/hui-view";
import "./views/hui-view-background";
import "./views/hui-view-container";
@customElement("hui-root")
class HUIRoot extends LitElement {
@ -123,14 +122,14 @@ class HUIRoot extends LitElement {
const result: TemplateResult[] = [];
if (this._editMode) {
result.push(
html`<mwc-button
outlined
html`<ha-button
appearance="filled"
size="small"
class="exit-edit-mode"
.label=${this.hass!.localize(
"ui.panel.lovelace.menu.exit_edit_mode"
)}
@click=${this._editModeDisable}
></mwc-button>
>
${this.hass!.localize("ui.panel.lovelace.menu.exit_edit_mode")}
</ha-button>
<a
href=${documentationUrl(this.hass, "/dashboards/")}
rel="noreferrer"
@ -1145,9 +1144,6 @@ class HUIRoot extends LitElement {
a {
color: var(--text-primary-color, white);
}
mwc-button.warning:not([disabled]) {
color: var(--error-color);
}
hui-view-container {
position: relative;
display: flex;

2
src/resources/theme/color.globals.ts
View File

@ -34,8 +34,6 @@ export const colorStyles = css`
--scrollbar-thumb-color: rgb(194, 194, 194);
--error-color: #db4437;
--error-color-lighter: #ffdedc;
--error-color-darker: #b30532;
--warning-color: #ffa600;
--success-color: #43a047;
--info-color: #039be5;