Replace remaining mwc-tabs (#25179)

* Remaining mwc-tabs * Apply suggestions from code review Co-authored-by: Bram Kragten <mail@bramkragten.nl> --------- Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2025-07-27 19:26:36 +00:00 · 2025-04-26 22:12:03 +02:00 · 2025-04-26 22:12:03 +02:00 · 995e3f10ad
commit 995e3f10ad
parent 6464c2b602
6 changed files with 92 additions and 194 deletions
--- 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
            ></ha-icon-button>
          </ha-header-bar>
          ${this._interfaces.length > 1
-            ? html`<mwc-tab-bar
-                .activeIndex=${this._curTabIndex}
-                @MDCTabBar:activated=${this._handleTabActivated}
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
                >${this._interfaces.map(
-                  (device) =>
-                    html`<mwc-tab
+                  (device, index) =>
+                    html`<sl-tab
+                      slot="nav"
                      .id=${device.interface}
-                      .label=${device.interface}
-                      dialogInitialFocus
+                      .panel=${index.toString()}
+                      .active=${this._curTabIndex === index}
                    >
-                    </mwc-tab>`
+                      ${device.interface}
+                    </sl-tab>`
                )}
-              </mwc-tab-bar>`
+              </sl-tab-group>`
            : ""}
        </div>
        ${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;
+        }
      `,
    ];
  }
--- 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",
--- 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")}
          </span>
-          <mwc-tab-bar
-            .activeIndex=${tabs.indexOf(this._currTab)}
-            @MDCTabBar:activated=${this._handleTabChanged}
-          >
+          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
            ${tabs.map(
              (tab) => html`
-                <mwc-tab
-                  .label=${this.hass.localize(
+                <sl-tab
+                  slot="nav"
+                  .panel=${tab}
+                  .active=${this._currTab === tab}
+                >
+                  ${this.hass.localize(
                    `ui.dialogs.zha_manage_device.tabs.${tab}`
                  )}
-                ></mwc-tab>
+                </sl-tab>
              `
            )}
-          </mwc-tab-bar>
+          </sl-tab-group>
        </ha-dialog-header>
        <div class="content" tabindex="-1" dialogInitialFocus>
          ${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;
+        }
      `,
    ];
  }
--- 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 {
        </div>
        ${this._selectedCluster
          ? html`
-              <mwc-tab-bar
-                .activeIndex=${tabs.indexOf(this._currTab)}
-                @MDCTabBar:activated=${this._handleTabChanged}
-              >
+              <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                ${tabs.map(
                  (tab) => html`
-                    <mwc-tab
-                      .label=${this.hass.localize(
+                    <sl-tab
+                      slot="nav"
+                      .panel=${tab}
+                      .active=${this._currTab === tab}
+                      >${this.hass.localize(
                        `ui.panel.config.zha.clusters.tabs.${tab}`
-                      )}
-                    ></mwc-tab>
+                      )}</sl-tab
+                    >
                  `
                )}
-              </mwc-tab-bar>
+              </sl-tab-group>

              <div class="content" tabindex="-1" dialogInitialFocus>
                ${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;
+        }
      `,
    ];
  }
--- 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`
-      <ha-card
-        outlined
-        .header=${this.hass.localize(
-          "ui.panel.config.network.supervisor.title"
-        )}
-      >
-        ${this._interfaces.length > 1
-          ? html`<mwc-tab-bar
-              .activeIndex=${this._curTabIndex}
-              @MDCTabBar:activated=${this._handleTabActivated}
-              >${this._interfaces.map(
-                (device) =>
-                  html`<mwc-tab
-                    .id=${device.interface}
-                    .label=${device.interface}
-                  >
-                  </mwc-tab>`
-              )}
-            </mwc-tab-bar>`
-          : nothing}
+      <ha-card outlined>
+        <div class="card-header">
+          ${this.hass.localize("ui.panel.config.network.supervisor.title")}
+          ${this._interfaces.length > 1
+            ? html`
+                <sl-tab-group @sl-tab-show=${this._handleTabActivated}
+                  >${this._interfaces.map(
+                    (device, i) =>
+                      html`<sl-tab
+                        slot="nav"
+                        .active=${this._curTabIndex === i}
+                        .panel=${i.toString()}
+                        .id=${device.interface}
+                      >
+                        ${device.interface}
+                      </sl-tab>`
+                  )}
+                </sl-tab-group>
+              `
+            : nothing}
+        </div>
        ${cache(this._renderTab())}
      </ha-card>
    `;
@ -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;
+        }
      `,
    ];
  }
--- 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"