Various RTL fixes (#15446)

gallery/src/pages/components/ha-alert.markdown

@@ -156,18 +156,6 @@ The `title ` option should not be used without a description.
 
 *Documentation coming soon*
 
-**Right to left**
-
-<ha-alert alert-type="success" rtl>
-  This is an info alert — check it out!
-</ha-alert>
-
-```html
-<ha-alert alert-type="success" rtl>
-  This is an info alert — check it out!
-</ha-alert>
-```
-
 ### API
 **Properties/Attributes**
 

src/components/ha-alert.ts

@@ -37,13 +37,10 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
-  @property({ type: Boolean }) public rtl = false;
-
   public render() {
     return html`
       <div
         class="issue-type ${classMap({
-          rtl: this.rtl,
           [this.alertType]: true,
         })}"
         role="alert"
@@ -84,9 +81,6 @@ class HaAlert extends LitElement {
       padding: 8px;
       display: flex;
     }
-    .issue-type.rtl {
-      flex-direction: row-reverse;
-    }
     .issue-type::after {
       position: absolute;
       top: 0;
@@ -104,15 +98,12 @@ class HaAlert extends LitElement {
     .icon.no-title {
       align-self: center;
     }
-    .issue-type.rtl > .content {
-      flex-direction: row-reverse;
-      text-align: right;
-    }
     .content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
+      text-align: var(--float-start);
     }
     .action {
       z-index: 1;
@@ -124,10 +115,9 @@ class HaAlert extends LitElement {
       word-break: break-word;
       margin-left: 8px;
       margin-right: 0;
-    }
+      margin-inline-start: 8px;
-    .issue-type.rtl > .content > .main-content {
+      margin-inline-end: 0;
-      margin-left: 0;
+      direction: var(--direction);
-      margin-right: 8px;
     }
     .title {
       margin-top: 2px;

src/components/ha-textarea.ts

@@ -8,6 +8,12 @@ import { customElement, property } from "lit/decorators";
 export class HaTextArea extends TextAreaBase {
   @property({ type: Boolean, reflect: true }) autogrow = false;
 
+  firstUpdated() {
+    super.firstUpdated();
+
+    this.setAttribute("dir", document.dir);
+  }
+
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (this.autogrow && changedProperties.has("value")) {
@@ -47,6 +53,10 @@ export class HaTextArea extends TextAreaBase {
         margin-top: 16px;
         margin-bottom: 16px;
       }
+      :host([dir="rtl"]) .mdc-floating-label {
+        right: 16px;
+        left: initial;
+      }
     `,
   ];
 }

src/panels/config/automation/ha-automation-trace.ts

@@ -39,6 +39,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { computeRTL } from "../../../common/util/compute_rtl";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -176,7 +177,9 @@ export class HaAutomationTrace extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.config.automation.trace.older_trace"
                   )}
-                  .path=${mdiRayEndArrow}
+                  .path=${computeRTL(this.hass!)
+                    ? mdiRayStartArrow
+                    : mdiRayEndArrow}
                   .disabled=${this._traces[this._traces.length - 1].run_id ===
                   this._runId}
                   @click=${this._pickOlderTrace}
@@ -198,7 +201,9 @@ export class HaAutomationTrace extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.config.automation.trace.newer_trace"
                   )}
-                  .path=${mdiRayStartArrow}
+                  .path=${computeRTL(this.hass!)
+                    ? mdiRayEndArrow
+                    : mdiRayStartArrow}
                   .disabled=${this._traces[0].run_id === this._runId}
                   @click=${this._pickNewerTrace}
                 ></ha-icon-button>