Remove ha-divider and replace with wa-divider (#29609)

* Replace ha-divider with wa-divider in onboarding and dashboard components

* Refactor styles in onboarding-welcome component for consistency and responsiveness

src/components/ha-divider.ts

@@ -1,50 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { ifDefined } from "lit/directives/if-defined";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-divider")
-export class HaMdDivider extends LitElement {
-  @property() public label?: string;
-
-  public render() {
-    return html`
-      <div
-        role=${ifDefined(this.label ? "separator" : undefined)}
-        aria-label=${ifDefined(this.label)}
-      >
-        <span class="line"></span>
-        ${this.label
-          ? html`
-              <span class="label">${this.label}</span>
-              <span class="line"></span>
-            `
-          : nothing}
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      width: var(--ha-divider-width, 100%);
-    }
-    div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .label {
-      padding: var(--ha-divider-label-padding, 0 16px);
-    }
-    .line {
-      flex: 1;
-      background-color: var(--divider-color);
-      height: var(--ha-divider-line-height, 1px);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-divider": HaMdDivider;
-  }
-}

src/onboarding/onboarding-welcome.ts

@@ -1,15 +1,15 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { LocalizeFunc } from "../common/translations/localize";
-import type { HomeAssistant } from "../types";
-import { onBoardingStyles } from "./styles";
 import { fireEvent } from "../common/dom/fire_event";
+import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-button";
-import "../components/ha-divider";
+import "../components/ha-icon-button-next";
 import "../components/ha-md-list";
 import "../components/ha-md-list-item";
-import "../components/ha-icon-button-next";
+import type { HomeAssistant } from "../types";
+import { onBoardingStyles } from "./styles";
 
 @customElement("onboarding-welcome")
 class OnboardingWelcome extends LitElement {
@@ -26,9 +26,16 @@ class OnboardingWelcome extends LitElement {
         ${this.localize("ui.panel.page-onboarding.welcome.start")}
       </ha-button>
 
-      <ha-divider
+      <div class="divider">
-        .label=${this.localize("ui.panel.page-onboarding.welcome.or_restore")}
+        <wa-divider></wa-divider>
-      ></ha-divider>
+        <div>
+          <span
+            >${this.localize(
+              "ui.panel.page-onboarding.welcome.or_restore"
+            )}</span
+          >
+        </div>
+      </div>
 
       <ha-md-list>
         <ha-md-list-item type="button" @click=${this._restoreBackupUpload}>
@@ -83,24 +90,39 @@ class OnboardingWelcome extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          margin-bottom: -16px;
+          margin-bottom: calc(var(--ha-space-4) * -1);
         }
         h1 {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
-          margin-bottom: 8px;
+          margin-bottom: var(--ha-space-2);
         }
         p {
           margin: 0;
         }
         .start {
-          margin: 32px 0;
+          margin: var(--ha-space-8) 0;
           width: 100%;
         }
-        ha-divider {
+        .divider {
-          --ha-divider-width: calc(100% + 64px);
+          width: calc(100% + var(--ha-space-16));
-          margin-left: -32px;
+          position: relative;
-          margin-right: -32px;
+          margin-left: calc(var(--ha-space-8) * -1);
+          margin-right: calc(var(--ha-space-8) * -1);
         }
+        .divider div {
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          top: 0;
+          bottom: 0;
+          width: 100%;
+        }
+        .divider div span {
+          background-color: var(--card-background-color);
+          padding: 0 var(--ha-space-4);
+        }
+
         ha-md-list {
           width: 100%;
           padding-bottom: 0;

src/panels/profile/ha-pick-dashboard-row.ts

@@ -1,12 +1,12 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import "../../components/ha-divider";
 import "../../components/ha-dropdown-item";
 import "../../components/ha-icon";
-import type { HaSelectSelectEvent } from "../../components/ha-select";
 import "../../components/ha-select";
+import type { HaSelectSelectEvent } from "../../components/ha-select";
 import "../../components/ha-settings-row";
 import "../../components/ha-spinner";
 import "../../components/ha-svg-icon";
@@ -57,7 +57,7 @@ class HaPickDashboardRow extends LitElement {
                 >
                   ${this.hass.localize("ui.panel.profile.dashboard.system")}
                 </ha-dropdown-item>
-                <ha-divider></ha-divider>
+                <wa-divider></wa-divider>
                 ${PANEL_DASHBOARDS.map((panel) => {
                   const panelInfo = this.hass.panels[panel] as
                     | PanelInfo
@@ -80,7 +80,7 @@ class HaPickDashboardRow extends LitElement {
                 })}
                 ${this._dashboards.length
                   ? html`
-                      <ha-divider></ha-divider>
+                      <wa-divider></wa-divider>
                       ${this._dashboards.map((dashboard) => {
                         if (
                           !this.hass.user!.is_admin &&