jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix ha-button with missing label and links (#26332)

Browse Source
This commit is contained in:
Wendelin 2025-07-31 12:40:17 +02:00 committed by GitHub
parent 19c2f9c9e8
commit eba1f401cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
88 changed files with 407 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/copilot-instructions.md vendored
View File

@ -310,7 +310,11 @@ export class DialogMyFeature
.heading=${createCloseHeading(this.hass, this._params.title)}
>
<!-- Dialog content -->
<ha-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="secondaryAction"
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._submit} slot="primaryAction">

13
demo/src/custom-cards/ha-demo-card.ts
View File

@ -89,11 +89,14 @@ export class HADemoCard extends LitElement implements LovelaceCard {
)}
</div>
<div class="actions small-hidden">
<a href="https://www.home-assistant.io" target="_blank">
<ha-button>
${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
</ha-button>
</a>
<ha-button
appearance="plain"
size="small"
href="https://www.home-assistant.io"
target="_blank"
>
${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
</ha-button>
</div>
</ha-card>
`;

4
gallery/src/pages/components/ha-alert.markdown
View File

@ -147,13 +147,13 @@ The `title ` option should not be used without a description.
<ha-alert alert-type="success">
This is a success alert — check it out!
<ha-button slot="action" label="Undo"></ha-button>
<ha-button slot="action">Undo</ha-button>
</ha-alert>
```html
<ha-alert alert-type="success">
This is a success alert — check it out!
<ha-button slot="action" label="Undo"></ha-button>
<ha-button slot="action">Undo</ha-button>
</ha-alert>
```

16
gallery/src/pages/components/ha-alert.ts
View File

@ -78,21 +78,13 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action",
type: "error",
actionSlot: html`<ha-button
size="small"
slot="action"
label="restart"
></ha-button>`,
actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
},
{
title: "Unsaved data",
description: "You have unsaved data",
type: "warning",
actionSlot: html`<ha-button
size="small"
slot="action"
label="save"
></ha-button>`,
actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
},
{
title: "Slotted icon",
@ -116,7 +108,7 @@ const alerts: {
title: "Slotted action",
description: "Alert with slotted action",
type: "info",
actionSlot: html`<ha-button slot="action" label="action"></ha-button>`,
actionSlot: html`<ha-button slot="action">action</ha-button>`,
},
{
description: "Dismissable information (RTL)",
@ -128,7 +120,7 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action (RTL)",
type: "error",
actionSlot: html`<ha-button slot="action" label="restart"></ha-button>`,
actionSlot: html`<ha-button slot="action">restart</ha-button>`,
rtl: true,
},
{

13
gallery/src/pages/components/ha-button.markdown
View File

@ -53,12 +53,13 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
**Properties/Attributes**
| Name | Type | Default | Description |
| ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- |
| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. |
| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. |
| size | "small"/"medium" | "medium" | Sets the button size. |
| hideContent | Boolean | false | Hides the button content (for overlays) |
| Name | Type | Default | Description |
| ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. |
| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. |
| size | "small"/"medium" | "medium" | Sets the button size. |
| loading | Boolean | false | Shows a loading indicator instead of the buttons label and disable buttons click. |
| disabled | Boolean | false | Disables the button and prevents user interaction. |
**CSS Custom Properties**

4
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -604,8 +604,8 @@ export class DialogHassioNetwork
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
display: flex;
justify-content: space-between;
padding: 8px;
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
padding: 16px;
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
background-color: var(--mdc-theme-surface, #fff);
}
.warning {

18
hassio/src/update-available/update-available-card.ts
View File

@ -208,14 +208,16 @@ class UpdateAvailableCard extends LitElement {
<div class="card-actions">
${changelog
? html`
<a href=${changelog} target="_blank" rel="noreferrer">
<ha-button
.label=${this.supervisor.localize(
"update_available.open_release_notes"
)}
>
</ha-button>
</a>
<ha-button
href=${changelog}
target="_blank"
rel="noreferrer"
appearance="plain"
>
${this.supervisor.localize(
"update_available.open_release_notes"
)}
</ha-button>
`
: nothing}
<span></span>

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

@ -110,12 +110,9 @@ class LandingPageLogs extends LitElement {
})}"
@click=${this._scrollToBottom}
>
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
${this.localize("logs.scroll_down_button")}
<ha-svg-icon
.path=${mdiArrowCollapseDown}
slot="trailingIcon"
></ha-svg-icon>
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
</ha-button>
`;
}

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

@ -32,7 +32,8 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
* @attr {("small"|"medium")} size - Sets the button size.
* @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
* @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
* @attr {boolean} hideContent - Hides the button content (for overlays).
* @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
* @attr {boolean} disabled - Disables the button and prevents user interaction.
*/
@customElement("ha-button")
export class HaButton extends Button {

7
src/components/ha-picture-upload.ts
View File

@ -92,11 +92,12 @@ export class HaPictureUpload extends LitElement {
/>
<div>
<ha-button
appearance="plain"
size="small"
variant="danger"
@click=${this._handleChangeClick}
.label=${this.hass.localize(
"ui.components.picture-upload.clear_picture"
)}
>
${this.hass.localize("ui.components.picture-upload.clear_picture")}
</ha-button>
</div>
</div>

2
src/components/ha-qr-scanner.ts
View File

@ -103,7 +103,7 @@ class HaQrScanner extends LitElement {
>
${this._error || this._warning}
${this._error
? html` <ha-button @click=${this._retry} slot="action">
? html`<ha-button @click=${this._retry} slot="action">
${this.hass.localize("ui.components.qr-scanner.retry")}
</ha-button>`
: nothing}

2
src/components/ha-yaml-editor.ts
View File

@ -130,7 +130,7 @@ export class HaYamlEditor extends LitElement {
<div class="card-actions">
${this.copyClipboard
? html`
<ha-button @click=${this._copyYaml}>
<ha-button appearance="plain" @click=${this._copyYaml}>
${this.hass.localize(
"ui.components.yaml-editor.copy_to_clipboard"
)}

26
src/components/media-player/dialog-media-manage.ts
View File

@ -119,15 +119,15 @@ class DialogMediaManage extends LitElement {
class="danger"
slot="navigationIcon"
.disabled=${this._deleting}
.label=${this.hass.localize(
@click=${this._handleDelete}
>
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
${this.hass.localize(
`ui.components.media-browser.file_management.${
this._deleting ? "deleting" : "delete"
}`,
{ count: this._selected.size }
)}
@click=${this._handleDelete}
>
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
</ha-button>
${this._deleting
@ -135,15 +135,15 @@ class DialogMediaManage extends LitElement {
: html`
<ha-button
slot="actionItems"
.label=${this.hass.localize(
`ui.components.media-browser.file_management.deselect_all`
)}
@click=${this._handleDeselectAll}
>
<ha-svg-icon
.path=${mdiClose}
slot="icon"
slot="start"
></ha-svg-icon>
${this.hass.localize(
`ui.components.media-browser.file_management.deselect_all`
)}
</ha-button>
`}
`}
@ -331,20 +331,10 @@ class DialogMediaManage extends LitElement {
--mdc-theme-primary: var(--error-color);
}
ha-svg-icon[slot="icon"] {
vertical-align: middle;
}
ha-tip {
margin: 16px;
}
ha-svg-icon[slot="icon"] {
margin-inline-start: 0px !important;
margin-inline-end: 8px !important;
direction: var(--direction);
}
.refresh {
display: flex;
height: 200px;

14
src/components/media-player/ha-media-manage-button.ts
View File

@ -1,5 +1,5 @@
import { mdiFolderEdit } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import type { MediaPlayerItem } from "../../data/media-player";
@ -53,18 +53,6 @@ class MediaManageButton extends LitElement {
onClose: () => fireEvent(this, "media-refresh"),
});
}
static styles = css`
ha-svg-icon[slot="icon"] {
vertical-align: middle;
}
ha-svg-icon[slot="icon"] {
margin-inline-start: 0px;
margin-inline-end: 8px;
direction: var(--direction);
}
`;
}
declare global {

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

@ -104,22 +104,12 @@ class StepFlowForm extends LitElement {
</div>`
: nothing}
<div class="buttons">
${this._loading
? html`
<div class="submit-spinner">
<ha-spinner size="small"></ha-spinner>
</div>
`
: html`
<div>
<ha-button @click=${this._submitStep}>
${this.flowConfig.renderShowFormStepSubmitButton(
this.hass,
this.step
)}
</ha-button>
</div>
`}
<ha-button @click=${this._submitStep} .loading=${this._loading}>
${this.flowConfig.renderShowFormStepSubmitButton(
this.hass,
this.step
)}
</ha-button>
</div>
`;
}
@ -304,15 +294,6 @@ class StepFlowForm extends LitElement {
color: red;
}
.submit-spinner {
height: 36px;
display: flex;
align-items: center;
margin-right: 16px;
margin-inline-end: 16px;
margin-inline-start: initial;
}
ha-alert,
ha-form {
margin-top: 24px;
@ -320,7 +301,7 @@ class StepFlowForm extends LitElement {
}
.buttons {
padding: 8px;
padding: 16px;
}
`,
];

2
src/dialogs/config-flow/styles.ts
View File

@ -34,7 +34,7 @@ export const configFlowContentStyles = css`
.buttons {
position: relative;
padding: 8px 16px 8px 24px;
padding: 16px;
margin: 8px 0 0;
color: var(--primary-color);
display: flex;

2
src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
View File

@ -228,7 +228,7 @@ class DialogLightColorFavorite extends LitElement {
</div>
</div>
<div slot="actions">
<ha-button @click=${this._cancelDialog}>
<ha-button appearance="plain" @click=${this._cancelDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._save} .disabled=${!this._color}

9
src/dialogs/more-info/controls/more-info-camera.ts
View File

@ -1,13 +1,13 @@
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import { slugify } from "../../../common/string/slugify";
import "../../../components/buttons/ha-progress-button";
import "../../../components/ha-camera-stream";
import type { CameraEntity } from "../../../data/camera";
import type { HomeAssistant } from "../../../types";
import "../../../components/buttons/ha-progress-button";
import { UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import { fileDownload } from "../../../util/file_download";
import { showToast } from "../../../util/toast";
import { slugify } from "../../../common/string/slugify";
class MoreInfoCamera extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -46,6 +46,7 @@ class MoreInfoCamera extends LitElement {
@click=${this._downloadSnapshot}
.progress=${this._waiting}
.disabled=${this.stateObj.state === UNAVAILABLE}
appearance="filled"
>
${this.hass.localize(
"ui.dialogs.more_info_control.camera.download_snapshot"
@ -104,7 +105,7 @@ class MoreInfoCamera extends LitElement {
flex-wrap: wrap;
justify-content: flex-end;
box-sizing: border-box;
padding: 12px;
padding: 16px;
z-index: 1;
gap: 8px;
}

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

@ -51,7 +51,11 @@ class MoreInfoSiren extends LitElement {
.iconPathOff=${mdiVolumeOff}
></ha-state-control-toggle>
${allowAdvanced
? html`<ha-button @click=${this._showAdvancedControlsDialog}>
? html`<ha-button
appearance="plain"
size="small"
@click=${this._showAdvancedControlsDialog}
>
${this.hass.localize("ui.components.siren.advanced_controls")}
</ha-button>`
: nothing}

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

@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
flex-wrap: wrap;
justify-content: flex-end;
box-sizing: border-box;
padding: 12px;
padding: 16px;
z-index: 1;
gap: 8px;
}

2
src/dialogs/notifications/notification-item-template.ts
View File

@ -38,7 +38,7 @@ export class HuiNotificationItemTemplate extends LitElement {
.actions {
border-top: 1px solid var(--divider-color, #e8e8e8);
padding: 5px 16px;
padding: 8px;
display: flex;
justify-content: flex-end;
}

2
src/dialogs/update_backup/dialog-update-backup.ts
View File

@ -32,7 +32,7 @@ class DialogBox extends LitElement {
)}
>
<p>${this.hass.localize("ui.dialogs.update_backup.text")}</p>
<ha-button @click=${this._no} slot="secondaryAction">
<ha-button appearance="plain" @click=${this._no} slot="secondaryAction">
${this.hass!.localize("ui.common.no")}
</ha-button>
<ha-button @click=${this._yes} slot="primaryAction">

1
src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts
View File

@ -76,7 +76,6 @@ export class CloudStepSignin extends LitElement {
</div>
<div class="footer">
<ha-button
unelevated
@click=${this._handleLogin}
.disabled=${this._requestInProgress}
>${this.hass.localize(

4
src/dialogs/voice-assistant-setup/cloud/cloud-step-signup.ts
View File

@ -90,11 +90,11 @@ export class CloudStepSignup extends LitElement {
? html`<ha-button
@click=${this._handleResendVerifyEmail}
.disabled=${this._requestInProgress}
appearance="plain"
>${this.hass.localize(
"ui.panel.config.cloud.register.resend_confirm_email"
)}</ha-button
><ha-button
unelevated
@click=${this._login}
.disabled=${this._requestInProgress}
>${this.hass.localize(
@ -104,12 +104,12 @@ export class CloudStepSignup extends LitElement {
: html`<ha-button
@click=${this._signIn}
.disabled=${this._requestInProgress}
appearance="plain"
>${this.hass.localize(
"ui.panel.config.cloud.login.sign_in"
)}</ha-button
>
<ha-button
unelevated
@click=${this._handleRegister}
.disabled=${this._requestInProgress}
>${this.hass.localize("ui.common.next")}</ha-button

12
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts
View File

@ -51,16 +51,16 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
)}
</p>
<div class="footer">
<a
<ha-button
appearance="plain"
href=${documentationUrl(
this.hass,
"/voice_control/troubleshooting/#i-dont-get-a-voice-response"
)}
><ha-button
>${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.check.help"
)}</ha-button
></a
>
>${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.check.help"
)}</ha-button
>
<ha-button @click=${this._testConnection}
>${this.hass.localize(

47
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts
View File

@ -80,7 +80,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
${this._detailState || "Installation can take several minutes"}
</p>`
: this._state === "ERROR"
? html` <img
? html`<img
src="/static/images/voice-assistant/error.png"
alt="Casita Home Assistant error logo"
/>
@ -95,24 +95,27 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
"ui.panel.config.voice_assistants.satellite_wizard.local.failed_secondary"
)}
</p>
<ha-button @click=${this._prevStep}
<ha-button
appearance="plain"
size="small"
@click=${this._prevStep}
>${this.hass.localize("ui.common.back")}</ha-button
>
<a
<ha-button
href=${documentationUrl(
this.hass,
"/voice_control/voice_remote_local_assistant/"
)}
target="_blank"
rel="noreferrer noopener"
size="small"
appearance="plain"
>
<ha-button>
<ha-svg-icon .path=${mdiOpenInNew} slot="icon"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.common.learn_more"
)}</ha-button
>
</a>`
<ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.common.learn_more"
)}</ha-button
>`
: this._state === "NOT_SUPPORTED"
? html`<img
src="/static/images/voice-assistant/error.png"
@ -128,27 +131,27 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
"ui.panel.config.voice_assistants.satellite_wizard.local.not_supported_secondary"
)}
</p>
<ha-button @click=${this._prevStep}
<ha-button
appearance="plain"
size="small"
@click=${this._prevStep}
>${this.hass.localize("ui.common.back")}</ha-button
>
<a
<ha-button
href=${documentationUrl(
this.hass,
"/voice_control/voice_remote_local_assistant/"
)}
target="_blank"
rel="noreferrer noopener"
appearance="plain"
size="small"
>
<ha-button>
<ha-svg-icon
.path=${mdiOpenInNew}
slot="icon"
></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.common.learn_more"
)}</ha-button
>
</a>`
<ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.common.learn_more"
)}</ha-button
>`
: nothing}
</div>`;
}

5
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
View File

@ -235,10 +235,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
: nothing}
</div>
<div class="footer">
<ha-button
@click=${this._createPipeline}
unelevated
.disabled=${!this._value}
<ha-button @click=${this._createPipeline} .disabled=${!this._value}
>${this.hass.localize("ui.common.next")}</ha-button
>
</div>`;

27
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
View File

@ -126,8 +126,15 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
</ha-list-item>`
)}
</ha-select>
<ha-button @click=${this._testWakeWord}>
<ha-svg-icon slot="icon" .path=${mdiMicrophone}></ha-svg-icon>
<ha-button
appearance="plain"
size="small"
@click=${this._testWakeWord}
>
<ha-svg-icon
slot="start"
.path=${mdiMicrophone}
></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.success.test_wakeword"
)}
@ -151,8 +158,12 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
</ha-list-item>`
)}
</ha-select>
<ha-button @click=${this._openPipeline}>
<ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
<ha-button
appearance="plain"
size="small"
@click=${this._openPipeline}
>
<ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.success.edit_pipeline"
)}
@ -169,8 +180,12 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
@value-changed=${this._voicePicked}
@closed=${stopPropagation}
></ha-tts-voice-picker>
<ha-button @click=${this._testTts}>
<ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
<ha-button
appearance="plain"
size="small"
@click=${this._testTts}
>
<ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.success.try_tts"
)}

5
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts
View File

@ -148,7 +148,10 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
${this.assistConfiguration &&
this.assistConfiguration.available_wake_words.length > 1
? html`<div class="footer centered">
<ha-button @click=${this._changeWakeWord}
<ha-button
appearance="plain"
size="small"
@click=${this._changeWakeWord}
>${this.hass.localize(
"ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
)}</ha-button

1
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -271,7 +271,6 @@ export class HaVoiceCommandDialog extends LitElement {
margin-inline-start: -8px;
}
ha-button-menu ha-button {
--ha-font-size-l: var(--ha-font-size-m);
--ha-button-height: 20px;
}
ha-button-menu ha-button::part(base) {

4
src/layouts/ha-init-page.ts
View File

@ -22,7 +22,9 @@ class HaInitPage extends LitElement {
<p class="retry-text">
Retrying in ${this._retryInSeconds} seconds...
</p>
<ha-button @click=${this._retry}>Retry now</ha-button>
<ha-button size="small" appearance="plain" @click=${this._retry}
>Retry now</ha-button
>
${location.host.includes("ui.nabu.casa")
? html`
<p>

7
src/managers/notification-manager.ts
View File

@ -69,10 +69,13 @@ class NotificationManager extends LitElement {
${this._parameters?.action
? html`
<ha-button
appearance="plain"
size="small"
slot="action"
.label=${this._parameters?.action.text}
@click=${this._buttonClicked}
></ha-button>
>
${this._parameters?.action.text}
</ha-button>
`
: nothing}
${this._parameters?.dismissable

13
src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts
View File

@ -32,17 +32,16 @@ class OnboardingRestoreBackupNoCloudBackup extends LitElement {
<ha-button @click=${this._signOut}>
${this.localize("ui.panel.page-onboarding.restore.ha-cloud.sign_out")}
</ha-button>
<a
<ha-button
href="https://www.nabucasa.com/config/backups/"
target="_blank"
rel="noreferrer noopener"
appearance="plain"
>
<ha-button>
${this.localize(
"ui.panel.page-onboarding.restore.ha-cloud.learn_more"
)}
</ha-button>
</a>
${this.localize(
"ui.panel.page-onboarding.restore.ha-cloud.learn_more"
)}
</ha-button>
</div>
`;
}

16
src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
View File

@ -131,18 +131,17 @@ class OnboardingRestoreBackupRestore extends LitElement {
${this.localize(
"ui.panel.page-onboarding.restore.details.addons_unsupported"
)}
<a
<ha-button
slot="action"
href="https://www.home-assistant.io/installation/#advanced-installation-methods"
target="_blank"
rel="noreferrer noopener"
size="small"
>
${this.localize(
"ui.panel.page-onboarding.restore.ha-cloud.learn_more"
)}</ha-button
>
<ha-button
>${this.localize(
"ui.panel.page-onboarding.restore.ha-cloud.learn_more"
)}</ha-button
>
</a>
</ha-alert>`
: nothing}
${!onlyHomeAssistantBackup
@ -191,14 +190,13 @@ class OnboardingRestoreBackupRestore extends LitElement {
<div class="actions${this.mode === "cloud" ? " cloud" : ""}">
${this.mode === "cloud"
? html`<ha-button @click=${this._signOut}>
? html`<ha-button appearance="plain" @click=${this._signOut}>
${this.localize(
"ui.panel.page-onboarding.restore.ha-cloud.sign_out"
)}
</ha-button>`
: nothing}
<ha-progress-button
unelevated
.progress=${this._loading}
.disabled=${this._loading ||
(backupProtected && this._encryptionKey === "") ||

6
src/panels/calendar/confirm-event-dialog-box.ts
View File

@ -40,7 +40,11 @@ class ConfirmEventDialogBox extends LitElement {
<div>
<p>${this._params.text}</p>
</div>
<ha-button @click=${this._dismiss} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this._dismiss}
slot="secondaryAction"
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button

25
src/panels/calendar/ha-panel-calendar.ts
View File

@ -135,10 +135,7 @@ class PanelCalendar extends LitElement {
>
<ha-button slot="trigger">
${this.hass.localize("ui.components.calendar.my_calendars")}
<ha-svg-icon
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
<ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
</ha-button>
${calendarItems}
${this.hass.user?.is_admin
@ -303,25 +300,7 @@ class PanelCalendar extends LitElement {
--calendar-border-width: 1px 0;
}
ha-button-menu ha-button {
--mdc-theme-primary: currentColor;
--mdc-typography-button-text-transform: none;
--mdc-typography-button-font-size: var(
--mdc-typography-headline6-font-size,
var(--ha-font-size-l)
);
--mdc-typography-button-font-weight: var(
--mdc-typography-headline6-font-weight,
var(--ha-font-weight-medium)
);
--mdc-typography-button-letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em
);
--mdc-typography-button-line-height: var(
--mdc-typography-headline6-line-height,
var(--ha-line-height-expanded)
);
--button-height: 40px;
--ha-font-size-m: var(--ha-font-size-l);
}
:host([mobile]) .lists {
--mdc-menu-min-width: 100vw;

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

@ -220,32 +220,25 @@ export class DialogAddApplicationCredential extends LitElement {
helperPersistent
></ha-password-field>
</div>
${this._loading
? html`
<div slot="primaryAction" class="submit-spinner">
<ha-spinner></ha-spinner>
</div>
`
: html`
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._abortDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._domain ||
!this._clientId ||
!this._clientSecret}
@click=${this._addApplicationCredential}
>
${this.hass.localize(
"ui.panel.config.application_credentials.editor.add"
)}
</ha-button>
`}
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._abortDialog}
.disabled=${this._loading}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._domain || !this._clientId || !this._clientSecret}
@click=${this._addApplicationCredential}
.loading=${this._loading}
>
${this.hass.localize(
"ui.panel.config.application_credentials.editor.add"
)}
</ha-button>
</ha-dialog>
`;
}

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

@ -30,6 +30,8 @@ export default class HaAutomationAction extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public root = false;
@property({ attribute: false }) public actions!: Action[];
@property({ attribute: false }) public highlightedActions?: Action[];
@ -110,6 +112,8 @@ export default class HaAutomationAction extends LitElement {
<ha-button
.disabled=${this.disabled}
@click=${this._addActionDialog}
.appearance=${this.root ? "accent" : "filled"}
.size=${this.root ? "medium" : "small"}
>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize(
@ -117,9 +121,10 @@ export default class HaAutomationAction extends LitElement {
)}
</ha-button>
<ha-button
appearance="plain"
.disabled=${this.disabled}
@click=${this._addActionBuildingBlockDialog}
appearance="plain"
.size=${this.root ? "medium" : "small"}
>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize(

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

@ -34,6 +34,8 @@ export default class HaAutomationCondition extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public root = false;
@state() private _showReorder = false;
@state()
@ -159,6 +161,8 @@ export default class HaAutomationCondition extends LitElement {
<ha-button
.disabled=${this.disabled}
@click=${this._addConditionDialog}
.appearance=${this.root ? "accent" : "filled"}
.size=${this.root ? "medium" : "small"}
>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize(
@ -168,6 +172,7 @@ export default class HaAutomationCondition extends LitElement {
<ha-button
.disabled=${this.disabled}
appearance="plain"
.size=${this.root ? "medium" : "small"}
@click=${this._addConditionBuildingBlockDialog}
>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>

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

@ -228,6 +228,7 @@ export class HaManualAutomationEditor extends LitElement {
@value-changed=${this._conditionChanged}
.hass=${this.hass}
.disabled=${this.disabled}
root
></ha-automation-condition>
<div class="header">
@ -269,6 +270,7 @@ export class HaManualAutomationEditor extends LitElement {
.hass=${this.hass}
.narrow=${this.narrow}
.disabled=${this.disabled}
root
></ha-automation-action>
`;
}

10
src/panels/config/automation/option/ha-automation-option.ts
View File

@ -100,14 +100,14 @@ export default class HaAutomationOption extends LitElement {
)}
<div class="buttons">
<ha-button
outlined
appearance="filled"
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.add_option"
)}
@click=${this._addOption}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.add_option"
)}
</ha-button>
</div>
</div>

6
src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
View File

@ -58,7 +58,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
></ha-yaml-editor>
<div slot="primaryAction">
<ha-button @click=${this._handleAppend}>
<ha-button appearance="plain" @click=${this._handleAppend}>
${this.hass.localize("ui.common.append")}
</ha-button>
<ha-button @click=${this._handleReplace}>
@ -89,6 +89,10 @@ class DialogPasteReplace extends LitElement implements HassDialog {
font-size: inherit;
font-weight: inherit;
}
div[slot="primaryAction"] {
display: flex;
gap: 8px;
}
`,
];
}

12
src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
View File

@ -99,13 +99,11 @@ class HaBackupOverviewBackups extends LitElement {
</ha-md-list>
</div>
<div class="card-actions">
<a href="/config/backup/backups?type=all">
<ha-button appearance="filled">
${this.hass.localize(
"ui.panel.config.backup.overview.backups.show_all"
)}
</ha-button>
</a>
<ha-button appearance="filled" href="/config/backup/backups?type=all">
${this.hass.localize(
"ui.panel.config.backup.overview.backups.show_all"
)}
</ha-button>
</div>
</ha-card>
`;

9
src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
View File

@ -375,8 +375,13 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button slot="end" @click=${this._downloadKey}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-button
size="small"
appearance="plain"
slot="end"
@click=${this._downloadKey}
>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}

9
src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
View File

@ -128,7 +128,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
<ha-button
@click=${this._submit}
.disabled=${!this._newEncryptionKey}
class="danger"
variant="danger"
>
${this.hass.localize(
"ui.panel.config.backup.dialogs.change_encryption_key.actions.change"
@ -176,7 +176,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
)}
</span>
<ha-button slot="end" @click=${this._downloadOld}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_old_emergency_kit_action"
)}
@ -211,7 +211,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
)}
</span>
<ha-button slot="end" @click=${this._downloadNew}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}
@ -297,9 +297,6 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
--md-list-item-leading-space: 0;
--md-list-item-trailing-space: 0;
}
ha-button.danger {
--mdc-theme-primary: var(--error-color);
}
.encryption-key {
border: 1px solid var(--divider-color);
background-color: var(--primary-background-color);

2
src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts
View File

@ -112,7 +112,7 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
: nothing}
</div>
<div slot="actions">
<ha-button @click=${this._cancel}>
<ha-button appearance="plain" @click=${this._cancel}>
${this.hass.localize("ui.common.cancel")}
</ha-button>

2
src/panels/config/backup/dialogs/dialog-restore-backup.ts
View File

@ -227,7 +227,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
private _renderConfirmActions() {
return html`
<ha-button @click=${this.closeDialog}>
<ha-button appearance="plain" @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._restoreBackup} variant="danger">

9
src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
View File

@ -151,8 +151,13 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button slot="end" @click=${this._download}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-button
size="small"
appearance="plain"
slot="end"
@click=${this._download}
>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}

9
src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
View File

@ -87,8 +87,13 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button slot="end" @click=${this._download}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-button
size="small"
appearance="plain"
slot="end"
@click=${this._download}
>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}

5
src/panels/config/backup/dialogs/dialog-upload-backup.ts
View File

@ -113,7 +113,10 @@ export class DialogUploadBackup
></ha-file-upload>
</div>
<div slot="actions">
<ha-button @click=${this.closeDialog} .disabled=${this._uploading}
<ha-button
appearance="plain"
@click=${this.closeDialog}
.disabled=${this._uploading}
>${this.hass.localize("ui.common.cancel")}</ha-button
>
<ha-button

6
src/panels/config/backup/ha-config-backup-backups.ts
View File

@ -417,7 +417,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
<div slot="selection-bar">
${!this.narrow
? html`
<ha-button @click=${this._deleteSelected} class="warning">
<ha-button
appearance="plain"
@click=${this._deleteSelected}
variant="danger"
>
${this.hass.localize(
"ui.panel.config.backup.backups.delete_selected"
)}

14
src/panels/config/backup/ha-config-backup-location.ts
View File

@ -158,18 +158,18 @@ class HaConfigBackupDetails extends LitElement {
"ui.panel.config.backup.location.encryption.location_encrypted_cloud_description"
)}
</span>
<a
<ha-button
href="https://www.nabucasa.com/config/backups/"
target="_blank"
slot="end"
rel="noreferrer noopener"
appearance="plain"
size="small"
>
<ha-button>
${this.hass.localize(
"ui.panel.config.backup.location.encryption.location_encrypted_cloud_learn_more"
)}
</ha-button>
</a>
${this.hass.localize(
"ui.panel.config.backup.location.encryption.location_encrypted_cloud_learn_more"
)}
</ha-button>
</ha-md-list-item>
`
: encrypted

6
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -187,7 +187,11 @@ export class CloudRemotePref extends LitElement {
)
: nothing}</span
>
<ha-button @click=${this._openCertInfo}>
<ha-button
appearance="plain"
size="small"
@click=${this._openCertInfo}
>
${this.hass.localize(
"ui.panel.config.cloud.account.remote.more_info"
)}

2
src/panels/config/cloud/account/cloud-tts-pref.ts
View File

@ -126,7 +126,7 @@ export class CloudTTSPref extends LitElement {
`}
</div>
<div class="flex"></div>
<ha-button @click=${this._openTryDialog}>
<ha-button appearance="plain" @click=${this._openTryDialog}>
${this.hass.localize("ui.panel.config.cloud.account.tts.try")}
</ha-button>
</div>

4
src/panels/config/cloud/account/dialog-cloud-support-package.ts
View File

@ -77,7 +77,9 @@ export class DialogSupportPackage extends LitElement {
</ha-alert>
<hr />
<div class="actions">
<ha-button @click=${this.closeDialog}>Close</ha-button>
<ha-button appearance="plain" @click=${this.closeDialog}
>Close</ha-button
>
<ha-button @click=${this._download}>Download</ha-button>
</div>
</div>

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

@ -202,7 +202,7 @@ export class EntitySettingsHelperTab extends LitElement {
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 0 24px 24px 24px;
padding: 16px;
background-color: var(--mdc-theme-surface, #fff);
}
.error {

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

@ -249,9 +249,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
.buttons {
box-sizing: border-box;
display: flex;
padding: 8px;
padding: 16px;
justify-content: space-between;
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
background-color: var(--mdc-theme-surface, #fff);
border-top: 1px solid var(--divider-color);
position: sticky;

3
src/panels/config/helpers/forms/dialog-schedule-block-info.ts
View File

@ -92,8 +92,9 @@ class DialogScheduleBlockInfo extends LitElement {
</div>
<ha-button
slot="secondaryAction"
class="warning"
@click=${this._deleteBlock}
appearance="plain"
variant="danger"
>
${this.hass!.localize("ui.common.delete")}
</ha-button>

2
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -145,7 +145,7 @@ class HaInputSelectForm extends LitElement {
)}
@keydown=${this._handleKeyAdd}
></ha-textfield>
<ha-button @click=${this._addOption}
<ha-button size="small" appearance="plain" @click=${this._addOption}
>${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add"
)}</ha-button

2
src/panels/config/integrations/ha-config-entry-row.ts
View File

@ -207,7 +207,7 @@ class HaConfigEntryRow extends LitElement {
: nothing}
</div>
${item.disabled_by === "user"
? html`<ha-button unelevated slot="end" @click=${this._handleEnable}>
? html`<ha-button slot="end" @click=${this._handleEnable}>
${this.hass.localize("ui.common.enable")}
</ha-button>`
: configPanel &&

7
src/panels/config/integrations/ha-disabled-config-entry-card.ts
View File

@ -45,10 +45,9 @@ export class HaDisabledConfigEntryCard extends LitElement {
>
<ha-icon-button .path=${mdiCog}></ha-icon-button>
</a>
<ha-button
@click=${this._handleEnable}
.label=${this.hass.localize("ui.common.enable")}
></ha-button>
<ha-button @click=${this._handleEnable} appearance="filled">
${this.hass.localize("ui.common.enable")}
</ha-button>
</ha-integration-action-card>
`;
}

7
src/panels/config/integrations/ha-ignored-config-entry-card.ts
View File

@ -34,12 +34,11 @@ export class HaIgnoredConfigEntryCard extends LitElement {
this.entry.localized_domain_name
: this.entry.title}
>
<ha-button
@click=${this._removeIgnoredIntegration}
.label=${this.hass.localize(
<ha-button appearance="plain" @click=${this._removeIgnoredIntegration}>
${this.hass.localize(
"ui.panel.config.integrations.ignore.stop_ignore"
)}
></ha-button>
</ha-button>
</ha-integration-action-card>
`;
}

55
src/panels/config/integrations/ha-integration-card.ts
View File

@ -112,7 +112,8 @@ export class HaIntegrationCard extends LitElement {
return html`
<div class="card-actions">
${devices.length > 0
? html`<a
? html`<ha-button
appearance="plain"
href=${devices.length === 1 &&
// Always link to device page for protocol integrations to show Add Device button
// @ts-expect-error
@ -120,40 +121,36 @@ export class HaIntegrationCard extends LitElement {
? `/config/devices/device/${devices[0].id}`
: `/config/devices/dashboard?historyBack=1&domain=${this.domain}`}
>
<ha-button appearance="plain">
${this.hass.localize(
`ui.panel.config.integrations.config_entry.${
services ? "services" : "devices"
}`,
{ count: devices.length }
)}
</ha-button>
</a>`
${this.hass.localize(
`ui.panel.config.integrations.config_entry.${
services ? "services" : "devices"
}`,
{ count: devices.length }
)}
</ha-button>`
: entitiesCount > 0
? html`<a
? html`<ha-button
appearance="plain"
href=${`/config/entities?historyBack=1&domain=${this.domain}`}
>
<ha-button appearance="plain">
${this.hass.localize(
`ui.panel.config.integrations.config_entry.entities`,
{ count: entitiesCount }
)}
</ha-button>
</a>`
${this.hass.localize(
`ui.panel.config.integrations.config_entry.entities`,
{ count: entitiesCount }
)}
</ha-button>`
: this.items.find((itm) => itm.source !== "yaml")
? html`<a
? html`<ha-button
appearance="plain"
href=${`/config/integrations/integration/${this.domain}`}
>
<ha-button appearance="plain">
${this.hass.localize(
`ui.panel.config.integrations.config_entry.entries`,
{
count: this.items.filter((itm) => itm.source !== "yaml")
.length,
}
)}
</ha-button>
</a>`
${this.hass.localize(
`ui.panel.config.integrations.config_entry.entries`,
{
count: this.items.filter((itm) => itm.source !== "yaml")
.length,
}
)}
</ha-button>`
: html`<div class="spacer"></div>`}
<div class="icons">
${this.manifest && !this.manifest.is_built_in

6
src/panels/config/integrations/integration-panels/ssdp/dialog-ssdp-discovery-info.ts
View File

@ -114,7 +114,11 @@ class DialogSSDPDiscoveryInfo extends LitElement implements HassDialog {
</tbody>
</table>
<ha-button slot="secondaryAction" @click=${this._copyToClipboard}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._copyToClipboard}
>
${this.hass.localize("ui.panel.config.ssdp.copy_to_clipboard")}
</ha-button>
</ha-dialog>

12
src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
View File

@ -160,7 +160,11 @@ class DialogZHAReconfigureDevice extends LitElement {
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</ha-button>
<ha-button slot="secondaryAction" @click=${this._toggleDetails}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._toggleDetails}
>
${this._showDetails
? this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_hide`
@ -189,7 +193,11 @@ class DialogZHAReconfigureDevice extends LitElement {
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</ha-button>
<ha-button slot="secondaryAction" @click=${this._toggleDetails}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._toggleDetails}
>
${this._showDetails
? this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_hide`

2
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

@ -176,7 +176,7 @@ export class ZHAAddGroupPage extends LitElement {
}
.buttons {
align-items: flex-end;
padding: 8px;
padding: 16px;
}
.buttons .warning {
--mdc-theme-primary: var(--error-color);

2
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -305,7 +305,7 @@ export class ZHAGroupPage extends LitElement {
}
.buttons {
align-items: flex-end;
padding: 8px;
padding: 16px;
}
.buttons .warning {
--mdc-theme-primary: var(--error-color);

12
src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts
View File

@ -33,13 +33,11 @@ export class ZWaveJsAddNodeFailed extends LitElement {
</div>`
: nothing}
${this.device?.id
? html`<a href=${`/config/devices/device/${this.device.id}`}>
<ha-button>
${this.hass.localize(
"ui.panel.config.zwave_js.add_node.view_device"
)}
</ha-button>
</a>`
? html`<ha-button href=${`/config/devices/device/${this.device.id}`}>
${this.hass.localize(
"ui.panel.config.zwave_js.add_node.view_device"
)}
</ha-button>`
: nothing}
`;
}

12
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
View File

@ -219,7 +219,11 @@ class DialogZWaveJSRemoveNode extends LitElement {
if (this._step === "start_removal") {
return html`
<ha-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
@ -234,7 +238,11 @@ class DialogZWaveJSRemoveNode extends LitElement {
if (this._step === "start_exclusion") {
return html`
<ha-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button

4
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
View File

@ -92,12 +92,12 @@ class ZWaveJSCustomParam extends LitElement {
</div>
<div class="custom-config-buttons">
${this._isLoading ? html`<ha-spinner></ha-spinner>` : nothing}
<ha-button @click=${this._getCustomConfigValue}>
<ha-button appearance="plain" @click=${this._getCustomConfigValue}>
${this.hass.localize(
"ui.panel.config.zwave_js.node_config.get_value"
)}
</ha-button>
<ha-button @click=${this._setCustomConfigValue}>
<ha-button appearance="plain" @click=${this._setCustomConfigValue}>
${this.hass.localize(
"ui.panel.config.zwave_js.node_config.set_value"
)}

2
src/panels/config/logs/dialog-download-logs.ts
View File

@ -94,7 +94,7 @@ class DownloadLogsDialog extends LitElement {
</ha-md-select>
</div>
<div slot="actions">
<ha-button @click=${this.closeDialog}>
<ha-button appearance="plain" @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._downloadLogs}>

23
src/panels/config/logs/error-log-card.ts
View File

@ -312,17 +312,16 @@ class ErrorLogCard extends LitElement {
!this._scrolledToBottomController.value) ||
false,
})}"
size="small"
appearance="filled"
@click=${this._scrollToBottom}
>
<ha-svg-icon
.path=${mdiArrowCollapseDown}
slot="icon"
slot="start"
></ha-svg-icon>
${localize("ui.panel.config.logs.scroll_down_button")}
<ha-svg-icon
.path=${mdiArrowCollapseDown}
slot="trailingIcon"
></ha-svg-icon>
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
</ha-button>
${streaming && this._boot === 0 && !this._error
? html`<div class="live-indicator">
@ -823,25 +822,15 @@ class ErrorLogCard extends LitElement {
}
.new-logs-indicator {
--mdc-theme-primary: var(--text-primary-color);
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
right: 0;
bottom: 4px;
height: 0;
background-color: var(--primary-color);
border-radius: 8px;
transition: height 0.4s ease-out;
display: flex;
justify-content: space-between;
align-items: center;
}
.new-logs-indicator.visible {
height: 24px;
height: 32px;
}
.error {

2
src/panels/config/network/ha-config-url-form.ts
View File

@ -284,7 +284,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
.url=${internalUrl}
@click=${this._copyURL}
>
<ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
<ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
${this.hass.localize("ui.panel.config.common.copy_link")}
</ha-button>
</div>

17
src/panels/config/network/supervisor-network.ts
View File

@ -145,13 +145,12 @@ export class HassioNetwork extends LitElement {
class="scan"
@click=${this._scanForAP}
.disabled=${this._scanning}
.loading=${this._scanning}
>
${this._scanning
? html`<ha-spinner size="small"> </ha-spinner>`
: this.hass.localize(
"ui.panel.config.network.supervisor.scan_ap"
)}
<ha-svg-icon slot="icon" .path=${mdiWifi}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.network.supervisor.scan_ap"
)}
<ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
</ha-button>
${this._accessPoints.length
? html`
@ -261,6 +260,9 @@ export class HassioNetwork extends LitElement {
: nothing}
</div>
<div class="card-actions">
<ha-button appearance="plain" @click=${this._clear}>
${this.hass.localize("ui.panel.config.network.supervisor.reset")}
</ha-button>
<ha-button
.loading=${this._processing}
@click=${this._updateNetwork}
@ -268,9 +270,6 @@ export class HassioNetwork extends LitElement {
>
${this.hass.localize("ui.common.save")}
</ha-button>
<ha-button appearance="plain" @click=${this._clear}>
${this.hass.localize("ui.panel.config.network.supervisor.reset")}
</ha-button>
</div>`;
}

6
src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts
View File

@ -91,12 +91,10 @@ export class AssistPipelineDetailTTS extends LitElement {
${
this.data?.tts_engine
? html`<div class="footer">
<ha-button
.label=${this.hass.localize(
<ha-button @click=${this._preview}>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.detail.try_tts"
)}
@click=${this._preview}
>
</ha-button>
</div>`
: nothing

21
src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
View File

@ -61,10 +61,12 @@ export class AssistPipelineRunDebug extends LitElement {
slot="toolbar-icon"
@click=${this._clearConversation}
.disabled=${!this._finished}
appearance="plain"
>
${this.hass.localize("ui.common.clear")}
</ha-button>
<ha-button
appearance="plain"
slot="toolbar-icon"
@click=${this._downloadConversation}
>
@ -83,13 +85,16 @@ export class AssistPipelineRunDebug extends LitElement {
@value-changed=${this._pipelinePicked}
></ha-assist-pipeline-picker>
<div class="start-buttons">
<ha-button raised @click=${this._runTextPipeline}>
<ha-button
appearance="filled"
@click=${this._runTextPipeline}
>
${this.hass.localize(
"ui.panel.config.voice_assistants.debug.pipeline.run_text_pipeline"
)}
</ha-button>
<ha-button
raised
appearance="filled"
@click=${this._runAudioPipeline}
.disabled=${!window.isSecureContext ||
// @ts-ignore-next-line
@ -100,7 +105,7 @@ export class AssistPipelineRunDebug extends LitElement {
)}
</ha-button>
<ha-button
raised
appearance="filled"
@click=${this._runAudioWakeWordPipeline}
.disabled=${!window.isSecureContext ||
// @ts-ignore-next-line
@ -135,13 +140,19 @@ export class AssistPipelineRunDebug extends LitElement {
? this._pipelineRuns[0].init_options!.start_stage ===
"wake_word"
? html`
<ha-button @click=${this._runAudioWakeWordPipeline}>
<ha-button
appearance="filled"
@click=${this._runAudioWakeWordPipeline}
>
${this.hass.localize(
"ui.panel.config.voice_assistants.debug.pipeline.continue_listening"
)}
</ha-button>
`
: html`<ha-button @click=${this._runAudioPipeline}>
: html`<ha-button
appearance="filled"
@click=${this._runAudioPipeline}
>
${this.hass.localize(
"ui.panel.config.voice_assistants.debug.pipeline.continue_talking"
)}

12
src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts
View File

@ -182,13 +182,11 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_message"
)}
<a href="/config/cloud" slot="action">
<ha-button>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_action"
)}
</ha-button>
</a>
<ha-button size="small" href="/config/cloud" slot="action">
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_action"
)}
</ha-button>
</ha-alert>
`
: nothing}

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

@ -164,12 +164,16 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
${this._results.length
? html`
<div class="result-toolbar">
<ha-button outlined @click=${this._clear} variant="danger">
<ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon>
<ha-button
appearance="filled"
@click=${this._clear}
variant="danger"
>
<ha-svg-icon slot="start" .path=${mdiTrashCan}></ha-svg-icon>
${this.hass.localize("ui.common.clear")}
</ha-button>
<ha-button outlined @click=${this._download}>
<ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
<ha-button appearance="filled" @click=${this._download}>
<ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
${this.hass.localize(
"ui.panel.developer-tools.tabs.assist.download_results"
)}

1
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@ -287,6 +287,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
slot="secondaryAction"
.disabled=${this._busy}
@click=${this._clearChosenStatistic}
appearance="plain"
>
${this.hass.localize("ui.common.back")}</ha-button
>

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

@ -154,14 +154,11 @@ export class HuiDialogSuggestCard extends LitElement {
slot="primaryAction"
.disabled=${this._saving}
@click=${this._save}
.loading=${this._saving}
>
${this._saving
? html`
<ha-spinner aria-label="Saving" size="small"></ha-spinner>
`
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
</ha-button>
`
: nothing}

11
src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
View File

@ -372,14 +372,9 @@ export class HuiCardFeaturesEditor extends LitElement {
@action=${this._addFeature}
@closed=${stopPropagation}
>
<ha-button
slot="trigger"
outlined
.label=${this.hass!.localize(
`ui.panel.lovelace.editor.features.add`
)}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
<ha-button slot="trigger" appearance="filled" size="small">
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass!.localize(`ui.panel.lovelace.editor.features.add`)}
</ha-button>
${types.map(
(type) => html`

6
src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
View File

@ -120,11 +120,11 @@ export class HuiHeadingBadgesEditor extends LitElement {
<div class="add-container">
<ha-button
data-add-entity
outlined
.label=${this.hass!.localize(`ui.panel.lovelace.editor.entities.add`)}
appearance="filled"
@click=${this._addEntity}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass!.localize(`ui.panel.lovelace.editor.entities.add`)}
</ha-button>
${this._renderPicker()}
</div>

6
src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts
View File

@ -110,7 +110,11 @@ export class HuiDialogSelectDashboard extends LitElement {
</div>`}
</div>
<div slot="actions">
<ha-button @click=${this.closeDialog} .disabled=${this._saving}>
<ha-button
appearance="plain"
@click=${this.closeDialog}
.disabled=${this._saving}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button

7
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

@ -253,12 +253,13 @@ export class HuiDialogEditView extends LitElement {
"ui.panel.lovelace.editor.edit_view.card_to_section_convert"
)}
<ha-button
size="small"
slot="action"
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.convert_view"
)}
@click=${this._convertToSection}
>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.convert_view"
)}
</ha-button>
</ha-alert>
`

4
src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts
View File

@ -139,10 +139,8 @@ export class HuiDialogEditViewHeader extends LitElement {
slot="primaryAction"
.disabled=${!this._config || this._saving || !this._dirty}
@click=${this._save}
.loading=${this._saving}
>
${this._saving
? html`<ha-spinner size="small" aria-label="Saving"></ha-spinner>`
: nothing}
${this.hass!.localize("ui.common.save")}</ha-button
>
</ha-dialog>

11
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -703,17 +703,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
ha-list-item[selected] {
font-weight: var(--ha-font-weight-bold);
}
span[slot="icon"] {
display: flex;
align-items: center;
}
ha-svg-icon[slot="trailingIcon"] {
margin-inline-start: 8px !important;
margin-inline-end: 0px !important;
direction: var(--direction);
}
`;
}

5
src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
View File

@ -187,11 +187,6 @@ class HaMfaModuleSetupFlow extends LitElement {
padding: 10px 100px 34px;
text-align: center;
}
.submit-spinner {
margin-right: 16px;
margin-inline-end: 16px;
margin-inline-start: initial;
}
`,
];
}

27
src/panels/todo/ha-panel-todo.ts
View File

@ -191,10 +191,7 @@ class PanelTodo extends LitElement {
: this._entityId
: ""}
</div>
<ha-svg-icon
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
<ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
</ha-button>
${listItems}
${this.hass.user?.is_admin
@ -395,27 +392,7 @@ class PanelTodo extends LitElement {
max-width: 100%;
}
ha-button-menu ha-button {
--button-slot-container-overflow: hidden;
max-width: 100%;
--mdc-theme-primary: currentColor;
--mdc-typography-button-text-transform: none;
--mdc-typography-button-font-size: var(
--mdc-typography-headline6-font-size,
var(--ha-font-size-l)
);
--mdc-typography-button-font-weight: var(
--mdc-typography-headline6-font-weight,
500
);
--mdc-typography-button-letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em
);
--mdc-typography-button-line-height: var(
--mdc-typography-headline6-line-height,
var(--ha-line-height-expanded)
);
--button-height: 40px;
--ha-font-size-m: var(--ha-font-size-l);
}
ha-button-menu ha-button div {
text-overflow: ellipsis;