From 658ce808019a872af708e4b0e6725b910811fae6 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Mon, 20 Feb 2023 19:16:03 +0200
Subject: [PATCH] Rtl fixes feb23 (#15487)

---
 gallery/src/pages/components/ha-tip.ts        |  7 ++++++-
 src/components/ha-tip.ts                      | 20 +++++++++++++++----
 src/dialogs/quick-bar/ha-quick-bar.ts         |  4 +++-
 src/layouts/hass-tabs-subpage-data-table.ts   |  6 ++++++
 .../config/dashboard/ha-config-dashboard.ts   |  2 +-
 .../state/developer-tools-state.js            |  6 +++++-
 .../select-view/hui-dialog-select-view.ts     |  3 +++
 7 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/gallery/src/pages/components/ha-tip.ts b/gallery/src/pages/components/ha-tip.ts
index 49fa1f2c71..1f349efa7e 100644
--- a/gallery/src/pages/components/ha-tip.ts
+++ b/gallery/src/pages/components/ha-tip.ts
@@ -3,6 +3,7 @@ import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-tip";
 import "../../../../src/components/ha-card";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
 
 const tips: (string | TemplateResult)[] = [
   "Test tip",
@@ -18,7 +19,11 @@ export class DemoHaTip extends LitElement {
         <div class=${mode}>
           <ha-card header="ha-tip ${mode} demo">
             <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
+              ${tips.map(
+                (tip) => html`<ha-tip .hass=${provideHass(this)}
+                  >${tip}</ha-tip
+                >`
+              )}
             </div>
           </ha-card>
         </div>
diff --git a/src/components/ha-tip.ts b/src/components/ha-tip.ts
index ef4e36fa05..b1ed88a333 100644
--- a/src/components/ha-tip.ts
+++ b/src/components/ha-tip.ts
@@ -1,15 +1,24 @@
 import { mdiLightbulbOutline } from "@mdi/js";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { property, customElement } from "lit/decorators";
+import { HomeAssistant } from "../types";
 
 import "./ha-svg-icon";
 
 @customElement("ha-tip")
 class HaTip extends LitElement {
-  public render() {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  public render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
     return html`
       <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-      <span class="prefix">Tip!</span>
+      <span class="prefix"
+        >${this.hass.localize("ui.panel.config.tips.tip")}</span
+      >
       <span class="text"><slot></slot></span>
     `;
   }
@@ -21,7 +30,10 @@ class HaTip extends LitElement {
     }
 
     .text {
+      direction: var(--direction);
       margin-left: 2px;
+      margin-inline-start: 2px;
+      margin-inline-end: initial;
       color: var(--secondary-text-color);
     }
 
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 730ef8ad68..aeb6520cf4 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -242,7 +242,9 @@ export class QuickBar extends LitElement {
                   : ""}
               </mwc-list>
             `}
-        ${this._hint ? html`<ha-tip>${this._hint}</ha-tip>` : ""}
+        ${this._hint
+          ? html`<ha-tip .hass=${this.hass}>${this._hint}</ha-tip>`
+          : ""}
       </ha-dialog>
     `;
   }
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 81227b26a8..30a13c94c3 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -333,15 +333,21 @@ export class HaTabsSubpageDataTable extends LitElement {
         align-items: center;
         padding: 2px 2px 2px 8px;
         margin-left: 4px;
+        margin-inline-start: 4px;
+        margin-inline-end: initial;
         font-size: 14px;
         width: max-content;
         cursor: initial;
+        direction: var(--direction);
       }
       .active-filters ha-svg-icon {
         color: var(--primary-color);
       }
       .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);
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index 9c0ea74e89..76fc85056c 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -275,7 +275,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
               )}
             ></ha-config-navigation>
           </ha-card>
-          <ha-tip>${this._tip}</ha-tip>
+          <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
         </ha-config-section>
       </ha-app-layout>
     `;
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 6152506e91..d2993647fe 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -114,6 +114,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           direction: rtl;
         }
 
+        :host([rtl]) .filters {
+          direction: rtl;
+        }
+
         .entities tr {
           vertical-align: top;
           direction: ltr;
@@ -190,7 +194,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               on-change="entityIdChanged"
               allow-custom-entity
             ></ha-entity-picker>
-            <ha-tip>[[localize('ui.tips.key_e_hint')]]</ha-tip>
+            <ha-tip hass="[[hass]]">[[localize('ui.tips.key_e_hint')]]</ha-tip>
             <ha-textfield
               label="[[localize('ui.panel.developer-tools.tabs.states.state')]]"
               required
diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
index 11397beda9..226d1bee55 100644
--- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
+++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
@@ -186,6 +186,9 @@ export class HuiDialogSelectView extends LitElement {
         ha-select {
           width: 100%;
         }
+        mwc-radio-list-item {
+          direction: ltr;
+        }
       `,
     ];
   }