From 37b73959863ae676fef80dcccbcb10652eaf5669 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 9 Nov 2023 17:57:37 +0100 Subject: [PATCH] Migrate chips to Material 3 chips. (#18513) --- gallery/src/pages/components/ha-chips.ts | 92 +++++-- gallery/src/pages/misc/entity-state.ts | 1 - .../src/addon-view/info/hassio-addon-info.ts | 241 +++++++++++------- src/components/chips/ha-assist-chip.ts | 53 ++++ src/components/chips/ha-chip-set.ts | 11 + src/components/chips/ha-filter-chip.ts | 41 +++ src/components/chips/ha-input-chip.ts | 35 +++ src/components/ha-chip-set.ts | 38 --- src/components/ha-chip.ts | 85 ------ src/components/ha-label.ts | 60 +++++ .../ha-selector/ha-selector-select.ts | 59 +++-- src/dialogs/quick-bar/ha-quick-bar.ts | 28 +- .../calendar/dialog-calendar-event-editor.ts | 4 + .../calendar/ha-recurrence-rule-editor.ts | 41 ++- .../config/automation/ha-automation-picker.ts | 6 +- .../config/dashboard/ha-config-dashboard.ts | 30 +-- .../ha-device-automation-card.ts | 18 +- src/panels/config/users/dialog-user-detail.ts | 20 +- .../lovelace/cards/hui-alarm-panel-card.ts | 27 +- .../lovelace/components/hui-buttons-base.ts | 23 +- 20 files changed, 548 insertions(+), 365 deletions(-) create mode 100644 src/components/chips/ha-assist-chip.ts create mode 100644 src/components/chips/ha-chip-set.ts create mode 100644 src/components/chips/ha-filter-chip.ts create mode 100644 src/components/chips/ha-input-chip.ts delete mode 100644 src/components/ha-chip-set.ts delete mode 100644 src/components/ha-chip.ts create mode 100644 src/components/ha-label.ts diff --git a/gallery/src/pages/components/ha-chips.ts b/gallery/src/pages/components/ha-chips.ts index 43e2e7d6e8ae..677f0c7bf9c7 100644 --- a/gallery/src/pages/components/ha-chips.ts +++ b/gallery/src/pages/components/ha-chips.ts @@ -1,8 +1,10 @@ -import { css, html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult, nothing } from "lit"; import { customElement } from "lit/decorators"; import "../../../../src/components/ha-card"; -import "../../../../src/components/ha-chip"; -import "../../../../src/components/ha-chip-set"; +import "../../../../src/components/chips/ha-chip-set"; +import "../../../../src/components/chips/ha-assist-chip"; +import "../../../../src/components/chips/ha-input-chip"; +import "../../../../src/components/chips/ha-filter-chip"; import "../../../../src/components/ha-svg-icon"; import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; @@ -10,10 +12,6 @@ const chips: { icon?: string; content?: string; }[] = [ - {}, - { - icon: mdiHomeAssistant, - }, { content: "Content", }, @@ -29,31 +27,73 @@ export class DemoHaChips extends LitElement { return html`
- ${chips.map( - (chip) => html` - - ${chip.icon - ? html` - ` - : ""} - ${chip.content} - - ` - )} -
- - -
+

Action chip

+ + ${chips.map( + (chip) => html` + + ${chip.icon + ? html` + ` + : nothing} + + ` + )} + ${chips.map( + (chip) => html` + + ${chip.icon + ? html` + ` + : nothing} + + ` + )} + +

Filter chip

+ + ${chips.map( + (chip) => html` + + ${chip.icon + ? html` + ` + : nothing} + + ` + )} + ${chips.map( + (chip) => html` + + ${chip.icon + ? html` + ` + : nothing} + + ` + )} + +

Input chip

${chips.map( (chip) => html` - + ${chip.icon ? html` ` : ""} ${chip.content} - + + ` + )} + ${chips.map( + (chip) => html` + + ${chip.icon + ? html` + ` + : nothing} + ` )} @@ -68,12 +108,10 @@ export class DemoHaChips extends LitElement { max-width: 600px; margin: 24px auto; } - ha-chip { - margin-bottom: 4px; - } .card-content { display: flex; flex-direction: column; + align-items: flex-start; } `; } diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts index 9e62a6ae91d0..1ab1d7df159f 100644 --- a/gallery/src/pages/misc/entity-state.ts +++ b/gallery/src/pages/misc/entity-state.ts @@ -10,7 +10,6 @@ import { computeStateDisplay } from "../../../../src/common/entity/compute_state import "../../../../src/components/data-table/ha-data-table"; import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table"; import "../../../../src/components/entity/state-badge"; -import "../../../../src/components/ha-chip"; import { provideHass } from "../../../../src/fake_data/provide_hass"; import { HomeAssistant } from "../../../../src/types"; diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index f602ad24d898..074b8e08daee 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -31,8 +31,8 @@ import { navigate } from "../../../../src/common/navigate"; import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-card"; -import "../../../../src/components/ha-chip"; -import "../../../../src/components/ha-chip-set"; +import "../../../../src/components/chips/ha-chip-set"; +import "../../../../src/components/chips/ha-assist-chip"; import "../../../../src/components/ha-markdown"; import "../../../../src/components/ha-settings-row"; import "../../../../src/components/ha-svg-icon"; @@ -78,6 +78,7 @@ import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-has import { hassioStyle } from "../../resources/hassio-style"; import "../../update-available/update-available-card"; import { addonArchIsSupported, extractChangelog } from "../../util/addon"; +import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter"; const STAGE_ICON = { stable: mdiCheckCircle, @@ -234,28 +235,32 @@ class HassioAddonInfo extends LitElement { ${this.addon.stage !== "stable" - ? html` - - - ${this.supervisor.localize( - `addon.dashboard.capability.stages.${this.addon.stage}` - )} - ` + + + + ` : ""} - = 6, yellow: [3, 4, 5].includes(Number(this.addon.rating)), @@ -263,138 +268,183 @@ class HassioAddonInfo extends LitElement { })} @click=${this._showMoreInfo} id="rating" + .label=${capitalizeFirstLetter( + this.supervisor.localize( + "addon.dashboard.capability.label.rating" + ) + )} > - - ${this.supervisor.localize( - "addon.dashboard.capability.label.rating" - )} - + ${this.addon.host_network ? html` - - ${this.supervisor.localize( - "addon.dashboard.capability.label.host" - )} - + ` : ""} ${this.addon.full_access ? html` - - ${this.supervisor.localize( - "addon.dashboard.capability.label.hardware" - )} - + ` : ""} ${this.addon.homeassistant_api ? html` - - ${this.supervisor.localize( - "addon.dashboard.capability.label.core" - )} - + ` : ""} ${this._computeHassioApi ? html` - + - ${this.supervisor.localize( - `addon.dashboard.capability.role.${this.addon.hassio_role}` - ) || this.addon.hassio_role} - + ` : ""} ${this.addon.docker_api ? html` - - - ${this.supervisor.localize( - "addon.dashboard.capability.label.docker" + + > + + ` : ""} ${this.addon.host_pid ? html` - - - ${this.supervisor.localize( - "addon.dashboard.capability.label.host_pid" + + > + + ` : ""} ${this.addon.apparmor !== "default" ? html` - - ${this.supervisor.localize( - "addon.dashboard.capability.label.apparmor" - )} - + ` : ""} ${this.addon.auth_api ? html` - - - ${this.supervisor.localize( - "addon.dashboard.capability.label.auth" + + > + + ` : ""} ${this.addon.ingress ? html` - + - ${this.supervisor.localize( - "addon.dashboard.capability.label.ingress" - )} - + ` : ""} ${this.addon.signed ? html` - - - ${this.supervisor.localize( - "addon.dashboard.capability.label.signed" + + > + + ` : ""} @@ -1185,23 +1235,35 @@ class HassioAddonInfo extends LitElement { .description a { color: var(--primary-color); } - ha-chip { - text-transform: capitalize; - --ha-chip-text-color: var(--text-primary-color); - --ha-chip-background-color: var(--primary-color); + ha-assist-chip { + --md-sys-color-primary: var(--text-primary-color); + --md-sys-color-on-surface: var(--text-primary-color); + --ha-assist-chip-filled-container-color: var(--primary-color); } .red { - --ha-chip-background-color: var(--label-badge-red, #df4c1e); + --ha-assist-chip-filled-container-color: var( + --label-badge-red, + #df4c1e + ); } .blue { - --ha-chip-background-color: var(--label-badge-blue, #039be5); + --ha-assist-chip-filled-container-color: var( + --label-badge-blue, + #039be5 + ); } .green { - --ha-chip-background-color: var(--label-badge-green, #0da035); + --ha-assist-chip-filled-container-color: var( + --label-badge-green, + #0da035 + ); } .yellow { - --ha-chip-background-color: var(--label-badge-yellow, #f4b400); + --ha-assist-chip-filled-container-color: var( + --label-badge-yellow, + #f4b400 + ); } .capabilities { margin-bottom: 16px; @@ -1260,9 +1322,6 @@ class HassioAddonInfo extends LitElement { } @media (max-width: 720px) { - ha-chip { - line-height: 36px; - } .addon-options { max-width: 100%; } diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts new file mode 100644 index 000000000000..98d03bb886d4 --- /dev/null +++ b/src/components/chips/ha-assist-chip.ts @@ -0,0 +1,53 @@ +import { MdAssistChip } from "@material/web/chips/assist-chip"; +import { css, html } from "lit"; +import { customElement, property } from "lit/decorators"; + +@customElement("ha-assist-chip") +export class HaAssistChip extends MdAssistChip { + @property({ type: Boolean, reflect: true }) filled = false; + + static override styles = [ + ...super.styles, + css` + :host { + --md-sys-color-primary: var(--primary-text-color); + --md-sys-color-on-surface: var(--primary-text-color); + --md-assist-chip-container-shape: 16px; + --md-assist-chip-outline-color: var(--outline-color); + --md-assist-chip-label-text-weight: 400; + --ha-assist-chip-filled-container-color: rgba( + var(--rgb-primary-text-color), + 0.15 + ); + } + /** Material 3 doesn't have a filled chip, so we have to make our own **/ + .filled { + display: flex; + pointer-events: none; + border-radius: inherit; + inset: 0; + position: absolute; + background-color: var(--ha-assist-chip-filled-container-color); + } + /** Set the size of mdc icons **/ + ::slotted([slot="icon"]) { + display: flex; + --mdc-icon-size: var(--md-input-chip-icon-size, 18px); + } + `, + ]; + + protected override renderOutline() { + if (this.filled) { + return html``; + } + + return super.renderOutline(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-assist-chip": HaAssistChip; + } +} diff --git a/src/components/chips/ha-chip-set.ts b/src/components/chips/ha-chip-set.ts new file mode 100644 index 000000000000..e82b49eeaf16 --- /dev/null +++ b/src/components/chips/ha-chip-set.ts @@ -0,0 +1,11 @@ +import { MdChipSet } from "@material/web/chips/chip-set"; +import { customElement } from "lit/decorators"; + +@customElement("ha-chip-set") +export class HaChipSet extends MdChipSet {} + +declare global { + interface HTMLElementTagNameMap { + "ha-chip-set": HaChipSet; + } +} diff --git a/src/components/chips/ha-filter-chip.ts b/src/components/chips/ha-filter-chip.ts new file mode 100644 index 000000000000..accd3c5f2313 --- /dev/null +++ b/src/components/chips/ha-filter-chip.ts @@ -0,0 +1,41 @@ +import { MdFilterChip } from "@material/web/chips/filter-chip"; +import { css, html } from "lit"; +import { customElement, property } from "lit/decorators"; + +@customElement("ha-filter-chip") +export class HaFilterChip extends MdFilterChip { + @property({ type: Boolean, reflect: true, attribute: "no-leading-icon" }) + noLeadingIcon = false; + + static override styles = [ + ...super.styles, + css` + :host { + --md-sys-color-primary: var(--primary-text-color); + --md-sys-color-on-surface: var(--primary-text-color); + --md-sys-color-on-surface-variant: var(--primary-text-color); + --md-sys-color-on-secondary-container: var(--primary-text-color); + --md-filter-chip-container-shape: 16px; + --md-filter-chip-outline-color: var(--outline-color); + --md-filter-chip-selected-container-color: rgba( + var(--rgb-primary-text-color), + 0.15 + ); + } + `, + ]; + + protected renderLeadingIcon() { + if (this.noLeadingIcon) { + // eslint-disable-next-line lit/prefer-nothing + return html``; + } + return super.renderLeadingIcon(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-filter-chip": HaFilterChip; + } +} diff --git a/src/components/chips/ha-input-chip.ts b/src/components/chips/ha-input-chip.ts new file mode 100644 index 000000000000..cdaa980351a0 --- /dev/null +++ b/src/components/chips/ha-input-chip.ts @@ -0,0 +1,35 @@ +import { MdInputChip } from "@material/web/chips/input-chip"; +import { css } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-input-chip") +export class HaInputChip extends MdInputChip { + static override styles = [ + ...super.styles, + css` + :host { + --md-sys-color-primary: var(--primary-text-color); + --md-sys-color-on-surface: var(--primary-text-color); + --md-sys-color-on-surface-variant: var(--primary-text-color); + --md-sys-color-on-secondary-container: var(--primary-text-color); + --md-input-chip-container-shape: 16px; + --md-input-chip-outline-color: var(--outline-color); + --md-input-chip-selected-container-color: rgba( + var(--rgb-primary-text-color), + 0.15 + ); + } + /** Set the size of mdc icons **/ + ::slotted([slot="icon"]) { + display: flex; + --mdc-icon-size: var(--md-input-chip-icon-size, 18px); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-input-chip": HaInputChip; + } +} diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts deleted file mode 100644 index 699f1b0a730d..000000000000 --- a/src/components/ha-chip-set.ts +++ /dev/null @@ -1,38 +0,0 @@ -// @ts-ignore -import chipStyles from "@material/chips/dist/mdc.chips.min.css"; -import { - css, - CSSResultGroup, - html, - LitElement, - TemplateResult, - unsafeCSS, -} from "lit"; -import { customElement } from "lit/decorators"; - -@customElement("ha-chip-set") -export class HaChipSet extends LitElement { - protected render(): TemplateResult { - return html` -
- -
- `; - } - - static get styles(): CSSResultGroup { - return css` - ${unsafeCSS(chipStyles)} - - slot::slotted(ha-chip) { - margin: 4px 4px 4px 0; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "ha-chip-set": HaChipSet; - } -} diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts deleted file mode 100644 index fc427fd93d8d..000000000000 --- a/src/components/ha-chip.ts +++ /dev/null @@ -1,85 +0,0 @@ -// @ts-ignore -import chipStyles from "@material/chips/dist/mdc.chips.min.css"; -import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit"; -import { customElement, property } from "lit/decorators"; - -@customElement("ha-chip") -export class HaChip extends LitElement { - @property({ type: Boolean }) public hasIcon = false; - - @property({ type: Boolean }) public hasTrailingIcon = false; - - @property({ type: Boolean }) public noText = false; - - protected render() { - return html` -
- ${this.hasIcon - ? html`
- -
` - : nothing} -
- - - - - - ${this.hasTrailingIcon - ? html`
- -
` - : nothing} -
- `; - } - - static get styles(): CSSResultGroup { - return css` - ${unsafeCSS(chipStyles)} - .mdc-chip { - background-color: var( - --ha-chip-background-color, - rgba(var(--rgb-primary-text-color), 0.15) - ); - color: var(--ha-chip-text-color, var(--primary-text-color)); - } - - .mdc-chip.no-text { - padding: 0 10px; - } - - .mdc-chip:hover { - color: var(--ha-chip-text-color, var(--primary-text-color)); - } - - .mdc-chip__icon--leading, - .mdc-chip__icon--trailing { - --mdc-icon-size: 18px; - line-height: 14px; - color: var(--ha-chip-icon-color, var(--ha-chip-text-color)); - } - .mdc-chip.mdc-chip--selected .mdc-chip__checkmark, - .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) { - margin-right: -4px; - margin-inline-start: -4px; - margin-inline-end: 4px; - direction: var(--direction); - } - - span[role="gridcell"] { - line-height: 14px; - } - - :host { - outline: none; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "ha-chip": HaChip; - } -} diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts new file mode 100644 index 000000000000..ffb4d0612649 --- /dev/null +++ b/src/components/ha-label.ts @@ -0,0 +1,60 @@ +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-label") +class HaLabel extends LitElement { + protected render(): TemplateResult { + return html` + + + +
+ `; + } + + static get styles(): CSSResultGroup { + return [ + css` + :host { + --ha-label-text-color: var(--primary-text-color); + --ha-label-icon-color: var(--primary-text-color); + --ha-label-background-color: rgba( + var(--rgb-primary-text-color), + 0.15 + ); + } + .label { + display: inline-flex; + flex-direction: row; + align-items: center; + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.1px; + vertical-align: middle; + height: 32px; + padding: 0 16px; + border-radius: 18px; + background-color: var(--ha-label-background-color); + color: var(--ha-label-text-color); + --mdc-icon-size: 18px; + } + ::slotted([slot="icon"]) { + margin-right: 8px; + margin-left: -8px; + display: flex; + color: var(--ha-label-icon-color); + } + span { + display: inline-flex; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-label": HaLabel; + } +} diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index b443013ff820..a20559f91bfe 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import { mdiClose, mdiDrag } from "@mdi/js"; +import { mdiDrag } from "@mdi/js"; import { LitElement, PropertyValues, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -12,9 +12,9 @@ import type { SelectOption, SelectSelector } from "../../data/selector"; import { sortableStyles } from "../../resources/ha-sortable-style"; import { SortableInstance } from "../../resources/sortable"; import type { HomeAssistant } from "../../types"; +import "../chips/ha-chip-set"; +import "../chips/ha-input-chip"; import "../ha-checkbox"; -import "../ha-chip"; -import "../ha-chip-set"; import "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box"; import "../ha-formfield"; @@ -65,7 +65,7 @@ export class HaSelectSelector extends LitElement { { animation: 150, fallbackClass: "sortable-fallback", - draggable: "ha-chip", + draggable: "ha-input-chip", onChoose: (evt: SortableEvent) => { (evt.item as any).placeholder = document.createComment("sort-placeholder"); @@ -199,30 +199,31 @@ export class HaSelectSelector extends LitElement { ${repeat( value, (item) => item, - (item, idx) => html` - - ${this.selector.select?.reorder - ? html` - - ` - : nothing} - ${options.find((option) => option.value === item) - ?.label || item} - { + const label = + options.find((option) => option.value === item)?.label || + item; + return html` + - - ` + @remove=${this._removeItem} + .label=${label} + selected + > + ${this.selector.select?.reorder + ? html` + + ` + : nothing} + ${options.find((option) => option.value === item) + ?.label || item} + + `; + } )} ` @@ -354,6 +355,7 @@ export class HaSelectSelector extends LitElement { } private async _removeItem(ev) { + ev.stopPropagation(); const value: string[] = [...ensureArray(this.value!)]; value.splice(ev.target.idx, 1); @@ -431,6 +433,9 @@ export class HaSelectSelector extends LitElement { mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } + ha-chip-set { + padding: 8px 0; + } `, ]; } diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 2ee72cc5bcfa..27c8336de9e6 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -27,7 +27,7 @@ import { fuzzyFilterSort, } from "../../common/string/filter/sequence-matching"; import { debounce } from "../../common/util/debounce"; -import "../../components/ha-chip"; +import "../../components/ha-label"; import "../../components/ha-circular-progress"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; @@ -326,19 +326,17 @@ export class QuickBar extends LitElement { hasMeta > - ${item.iconPath - ? html`` - : ""} - ${item.categoryText} + ? html` + + ` + : nothing} + ${item.categoryText} + ${item.primaryText} @@ -816,20 +814,20 @@ export class QuickBar extends LitElement { } .command-category { - --ha-chip-icon-color: #585858; - --ha-chip-text-color: #212121; + --ha-label-icon-color: #585858; + --ha-label-text-color: #212121; } .command-category.reload { - --ha-chip-background-color: #cddc39; + --ha-label-background-color: #cddc39; } .command-category.navigation { - --ha-chip-background-color: var(--light-primary-color); + --ha-label-background-color: var(--light-primary-color); } .command-category.server_control { - --ha-chip-background-color: var(--warning-color); + --ha-label-background-color: var(--warning-color); } span.command-text { diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts index a7f885d11970..2cd0bb0f5d36 100644 --- a/src/panels/calendar/dialog-calendar-event-editor.ts +++ b/src/panels/calendar/dialog-calendar-event-editor.ts @@ -584,6 +584,10 @@ class DialogCalendarEventEditor extends LitElement { return [ haStyleDialog, css` + ha-dialog { + --mdc-dialog-min-width: min(600px, 95vw); + --mdc-dialog-max-width: min(600px, 95vw); + } state-info { line-height: 40px; } diff --git a/src/panels/calendar/ha-recurrence-rule-editor.ts b/src/panels/calendar/ha-recurrence-rule-editor.ts index 987b58ab2eb5..d7f19d0b671b 100644 --- a/src/panels/calendar/ha-recurrence-rule-editor.ts +++ b/src/panels/calendar/ha-recurrence-rule-editor.ts @@ -1,14 +1,14 @@ import type { SelectedDetail } from "@material/mwc-list"; import { formatInTimeZone, toDate } from "date-fns-tz"; -import { css, html, LitElement, PropertyValues, nothing } from "lit"; +import { LitElement, PropertyValues, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; -import { classMap } from "lit/directives/class-map"; import type { Options, WeekdayStr } from "rrule"; import { ByWeekday, RRule, Weekday } from "rrule"; import { firstWeekdayIndex } from "../../common/datetime/first_weekday"; import { stopPropagation } from "../../common/dom/stop_propagation"; import { LocalizeKeys } from "../../common/translations/localize"; -import "../../components/ha-chip"; +import "../../components/chips/ha-chip-set"; +import "../../components/chips/ha-filter-chip"; import "../../components/ha-date-input"; import "../../components/ha-list-item"; import "../../components/ha-select"; @@ -16,17 +16,17 @@ import type { HaSelect } from "../../components/ha-select"; import "../../components/ha-textfield"; import { HomeAssistant } from "../../types"; import { + DEFAULT_COUNT, + MonthlyRepeatItem, + RepeatEnd, + RepeatFrequency, convertFrequency, convertRepeatFrequency, - DEFAULT_COUNT, getMonthdayRepeatFromRule, getMonthlyRepeatItems, getMonthlyRepeatWeekdayFromRule, getWeekday, getWeekdays, - MonthlyRepeatItem, - RepeatEnd, - RepeatFrequency, ruleByWeekDay, untilValue, } from "./recurrence"; @@ -240,22 +240,24 @@ export class RecurrenceRuleEditor extends LitElement { renderWeekly() { return html` ${this.renderInterval()} -
+ ${this._allWeekdays!.map( (item) => html` - ${this.hass.localize( + .label=${this.hass.localize( `ui.components.calendar.event.repeat.weekly.weekday.${ item.toLowerCase() as Lowercase }` - )} + ` )} -
+ `; } @@ -379,10 +381,10 @@ export class RecurrenceRuleEditor extends LitElement { private _onWeekdayToggle(e: MouseEvent) { const target = e.currentTarget as any; const value = target.value as WeekdayStr; - if (!target.classList.contains("active")) { - this._weekday.add(value); - } else { + if (this._weekday.has(value)) { this._weekday.delete(value); + } else { + this._weekday.add(value); } this.requestUpdate("_weekday"); } @@ -504,8 +506,6 @@ export class RecurrenceRuleEditor extends LitElement { margin-bottom: 16px; } .weekdays { - display: flex; - justify-content: space-between; margin-bottom: 16px; } ha-textfield:last-child, @@ -513,11 +513,6 @@ export class RecurrenceRuleEditor extends LitElement { .weekdays:last-child { margin-bottom: 0; } - - .active { - --ha-chip-background-color: var(--primary-color); - --ha-chip-text-color: var(--text-primary-color); - } `; } diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index c608b2008655..f68d0b78774c 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -27,7 +27,7 @@ import type { RowClickedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-button-related-filter-menu"; -import "../../../components/ha-chip"; +import "../../../components/ha-label"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-overflow-menu"; @@ -202,11 +202,11 @@ class HaAutomationPicker extends LitElement { template: (automation) => automation.disabled ? html` - + ${this.hass.localize( "ui.panel.config.automation.picker.disabled" )} - + ` : "", }; diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index bbe63dcbbb95..9cd8a390ec2d 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -8,16 +8,17 @@ import { } from "@mdi/js"; import { HassEntities, UnsubscribeFunc } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, - html, LitElement, PropertyValues, TemplateResult, + css, + html, } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; @@ -34,9 +35,9 @@ import { subscribeRepairsIssueRegistry, } from "../../../data/repairs"; import { + UpdateEntity, checkForEntityUpdates, filterUpdateEntitiesWithInstall, - UpdateEntity, } from "../../../data/update"; import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar"; import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"; @@ -231,15 +232,17 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { > ${totalRepairIssues > repairsIssues.length ? html` - - ${this.hass.localize( + + > + ` : ""} ` @@ -257,15 +260,17 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { > ${totalUpdates > canInstallUpdates.length ? html` - - ${this.hass.localize( + + > + ` : ""} ` @@ -349,13 +354,8 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { text-decoration: none; color: var(--primary-text-color); } - a.button { - display: inline-block; - color: var(--primary-text-color); - padding: 6px 16px; + ha-assist-chip { margin: 8px 16px 16px 16px; - border-radius: 32px; - border: 1px solid var(--divider-color); } .title { font-size: 16px; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts index 7ea0ec102685..26ff027d77b3 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts @@ -1,8 +1,8 @@ import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; -import "../../../../components/ha-chip"; -import "../../../../components/ha-chip-set"; +import "../../../../components/chips/ha-assist-chip"; +import "../../../../components/chips/ha-chip-set"; import { showAutomationEditor } from "../../../../data/automation"; import { DeviceAction, @@ -77,17 +77,18 @@ export abstract class HaDeviceAutomationCard< ${automations.map( (automation, idx) => html` - - ${this._localizeDeviceAutomation( + .label=${this._localizeDeviceAutomation( this.hass, this.entityReg!, automation )} - + > + ` )} @@ -128,7 +129,10 @@ export abstract class HaDeviceAutomationCard< color: var(--primary-text-color); } .secondary { - --ha-chip-background-color: rgba(var(--rgb-primary-text-color), 0.07); + --ha-assist-chip-filled-container-color: rgba( + var(--rgb-primary-text-color), + 0.07 + ); } button.link { color: var(--primary-color); diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index def8e07fbd50..a448b6b4f665 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -1,14 +1,13 @@ -import "@material/mwc-button"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; +import "@material/mwc-button"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; -import "../../../components/ha-chip"; -import "../../../components/ha-chip-set"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-formfield"; import "../../../components/ha-help-tooltip"; +import "../../../components/ha-label"; import "../../../components/ha-svg-icon"; import "../../../components/ha-switch"; import "../../../components/ha-textfield"; @@ -76,16 +75,16 @@ class DialogUserDetail extends LitElement { ${badges.length === 0 ? "" : html` - +
${badges.map( ([icon, label]) => html` - + ${label} - + ` )} - +
`}
* { + margin: 4px 4px 4px 0; + } .state { background-color: rgba(var(--rgb-primary-text-color), 0.15); border-radius: 16px; diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 34585865c6bb..310203837d02 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -1,28 +1,29 @@ +import { HassEntity } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, - html, LitElement, PropertyValues, + css, + html, nothing, } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; -import { HassEntity } from "home-assistant-js-websocket"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; import { alarmPanelIcon } from "../../../common/entity/alarm_panel_icon"; import { stateColorCss } from "../../../common/entity/state_color"; +import { supportsFeature } from "../../../common/entity/supports-feature"; +import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-card"; -import "../../../components/ha-chip"; import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; import { - callAlarmAction, - FORMAT_NUMBER, ALARM_MODES, AlarmMode, + FORMAT_NUMBER, + callAlarmAction, } from "../../../data/alarm_control_panel"; import { UNAVAILABLE } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; @@ -30,7 +31,6 @@ import { findEntities } from "../common/find-entities"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard } from "../types"; import { AlarmPanelCardConfig, AlarmPanelCardConfigState } from "./types"; -import { supportsFeature } from "../../../common/entity/supports-feature"; const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"]; @@ -190,18 +190,18 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ${this._config.name || stateObj.attributes.friendly_name || stateLabel} - - ${stateLabel} - +
${(stateObj.state === "disarmed" @@ -312,10 +312,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { --alarm-state-color: var(--state-inactive-color); } - ha-chip { - --ha-chip-background-color: var(--alarm-state-color); + ha-assist-chip { + --ha-assist-chip-filled-container-color: var(--alarm-state-color); --primary-text-color: var(--text-primary-color); - line-height: initial; } .card-header { diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts index 0e0e0c3ad0c9..ff04a931a42e 100644 --- a/src/panels/lovelace/components/hui-buttons-base.ts +++ b/src/panels/lovelace/components/hui-buttons-base.ts @@ -9,7 +9,8 @@ import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; -import "../../../components/ha-chip"; +import "../../../components/chips/ha-assist-chip"; +import "../../../components/chips/ha-chip-set"; import { haStyleScrollbar } from "../../../resources/styles"; @customElement("hui-buttons-base") @@ -20,7 +21,7 @@ export class HuiButtonsBase extends LitElement { protected render(): TemplateResult { return html` -
+ ${(this.configEntities || []).map((entityConf) => { const stateObj = this.hass.states[entityConf.entity]; @@ -31,7 +32,8 @@ export class HuiButtonsBase extends LitElement { : ""; return html` - ${entityConf.show_icon !== false ? html` @@ -56,11 +57,10 @@ export class HuiButtonsBase extends LitElement { > ` : ""} - ${name} - + `; })} -
+ `; } @@ -74,7 +74,7 @@ export class HuiButtonsBase extends LitElement { haStyleScrollbar, css` .ha-scrollbar { - padding: 8px; + padding: 12px; padding-top: var(--padding-top, 8px); padding-bottom: var(--padding-bottom, 8px); width: 100%; @@ -102,8 +102,9 @@ export class HuiButtonsBase extends LitElement { margin-left: -3px; margin-top: -3px; } - ha-chip { - padding: 4px; + ha-assist-chip state-badge { + margin-right: -4px; + --mdc-icon-size: 18px; } @media all and (max-width: 450px), all and (max-height: 500px) { .ha-scrollbar {