Ha dialog header

src/components/ha-dialog-header.ts

@@ -0,0 +1,81 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-dialog-header")
+export class HaDialogHeader extends LitElement {
+  protected render() {
+    return html`
+      <header class="header">
+        <div class="header-bar">
+          <section class="header-navigation-icon">
+            <slot name="navigationIcon"></slot>
+          </section>
+          <section class="header-title">
+            <slot name="title"></slot>
+          </section>
+          <section class="header-action-items">
+            <slot name="actionItems"></slot>
+          </section>
+        </div>
+        <slot></slot>
+      </header>
+    `;
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+        :host([show-border]) {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+        }
+        .header-bar {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          padding: 4px;
+          box-sizing: border-box;
+        }
+        .header-title {
+          flex: 1;
+          font-size: 22px;
+          line-height: 28px;
+          font-weight: 400;
+          padding: 10px 4px;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        @media all and (min-width: 450px) and (min-height: 500px) {
+          .header-bar {
+            padding: 12px;
+          }
+        }
+        .header-navigation-icon {
+          flex: none;
+          min-width: 8px;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+        .header-action-items {
+          flex: none;
+          min-width: 8px;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-header": HaDialogHeader;
+  }
+}

src/components/ha-dialog.ts

@@ -63,6 +63,10 @@ export class HaDialog extends DialogBase {
   static override styles = [
     styles,
     css`
+      :host([scrolled]) ::slotted(ha-dialog-header) {
+        border-bottom: 1px solid
+          var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+      }
       .mdc-dialog {
         --mdc-dialog-scroll-divider-color: var(
           --dialog-scroll-divider-color,
@@ -119,20 +123,18 @@ export class HaDialog extends DialogBase {
         display: flex;
         flex-direction: column;
       }
-      .header_button {
-        position: absolute;
-        right: 16px;
-        top: 14px;
-        text-decoration: none;
-        color: inherit;
-      }
       .header_title {
         margin-right: 32px;
         margin-inline-end: 32px;
         margin-inline-start: initial;
         direction: var(--direction);
       }
       .header_button {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+        text-decoration: none;
+        color: inherit;
         inset-inline-start: initial;
         inset-inline-end: 16px;
         direction: var(--direction);

src/components/ha-textfield.ts

@@ -78,6 +78,12 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
+      .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
+        padding-left: var(--text-field-suffix-padding-left, 0px);
+        padding-right: var(--text-field-suffix-padding-right, 0px);
+        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
+      }
       .mdc-text-field:not(.mdc-text-field--disabled)
         .mdc-text-field__affix--suffix {
         color: var(--secondary-text-color);
@@ -137,8 +143,12 @@ export class HaTextField extends TextFieldBase {
 
       .mdc-text-field--with-leading-icon.mdc-text-field--filled
         .mdc-floating-label {
-        max-width: calc(100% - 48px);
-        inset-inline-start: 48px !important;
+        max-width: calc(
+          100% - 48px - var(--text-field-suffix-padding-left, 0px)
+        );
+        inset-inline-start: calc(
+          48px + var(--text-field-suffix-padding-left, 0px)
+        ) !important;
         inset-inline-end: initial !important;
         direction: var(--direction);
       }

src/components/media-player/dialog-media-manage.ts

@@ -18,10 +18,11 @@ import {
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import "../ha-button";
 import "../ha-check-list-item";
 import "../ha-circular-progress";
 import "../ha-dialog";
-import "../ha-header-bar";
+import "../ha-dialog-header";
 import "../ha-svg-icon";
 import "./ha-media-player-browse";
 import "./ha-media-upload-button";
@@ -80,7 +81,7 @@ class DialogMediaManage extends LitElement {
         .heading=${this._params.currentItem.title}
         @closed=${this.closeDialog}
       >
-        <ha-header-bar slot="heading">
+        <ha-dialog-header slot="heading">
           ${this._selected.size === 0
             ? html`
                 <span slot="title">
@@ -104,14 +105,13 @@ class DialogMediaManage extends LitElement {
                         .label=${this.hass.localize("ui.dialogs.generic.close")}
                         .path=${mdiClose}
                         dialogAction="close"
-                        slot="actionItems"
-                        class="header_button"
+                        slot="navigationIcon"
                         dir=${computeRTLDirection(this.hass)}
                       ></ha-icon-button>
                     `}
               `
             : html`
-                <mwc-button
+                <ha-button
                   class="danger"
                   slot="title"
                   .disabled=${this._deleting}
@@ -124,12 +124,12 @@ class DialogMediaManage extends LitElement {
                   @click=${this._handleDelete}
                 >
                   <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                </mwc-button>
+                </ha-button>
 
                 ${this._deleting
                   ? ""
                   : html`
-                      <mwc-button
+                      <ha-button
                         slot="actionItems"
                         .label=${`Deselect all`}
                         @click=${this._handleDeselectAll}
@@ -138,10 +138,10 @@ class DialogMediaManage extends LitElement {
                           .path=${mdiClose}
                           slot="icon"
                         ></ha-svg-icon>
-                      </mwc-button>
+                      </ha-button>
                     `}
               `}
-        </ha-header-bar>
+        </ha-dialog-header>
         ${!this._currentItem
           ? html`
               <div class="refresh">
@@ -290,16 +290,11 @@ class DialogMediaManage extends LitElement {
           }
         }
 
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
-        }
-
-        ha-media-upload-button,
-        mwc-button {
-          --mdc-theme-primary: var(--mdc-theme-on-primary);
+        ha-dialog-header ha-media-upload-button,
+        ha-dialog-header ha-button {
+          --mdc-theme-primary: var(--primary-text-color);
+          margin: 6px;
+          display: block;
         }
 
         mwc-list {

src/components/media-player/dialog-media-player-browse.ts

@@ -2,7 +2,6 @@ import { mdiArrowLeft, mdiClose } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
-import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
@@ -11,7 +10,7 @@ import type {
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-dialog";
-import "../ha-header-bar";
+import "../ha-dialog-header";
 import "./ha-media-manage-button";
 import "./ha-media-player-browse";
 import type {
@@ -68,7 +67,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           : this._currentItem.title}
         @closed=${this.closeDialog}
       >
-        <ha-header-bar slot="heading">
+        <ha-dialog-header show-border slot="heading">
           ${this._navigateIds.length > 1
             ? html`
                 <ha-icon-button
@@ -77,7 +76,7 @@ class DialogMediaPlayerBrowse extends LitElement {
                   @click=${this._goBack}
                 ></ha-icon-button>
               `
-            : ""}
+            : nothing}
           <span slot="title">
             ${!this._currentItem
               ? this.hass.localize(
@@ -97,10 +96,8 @@ class DialogMediaPlayerBrowse extends LitElement {
             .path=${mdiClose}
             dialogAction="close"
             slot="actionItems"
-            class="header_button"
-            dir=${computeRTLDirection(this.hass)}
           ></ha-icon-button>
-        </ha-header-bar>
+        </ha-dialog-header>
         <ha-media-player-browse
           dialog
           .hass=${this.hass}
@@ -170,15 +167,10 @@ class DialogMediaPlayerBrowse extends LitElement {
           }
         }
 
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
-        }
-
-        ha-media-manage-button {
-          --mdc-theme-primary: var(--mdc-theme-on-primary);
+        ha-dialog-header ha-media-manage-button {
+          --mdc-theme-primary: var(--primary-text-color);
+          margin: 6px;
+          display: block;
         }
       `,
     ];