Skip to content

Commit 3c11323

Browse files
piitayapiitaya
authored
Add leading icon slot to expansion panel and fix left-chevron property (#24635)
* Add leading icon slot to expansion panel and fix left chevron * Update components
1 parent 4f7d505 commit 3c11323

26 files changed

+105
-86
lines changed

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

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mdiPacMan } from "@mdi/js";
1+
import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
22
import type { TemplateResult } from "lit";
33
import { css, html, LitElement } from "lit";
44
import { customElement } from "lit/decorators";
@@ -125,6 +125,23 @@ const SAMPLES: {
125125
`;
126126
},
127127
},
128+
{
129+
template(slot, leftChevron) {
130+
return html`
131+
<ha-expansion-panel
132+
slot=${slot}
133+
.leftChevron=${leftChevron}
134+
header="Attr Header with actions"
135+
>
136+
<ha-svg-icon
137+
slot="leading-icon"
138+
.path=${mdiLightbulbOn}
139+
></ha-svg-icon>
140+
${SHORT_TEXT}
141+
</ha-expansion-panel>
142+
`;
143+
},
144+
},
128145
];
129146

130147
@customElement("demo-components-ha-expansion-panel")

‎src/components/ha-expansion-panel.ts

+18-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { mdiChevronDown } from "@mdi/js";
22
import type { PropertyValues, TemplateResult } from "lit";
3-
import { css, html, LitElement } from "lit";
3+
import { css, html, LitElement, nothing } from "lit";
44
import { customElement, property, query, state } from "lit/decorators";
55
import { classMap } from "lit/directives/class-map";
66
import { fireEvent } from "../common/dom/fire_event";
@@ -13,11 +13,11 @@ export class HaExpansionPanel extends LitElement {
1313

1414
@property({ type: Boolean, reflect: true }) outlined = false;
1515

16-
@property({ attribute: false, type: Boolean, reflect: true }) leftChevron =
17-
false;
16+
@property({ attribute: "left-chevron", type: Boolean, reflect: true })
17+
public leftChevron = false;
1818

19-
@property({ attribute: false, type: Boolean, reflect: true }) noCollapse =
20-
false;
19+
@property({ attribute: "no-collapse", type: Boolean, reflect: true })
20+
public noCollapse = false;
2121

2222
@property() header?: string;
2323

@@ -28,6 +28,14 @@ export class HaExpansionPanel extends LitElement {
2828
@query(".container") private _container!: HTMLDivElement;
2929

3030
protected render(): TemplateResult {
31+
const chevronIcon = this.noCollapse
32+
? nothing
33+
: html`
34+
<ha-svg-icon
35+
.path=${mdiChevronDown}
36+
class="summary-icon ${classMap({ expanded: this.expanded })}"
37+
></ha-svg-icon>
38+
`;
3139
return html`
3240
<div class="top ${classMap({ expanded: this.expanded })}">
3341
<div
@@ -42,28 +50,15 @@ export class HaExpansionPanel extends LitElement {
4250
aria-expanded=${this.expanded}
4351
aria-controls="sect1"
4452
>
45-
${this.leftChevron && !this.noCollapse
46-
? html`
47-
<ha-svg-icon
48-
.path=${mdiChevronDown}
49-
class="summary-icon ${classMap({ expanded: this.expanded })}"
50-
></ha-svg-icon>
51-
`
52-
: ""}
53+
${this.leftChevron ? chevronIcon : nothing}
54+
<slot name="leading-icon"></slot>
5355
<slot name="header">
5456
<div class="header">
5557
${this.header}
5658
<slot class="secondary" name="secondary">${this.secondary}</slot>
5759
</div>
5860
</slot>
59-
${!this.leftChevron && !this.noCollapse
60-
? html`
61-
<ha-svg-icon
62-
.path=${mdiChevronDown}
63-
class="summary-icon ${classMap({ expanded: this.expanded })}"
64-
></ha-svg-icon>
65-
`
66-
: ""}
61+
${!this.leftChevron ? chevronIcon : nothing}
6762
<slot name="icons"></slot>
6863
</div>
6964
</div>
@@ -177,7 +172,8 @@ export class HaExpansionPanel extends LitElement {
177172
margin-inline-end: initial;
178173
}
179174
180-
:host([leftchevron]) .summary-icon {
175+
:host([left-chevron]) .summary-icon,
176+
::slotted([slot="leading-icon"]) {
181177
margin-left: 0;
182178
margin-right: 8px;
183179
margin-inline-start: 0;

‎src/components/ha-filter-blueprints.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export class HaFilterBlueprints extends LitElement {
4545
protected render() {
4646
return html`
4747
<ha-expansion-panel
48-
leftChevron
48+
left-chevron
4949
.expanded=${this.expanded}
5050
@expanded-will-change=${this._expandedWillChange}
5151
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-categories.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
6565
protected render() {
6666
return html`
6767
<ha-expansion-panel
68-
leftChevron
68+
left-chevron
6969
.expanded=${this.expanded}
7070
@expanded-will-change=${this._expandedWillChange}
7171
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-devices.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class HaFilterDevices extends LitElement {
4646
protected render() {
4747
return html`
4848
<ha-expansion-panel
49-
leftChevron
49+
left-chevron
5050
.expanded=${this.expanded}
5151
@expanded-will-change=${this._expandedWillChange}
5252
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-domains.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class HaFilterDomains extends LitElement {
3333
protected render() {
3434
return html`
3535
<ha-expansion-panel
36-
leftChevron
36+
left-chevron
3737
.expanded=${this.expanded}
3838
@expanded-will-change=${this._expandedWillChange}
3939
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-entities.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class HaFilterEntities extends LitElement {
4848
protected render() {
4949
return html`
5050
<ha-expansion-panel
51-
leftChevron
51+
left-chevron
5252
.expanded=${this.expanded}
5353
@expanded-will-change=${this._expandedWillChange}
5454
@expanded-changed=${this._expandedChanged}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class HaFilterFloorAreas extends LitElement {
5454

5555
return html`
5656
<ha-expansion-panel
57-
leftChevron
57+
left-chevron
5858
.expanded=${this.expanded}
5959
@expanded-will-change=${this._expandedWillChange}
6060
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-integrations.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class HaFilterIntegrations extends LitElement {
3535
protected render() {
3636
return html`
3737
<ha-expansion-panel
38-
leftChevron
38+
left-chevron
3939
.expanded=${this.expanded}
4040
@expanded-will-change=${this._expandedWillChange}
4141
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-labels.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
7171
protected render() {
7272
return html`
7373
<ha-expansion-panel
74-
leftChevron
74+
left-chevron
7575
.expanded=${this.expanded}
7676
@expanded-will-change=${this._expandedWillChange}
7777
@expanded-changed=${this._expandedChanged}

‎src/components/ha-filter-states.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export class HaFilterStates extends LitElement {
4141
const hasIcon = this.states.find((item) => item.icon);
4242
return html`
4343
<ha-expansion-panel
44-
leftChevron
44+
left-chevron
4545
.expanded=${this.expanded}
4646
@expanded-will-change=${this._expandedWillChange}
4747
@expanded-changed=${this._expandedChanged}

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

+12-7
Original file line numberDiff line numberDiff line change
@@ -67,18 +67,23 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
6767
protected render() {
6868
return html`
6969
<ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
70+
${this.schema.icon
71+
? html`
72+
<ha-icon slot="leading-icon" .icon=${this.schema.icon}></ha-icon>
73+
`
74+
: this.schema.iconPath
75+
? html`
76+
<ha-svg-icon
77+
slot="leading-icon"
78+
.path=${this.schema.iconPath}
79+
></ha-svg-icon>
80+
`
81+
: nothing}
7082
<div
7183
slot="header"
7284
role="heading"
7385
aria-level=${this.schema.headingLevel?.toString() ?? "3"}
7486
>
75-
${this.schema.icon
76-
? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
77-
: this.schema.iconPath
78-
? html`
79-
<ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon>
80-
`
81-
: nothing}
8287
${this.schema.title || this.computeLabel?.(this.schema)}
8388
</div>
8489
<div class="content">

‎src/components/ha-service-control.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -523,7 +523,7 @@ export class HaServiceControl extends LitElement {
523523
return fields.length &&
524524
this._hasFilteredFields(fields, targetEntities)
525525
? html`<ha-expansion-panel
526-
leftChevron
526+
left-chevron
527527
.expanded=${!dataField.collapsed}
528528
.header=${this.hass.localize(
529529
`component.${domain}.services.${serviceName}.sections.${dataField.key}.name`

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

+13-12
Original file line numberDiff line numberDiff line change
@@ -203,20 +203,24 @@ export default class HaAutomationActionRow extends LitElement {
203203
</div>
204204
`
205205
: nothing}
206-
<ha-expansion-panel leftChevron>
207-
<h3 slot="header">
208-
${type === "service" &&
209-
"action" in this.action &&
210-
this.action.action
211-
? html`<ha-service-icon
206+
<ha-expansion-panel left-chevron>
207+
${type === "service" && "action" in this.action && this.action.action
208+
? html`
209+
<ha-service-icon
210+
slot="leading-icon"
212211
class="action-icon"
213212
.hass=${this.hass}
214213
.service=${this.action.action}
215-
></ha-service-icon>`
216-
: html`<ha-svg-icon
214+
></ha-service-icon>
215+
`
216+
: html`
217+
<ha-svg-icon
218+
slot="leading-icon"
217219
class="action-icon"
218220
.path=${ACTION_ICONS[type!]}
219-
></ha-svg-icon>`}
221+
></ha-svg-icon>
222+
`}
223+
<h3 slot="header">
220224
${capitalizeFirstLetter(
221225
describeAction(
222226
this.hass,
@@ -640,9 +644,6 @@ export default class HaAutomationActionRow extends LitElement {
640644
display: inline-block;
641645
color: var(--secondary-text-color);
642646
opacity: 0.9;
643-
margin-right: 8px;
644-
margin-inline-end: 8px;
645-
margin-inline-start: initial;
646647
}
647648
}
648649
.card-content {

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

+6-8
Original file line numberDiff line numberDiff line change
@@ -128,12 +128,13 @@ export default class HaAutomationConditionRow extends LitElement {
128128
`
129129
: ""}
130130
131-
<ha-expansion-panel leftChevron>
131+
<ha-expansion-panel left-chevron>
132+
<ha-svg-icon
133+
slot="leading-icon"
134+
class="condition-icon"
135+
.path=${CONDITION_ICONS[this.condition.condition]}
136+
></ha-svg-icon>
132137
<h3 slot="header">
133-
<ha-svg-icon
134-
class="condition-icon"
135-
.path=${CONDITION_ICONS[this.condition.condition]}
136-
></ha-svg-icon>
137138
${capitalizeFirstLetter(
138139
describeCondition(this.condition, this.hass, this._entityReg)
139140
)}
@@ -526,9 +527,6 @@ export default class HaAutomationConditionRow extends LitElement {
526527
display: inline-block;
527528
color: var(--secondary-text-color);
528529
opacity: 0.9;
529-
margin-right: 8px;
530-
margin-inline-end: 8px;
531-
margin-inline-start: initial;
532530
}
533531
}
534532
.card-content {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export default class HaAutomationOptionRow extends LitElement {
9292
return html`
9393
<ha-card outlined>
9494
<ha-expansion-panel
95-
leftChevron
95+
left-chevron
9696
@expanded-changed=${this._expandedChanged}
9797
id="option"
9898
>

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

+6-8
Original file line numberDiff line numberDiff line change
@@ -159,12 +159,13 @@ export default class HaAutomationTriggerRow extends LitElement {
159159
`
160160
: nothing}
161161
162-
<ha-expansion-panel leftChevron>
162+
<ha-expansion-panel left-chevron>
163+
<ha-svg-icon
164+
slot="leading-icon"
165+
class="trigger-icon"
166+
.path=${TRIGGER_ICONS[type]}
167+
></ha-svg-icon>
163168
<h3 slot="header">
164-
<ha-svg-icon
165-
class="trigger-icon"
166-
.path=${TRIGGER_ICONS[type]}
167-
></ha-svg-icon>
168169
${describeTrigger(this.trigger, this.hass, this._entityReg)}
169170
</h3>
170171
@@ -672,9 +673,6 @@ export default class HaAutomationTriggerRow extends LitElement {
672673
display: inline-block;
673674
color: var(--secondary-text-color);
674675
opacity: 0.9;
675-
margin-right: 8px;
676-
margin-inline-end: 8px;
677-
margin-inline-start: initial;
678676
}
679677
}
680678
.card-content {

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

+8-5
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,16 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
130130
.expanded=${expanded}
131131
.noCollapse=${anyRequired}
132132
>
133-
<div slot="header" role="heading" aria-level="3" class="section-header">
134-
${section?.icon
135-
? html`<ha-icon
133+
${section?.icon
134+
? html`
135+
<ha-icon
136+
slot="leading-icon"
136137
class="section-header"
137138
.icon=${section.icon}
138-
></ha-icon>`
139-
: nothing}
139+
></ha-icon>
140+
`
141+
: nothing}
142+
<div slot="header" role="heading" aria-level="3" class="section-header">
140143
<ha-markdown .content=${title}></ha-markdown>
141144
</div>
142145
<div class="content">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default class HaScriptFieldRow extends LitElement {
8282

8383
return html`
8484
<ha-card outlined>
85-
<ha-expansion-panel leftChevron>
85+
<ha-expansion-panel left-chevron>
8686
<h3 slot="header">${this.key}</h3>
8787
8888
<slot name="icons" slot="icons"></slot>

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,13 @@ export class HaCardConditionEditor extends LitElement {
9797

9898
return html`
9999
<div class="container">
100-
<ha-expansion-panel leftChevron>
100+
<ha-expansion-panel left-chevron>
101+
<ha-svg-icon
102+
slot="leading-icon"
103+
class="condition-icon"
104+
.path=${ICON_CONDITION[condition.condition]}
105+
></ha-svg-icon>
101106
<h3 slot="header">
102-
<ha-svg-icon
103-
class="condition-icon"
104-
.path=${ICON_CONDITION[condition.condition]}
105-
></ha-svg-icon>
106107
${this.hass.localize(
107108
`ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
108109
) || condition.condition}

0 commit comments

Comments
 (0)