+
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/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts
index 8afa9ee487a0..d8770dd4a1b0 100644
--- a/gallery/src/pages/components/ha-control-number-buttons.ts
+++ b/gallery/src/pages/components/ha-control-number-buttons.ts
@@ -11,6 +11,7 @@ const buttons: {
min?: number;
max?: number;
step?: number;
+ unit?: string;
class?: string;
}[] = [
{
@@ -29,6 +30,11 @@ const buttons: {
label: "Custom",
class: "custom",
},
+ {
+ id: "unit",
+ label: "With unit",
+ unit: "m",
+ },
];
@customElement("demo-components-ha-control-number-buttons")
@@ -50,6 +56,7 @@ export class DemoHarControlNumberButtons extends LitElement {
Config: ${JSON.stringify(config)}
@@ -119,7 +119,7 @@ export class DemoHaBarSlider extends LitElement {
@value-changed=${this.handleValueChanged}
@slider-moved=${this.handleSliderMoved}
aria-label=${label}
- .tooltipUnit=${config.unit}
+ .unit=${config.unit}
>
`;
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.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-control-number-buttons.ts b/src/components/ha-control-number-buttons.ts
index 324444256ea8..771e9aee9810 100644
--- a/src/components/ha-control-number-buttons.ts
+++ b/src/components/ha-control-number-buttons.ts
@@ -1,11 +1,19 @@
import { mdiMinus, mdiPlus } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import {
+ CSSResultGroup,
+ LitElement,
+ TemplateResult,
+ css,
+ html,
+ nothing,
+} from "lit";
import { customElement, property, query } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
+import { fireEvent } from "../common/dom/fire_event";
import { conditionalClamp } from "../common/number/clamp";
import { formatNumber } from "../common/number/format_number";
+import { blankBeforeUnit } from "../common/translations/blank_before_unit";
import { FrontendLocaleData } from "../data/translation";
-import { fireEvent } from "../common/dom/fire_event";
const A11Y_KEY_CODES = new Set([
"ArrowRight",
@@ -34,6 +42,8 @@ export class HaControlNumberButton extends LitElement {
@property({ type: Number }) public max?: number;
+ @property() public unit?: string;
+
@property({ attribute: "false" })
public formatOptions: Intl.NumberFormatOptions = {};
@@ -114,26 +124,28 @@ export class HaControlNumberButton extends LitElement {
}
protected render(): TemplateResult {
- const displayedValue =
+ const value =
this.value != null
? formatNumber(this.value, this.locale, this.formatOptions)
: "";
+ const unit = this.unit ? `${blankBeforeUnit(this.unit)}${this.unit}` : "";
return html`