Rtl fixes feb23 (#15487)

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>

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);
     }
 

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>
     `;
   }

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);

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>
     `;

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

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;
+        }
       `,
     ];
   }