Fix auth language picker styles (#27805)

landing-page/src/ha-landing-page.ts

@@ -1,22 +1,25 @@
 import "@material/mwc-linear-progress";
-import { type PropertyValues, css, html, nothing } from "lit";
+import { mdiOpenInNew } from "@mdi/js";
+import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { extractSearchParam } from "../../src/common/url/search-params";
 import "../../src/components/ha-alert";
+import "../../src/components/ha-button";
 import "../../src/components/ha-fade-in";
 import "../../src/components/ha-spinner";
-import { haStyle } from "../../src/resources/styles";
-import "../../src/onboarding/onboarding-welcome-links";
-import "./components/landing-page-network";
-import "./components/landing-page-logs";
-import { extractSearchParam } from "../../src/common/url/search-params";
-import { onBoardingStyles } from "../../src/onboarding/styles";
+import "../../src/components/ha-svg-icon";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import { LandingPageBaseElement } from "./landing-page-base-element";
+import "../../src/onboarding/onboarding-welcome-links";
+import { onBoardingStyles } from "../../src/onboarding/styles";
+import { haStyle } from "../../src/resources/styles";
+import "./components/landing-page-logs";
+import "./components/landing-page-network";
 import {
   getSupervisorNetworkInfo,
   pingSupervisor,
   type NetworkInfo,
 } from "./data/supervisor";
+import { LandingPageBaseElement } from "./landing-page-base-element";
 
 export const ASSUME_CORE_START_SECONDS = 60;
 const SCHEDULE_CORE_CHECK_SECONDS = 1;
@@ -94,16 +97,21 @@ class HaLandingPage extends LandingPageBaseElement {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
+          button-style
           native-name
           @value-changed=${this._languageChanged}
           inline-arrow
         ></ha-language-picker>
-        <a
+        <ha-button
+          appearance="plain"
+          variant="neutral"
           href="https://www.home-assistant.io/getting-started/onboarding/"
           target="_blank"
           rel="noreferrer noopener"
-          >${this.localize("ui.panel.page-onboarding.help")}</a
         >
+          ${this.localize("ui.panel.page-onboarding.help")}
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-button>
       </div>
     `;
   }
@@ -218,26 +226,8 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-alert p {
         text-align: unset;
       }
-      ha-language-picker {
-        display: block;
-        width: 200px;
-        border-radius: var(--ha-border-radius-sm);
-        overflow: hidden;
-        --ha-select-height: 40px;
-        --mdc-select-fill-color: none;
-        --mdc-select-label-ink-color: var(--primary-text-color, #212121);
-        --mdc-select-ink-color: var(--primary-text-color, #212121);
-        --mdc-select-idle-line-color: transparent;
-        --mdc-select-hover-line-color: transparent;
-        --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
-        --mdc-shape-small: 0;
-      }
-      a {
-        text-decoration: none;
-        color: var(--primary-text-color);
-        margin-right: 16px;
-        margin-inline-end: 16px;
-        margin-inline-start: initial;
+      .footer ha-svg-icon {
+        --mdc-icon-size: var(--ha-space-5);
       }
       ha-fade-in {
         min-height: calc(100vh - 64px - 88px);

src/auth/ha-authorize.ts

@@ -1,4 +1,5 @@
 /* eslint-disable lit/prefer-static-styles */
+import { mdiOpenInNew } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +7,8 @@ import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import "../components/ha-alert";
+import "../components/ha-button";
+import "../components/ha-svg-icon";
 import type { AuthProvider, AuthUrlSearchParams } from "../data/auth";
 import { fetchAuthProviders } from "../data/auth";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
@@ -133,25 +136,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           justify-content: space-between;
           align-items: center;
         }
-        ha-language-picker {
-          width: 200px;
-          border-radius: var(--ha-border-radius-sm);
-          overflow: hidden;
-          --ha-select-height: 40px;
-          --mdc-select-fill-color: none;
-          --mdc-select-label-ink-color: var(--primary-text-color, #212121);
-          --mdc-select-ink-color: var(--primary-text-color, #212121);
-          --mdc-select-idle-line-color: transparent;
-          --mdc-select-hover-line-color: transparent;
-          --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
-          --mdc-shape-small: 0;
-        }
-        .footer a {
-          text-decoration: none;
-          color: var(--primary-text-color);
-          margin-right: 16px;
-          margin-inline-end: 16px;
-          margin-inline-start: initial;
+        .footer ha-svg-icon {
+          --mdc-icon-size: var(--ha-space-5);
         }
         h1 {
           font-size: var(--ha-font-size-3xl);
@@ -205,16 +191,21 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
+          button-style
           native-name
           @value-changed=${this._languageChanged}
           inline-arrow
         ></ha-language-picker>
-        <a
+        <ha-button
+          appearance="plain"
+          variant="neutral"
           href="https://www.home-assistant.io/docs/authentication/"
           target="_blank"
           rel="noreferrer noopener"
-          >${this.localize("ui.panel.page-authorize.help")}</a
         >
+          ${this.localize("ui.panel.page-authorize.help")}
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-button>
       </div>
     `;
   }

src/components/ha-language-picker.ts

@@ -1,6 +1,7 @@
+import { mdiMenuDown } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { formatLanguageCode } from "../common/language/format_language";
@@ -8,10 +9,10 @@ import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { FrontendLocaleData } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-button";
 import "./ha-generic-picker";
-import "./ha-list-item";
+import type { HaGenericPicker } from "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import "./ha-select";
 
 export const getLanguageOptions = (
   languages: string[],
@@ -75,6 +76,9 @@ export class HaLanguagePicker extends LitElement {
   @property({ attribute: "native-name", type: Boolean })
   public nativeName = false;
 
+  @property({ type: Boolean, attribute: "button-style" })
+  public buttonStyle = false;
+
   @property({ attribute: "no-sort", type: Boolean }) public noSort = false;
 
   @property({ attribute: "inline-arrow", type: Boolean })
@@ -82,6 +86,8 @@ export class HaLanguagePicker extends LitElement {
 
   @state() _defaultLanguages: string[] = [];
 
+  @query("ha-generic-picker", true) public genericPicker!: HaGenericPicker;
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._computeDefaultLanguageOptions();
@@ -101,12 +107,13 @@ export class HaLanguagePicker extends LitElement {
       this.hass?.locale
     );
 
-  private _valueRenderer = (value) => {
-    const language = this._getItems().find(
-      (lang) => lang.id === value
-    )?.primary;
-    return html`<span slot="headline">${language ?? value}</span> `;
-  };
+  private _getLanguageName = (lang?: string) =>
+    this._getItems().find((language) => language.id === lang)?.primary;
+
+  private _valueRenderer = (value) =>
+    html`<span slot="headline"
+      >${this._getLanguageName(value) ?? value}</span
+    > `;
 
   protected render() {
     const value =
@@ -130,10 +137,28 @@ export class HaLanguagePicker extends LitElement {
         .getItems=${this._getItems}
         @value-changed=${this._changed}
         hide-clear-icon
-      ></ha-generic-picker>
+      >
+        ${this.buttonStyle
+          ? html`<ha-button
+              slot="field"
+              .disabled=${this.disabled}
+              @click=${this._openPicker}
+              appearance="plain"
+              variant="neutral"
+            >
+              ${this._getLanguageName(value)}
+              <ha-svg-icon slot="end" .path=${mdiMenuDown}></ha-svg-icon>
+            </ha-button>`
+          : nothing}
+      </ha-generic-picker>
     `;
   }
 
+  private _openPicker(ev: Event) {
+    ev.stopPropagation();
+    this.genericPicker.open();
+  }
+
   static styles = css`
     ha-generic-picker {
       width: 100%;