1
0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00

Change state card button/input_button to control button (#29367)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2026-02-12 12:41:56 +00:00
committed by GitHub
parent 1ad74d46d6
commit 13d40993ef
2 changed files with 34 additions and 15 deletions

View File

@@ -1,10 +1,10 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../components/entity/ha-entity-toggle";
import "../components/entity/state-info";
import "../components/ha-button";
import "../components/ha-control-button";
import { UNAVAILABLE } from "../data/entity/entity";
import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types";
@@ -26,14 +26,12 @@ class StateCardButton extends LitElement {
.stateObj=${stateObj}
.inDialog=${this.inDialog}
></state-info>
<ha-button
appearance="plain"
size="small"
@click=${this._pressButton}
<ha-control-button
.disabled=${stateObj.state === UNAVAILABLE}
@click=${this._pressButton}
>
${this.hass.localize("ui.card.button.press")}
</ha-button>
</ha-control-button>
</div>
`;
}
@@ -46,7 +44,18 @@ class StateCardButton extends LitElement {
}
static get styles(): CSSResultGroup {
return haStyle;
return [
haStyle,
css`
ha-control-button {
width: auto;
min-width: 40px;
--control-button-padding: 0 var(--ha-space-4);
--control-button-focus-color: var(--primary-text-color);
--control-button-icon-color: var(--feature-color);
}
`,
];
}
}

View File

@@ -1,10 +1,10 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../components/entity/ha-entity-toggle";
import "../components/entity/state-info";
import "../components/ha-button";
import "../components/ha-control-button";
import { UNAVAILABLE } from "../data/entity/entity";
import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types";
@@ -26,13 +26,12 @@ class StateCardInputButton extends LitElement {
.stateObj=${stateObj}
.inDialog=${this.inDialog}
></state-info>
<ha-button
appearance="plain"
@click=${this._pressButton}
<ha-control-button
.disabled=${stateObj.state === UNAVAILABLE}
@click=${this._pressButton}
>
${this.hass.localize("ui.card.button.press")}
</ha-button>
</ha-control-button>
</div>
`;
}
@@ -45,7 +44,18 @@ class StateCardInputButton extends LitElement {
}
static get styles(): CSSResultGroup {
return haStyle;
return [
haStyle,
css`
ha-control-button {
width: auto;
min-width: 40px;
--control-button-padding: 0 var(--ha-space-4);
--control-button-focus-color: var(--primary-text-color);
--control-button-icon-color: var(--feature-color);
}
`,
];
}
}