Add leading icon slot to expansion panel and fix left-chevron property

gallery/src/pages/components/ha-expansion-panel.ts

@@ -1,4 +1,4 @@
-import { mdiPacMan } from "@mdi/js";
+import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
@@ -125,6 +125,23 @@ const SAMPLES: {
       `;
     },
   },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr Header with actions"
+        >
+          <ha-svg-icon
+            slot="leading-icon"
+            .path=${mdiLightbulbOn}
+          ></ha-svg-icon>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
 ];
 
 @customElement("demo-components-ha-expansion-panel")

src/components/ha-expansion-panel.ts

@@ -1,6 +1,6 @@
 import { mdiChevronDown } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
@@ -13,11 +13,11 @@ export class HaExpansionPanel extends LitElement {
 
   @property({ type: Boolean, reflect: true }) outlined = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true }) leftChevron =
-    false;
+  @property({ attribute: "left-chevron", type: Boolean, reflect: true })
+  public leftChevron = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true }) noCollapse =
-    false;
+  @property({ attribute: "no-collapse", type: Boolean, reflect: true })
+  public noCollapse = false;
 
   @property() header?: string;
 
@@ -28,6 +28,14 @@ export class HaExpansionPanel extends LitElement {
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
+    const chevronIcon = this.noCollapse
+      ? nothing
+      : html`
+          <ha-svg-icon
+            .path=${mdiChevronDown}
+            class="summary-icon ${classMap({ expanded: this.expanded })}"
+          ></ha-svg-icon>
+        `;
     return html`
       <div class="top ${classMap({ expanded: this.expanded })}">
         <div
@@ -42,28 +50,15 @@ export class HaExpansionPanel extends LitElement {
           aria-expanded=${this.expanded}
           aria-controls="sect1"
         >
-          ${this.leftChevron && !this.noCollapse
-            ? html`
-                <ha-svg-icon
-                  .path=${mdiChevronDown}
-                  class="summary-icon ${classMap({ expanded: this.expanded })}"
-                ></ha-svg-icon>
-              `
-            : ""}
+          ${this.leftChevron ? chevronIcon : nothing}
+          <slot name="leading-icon"></slot>
           <slot name="header">
             <div class="header">
               ${this.header}
               <slot class="secondary" name="secondary">${this.secondary}</slot>
             </div>
           </slot>
-          ${!this.leftChevron && !this.noCollapse
-            ? html`
-                <ha-svg-icon
-                  .path=${mdiChevronDown}
-                  class="summary-icon ${classMap({ expanded: this.expanded })}"
-                ></ha-svg-icon>
-              `
-            : ""}
+          ${!this.leftChevron ? chevronIcon : nothing}
           <slot name="icons"></slot>
         </div>
       </div>
@@ -177,7 +172,8 @@ export class HaExpansionPanel extends LitElement {
       margin-inline-end: initial;
     }
 
-    :host([leftchevron]) .summary-icon {
+    :host([left-chevron]) .summary-icon,
+    ::slotted([slot="leading-icon"]) {
       margin-left: 0;
       margin-right: 8px;
       margin-inline-start: 0;

src/components/ha-filter-blueprints.ts

@@ -45,7 +45,7 @@ export class HaFilterBlueprints extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-categories.ts

@@ -65,7 +65,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-devices.ts

@@ -46,7 +46,7 @@ export class HaFilterDevices extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-domains.ts

@@ -33,7 +33,7 @@ export class HaFilterDomains extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-entities.ts

@@ -48,7 +48,7 @@ export class HaFilterEntities extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-floor-areas.ts

@@ -54,7 +54,7 @@ export class HaFilterFloorAreas extends LitElement {
 
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-integrations.ts

@@ -35,7 +35,7 @@ export class HaFilterIntegrations extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-labels.ts

@@ -71,7 +71,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-filter-states.ts

@@ -41,7 +41,7 @@ export class HaFilterStates extends LitElement {
     const hasIcon = this.states.find((item) => item.icon);
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}

src/components/ha-form/ha-form-expandable.ts

@@ -67,18 +67,23 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
   protected render() {
     return html`
       <ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
+        ${this.schema.icon
+          ? html`
+              <ha-icon slot="leading-icon" .icon=${this.schema.icon}></ha-icon>
+            `
+          : this.schema.iconPath
+            ? html`
+                <ha-svg-icon
+                  slot="leading-icon"
+                  .path=${this.schema.iconPath}
+                ></ha-svg-icon>
+              `
+            : nothing}
         <div
           slot="header"
           role="heading"
           aria-level=${this.schema.headingLevel?.toString() ?? "3"}
         >
-          ${this.schema.icon
-            ? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
-            : this.schema.iconPath
-              ? html`
-                  <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon>
-                `
-              : nothing}
           ${this.schema.title || this.computeLabel?.(this.schema)}
         </div>
         <div class="content">

src/components/ha-service-control.ts

@@ -523,7 +523,7 @@ export class HaServiceControl extends LitElement {
           return fields.length &&
             this._hasFilteredFields(fields, targetEntities)
             ? html`<ha-expansion-panel
-                leftChevron
+                left-chevron
                 .expanded=${!dataField.collapsed}
                 .header=${this.hass.localize(
                   `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -203,20 +203,24 @@ export default class HaAutomationActionRow extends LitElement {
               </div>
             `
           : nothing}
-        <ha-expansion-panel leftChevron>
-          <h3 slot="header">
-            ${type === "service" &&
-            "action" in this.action &&
-            this.action.action
-              ? html`<ha-service-icon
+        <ha-expansion-panel left-chevron>
+          ${type === "service" && "action" in this.action && this.action.action
+            ? html`
+                <ha-service-icon
+                  slot="leading-icon"
                   class="action-icon"
                   .hass=${this.hass}
                   .service=${this.action.action}
-                ></ha-service-icon>`
-              : html`<ha-svg-icon
+                ></ha-service-icon>
+              `
+            : html`
+                <ha-svg-icon
+                  slot="leading-icon"
                   class="action-icon"
                   .path=${ACTION_ICONS[type!]}
-                ></ha-svg-icon>`}
+                ></ha-svg-icon>
+              `}
+          <h3 slot="header">
             ${capitalizeFirstLetter(
               describeAction(
                 this.hass,
@@ -640,9 +644,6 @@ export default class HaAutomationActionRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -128,12 +128,13 @@ export default class HaAutomationConditionRow extends LitElement {
             `
           : ""}
 
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="condition-icon"
+            .path=${CONDITION_ICONS[this.condition.condition]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="condition-icon"
-              .path=${CONDITION_ICONS[this.condition.condition]}
-            ></ha-svg-icon>
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass, this._entityReg)
             )}
@@ -526,9 +527,6 @@ export default class HaAutomationConditionRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -92,7 +92,7 @@ export default class HaAutomationOptionRow extends LitElement {
     return html`
       <ha-card outlined>
         <ha-expansion-panel
-          leftChevron
+          left-chevron
           @expanded-changed=${this._expandedChanged}
           id="option"
         >

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -159,12 +159,13 @@ export default class HaAutomationTriggerRow extends LitElement {
             `
           : nothing}
 
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="trigger-icon"
+            .path=${TRIGGER_ICONS[type]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="trigger-icon"
-              .path=${TRIGGER_ICONS[type]}
-            ></ha-svg-icon>
             ${describeTrigger(this.trigger, this.hass, this._entityReg)}
           </h3>
 
@@ -672,9 +673,6 @@ export default class HaAutomationTriggerRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/blueprint/blueprint-generic-editor.ts

@@ -130,13 +130,16 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
       .expanded=${expanded}
       .noCollapse=${anyRequired}
     >
-      <div slot="header" role="heading" aria-level="3" class="section-header">
-        ${section?.icon
-          ? html`<ha-icon
+      ${section?.icon
+        ? html`
+            <ha-icon
+              slot="leading-icon"
               class="section-header"
               .icon=${section.icon}
-            ></ha-icon>`
-          : nothing}
+            ></ha-icon>
+          `
+        : nothing}
+      <div slot="header" role="heading" aria-level="3" class="section-header">
         <ha-markdown .content=${title}></ha-markdown>
       </div>
       <div class="content">

src/panels/config/script/ha-script-field-row.ts

@@ -82,7 +82,7 @@ export default class HaScriptFieldRow extends LitElement {
 
     return html`
       <ha-card outlined>
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
           <h3 slot="header">${this.key}</h3>
 
           <slot name="icons" slot="icons"></slot>

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -97,12 +97,13 @@ export class HaCardConditionEditor extends LitElement {
 
     return html`
       <div class="container">
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="condition-icon"
+            .path=${ICON_CONDITION[condition.condition]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="condition-icon"
-              .path=${ICON_CONDITION[condition.condition]}
-            ></ha-svg-icon>
             ${this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
             ) || condition.condition}