Move some polymer paper-tabs to mwc-tabs (#21390)

* dev-tools

* entity card editor

* edit section dialog

* edit view

* Set the page from the router back in dev tools

* Remove changes to developer tools

* Prettier

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -9,18 +9,18 @@ import { HuiElementEditor } from "../hui-element-editor";
 import "./hui-card-layout-editor";
 import "./hui-card-visibility-editor";
 
-type Tab = "config" | "visibility" | "layout";
+const tabs = ["config", "visibility", "layout"] as const;
 
 @customElement("hui-card-element-editor")
 export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
-  @state() private _curTab: Tab = "config";
-
   @property({ type: Boolean, attribute: "show-visibility-tab" })
   public showVisibilityTab = false;
 
   @property({ type: Boolean, attribute: "show-layout-tab" })
   public showLayoutTab = false;
 
+  @state() private _currTab: (typeof tabs)[number] = tabs[0];
+
   protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
     const elClass = await getCardElementClass(this.configElementType!);
 
@@ -43,20 +43,13 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
     return undefined;
   }
 
-  private _handleTabSelected(ev: CustomEvent): void {
-    if (!ev.detail.value) {
-      return;
-    }
-    this._curTab = ev.detail.value.id;
-  }
-
   private _configChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     this.value = ev.detail.value;
   }
 
   protected renderConfigElement(): TemplateResult {
-    const displayedTabs: Tab[] = ["config"];
+    const displayedTabs: string[] = ["config"];
     if (this.showVisibilityTab) displayedTabs.push("visibility");
     if (this.showLayoutTab) displayedTabs.push("layout");
 
@@ -64,7 +57,7 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
 
     let content: TemplateResult<1> | typeof nothing = nothing;
 
-    switch (this._curTab) {
+    switch (this._currTab) {
       case "config":
         content = html`${super.renderConfigElement()}`;
         break;
@@ -88,33 +81,38 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
         `;
     }
     return html`
-      <paper-tabs
-        scrollable
-        hide-scroll-buttons
-        .selected=${displayedTabs.indexOf(this._curTab)}
-        @selected-item-changed=${this._handleTabSelected}
+      <mwc-tab-bar
+        .activeIndex=${tabs.indexOf(this._currTab)}
+        @MDCTabBar:activated=${this._handleTabChanged}
       >
         ${displayedTabs.map(
-          (tab, index) => html`
-            <paper-tab id=${tab} .dialogInitialFocus=${index === 0}>
-              ${this.hass.localize(
+          (tab) => html`
+            <mwc-tab
+              .label=${this.hass.localize(
                 `ui.panel.lovelace.editor.edit_card.tab_${tab}`
               )}
-            </paper-tab>
+            >
+            </mwc-tab>
           `
         )}
-      </paper-tabs>
+      </mwc-tab-bar>
       ${content}
     `;
   }
 
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newTab = tabs[ev.detail.index];
+    if (newTab === this._currTab) {
+      return;
+    }
+    this._currTab = newTab;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       HuiElementEditor.styles,
       css`
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
-          color: var(--primary-text-color);
+        mwc-tab-bar {
           text-transform: uppercase;
           margin-bottom: 16px;
           border-bottom: 1px solid var(--divider-color);

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -1,7 +1,5 @@
 import { ActionDetail } from "@material/mwc-list";
 import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
 import {
   CSSResultGroup,
   LitElement,
@@ -35,6 +33,8 @@ import {
 import "./hui-section-settings-editor";
 import "./hui-section-visibility-editor";
 import type { EditSectionDialogParams } from "./show-edit-section-dialog";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
 
 const TABS = ["tab-settings", "tab-visibility"] as const;
 
@@ -51,7 +51,7 @@ export class HuiDialogEditSection
 
   @state() private _yamlMode = false;
 
-  @state() private _curTab: (typeof TABS)[number] = TABS[0];
+  @state() private _currTab: (typeof TABS)[number] = TABS[0];
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
@@ -77,7 +77,7 @@ export class HuiDialogEditSection
     this._params = undefined;
     this._yamlMode = false;
     this._config = undefined;
-    this._curTab = TABS[0];
+    this._currTab = TABS[0];
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -101,7 +101,7 @@ export class HuiDialogEditSection
         ></ha-yaml-editor>
       `;
     } else {
-      switch (this._curTab) {
+      switch (this._currTab) {
         case "tab-settings":
           content = html`
             <hui-section-settings-editor
@@ -185,22 +185,21 @@ export class HuiDialogEditSection
           </ha-button-menu>
           ${!this._yamlMode
             ? html`
-                <paper-tabs
-                  scrollable
-                  hide-scroll-buttons
-                  .selected=${TABS.indexOf(this._curTab)}
-                  @selected-item-changed=${this._handleTabSelected}
+                <mwc-tab-bar
+                  .activeIndex=${TABS.indexOf(this._currTab)}
+                  @MDCTabBar:activated=${this._handleTabChanged}
                 >
                   ${TABS.map(
-                    (tab, index) => html`
-                      <paper-tab id=${tab} .dialogInitialFocus=${index === 0}>
-                        ${this.hass!.localize(
+                    (tab) => html`
+                      <mwc-tab
+                        .label=${this.hass!.localize(
                           `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                         )}
-                      </paper-tab>
+                      >
+                      </mwc-tab>
                     `
                   )}
-                </paper-tabs>
+                </mwc-tab-bar>
               `
             : nothing}
         </ha-dialog-header>
@@ -221,11 +220,12 @@ export class HuiDialogEditSection
     this._config = ev.detail.value;
   }
 
-  private _handleTabSelected(ev: CustomEvent): void {
-    if (!ev.detail.value) {
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newTab = TABS[ev.detail.index];
+    if (newTab === this._currTab) {
       return;
     }
-    this._curTab = ev.detail.value.id;
+    this._currTab = newTab;
   }
 
   private async _handleAction(ev: CustomEvent<ActionDetail>) {
@@ -293,8 +293,7 @@ export class HuiDialogEditSection
         ha-dialog.yaml-mode {
           --dialog-content-padding: 0;
         }
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
+        mwc-tab-bar {
           color: var(--primary-text-color);
           text-transform: uppercase;
           padding: 0 20px;

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
 import {
   CSSResultGroup,
   LitElement,
@@ -45,6 +43,10 @@ import "./hui-view-editor";
 import "./hui-view-background-editor";
 import "./hui-view-visibility-editor";
 import { EditViewDialogParams } from "./show-edit-view-dialog";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+
+const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
 
 @customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
@@ -56,7 +58,7 @@ export class HuiDialogEditView extends LitElement {
 
   @state() private _saving = false;
 
-  @state() private _curTab?: string;
+  @state() private _currTab: (typeof TABS)[number] = TABS[0];
 
   @state() private _dirty = false;
 
@@ -64,8 +66,6 @@ export class HuiDialogEditView extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  private _curTabIndex = 0;
-
   get _type(): string {
     if (!this._config) {
       return DEFAULT_VIEW_LAYOUT;
@@ -103,11 +103,11 @@ export class HuiDialogEditView extends LitElement {
   }
 
   public closeDialog(): void {
-    this._curTabIndex = 0;
     this._params = undefined;
     this._config = {};
     this._yamlMode = false;
     this._dirty = false;
+    this._currTab = TABS[0];
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -138,7 +138,7 @@ export class HuiDialogEditView extends LitElement {
         ></ha-yaml-editor>
       `;
     } else {
-      switch (this._curTab) {
+      switch (this._currTab) {
         case "tab-settings":
           content = html`
             <hui-view-editor
@@ -167,9 +167,6 @@ export class HuiDialogEditView extends LitElement {
             ></hui-view-visibility-editor>
           `;
           break;
-        case "tab-cards":
-          content = html` Cards `;
-          break;
       }
     }
 
@@ -252,28 +249,21 @@ export class HuiDialogEditView extends LitElement {
               `
             : nothing}
           ${!this._yamlMode
-            ? html`<paper-tabs
-                scrollable
-                hide-scroll-buttons
-                .selected=${this._curTabIndex}
-                @selected-item-changed=${this._handleTabSelected}
+            ? html`<mwc-tab-bar
+                .activeIndex=${TABS.indexOf(this._currTab)}
+                @MDCTabBar:activated=${this._handleTabChanged}
               >
-                <paper-tab id="tab-settings" dialogInitialFocus
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_settings"
-                  )}</paper-tab
-                >
-                <paper-tab id="tab-background"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_background"
-                  )}</paper-tab
-                >
-                <paper-tab id="tab-visibility"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_visibility"
-                  )}</paper-tab
-                >
-              </paper-tabs>`
+                ${TABS.map(
+                  (tab) => html`
+                    <mwc-tab
+                      .label=${this.hass!.localize(
+                        `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
+                      )}
+                    >
+                    </mwc-tab>
+                  `
+                )}
+              </mwc-tab-bar>`
             : nothing}
         </ha-dialog-header>
         ${content}
@@ -365,11 +355,12 @@ export class HuiDialogEditView extends LitElement {
     this._delete();
   }
 
-  private _handleTabSelected(ev: CustomEvent): void {
-    if (!ev.detail.value) {
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newTab = TABS[ev.detail.index];
+    if (newTab === this._currTab) {
       return;
     }
-    this._curTab = ev.detail.value.id;
+    this._currTab = newTab;
   }
 
   private async _save(): Promise<void> {
@@ -494,8 +485,7 @@ export class HuiDialogEditView extends LitElement {
           font-size: inherit;
           font-weight: inherit;
         }
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
+        mwc-tab-bar {
           color: var(--primary-text-color);
           text-transform: uppercase;
           padding: 0 20px;