diff --git a/gallery/src/pages/components/ha-control-select-menu.markdown b/gallery/src/pages/components/ha-control-select-menu.markdown new file mode 100644 index 0000000000..a44d3aec00 --- /dev/null +++ b/gallery/src/pages/components/ha-control-select-menu.markdown @@ -0,0 +1,3 @@ +--- +title: Control Select Menu +--- diff --git a/gallery/src/pages/components/ha-control-select-menu.ts b/gallery/src/pages/components/ha-control-select-menu.ts new file mode 100644 index 0000000000..c3e15cddaf --- /dev/null +++ b/gallery/src/pages/components/ha-control-select-menu.ts @@ -0,0 +1,146 @@ +import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js"; +import { LitElement, TemplateResult, css, html, nothing } from "lit"; +import { customElement } from "lit/decorators"; +import { repeat } from "lit/directives/repeat"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-control-select-menu"; +import "../../../../src/components/ha-list-item"; +import "../../../../src/components/ha-svg-icon"; + +type SelectMenuOptions = { + label: string; + value: string; + icon?: string; +}; + +type SelectMenu = { + label: string; + icon: string; + class?: string; + disabled?: boolean; + options: SelectMenuOptions[]; +}; + +const selects: SelectMenu[] = [ + { + label: "Basic select", + icon: mdiFan, + options: [ + { + value: "low", + label: "Low", + }, + { + value: "medium", + label: "Medium", + }, + { + value: "high", + label: "High", + }, + ], + }, + { + label: "Select with icons", + icon: mdiFan, + options: [ + { + value: "low", + label: "Low", + icon: mdiFanSpeed1, + }, + { + value: "medium", + label: "Medium", + icon: mdiFanSpeed2, + }, + { + value: "high", + label: "High", + icon: mdiFanSpeed3, + }, + ], + }, + { + label: "Disabled select", + icon: mdiFan, + options: [], + disabled: true, + }, +]; + +@customElement("demo-components-ha-control-select-menu") +export class DemoHaControlSelectMenu extends LitElement { + protected render(): TemplateResult { + return html` + + ${repeat( + selects, + (select) => html` +
+ + + ${select.options.map( + (option) => html` + + ${option.icon + ? html` + + ` + : nothing} + ${option.label ?? option.value} + + ` + )} + +
+ ` + )} +
+ `; + } + + static get styles() { + return css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --control-button-icon-color: var(--primary-color); + --control-button-background-color: var(--primary-color); + --control-button-background-opacity: 0.2; + --control-button-border-radius: 18px; + height: 100px; + width: 100px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "demo-components-ha-control-select-menu": DemoHaControlSelectMenu; + } +} diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index ce119fcba1..028242488f 100644 --- a/src/components/ha-control-select-menu.ts +++ b/src/components/ha-control-select-menu.ts @@ -170,18 +170,18 @@ export class HaControlSelectMenu extends SelectBase { --control-select-menu-text-color: var(--primary-text-color); --control-select-menu-background-color: var(--disabled-color); --control-select-menu-background-opacity: 0.2; - --control-select-menu-border-radius: 16px; + --control-select-menu-border-radius: 14px; --control-select-menu-min-width: 120px; --control-select-menu-max-width: 200px; --control-select-menu-width: 100%; - --mdc-icon-size: 24px; + --mdc-icon-size: 20px; color: var(--primary-text-color); -webkit-tap-highlight-color: transparent; } .select-anchor { color: var(--control-select-menu-text-color); - height: 56px; - padding: 8px 12px; + height: 48px; + padding: 6px 10px; overflow: hidden; position: relative; cursor: pointer; @@ -199,11 +199,16 @@ export class HaControlSelectMenu extends SelectBase { font-size: inherit; transition: color 180ms ease-in-out; color: var(--control-text-icon-color); - gap: 12px; + gap: 10px; min-width: var(--control-select-menu-min-width); max-width: var(--control-select-menu-max-width); width: var(--control-select-menu-width); user-select: none; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.25px; } .content { display: flex; @@ -225,24 +230,14 @@ export class HaControlSelectMenu extends SelectBase { .label { font-size: 12px; - font-style: normal; - font-weight: 400; line-height: 16px; letter-spacing: 0.4px; } .select-no-value .label { - font-size: 16px; - line-height: 24px; - letter-spacing: 0.5px; - } - - .value { - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0.5px; + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; } .select-anchor::before {