From 995e3f10ad368e6c140494d5ffb5fb82b9cedee7 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Sat, 26 Apr 2025 22:12:03 +0200 Subject: [PATCH] Replace remaining mwc-tabs (#25179) * Remaining mwc-tabs * Apply suggestions from code review Co-authored-by: Bram Kragten --------- Co-authored-by: Bram Kragten --- .../dialogs/network/dialog-hassio-network.ts | 39 +++--- package.json | 2 - .../zha/dialog-zha-manage-zigbee-device.ts | 29 +++-- .../zha/zha-manage-clusters.ts | 31 +++-- .../config/network/supervisor-network.ts | 65 +++++----- yarn.lock | 120 ------------------ 6 files changed, 92 insertions(+), 194 deletions(-) diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index b41009577b..f9b3a61613 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -1,7 +1,4 @@ import "@material/mwc-button/mwc-button"; - -import "@material/mwc-tab"; -import "@material/mwc-tab-bar"; import { mdiClose } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -40,6 +37,7 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; import type { HassioNetworkDialogParams } from "./show-dialog-network"; +import "../../../../src/components/sl-tab-group"; const IP_VERSIONS = ["ipv4", "ipv6"]; @@ -117,19 +115,19 @@ export class DialogHassioNetwork > ${this._interfaces.length > 1 - ? html`${this._interfaces.map( - (device) => - html` + html` - ` + ${device.interface} + ` )} - ` + ` : ""} ${cache(this._renderTab())} @@ -486,8 +484,8 @@ export class DialogHassioNetwork return; } } - this._curTabIndex = ev.detail.index; - this._interface = { ...this._interfaces[ev.detail.index] }; + this._curTabIndex = Number(ev.detail.name); + this._interface = { ...this._interfaces[this._curTabIndex] }; } private _handleRadioValueChanged(ev: CustomEvent): void { @@ -561,11 +559,6 @@ export class DialogHassioNetwork flex-shrink: 0; } - mwc-tab-bar { - border-bottom: 1px solid - var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); - } - ha-dialog { --dialog-content-position: static; --dialog-content-padding: 0; @@ -638,6 +631,14 @@ export class DialogHassioNetwork ha-list-item { --mdc-list-side-padding: 10px; } + + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; + } `, ]; } diff --git a/package.json b/package.json index ec2c9fac7c..71aae461f6 100644 --- a/package.json +++ b/package.json @@ -75,8 +75,6 @@ "@material/mwc-select": "0.27.0", "@material/mwc-snackbar": "0.27.0", "@material/mwc-switch": "0.27.0", - "@material/mwc-tab": "0.27.0", - "@material/mwc-tab-bar": "0.27.0", "@material/mwc-textarea": "0.27.0", "@material/mwc-textfield": "0.27.0", "@material/mwc-top-app-bar": "0.27.0", diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index 3ac4a62f02..3d62c71be4 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts @@ -1,5 +1,3 @@ -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; import { mdiClose } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -105,20 +103,21 @@ class DialogZHAManageZigbeeDevice extends LitElement { > ${this.hass.localize("ui.dialogs.zha_manage_device.heading")} - + ${tabs.map( (tab) => html` - + ${this.hass.localize( `ui.dialogs.zha_manage_device.tabs.${tab}` )} - > + ` )} - +
${cache( @@ -187,7 +186,7 @@ class DialogZHAManageZigbeeDevice extends LitElement { } private _handleTabChanged(ev: CustomEvent): void { - const newTab = this._getTabs(this._device)[ev.detail.index]; + const newTab = ev.detail.name as Tab; if (newTab === this._currTab) { return; } @@ -229,6 +228,14 @@ class DialogZHAManageZigbeeDevice extends LitElement { --mdc-dialog-max-height: calc(100% - 72px); } } + + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; + } `, ]; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts index 056f296a4b..3c264a9e6e 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts @@ -1,5 +1,3 @@ -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -15,6 +13,7 @@ import type { HomeAssistant } from "../../../../../types"; import { computeClusterKey } from "./functions"; import "./zha-cluster-attributes"; import "./zha-cluster-commands"; +import "../../../../../components/sl-tab-group"; declare global { // for fire event @@ -92,20 +91,20 @@ export class ZHAManageClusters extends LitElement {
${this._selectedCluster ? html` - + ${tabs.map( (tab) => html` - ${this.hass.localize( `ui.panel.config.zha.clusters.tabs.${tab}` - )} - > + )} ` )} - +
${cache( @@ -148,7 +147,7 @@ export class ZHAManageClusters extends LitElement { } private _handleTabChanged(ev: CustomEvent): void { - const newTab = tabs[ev.detail.index]; + const newTab = ev.detail.name; if (newTab === this._currTab) { return; } @@ -177,6 +176,14 @@ export class ZHAManageClusters extends LitElement { align-items: center; padding-bottom: 10px; } + + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; + } `, ]; } diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index 0df1ac663c..6decf94b54 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -1,5 +1,3 @@ -import "@material/mwc-tab"; -import "@material/mwc-tab-bar"; import { mdiDeleteOutline, mdiMenuDown, mdiPlus, mdiWifi } from "@mdi/js"; import { css, type CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -35,6 +33,7 @@ import { showConfirmationDialog, } from "../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../types"; +import "../../../components/sl-tab-group"; const IP_VERSIONS = ["ipv4", "ipv6"]; @@ -95,26 +94,27 @@ export class HassioNetwork extends LitElement { } return html` - - ${this._interfaces.length > 1 - ? html`${this._interfaces.map( - (device) => - html` - ` - )} - ` - : nothing} + +
+ ${this.hass.localize("ui.panel.config.network.supervisor.title")} + ${this._interfaces.length > 1 + ? html` + ${this._interfaces.map( + (device, i) => + html` + ${device.interface} + ` + )} + + ` + : nothing} +
${cache(this._renderTab())} `; @@ -627,8 +627,8 @@ export class HassioNetwork extends LitElement { return; } } - this._curTabIndex = ev.detail.index; - this._interface = { ...this._interfaces[ev.detail.index] }; + this._curTabIndex = Number(ev.detail.name); + this._interface = { ...this._interfaces[this._curTabIndex] }; } private _handleRadioValueChanged(ev: Event): void { @@ -775,12 +775,6 @@ export class HassioNetwork extends LitElement { static get styles(): CSSResultGroup { return [ css` - mwc-tab-bar { - border-bottom: 1px solid - var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); - margin-bottom: 24px; - } - .content { display: block; padding: 20px 24px; @@ -836,6 +830,17 @@ export class HassioNetwork extends LitElement { ha-expansion-panel > :last-child { margin-bottom: 16px; } + + sl-tab-group { + line-height: 24px; + } + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; + } `, ]; } diff --git a/yarn.lock b/yarn.lock index e164d21932..3a18f6c428 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2853,60 +2853,6 @@ __metadata: languageName: node linkType: hard -"@material/mwc-tab-bar@npm:0.27.0": - version: 0.27.0 - resolution: "@material/mwc-tab-bar@npm:0.27.0" - dependencies: - "@material/mwc-base": "npm:^0.27.0" - "@material/mwc-tab": "npm:^0.27.0" - "@material/mwc-tab-scroller": "npm:^0.27.0" - "@material/tab": "npm:=14.0.0-canary.53b3cad2f.0" - "@material/tab-bar": "npm:=14.0.0-canary.53b3cad2f.0" - lit: "npm:^2.0.0" - tslib: "npm:^2.0.1" - checksum: 10/f522b882f71c938ed878d3abe774794eca24cab2b1aa187b58ec944e498edc4b10f77ac641fb7e8b76a808f826f0c00b28f683b729356cb6a563ed6922c557f0 - languageName: node - linkType: hard - -"@material/mwc-tab-indicator@npm:^0.27.0": - version: 0.27.0 - resolution: "@material/mwc-tab-indicator@npm:0.27.0" - dependencies: - "@material/mwc-base": "npm:^0.27.0" - "@material/tab-indicator": "npm:=14.0.0-canary.53b3cad2f.0" - lit: "npm:^2.0.0" - tslib: "npm:^2.0.1" - checksum: 10/4f8ff17b9f2fd0224ed58d11b8f62707101ce0af68ac57aff4718c255be24bb6df356d80ef6eae142f66ffa5130a325bb5313b69161a34a4b4d22ce0d4447660 - languageName: node - linkType: hard - -"@material/mwc-tab-scroller@npm:^0.27.0": - version: 0.27.0 - resolution: "@material/mwc-tab-scroller@npm:0.27.0" - dependencies: - "@material/dom": "npm:=14.0.0-canary.53b3cad2f.0" - "@material/mwc-base": "npm:^0.27.0" - "@material/tab-scroller": "npm:=14.0.0-canary.53b3cad2f.0" - lit: "npm:^2.0.0" - tslib: "npm:^2.0.1" - checksum: 10/74fa3bc94ca4920928055bf54f3867a27a6c33309d45e2d30873d31a973c7e9a8442ccd8637aa5940b7e5d600432447df3ffa8062ccac6e05e4d9053567d2004 - languageName: node - linkType: hard - -"@material/mwc-tab@npm:0.27.0, @material/mwc-tab@npm:^0.27.0": - version: 0.27.0 - resolution: "@material/mwc-tab@npm:0.27.0" - dependencies: - "@material/mwc-base": "npm:^0.27.0" - "@material/mwc-ripple": "npm:^0.27.0" - "@material/mwc-tab-indicator": "npm:^0.27.0" - "@material/tab": "npm:=14.0.0-canary.53b3cad2f.0" - lit: "npm:^2.0.0" - tslib: "npm:^2.0.1" - checksum: 10/89247296223c2831983ceaf3b5b491ed6732dba62e00fe70c98d4174a2017482e30cac53e7b083e952b966eecde85bf3057f61ebca97015d6fc3367721754dd8 - languageName: node - linkType: hard - "@material/mwc-textarea@npm:0.27.0": version: 0.27.0 resolution: "@material/mwc-textarea@npm:0.27.0" @@ -3108,70 +3054,6 @@ __metadata: languageName: node linkType: hard -"@material/tab-bar@npm:=14.0.0-canary.53b3cad2f.0": - version: 14.0.0-canary.53b3cad2f.0 - resolution: "@material/tab-bar@npm:14.0.0-canary.53b3cad2f.0" - dependencies: - "@material/animation": "npm:14.0.0-canary.53b3cad2f.0" - "@material/base": "npm:14.0.0-canary.53b3cad2f.0" - "@material/density": "npm:14.0.0-canary.53b3cad2f.0" - "@material/elevation": "npm:14.0.0-canary.53b3cad2f.0" - "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0" - "@material/tab": "npm:14.0.0-canary.53b3cad2f.0" - "@material/tab-indicator": "npm:14.0.0-canary.53b3cad2f.0" - "@material/tab-scroller": "npm:14.0.0-canary.53b3cad2f.0" - "@material/theme": "npm:14.0.0-canary.53b3cad2f.0" - "@material/typography": "npm:14.0.0-canary.53b3cad2f.0" - tslib: "npm:^2.1.0" - checksum: 10/997f9ce78d73ae2d6e25f0309dbf109417bb6d2148db27025f7947e9a07a43401f14418e03f104cf7f138b3e39a2864fe4047463a33bb024473faffca3366022 - languageName: node - linkType: hard - -"@material/tab-indicator@npm:14.0.0-canary.53b3cad2f.0, @material/tab-indicator@npm:=14.0.0-canary.53b3cad2f.0": - version: 14.0.0-canary.53b3cad2f.0 - resolution: "@material/tab-indicator@npm:14.0.0-canary.53b3cad2f.0" - dependencies: - "@material/animation": "npm:14.0.0-canary.53b3cad2f.0" - "@material/base": "npm:14.0.0-canary.53b3cad2f.0" - "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0" - "@material/theme": "npm:14.0.0-canary.53b3cad2f.0" - tslib: "npm:^2.1.0" - checksum: 10/c481d8272a5b01df0c2fbfe27f2055469cbb65d422ff14bdf3f5ff72cafa1eff6cdcf242c06c550a2176150acbe5e2ced055b2848cb72bc3217f7e6770b9a85c - languageName: node - linkType: hard - -"@material/tab-scroller@npm:14.0.0-canary.53b3cad2f.0, @material/tab-scroller@npm:=14.0.0-canary.53b3cad2f.0": - version: 14.0.0-canary.53b3cad2f.0 - resolution: "@material/tab-scroller@npm:14.0.0-canary.53b3cad2f.0" - dependencies: - "@material/animation": "npm:14.0.0-canary.53b3cad2f.0" - "@material/base": "npm:14.0.0-canary.53b3cad2f.0" - "@material/dom": "npm:14.0.0-canary.53b3cad2f.0" - "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0" - "@material/tab": "npm:14.0.0-canary.53b3cad2f.0" - tslib: "npm:^2.1.0" - checksum: 10/173991868d86227da54cb5392627ad6a449f4f3de4e8b3830c5545d9b9ae1605caae3226b6b54e1fc3336e718a6346129086f7589c4610950f579aa927e278b3 - languageName: node - linkType: hard - -"@material/tab@npm:14.0.0-canary.53b3cad2f.0, @material/tab@npm:=14.0.0-canary.53b3cad2f.0": - version: 14.0.0-canary.53b3cad2f.0 - resolution: "@material/tab@npm:14.0.0-canary.53b3cad2f.0" - dependencies: - "@material/base": "npm:14.0.0-canary.53b3cad2f.0" - "@material/elevation": "npm:14.0.0-canary.53b3cad2f.0" - "@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0" - "@material/focus-ring": "npm:14.0.0-canary.53b3cad2f.0" - "@material/ripple": "npm:14.0.0-canary.53b3cad2f.0" - "@material/rtl": "npm:14.0.0-canary.53b3cad2f.0" - "@material/tab-indicator": "npm:14.0.0-canary.53b3cad2f.0" - "@material/theme": "npm:14.0.0-canary.53b3cad2f.0" - "@material/typography": "npm:14.0.0-canary.53b3cad2f.0" - tslib: "npm:^2.1.0" - checksum: 10/ae8a1935bb713f54f45f2d40bc9fc10b046932aa0b1af3816054f318530c37528332cd97c7f2a55aff8ceec228bd457dab804fbd801b662bf75b542dbf4215a4 - languageName: node - linkType: hard - "@material/textfield@npm:=14.0.0-canary.53b3cad2f.0": version: 14.0.0-canary.53b3cad2f.0 resolution: "@material/textfield@npm:14.0.0-canary.53b3cad2f.0" @@ -9384,8 +9266,6 @@ __metadata: "@material/mwc-select": "npm:0.27.0" "@material/mwc-snackbar": "npm:0.27.0" "@material/mwc-switch": "npm:0.27.0" - "@material/mwc-tab": "npm:0.27.0" - "@material/mwc-tab-bar": "npm:0.27.0" "@material/mwc-textarea": "npm:0.27.0" "@material/mwc-textfield": "npm:0.27.0" "@material/mwc-top-app-bar": "npm:0.27.0"