From 5aeaa65a89df881201d134768502cc4d832afb9a Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:45:03 +0200
Subject: [PATCH] Fix RTL icon placement (#14019)

* Fix RTL icon placement

* Fix combo box icons

* Removed duplicate after merge

* Refactor ha-button

* Refactor fix 2
---
 src/components/entity/ha-entity-picker.ts     |  2 +-
 src/components/ha-button.ts                   | 24 +++++++++++++++++++
 src/components/ha-combo-box.ts                |  1 -
 .../automation/action/ha-automation-action.ts |  5 ++--
 .../types/ha-automation-action-choose.ts      |  8 +++++--
 .../condition/ha-automation-condition.ts      |  5 ++--
 .../trigger/ha-automation-trigger.ts          |  5 ++--
 src/panels/config/logs/ha-config-logs.ts      |  5 ++--
 .../hui-tile-card-features-editor.ts          |  5 ++--
 .../media-browser/ha-bar-media-player.ts      | 10 +++-----
 10 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ha-button.ts

diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index ff26c4a79d..31d2af9062 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,3 +1,4 @@
+import "../ha-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -9,7 +10,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-list-item";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts
new file mode 100644
index 0000000000..318fe8c483
--- /dev/null
+++ b/src/components/ha-button.ts
@@ -0,0 +1,24 @@
+import { Button } from "@material/mwc-button";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { styles } from "@material/mwc-button/styles.css";
+
+@customElement("ha-button")
+export class HaButton extends Button {
+  static override styles = [
+    styles,
+    css`
+      ::slotted([slot="icon"]) {
+        margin-inline-start: 0px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button": HaButton;
+  }
+}
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 27691d1a5f..061a241e07 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -16,7 +16,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
 import "./ha-icon-button";
-import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 registerStyles(
diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index 0a56ac1318..7ff8100b76 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { ACTION_TYPES } from "../../../../data/action";
@@ -132,7 +133,7 @@ export default class HaAutomationAction extends LitElement {
         @action=${this._addAction}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -141,7 +142,7 @@ export default class HaAutomationAction extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index bbc9b5a039..e515b49d1c 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-button";
 import { Condition } from "../../../../../data/automation";
 import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -80,7 +81,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <mwc-button
+      <ha-button
         outlined
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.choose.add_option"
@@ -89,7 +90,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
         @click=${this._addOption}
       >
         <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </mwc-button>
+      </ha-button>
       ${this._showDefault || action.default
         ? html`
             <h2>
@@ -196,6 +197,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
         ha-icon-button {
           position: absolute;
           right: 0;
+          inset-inline-start: initial;
+          inset-inline-end: 0;
+          direction: var(--direction);
           padding: 4px;
         }
         ha-svg-icon {
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index 1b93b508e5..d936b7a4f3 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -8,6 +8,7 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-svg-icon";
 import type { Condition } from "../../../../data/automation";
@@ -177,7 +178,7 @@ export default class HaAutomationCondition extends LitElement {
         @action=${this._addCondition}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -186,7 +187,7 @@ export default class HaAutomationCondition extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts
index 7bc099265d..7c8b8bd755 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { Trigger } from "../../../../data/automation";
@@ -125,7 +126,7 @@ export default class HaAutomationTrigger extends LitElement {
         )}
         </div>
         <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
-          <mwc-button
+          <ha-button
             slot="trigger"
             outlined
             .label=${this.hass.localize(
@@ -134,7 +135,7 @@ export default class HaAutomationTrigger extends LitElement {
             .disabled=${this.disabled}
           >
             <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-          </mwc-button>
+          </ha-button>
           ${this._processedTypes(this.hass.localize).map(
             ([opt, label, icon]) => html`
               <mwc-list-item .value=${opt} graphic="icon">
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index f632d1ef6a..3a40d0e5ad 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/search-input";
 import { LogProvider } from "../../../data/error_log";
 import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
@@ -115,7 +116,7 @@ export class HaConfigLogs extends LitElement {
         this.hass.userData?.showAdvanced
           ? html`
               <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-                <mwc-button
+                <ha-button
                   slot="trigger"
                   .label=${this._logProviders.find(
                     (p) => p.key === this._selectedLogProvider
@@ -125,7 +126,7 @@ export class HaConfigLogs extends LitElement {
                     slot="trailingIcon"
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
-                </mwc-button>
+                </ha-button>
                 ${this._logProviders.map(
                   (provider) => html`
                     <mwc-list-item
diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts
index 972db69887..ffcce2826f 100644
--- a/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts
@@ -15,6 +15,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import {
@@ -160,7 +161,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                   @action=${this._addFeature}
                   @closed=${stopPropagation}
                 >
-                  <mwc-button
+                  <ha-button
                     slot="trigger"
                     outlined
                     .label=${this.hass!.localize(
@@ -168,7 +169,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                     )}
                   >
                     <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-                  </mwc-button>
+                  </ha-button>
                   ${this._supportedFeatureTypes.map(
                     (featureType) => html`<mwc-list-item .value=${featureType}>
                       <ha-svg-icon
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index be9e9d4e2d..6f501099a3 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -30,6 +30,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-button-menu";
+import "../../components/ha-button";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon-button";
 import { UNAVAILABLE } from "../../data/entity";
@@ -323,7 +324,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                     ></ha-icon-button>
                   `
                 : html`
-                    <mwc-button
+                    <ha-button
                       slot="trigger"
                       .label=${this.narrow
                         ? ""
@@ -344,7 +345,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                         slot="trailingIcon"
                         .path=${mdiChevronDown}
                       ></ha-svg-icon>
-                    </mwc-button>
+                    </ha-button>
                   `
             }
             <mwc-list-item
@@ -720,11 +721,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         font-weight: bold;
       }
 
-      ha-svg-icon[slot="icon"] {
-        margin-inline-start: 8px !important;
-        margin-inline-end: 8px !important;
-        direction: var(--direction);
-      }
       ha-svg-icon[slot="trailingIcon"] {
         margin-inline-start: 8px !important;
         margin-inline-end: 0px !important;