Reduce control select menu component size (#17657)

gallery/src/pages/components/ha-control-select-menu.markdown

@@ -0,0 +1,3 @@
+---
+title: Control Select Menu
+---

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`
+      <ha-card>
+        ${repeat(
+          selects,
+          (select) => html`
+            <div class="card-content">
+              <ha-control-select-menu
+                .label=${select.label}
+                ?disabled=${select.disabled}
+                fixedMenuPosition
+                naturalMenuWidth
+              >
+                <ha-svg-icon slot="icon" .path=${select.icon}></ha-svg-icon>
+                ${select.options.map(
+                  (option) => html`
+                    <ha-list-item
+                      .value=${option.value}
+                      .graphic=${option.icon ? "icon" : undefined}
+                    >
+                      ${option.icon
+                        ? html`
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${option.icon}
+                            ></ha-svg-icon>
+                          `
+                        : nothing}
+                      ${option.label ?? option.value}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  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;
+  }
+}

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;
+        height: 48px;
-        padding: 8px 12px;
+        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;
+        font-size: inherit;
-        line-height: 24px;
+        line-height: inherit;
-        letter-spacing: 0.5px;
+        letter-spacing: inherit;
-      }
-
-      .value {
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 24px;
-        letter-spacing: 0.5px;
       }
 
       .select-anchor::before {