jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate ha-button-toggle-group to webawesome (#26506)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Wendelin
2025-08-14 14:52:39 +02:00
committed by GitHub
parent f133f246cb
commit 208fd0662c
8 changed files with 178 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -61,7 +61,6 @@
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
"@material/mwc-base": "0.27.0",
"@material/mwc-button": "0.27.0",
"@material/mwc-checkbox": "0.27.0",
"@material/mwc-dialog": "0.27.0",
"@material/mwc-drawer": "0.27.0",

82
src/components/ha-button-group.ts Normal file
View File

@@ -0,0 +1,82 @@
import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group";
import { customElement } from "lit/decorators";
import type { HaButton } from "./ha-button";
import { StateSet } from "../resources/polyfills/stateset";
export type Appearance = "accent" | "filled" | "outlined" | "plain";
/**
* Finds an ha-button element either as the current element or within its descendants.
* @param el - The HTML element to search from
* @returns The found HaButton element, or null if not found
*/
function findButton(el: HTMLElement) {
const selector = "ha-button";
return (el.closest(selector) ?? el.querySelector(selector)) as HaButton;
}
/**
* @element ha-button-group
* @extends {ButtonGroup}
* @summary
* Group buttons. Extend Webawesome to be able to work with ha-button tags
*
* @documentation https://webawesome.com/components/button-group
*/
@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods
export class HaButtonGroup extends ButtonGroup {
attachInternals() {
const internals = super.attachInternals();
Object.defineProperty(internals, "states", {
value: new StateSet(this, internals.states),
});
return internals;
}
// @ts-expect-error updateClassNames is used in super class
// eslint-disable-next-line @typescript-eslint/naming-convention
private override updateClassNames() {
const slottedElements = [
...this.defaultSlot.assignedElements({ flatten: true }),
] as HTMLElement[];
this.hasOutlined = false;
slottedElements.forEach((el) => {
const index = slottedElements.indexOf(el);
const button = findButton(el);
if (button) {
if ((button as HaButton).appearance === "outlined")
this.hasOutlined = true;
if (this.size) button.setAttribute("size", this.size);
button.classList.add("wa-button-group__button");
button.classList.toggle(
"wa-button-group__horizontal",
this.orientation === "horizontal"
);
button.classList.toggle(
"wa-button-group__vertical",
this.orientation === "vertical"
);
button.classList.toggle("wa-button-group__button-first", index === 0);
button.classList.toggle(
"wa-button-group__button-inner",
index > 0 && index < slottedElements.length - 1
);
button.classList.toggle(
"wa-button-group__button-last",
index === slottedElements.length - 1
);
// use button-group variant
button.setAttribute("variant", this.variant);
}
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-button-group": HaButtonGroup;
}
}

153
src/components/ha-button-toggle-group.ts
View File

@@ -1,141 +1,72 @@
import "@material/mwc-button/mwc-button";
import type { Button } from "@material/mwc-button/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, queryAll } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import type { ToggleButton } from "../types";
import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-button";
import "./ha-button-group";
/**
* @element ha-button-toggle-group
*
* @summary
* A button-group with one active selection.
*
* @attr {ToggleButton[]} buttons - the button config
* @attr {string} active - The value of the currently active button.
* @attr {("small"|"medium")} size - The size of the buttons in the group.
* @attr {("brand"|"neutral"|"success"|"warning"|"danger")} variant - The variant of the buttons in the group.
*
* @fires value-changed - Dispatched when the active button changes.
*/
@customElement("ha-button-toggle-group")
export class HaButtonToggleGroup extends LitElement {
@property({ attribute: false }) public buttons!: ToggleButton[];
@property() public active?: string;
@property({ attribute: "full-width", type: Boolean })
public fullWidth = false;
@property({ reflect: true }) size: "small" | "medium" = "medium";
@property({ type: Boolean }) public dense = false;
@queryAll("mwc-button") private _buttons?: Button[];
@property() public variant:
| "brand"
| "neutral"
| "success"
| "warning"
| "danger" = "brand";
protected render(): TemplateResult {
return html`
<div>
${this.buttons.map((button) =>
button.iconPath
? html`<ha-icon-button
.label=${button.label}
<ha-button-group .variant=${this.variant} .size=${this.size}>
${this.buttons.map(
(button) =>
html`<ha-button
class="icon"
.value=${button.value}
@click=${this._handleClick}
.title=${button.label}
.appearance=${this.active === button.value ? "accent" : "filled"}
>
${button.iconPath
? html`<ha-svg-icon
aria-label=${button.label}
.path=${button.iconPath}
.value=${button.value}
?active=${this.active === button.value}
@click=${this._handleClick}
></ha-icon-button>`
: html`<mwc-button
style=${styleMap({
width: this.fullWidth
? `${100 / this.buttons.length}%`
: "initial",
})}
outlined
.dense=${this.dense}
.value=${button.value}
?active=${this.active === button.value}
@click=${this._handleClick}
>${button.label}</mwc-button
>`
></ha-svg-icon>`
: button.label}
</ha-button>`
)}
</div>
</ha-button-group>
`;
}
protected updated() {
// Work around Safari default margin that is not reset in mwc-button as of aug 2021
this._buttons?.forEach(async (button) => {
await button.updateComplete;
(
button.shadowRoot!.querySelector("button") as HTMLButtonElement
).style.margin = "0";
});
}
private _handleClick(ev): void {
this.active = ev.currentTarget.value;
fireEvent(this, "value-changed", { value: this.active });
}
static styles = css`
div {
display: flex;
--mdc-icon-button-size: var(--button-toggle-size, 36px);
:host {
--mdc-icon-size: var(--button-toggle-icon-size, 20px);
direction: ltr;
}
mwc-button {
flex: 1;
--mdc-shape-small: 0;
--mdc-button-outline-width: 1px 0 1px 1px;
--mdc-button-outline-color: var(--primary-color);
}
ha-icon-button {
border: 1px solid var(--primary-color);
border-right-width: 0px;
}
ha-icon-button,
mwc-button {
position: relative;
cursor: pointer;
}
ha-icon-button::before,
mwc-button::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: var(--primary-color);
opacity: 0;
pointer-events: none;
content: "";
transition:
opacity 15ms linear,
background-color 15ms linear;
}
ha-icon-button[active]::before,
mwc-button[active]::before {
opacity: 1;
}
ha-icon-button[active] {
--icon-primary-color: var(--text-primary-color);
}
mwc-button[active] {
--mdc-theme-primary: var(--text-primary-color);
}
ha-icon-button:first-child,
mwc-button:first-child {
--mdc-shape-small: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
--mdc-button-outline-width: 1px;
}
mwc-button:first-child::before {
border-radius: 4px 0 0 4px;
}
ha-icon-button:last-child,
mwc-button:last-child {
border-radius: 0 4px 4px 0;
border-right-width: 1px;
--mdc-shape-small: 0 4px 4px 0;
--mdc-button-outline-width: 1px;
}
mwc-button:last-child::before {
border-radius: 0 4px 4px 0;
}
ha-icon-button:only-child,
mwc-button:only-child {
--mdc-shape-small: 4px;
border-right-width: 1px;
}
`;
}

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

@@ -35,7 +35,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
* @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")
@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
export class HaButton extends Button {
variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
@@ -47,6 +47,42 @@ export class HaButton extends Button {
return internals;
}
// @ts-expect-error handleLabelSlotChange is used in super class
// eslint-disable-next-line @typescript-eslint/naming-convention
private override handleLabelSlotChange() {
const nodes = this.labelSlot.assignedNodes({ flatten: true });
let hasIconLabel = false;
let hasIcon = false;
let text = "";
// If there's only an icon and no text, it's an icon button
[...nodes].forEach((node) => {
if (
node.nodeType === Node.ELEMENT_NODE &&
(node as HTMLElement).localName === "ha-svg-icon"
) {
hasIcon = true;
if (!hasIconLabel)
hasIconLabel = (node as HTMLElement).hasAttribute("aria-label");
}
// Concatenate text nodes
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
}
});
this.isIconButton = text.trim() === "" && hasIcon;
if (__DEV__ && this.isIconButton && !hasIconLabel) {
// eslint-disable-next-line no-console
console.warn(
'Icon buttons must have a label for screen readers. Add <ha-svg-icon aria-label="..."> to remove this warning.',
this
);
}
}
static get styles(): CSSResultGroup {
return [
Button.styles,
@@ -181,6 +217,11 @@ export class HaButton extends Button {
color: var(--wa-color-on-normal);
}
}
:host([appearance~="filled"]) .button {
color: var(--wa-color-on-normal);
background-color: var(--wa-color-fill-normal);
border-color: transparent;
}
:host([appearance~="filled"])
.button:not(.disabled):not(.loading):active {
background-color: var(--button-color-fill-normal-active);

20
src/panels/calendar/ha-full-calendar.ts
View File

@@ -385,30 +385,22 @@ export class HAFullCalendar extends LitElement {
if (!this._viewButtons) {
this._viewButtons = [
{
label: localize(
"ui.panel.lovelace.editor.card.calendar.views.dayGridMonth"
),
label: localize("ui.components.calendar.views.dayGridMonth"),
value: "dayGridMonth",
iconPath: mdiViewModule,
},
{
label: localize(
"ui.panel.lovelace.editor.card.calendar.views.dayGridWeek"
),
label: localize("ui.components.calendar.views.dayGridWeek"),
value: "dayGridWeek",
iconPath: mdiViewWeek,
},
{
label: localize(
"ui.panel.lovelace.editor.card.calendar.views.dayGridDay"
),
label: localize("ui.components.calendar.views.dayGridDay"),
value: "dayGridDay",
iconPath: mdiViewDay,
},
{
label: localize(
"ui.panel.lovelace.editor.card.calendar.views.listWeek"
),
label: localize("ui.components.calendar.views.listWeek"),
value: "listWeek",
iconPath: mdiViewAgenda,
},
@@ -493,10 +485,6 @@ export class HAFullCalendar extends LitElement {
--mdc-icon-button-size: 32px;
}
ha-button-toggle-group {
color: var(--primary-color);
}
ha-fab {
position: absolute;
bottom: 16px;

1
src/panels/config/core/ai-task-pref.ts
View File

@@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiHelpCircle, mdiStarFourPoints } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";

6
src/translations/en.json
View File

@@ -1168,6 +1168,12 @@
},
"summary": "Summary",
"description": "Description"
},
"views": {
"dayGridMonth": "[%key:ui::panel::lovelace::editor::card::calendar::views::dayGridMonth%]",
"dayGridWeek": "[%key:ui::panel::lovelace::editor::card::calendar::views::dayGridWeek%]",
"dayGridDay": "[%key:ui::panel::lovelace::editor::card::calendar::views::dayGridDay%]",
"listWeek": "[%key:ui::panel::lovelace::editor::card::calendar::views::listWeek%]"
}
},
"attributes": {

3
yarn.lock
View File

@@ -2666,7 +2666,7 @@ __metadata:
languageName: node
linkType: hard
"@material/mwc-button@npm:0.27.0, @material/mwc-button@npm:^0.27.0":
"@material/mwc-button@npm:^0.27.0":
version: 0.27.0
resolution: "@material/mwc-button@npm:0.27.0"
dependencies:
@@ -9383,7 +9383,6 @@ __metadata:
"@material/chips": "npm:=14.0.0-canary.53b3cad2f.0"
"@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0"
"@material/mwc-base": "npm:0.27.0"
"@material/mwc-button": "npm:0.27.0"
"@material/mwc-checkbox": "npm:0.27.0"
"@material/mwc-dialog": "npm:0.27.0"
"@material/mwc-drawer": "npm:0.27.0"