Rename ha-list-new into ha-md-list (#22015)

ha-list-new => ha-md-list
This commit is contained in:
Simon Lamon 2024-09-18 10:28:05 +02:00 committed by GitHub
parent dcf763438b
commit c0043af4c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 76 additions and 76 deletions

View File

@ -25,8 +25,8 @@ import type { HomeAssistant } from "../../../../src/types";
import { HassioRepositoryDialogParams } from "./show-dialog-repositories"; import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
import type { HaTextField } from "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-textfield"; import "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-list-new"; import "../../../../src/components/ha-md-list";
import "../../../../src/components/ha-list-item-new"; import "../../../../src/components/ha-md-list-item";
@customElement("dialog-hassio-repositories") @customElement("dialog-hassio-repositories")
class HassioRepositoriesDialog extends LitElement { class HassioRepositoriesDialog extends LitElement {
@ -107,11 +107,11 @@ class HassioRepositoriesDialog extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert>` ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""} : ""}
<div class="form"> <div class="form">
<ha-list-new> <ha-md-list>
${repositories.length ${repositories.length
? repositories.map( ? repositories.map(
(repo) => html` (repo) => html`
<ha-list-item-new class="option"> <ha-md-list-item class="option">
${repo.name} ${repo.name}
<div slot="supporting-text"> <div slot="supporting-text">
<div>${repo.maintainer}</div> <div>${repo.maintainer}</div>
@ -142,11 +142,11 @@ class HassioRepositoriesDialog extends LitElement {
)} )}
</simple-tooltip> </simple-tooltip>
</div> </div>
</ha-list-item-new> </ha-md-list-item>
` `
) )
: html`<ha-list-item-new> No repositories </ha-list-item-new>`} : html`<ha-md-list-item> No repositories </ha-md-list-item>`}
</ha-list-new> </ha-md-list>
<div class="layout horizontal bottom"> <div class="layout horizontal bottom">
<ha-textfield <ha-textfield
class="flex-auto" class="flex-auto"
@ -209,7 +209,7 @@ class HassioRepositoriesDialog extends LitElement {
div.delete ha-icon-button { div.delete ha-icon-button {
color: var(--error-color); color: var(--error-color);
} }
ha-list-item-new { ha-md-list-item {
position: relative; position: relative;
} }
`, `,

View File

@ -2,8 +2,8 @@ import { MdListItem } from "@material/web/list/list-item";
import { css } from "lit"; import { css } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
@customElement("ha-list-item-new") @customElement("ha-md-list-item")
export class HaListItemNew extends MdListItem { export class HaMdListItem extends MdListItem {
static override styles = [ static override styles = [
...super.styles, ...super.styles,
css` css`
@ -21,6 +21,6 @@ export class HaListItemNew extends MdListItem {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-list-item-new": HaListItemNew; "ha-md-list-item": HaMdListItem;
} }
} }

View File

@ -2,8 +2,8 @@ import { MdList } from "@material/web/list/list";
import { css } from "lit"; import { css } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
@customElement("ha-list-new") @customElement("ha-md-list")
export class HaListNew extends MdList { export class HaMdList extends MdList {
static override styles = [ static override styles = [
...super.styles, ...super.styles,
css` css`
@ -16,6 +16,6 @@ export class HaListNew extends MdList {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-list-new": HaListNew; "ha-md-list": HaMdList;
} }
} }

View File

@ -28,8 +28,8 @@ import "../../../components/ha-domain-icon";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-icon-button-prev"; import "../../../components/ha-icon-button-prev";
import "../../../components/ha-icon-next"; import "../../../components/ha-icon-next";
import "../../../components/ha-list-item-new"; import "../../../components/ha-md-list-item";
import "../../../components/ha-list-new"; import "../../../components/ha-md-list";
import "../../../components/ha-service-icon"; import "../../../components/ha-service-icon";
import "../../../components/search-input"; import "../../../components/search-input";
import { import {
@ -434,7 +434,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
protected _opened(): void { protected _opened(): void {
// Store the width and height so that when we search, box doesn't jump // Store the width and height so that when we search, box doesn't jump
const boundingRect = const boundingRect =
this.shadowRoot!.querySelector("ha-list-new")?.getBoundingClientRect(); this.shadowRoot!.querySelector("ha-md-list")?.getBoundingClientRect();
this._width = boundingRect?.width; this._width = boundingRect?.width;
this._height = boundingRect?.height; this._height = boundingRect?.height;
} }
@ -526,7 +526,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
)} )}
></search-input> ></search-input>
</div> </div>
<ha-list-new <ha-md-list
dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)} dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)}
style=${styleMap({ style=${styleMap({
width: this._width ? `${this._width}px` : "auto", width: this._width ? `${this._width}px` : "auto",
@ -537,7 +537,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
!this._filter && !this._filter &&
(!this._group || (!this._group ||
items.find((item) => item.key === this._params!.clipboardItem)) items.find((item) => item.key === this._params!.clipboardItem))
? html`<ha-list-item-new ? html`<ha-md-list-item
interactive interactive
type="button" type="button"
class="paste" class="paste"
@ -558,14 +558,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
.path=${mdiContentPaste} .path=${mdiContentPaste}
></ha-svg-icon ></ha-svg-icon
><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon> ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
</ha-list-item-new> </ha-md-list-item>
<md-divider role="separator" tabindex="-1"></md-divider>` <md-divider role="separator" tabindex="-1"></md-divider>`
: ""} : ""}
${repeat( ${repeat(
items, items,
(item) => item.key, (item) => item.key,
(item) => html` (item) => html`
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.value=${item.key} .value=${item.key}
@ -588,10 +588,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
slot="end" slot="end"
.path=${mdiPlus} .path=${mdiPlus}
></ha-svg-icon>`} ></ha-svg-icon>`}
</ha-list-item-new> </ha-md-list-item>
` `
)} )}
</ha-list-new> </ha-md-list>
</ha-dialog> </ha-dialog>
`; `;
} }
@ -643,13 +643,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
ha-icon-next { ha-icon-next {
width: 24px; width: 24px;
} }
ha-list-new { ha-md-list {
max-height: 468px; max-height: 468px;
max-width: 100vw; max-width: 100vw;
--md-list-item-leading-space: 24px; --md-list-item-leading-space: 24px;
--md-list-item-trailing-space: 24px; --md-list-item-trailing-space: 24px;
} }
ha-list-item-new img { ha-md-list-item img {
width: 24px; width: 24px;
} }
search-input { search-input {

View File

@ -6,8 +6,8 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item-new"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-list-new"; import "../../../../components/ha-md-list";
import "../../../../components/ha-radio"; import "../../../../components/ha-radio";
import "../../../../components/ha-textfield"; import "../../../../components/ha-textfield";
@ -90,7 +90,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
></ha-icon-button> ></ha-icon-button>
</a> </a>
</ha-dialog-header> </ha-dialog-header>
<ha-list-new <ha-md-list
role="listbox" role="listbox"
tabindex="0" tabindex="0"
aria-activedescendant="option-${this._newMode}" aria-activedescendant="option-${this._newMode}"
@ -103,7 +103,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
`ui.panel.config.automation.editor.modes.${mode}` `ui.panel.config.automation.editor.modes.${mode}`
); );
return html` return html`
<ha-list-item-new <ha-md-list-item
class="option" class="option"
type="button" type="button"
@click=${this._modeChanged} @click=${this._modeChanged}
@ -132,10 +132,10 @@ class DialogAutomationMode extends LitElement implements HassDialog {
`ui.panel.config.automation.editor.modes.${mode}_description` `ui.panel.config.automation.editor.modes.${mode}_description`
)} )}
</div> </div>
</ha-list-item-new> </ha-md-list-item>
`; `;
})} })}
</ha-list-new> </ha-md-list>
${isMaxMode(this._newMode) ${isMaxMode(this._newMode)
? html` ? html`

View File

@ -48,8 +48,8 @@ import "../../../components/ha-button";
import "../../../components/ha-button-menu-new"; import "../../../components/ha-button-menu-new";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-list-item"; import "../../../components/ha-list-item";
import "../../../components/ha-list-item-new"; import "../../../components/ha-md-list-item";
import "../../../components/ha-list-new"; import "../../../components/ha-md-list";
import "../../../components/ha-menu-item"; import "../../../components/ha-menu-item";
import { import {
deleteApplicationCredential, deleteApplicationCredential,
@ -474,10 +474,10 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
"ui.panel.config.integrations.discovered" "ui.panel.config.integrations.discovered"
)} )}
</h1> </h1>
<ha-list-new> <ha-md-list>
${discoveryFlows.map( ${discoveryFlows.map(
(flow) => (flow) =>
html`<ha-list-item-new class="discovered"> html`<ha-md-list-item class="discovered">
${flow.localized_title} ${flow.localized_title}
<ha-button <ha-button
slot="end" slot="end"
@ -488,9 +488,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
"ui.panel.config.integrations.configure" "ui.panel.config.integrations.configure"
)} )}
></ha-button> ></ha-button>
</ha-list-item-new>` </ha-md-list-item>`
)} )}
</ha-list-new> </ha-md-list>
</ha-card>` </ha-card>`
: ""} : ""}
${attentionFlows.length || attentionEntries.length ${attentionFlows.length || attentionEntries.length
@ -500,12 +500,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
`ui.panel.config.integrations.integration_page.attention_entries` `ui.panel.config.integrations.integration_page.attention_entries`
)} )}
</h1> </h1>
<ha-list-new> <ha-md-list>
${attentionFlows.map((flow) => { ${attentionFlows.map((flow) => {
const attention = ATTENTION_SOURCES.includes( const attention = ATTENTION_SOURCES.includes(
flow.context.source flow.context.source
); );
return html` <ha-list-item-new return html` <ha-md-list-item
class="config_entry ${attention ? "attention" : ""}" class="config_entry ${attention ? "attention" : ""}"
> >
${flow.localized_title} ${flow.localized_title}
@ -527,7 +527,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
}` }`
)} )}
></ha-button> ></ha-button>
</ha-list-item-new>`; </ha-md-list-item>`;
})} })}
${attentionEntries.map( ${attentionEntries.map(
(item, index) => (item, index) =>
@ -539,7 +539,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
></md-divider>` ></md-divider>`
: ""} ` : ""} `
)} )}
</ha-list-new> </ha-md-list>
</ha-card>` </ha-card>`
: ""} : ""}
@ -568,7 +568,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
)} )}
</div>` </div>`
: nothing} : nothing}
<ha-list-new> <ha-md-list>
${normalEntries.map( ${normalEntries.map(
(item, index) => (item, index) =>
html`${this._renderConfigEntry(item)} html`${this._renderConfigEntry(item)}
@ -579,7 +579,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
></md-divider>` ></md-divider>`
: ""} ` : ""} `
)} )}
</ha-list-new> </ha-md-list>
<div class="card-actions"> <div class="card-actions">
<ha-button @click=${this._addIntegration}> <ha-button @click=${this._addIntegration}>
${this._manifest?.integration_type ${this._manifest?.integration_type
@ -743,7 +743,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
const configPanel = this._configPanel(item.domain, this.hass.panels); const configPanel = this._configPanel(item.domain, this.hass.panels);
return html`<ha-list-item-new return html`<ha-md-list-item
class=${classMap({ class=${classMap({
config_entry: true, config_entry: true,
"state-not-loaded": item!.state === "not_loaded", "state-not-loaded": item!.state === "not_loaded",
@ -958,7 +958,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
` `
: nothing} : nothing}
</ha-button-menu-new> </ha-button-menu-new>
</ha-list-item-new>`; </ha-md-list-item>`;
} }
private async _highlightEntry() { private async _highlightEntry() {
@ -1485,13 +1485,13 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
ha-alert:first-of-type { ha-alert:first-of-type {
margin-top: 16px; margin-top: 16px;
} }
ha-list-item-new { ha-md-list-item {
position: relative; position: relative;
} }
ha-list-item-new.discovered { ha-md-list-item.discovered {
height: 72px; height: 72px;
} }
ha-list-item-new.config_entry::after { ha-md-list-item.config_entry::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -1561,7 +1561,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
.state-disabled [slot="supporting-text"] { .state-disabled [slot="supporting-text"] {
opacity: var(--md-list-item-disabled-opacity, 0.3); opacity: var(--md-list-item-disabled-opacity, 0.3);
} }
ha-list-new { ha-md-list {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }

View File

@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";

View File

@ -3,8 +3,8 @@ import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { MatterAddDeviceStep } from "../dialog-matter-add-device"; import { MatterAddDeviceStep } from "../dialog-matter-add-device";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";
@ -23,8 +23,8 @@ class MatterAddDeviceExisting extends LitElement {
</p> </p>
</div> </div>
<ha-list-new> <ha-md-list>
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.step=${"google_home"} .step=${"google_home"}
@ -43,8 +43,8 @@ class MatterAddDeviceExisting extends LitElement {
)} )}
</span> </span>
<ha-icon-next slot="end"></ha-icon-next> <ha-icon-next slot="end"></ha-icon-next>
</ha-list-item-new> </ha-md-list-item>
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.step=${"apple_home"} .step=${"apple_home"}
@ -63,8 +63,8 @@ class MatterAddDeviceExisting extends LitElement {
)} )}
</span> </span>
<ha-icon-next slot="end"></ha-icon-next> <ha-icon-next slot="end"></ha-icon-next>
</ha-list-item-new> </ha-md-list-item>
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.step=${"generic"} .step=${"generic"}
@ -80,8 +80,8 @@ class MatterAddDeviceExisting extends LitElement {
)} )}
</span> </span>
<ha-icon-next slot="end"></ha-icon-next> <ha-icon-next slot="end"></ha-icon-next>
</ha-list-item-new> </ha-md-list-item>
</ha-list-new> </ha-md-list>
`; `;
} }

View File

@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";

View File

@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";

View File

@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";

View File

@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next"; import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-list-item-new"; import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-list-new"; import "../../../../../../components/ha-md-list";
import { HomeAssistant } from "../../../../../../types"; import { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles"; import { sharedStyles } from "./matter-add-device-shared-styles";
@ -18,8 +18,8 @@ class MatterAddDeviceMain extends LitElement {
${this.hass.localize(`ui.dialogs.matter-add-device.main.question`)} ${this.hass.localize(`ui.dialogs.matter-add-device.main.question`)}
</p> </p>
</div> </div>
<ha-list-new> <ha-md-list>
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.step=${"new"} .step=${"new"}
@ -37,8 +37,8 @@ class MatterAddDeviceMain extends LitElement {
)} )}
</span> </span>
<ha-icon-next slot="end"></ha-icon-next> <ha-icon-next slot="end"></ha-icon-next>
</ha-list-item-new> </ha-md-list-item>
<ha-list-item-new <ha-md-list-item
interactive interactive
type="button" type="button"
.step=${"existing"} .step=${"existing"}
@ -56,8 +56,8 @@ class MatterAddDeviceMain extends LitElement {
)} )}
</span> </span>
<ha-icon-next slot="end"></ha-icon-next> <ha-icon-next slot="end"></ha-icon-next>
</ha-list-item-new> </ha-md-list-item>
</ha-list-new> </ha-md-list>
`; `;
} }

View File

@ -23,7 +23,7 @@ export const sharedStyles = css`
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
ha-list-new { ha-md-list {
padding: 0; padding: 0;
--md-list-item-leading-space: var(--horizontal-padding, 16px); --md-list-item-leading-space: var(--horizontal-padding, 16px);
--md-list-item-trailing-space: var(--horizontal-padding, 16px); --md-list-item-trailing-space: var(--horizontal-padding, 16px);