Create outlined button component (#16631)

* Create outlined button component

* Fix css comment

* Don't use Md classes

* Simplify

src/components/ha-outlined-button.ts

@@ -0,0 +1,26 @@
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { OutlinedButton } from "@material/web/button/lib/outlined-button";
+import { styles as outlinedStyles } from "@material/web/button/lib/outlined-styles.css";
+import { styles as sharedStyles } from "@material/web/button/lib/shared-styles.css";
+
+@customElement("ha-outlined-button")
+export class HaOutlinedButton extends OutlinedButton {
+  static override styles = [
+    sharedStyles,
+    outlinedStyles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-outline: var(--divider-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-button": HaOutlinedButton;
+  }
+}

src/components/ha-outlined-icon-button.ts

@@ -0,0 +1,39 @@
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+import { IconButton } from "@material/web/iconbutton/lib/icon-button";
+import { styles as outlinedStyles } from "@material/web/iconbutton/lib/outlined-styles.css";
+import { styles as sharedStyles } from "@material/web/iconbutton/lib/shared-styles.css";
+
+@customElement("ha-outlined-icon-button")
+export class HaOutlinedIconButton extends IconButton {
+  protected override getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      outlined: true,
+    };
+  }
+
+  static override styles = [
+    sharedStyles,
+    outlinedStyles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-on-surface: var(--secondary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
+      }
+      button {
+        /* Fix md-outlined-icon-button padding for iOS */
+        padding: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-icon-button": HaOutlinedIconButton;
+  }
+}

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -1,10 +1,10 @@
-import "@material/web/button/outlined-button";
 import { mdiShieldOff } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { stateColorCss } from "../../../common/entity/state_color";
+import "../../../components/ha-outlined-button";
 import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
 import type { HomeAssistant } from "../../../types";
 import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes";
@@ -67,12 +67,12 @@ class MoreInfoAlarmControlPanel extends LitElement {
                     .path=${domainIcon("alarm_control_panel", this.stateObj)}
                   ></ha-svg-icon>
                 </div>
-                <md-outlined-button @click=${this._disarm}>
+                <ha-outlined-button @click=${this._disarm}>
                   ${this.hass.localize(
                     "ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
                   )}
                   <ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
-                </md-outlined-button>
+                </ha-outlined-button>
               </div>
             `
           : html`
@@ -94,11 +94,6 @@ class MoreInfoAlarmControlPanel extends LitElement {
         :host {
           --icon-color: var(--primary-color);
         }
-        md-outlined-button {
-          --ha-icon-display: block;
-          --md-sys-color-primary: var(--primary-text-color);
-          --md-sys-color-outline: var(--divider-color);
-        }
         @keyframes pulse {
           0% {
             opacity: 1;
@@ -139,7 +134,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
           transition: background-color 180ms ease-in-out;
           opacity: 0.2;
         }
-        .status md-outlined-button {
+        .status ha-outlined-button {
           margin-top: 32px;
         }
       `,

src/dialogs/more-info/controls/more-info-fan.ts

@@ -1,5 +1,3 @@
-import "@material/web/button/outlined-button";
-import "@material/web/iconbutton/outlined-icon-button";
 import {
   mdiCreation,
   mdiFan,
@@ -8,14 +6,7 @@ import {
   mdiRotateLeft,
   mdiRotateRight,
 } from "@mdi/js";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  PropertyValues,
-} from "lit";
+import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import {
@@ -26,10 +17,12 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
+import "../../../components/ha-outlined-button";
+import "../../../components/ha-outlined-icon-button";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
-  computeFanSpeedStateDisplay,
   computeFanSpeedCount,
+  computeFanSpeedStateDisplay,
   FanEntity,
   FanEntityFeature,
   FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
@@ -201,17 +194,17 @@ class MoreInfoFan extends LitElement {
             ? html`<div class="buttons">
                 ${supportSpeedPercentage
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE}
                         @click=${this._toggle}
                       >
                         <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
                 ${supportsDirection
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE ||
                         this.stateObj.attributes.direction === "reverse"}
                         .title=${this.hass.localize(
@@ -223,8 +216,8 @@ class MoreInfoFan extends LitElement {
                         @click=${this._setReverseDirection}
                       >
                         <ha-svg-icon .path=${mdiRotateLeft}></ha-svg-icon>
-                      </md-outlined-icon-button>
-                      <md-outlined-icon-button
+                      </ha-outlined-icon-button>
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE ||
                         this.stateObj.attributes.direction === "forward"}
                         .title=${this.hass.localize(
@@ -236,12 +229,12 @@ class MoreInfoFan extends LitElement {
                         @click=${this._setForwardDirection}
                       >
                         <ha-svg-icon .path=${mdiRotateRight}></ha-svg-icon>
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
                 ${supportsOscillate
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE}
                         .title=${this.hass.localize(
                           `ui.dialogs.more_info_control.fan.${
@@ -264,7 +257,7 @@ class MoreInfoFan extends LitElement {
                             ? haOscillating
                             : haOscillatingOff}
                         ></ha-svg-icon>
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
               </div> `
@@ -279,7 +272,7 @@ class MoreInfoFan extends LitElement {
                     fixed
                     .disabled=${this.stateObj.state === UNAVAILABLE}
                   >
-                    <md-outlined-button
+                    <ha-outlined-button
                       slot="trigger"
                       .disabled=${this.stateObj.state === UNAVAILABLE}
                     >
@@ -294,7 +287,7 @@ class MoreInfoFan extends LitElement {
                         slot="icon"
                         path=${mdiCreation}
                       ></ha-svg-icon>
-                    </md-outlined-button>
+                    </ha-outlined-button>
                     ${this.stateObj.attributes.preset_modes?.map(
                       (mode) =>
                         html`
@@ -328,16 +321,7 @@ class MoreInfoFan extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      moreInfoControlStyle,
-      css`
-        md-outlined-button {
-          --ha-icon-display: block;
-          --md-sys-color-primary: var(--primary-text-color);
-          --md-sys-color-outline: var(--divider-color);
-        }
-      `,
-    ];
+    return moreInfoControlStyle;
   }
 }
 

src/dialogs/more-info/controls/more-info-light.ts

@@ -1,6 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/web/button/outlined-button";
-import "@material/web/iconbutton/outlined-icon-button";
 import {
   mdiCreation,
   mdiFileWordBox,
@@ -24,6 +22,8 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-attributes";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-outlined-button";
+import "../../../components/ha-outlined-icon-button";
 import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
 import { forwardHaptic } from "../../../data/haptics";
@@ -129,7 +129,7 @@ class MoreInfoLight extends LitElement {
               <div class="buttons">
                 ${supportsBrightness
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE}
                         .title=${this.hass.localize(
                           "ui.dialogs.more_info_control.light.toggle"
@@ -140,12 +140,12 @@ class MoreInfoLight extends LitElement {
                         @click=${this._toggle}
                       >
                         <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
                 ${supportsColorTemp || supportsColor
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         class=${classMap({
                           "color-rgb-mode": supportsColor,
                           "color-temp-mode": !supportsColor,
@@ -159,12 +159,12 @@ class MoreInfoLight extends LitElement {
                         )}
                         @click=${this._showLightColorPickerView}
                       >
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
                 ${supportsWhite
                   ? html`
-                      <md-outlined-icon-button
+                      <ha-outlined-icon-button
                         .disabled=${this.stateObj.state === UNAVAILABLE}
                         .title=${this.hass.localize(
                           "ui.dialogs.more_info_control.light.set_white"
@@ -175,7 +175,7 @@ class MoreInfoLight extends LitElement {
                         @click=${this._setWhiteColor}
                       >
                         <ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon>
-                      </md-outlined-icon-button>
+                      </ha-outlined-icon-button>
                     `
                   : nothing}
               </div>
@@ -189,7 +189,7 @@ class MoreInfoLight extends LitElement {
                 fixed
                 .disabled=${this.stateObj.state === UNAVAILABLE}
               >
-                <md-outlined-button
+                <ha-outlined-button
                   slot="trigger"
                   .disabled=${this.stateObj.state === UNAVAILABLE}
                 >
@@ -201,7 +201,7 @@ class MoreInfoLight extends LitElement {
                     this.hass.entities,
                     "effect"
                   )}
-                </md-outlined-button>
+                </ha-outlined-button>
                 ${this.stateObj.attributes.effect_list.map(
                   (effect: string) => html`
                     <ha-list-item
@@ -272,17 +272,6 @@ class MoreInfoLight extends LitElement {
     return [
       moreInfoControlStyle,
       css`
-        md-outlined-icon-button {
-          --ha-icon-display: block;
-          --md-sys-color-on-surface: var(--secondary-text-color);
-          --md-sys-color-on-surface-variant: var(--secondary-text-color);
-          --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
-        }
-        md-outlined-button {
-          --ha-icon-display: block;
-          --md-sys-color-primary: var(--primary-text-color);
-          --md-sys-color-outline: var(--divider-color);
-        }
         .color-rgb-mode {
           background-image: url("/static/images/color_wheel.png");
           background-size: cover;