From 549d893407ffb2bee3050e6ad2f2a2d0760a2edf Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Mon, 30 Jan 2023 21:51:37 +0200
Subject: [PATCH] RTL fixes (#15233)

---
 src/components/entity/ha-entity-picker.ts       |  6 +++---
 src/components/ha-check-list-item.ts            |  9 +++++++++
 src/components/ha-combo-box.ts                  |  8 ++++----
 .../integrations/ha-config-integrations.ts      | 17 ++++++++++++++++-
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index e2f2339c1c..ff26c4a79d 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -10,6 +9,7 @@ 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";
@@ -24,13 +24,13 @@ export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
-  html`<mwc-list-item graphic="avatar" .twoline=${!!item.entity_id}>
+  html`<ha-list-item graphic="avatar" .twoline=${!!item.entity_id}>
     ${item.state
       ? html`<state-badge slot="graphic" .stateObj=${item}></state-badge>`
       : ""}
     <span>${item.friendly_name}</span>
     <span slot="secondary">${item.entity_id}</span>
-  </mwc-list-item>`;
+  </ha-list-item>`;
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts
index 63f5827f67..96e62a475e 100644
--- a/src/components/ha-check-list-item.ts
+++ b/src/components/ha-check-list-item.ts
@@ -13,6 +13,15 @@ export class HaCheckListItem extends CheckListItemBase {
       :host {
         --mdc-theme-secondary: var(--primary-color);
       }
+
+      :host([graphic="avatar"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="medium"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="large"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="control"]) .mdc-deprecated-list-item__graphic {
+        margin-inline-end: var(--mdc-list-item-graphic-margin, 16px);
+        margin-inline-start: 0px;
+        direction: var(--direction);
+      }
     `,
   ];
 }
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index dd4d4289e1..27691d1a5f 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
@@ -15,6 +14,7 @@ import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 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";
@@ -23,7 +23,7 @@ registerStyles(
   "vaadin-combo-box-item",
   css`
     :host {
-      padding: 0;
+      padding: 0 !important;
     }
     :host([focused]:not([disabled])) {
       background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
@@ -211,9 +211,9 @@ export class HaComboBox extends LitElement {
   private _defaultRowRenderer: ComboBoxLitRenderer<
     string | Record<string, any>
   > = (item) =>
-    html`<mwc-list-item>
+    html`<ha-list-item>
       ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </mwc-list-item>`;
+    </ha-list-item>`;
 
   private _clearValue(ev: Event) {
     ev.stopPropagation();
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index aaea690b57..9abd05966a 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -822,6 +822,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         }
         ha-button-menu {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
         .container {
           display: grid;
@@ -850,6 +853,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           display: block;
           color: var(--secondary-text-color);
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
           --mdc-ripple-color: transparant;
         }
         .search {
@@ -874,13 +880,22 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           position: relative;
           display: flex;
           align-items: center;
-          padding: 2px 2px 2px 8px;
+          padding-top: 2px;
+          padding-bottom: 2px;
+          padding-right: 2px;
+          padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: 2px;
           font-size: 14px;
           width: max-content;
           cursor: initial;
+          direction: var(--direction);
         }
         .active-filters mwc-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
         .active-filters::before {
           background-color: var(--primary-color);