From 8eb81111b40ebffa16178313f4881dc15d25a877 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 9 Nov 2023 11:11:51 +0100 Subject: [PATCH] Use ha-label for some chips --- gallery/src/pages/components/ha-chips.ts | 3 - gallery/src/pages/misc/entity-state.ts | 1 - .../src/addon-view/info/hassio-addon-info.ts | 4 - src/components/ha-chip.ts | 85 ------------------- src/components/ha-label.ts | 60 +++++++++++++ src/dialogs/quick-bar/ha-quick-bar.ts | 28 +++--- .../calendar/ha-recurrence-rule-editor.ts | 5 -- .../config/automation/ha-automation-picker.ts | 6 +- .../ha-device-automation-card.ts | 5 +- src/panels/config/users/dialog-user-detail.ts | 8 +- .../lovelace/components/hui-buttons-base.ts | 1 - 11 files changed, 84 insertions(+), 122 deletions(-) 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 1427e1cd42ae..677f0c7bf9c7 100644 --- a/gallery/src/pages/components/ha-chips.ts +++ b/gallery/src/pages/components/ha-chips.ts @@ -108,9 +108,6 @@ export class DemoHaChips extends LitElement { max-width: 600px; margin: 24px auto; } - ha-chip { - margin-bottom: 4px; - } .card-content { display: flex; flex-direction: column; 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 926a9d8bc156..074b8e08daee 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -31,7 +31,6 @@ 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/chips/ha-chip-set"; import "../../../../src/components/chips/ha-assist-chip"; import "../../../../src/components/ha-markdown"; @@ -1323,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/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/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 07d823858d1c..0b920912697a 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} @@ -815,20 +813,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/ha-recurrence-rule-editor.ts b/src/panels/calendar/ha-recurrence-rule-editor.ts index e8fbd4390c6f..d7f19d0b671b 100644 --- a/src/panels/calendar/ha-recurrence-rule-editor.ts +++ b/src/panels/calendar/ha-recurrence-rule-editor.ts @@ -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/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts index 96945ca6ef21..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 @@ -129,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 a0fe528fc153..a448b6b4f665 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -1,13 +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 { 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"; @@ -78,10 +78,10 @@ class DialogUserDetail extends LitElement {
${badges.map( ([icon, label]) => html` - + ${label} - + ` )}
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts index 1ed3e5658d21..ff04a931a42e 100644 --- a/src/panels/lovelace/components/hui-buttons-base.ts +++ b/src/panels/lovelace/components/hui-buttons-base.ts @@ -11,7 +11,6 @@ import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import "../../../components/chips/ha-assist-chip"; import "../../../components/chips/ha-chip-set"; -import "../../../components/ha-chip"; import { haStyleScrollbar } from "../../../resources/styles"; @customElement("hui-buttons-base")