diff --git a/gallery/src/entrypoint.js b/gallery/src/entrypoint.js index e814761ba0..cd65f03157 100644 --- a/gallery/src/entrypoint.js +++ b/gallery/src/entrypoint.js @@ -1,5 +1,5 @@ import "./ha-gallery"; -import("../../src/resources/ha-style"); +import("../../src/resources/append-ha-style"); document.body.appendChild(document.createElement("ha-gallery")); diff --git a/gallery/src/pages/components/ha-badge.markdown b/gallery/src/pages/components/ha-badge.markdown new file mode 100644 index 0000000000..2bbc1f2c32 --- /dev/null +++ b/gallery/src/pages/components/ha-badge.markdown @@ -0,0 +1,65 @@ +--- +title: Badge +subtitle: Lovelace dashboard badge +--- + + + +# Badge `` + +The badge component is a small component that displays a number or status information. It is used in the lovelace dashboard on the top. + +## Implementation + +### Example Usage + +
+ + simple badge + + + + With a label + + + + Type button + +
+ +```html + simple badge + + With a label + + Type button +``` + +### API + +**Slots** + +- default slot is the content of the badge + - no default +- `icon` set the icon of the badge + - no default + +**Properties/Attributes** + +| Name | Type | Default | Description | +| -------- | ----------------------- | ----------- | ------------------------------------------------------------ | +| type | `"badge"` or `"button"` | `"badge"` | If it's button it shows a ripple effect | +| label | string | `undefined` | Text label for the badge, only visible if `iconOnly = false` | +| iconOnly | boolean | `false` | Only show label | + +**CSS Custom Properties** + +- `--ha-badge-size` (default `36px`) +- `--ha-badge-border-radius` (default `calc(var(--ha-badge-size, 36px) / 2)`) +- `--ha-badge-font-size` (default `var(--ha-font-size-s)`) +- `--ha-badge-icon-size` (default `18px`) diff --git a/gallery/src/pages/components/ha-badge.ts b/gallery/src/pages/components/ha-badge.ts new file mode 100644 index 0000000000..10c158f263 --- /dev/null +++ b/gallery/src/pages/components/ha-badge.ts @@ -0,0 +1,129 @@ +import { mdiButtonCursor, mdiHome } from "@mdi/js"; +import type { TemplateResult } from "lit"; +import { css, html, LitElement } from "lit"; +import { customElement } from "lit/decorators"; +import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element"; +import "../../../../src/components/ha-badge"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-svg-icon"; +import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; + +const badges: { + type?: "badge" | "button"; + label?: string; + iconOnly?: boolean; + slot?: TemplateResult; + iconSlot?: TemplateResult; +}[] = [ + { + slot: html`Badge`, + }, + { + type: "badge", + label: "Badge", + iconSlot: html``, + slot: html`Badge`, + }, + { + type: "button", + label: "Button", + iconSlot: html``, + slot: html`Button`, + }, + { + type: "button", + label: "Label only", + iconSlot: html``, + }, + { + type: "button", + label: "Label", + slot: html`Button no label`, + }, + { + label: "Icon only", + iconOnly: true, + iconSlot: html``, + }, +]; + +@customElement("demo-components-ha-badge") +export class DemoHaBadge extends LitElement { + protected render(): TemplateResult { + return html` + ${["light", "dark"].map( + (mode) => html` +
+ +
+ ${badges.map( + (badge) => html` + + ${badge.iconSlot} ${badge.slot} + + ` + )} +
+
+
+ ` + )} + `; + } + + firstUpdated(changedProps) { + super.firstUpdated(changedProps); + applyThemesOnElement( + this.shadowRoot!.querySelector(".dark"), + { + default_theme: "default", + default_dark_theme: "default", + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); + } + + static styles = css` + :host { + display: flex; + justify-content: center; + } + .dark, + .light { + display: block; + background-color: var(--primary-background-color); + padding: 0 50px; + } + ha-card { + margin: 24px auto; + } + .card-content { + display: flex; + gap: 24px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "demo-components-ha-badge": DemoHaBadge; + } +} diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index b4644921d5..95bee281f4 100644 --- a/src/components/ha-badge.ts +++ b/src/components/ha-badge.ts @@ -103,7 +103,7 @@ export class HaBadge extends LitElement { color: var(--secondary-text-color); } .content { - font-size: var(--ha-font-size-badge, var(--ha-font-size-s)); + font-size: var(--ha-badge-font-size, var(--ha-font-size-s)); font-style: normal; font-weight: 500; line-height: 16px; @@ -111,7 +111,7 @@ export class HaBadge extends LitElement { color: var(--primary-text-color); } ::slotted([slot="icon"]) { - --mdc-icon-size: var(--ha-icon-size-badge, 18px); + --mdc-icon-size: var(--ha-badge-icon-size, 18px); color: var(--badge-color); line-height: 0; margin-left: -4px;