Merge pull request #12772 from yosilevy/RTL-switch

Various RTL fixes

src/components/ha-formfield.ts

@@ -28,10 +28,15 @@ export class HaFormfield extends FormfieldBase {
     css`
       :host(:not([alignEnd])) ::slotted(ha-switch) {
         margin-right: 10px;
+        margin-inline-end: 10px;
+        margin-inline-start: inline;
       }
-      :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
-        margin-left: 10px;
-        margin-right: auto;
+      .mdc-form-field > label {
+        direction: var(--direction);
+        margin-inline-start: 0;
+        margin-inline-end: auto;
+        padding-inline-start: 4px;
+        padding-inline-end: 0;
       }
     `,
   ];

src/components/ha-selector/ha-selector-select.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-formfield/mwc-formfield";
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
@@ -47,14 +46,14 @@ export class HaSelectSelector extends LitElement {
             ${this.label}
             ${options.map(
               (item: SelectOption) => html`
-                <mwc-formfield .label=${item.label}>
+                <ha-formfield .label=${item.label}>
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
                     .disabled=${this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
-                </mwc-formfield>
+                </ha-formfield>
               `
             )}
           </div>

src/panels/config/person/dialog-person-detail.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/entity/ha-entities-picker";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
@@ -159,7 +158,6 @@ class DialogPersonDetail extends LitElement {
                     .label=${this.hass.localize(
                       "ui.panel.config.person.detail.local_only"
                     )}
-                    .dir=${computeRTLDirection(this.hass)}
                   >
                     <ha-switch
                       .checked=${this._localOnly}
@@ -171,7 +169,6 @@ class DialogPersonDetail extends LitElement {
                     .label=${this.hass.localize(
                       "ui.panel.config.person.detail.admin"
                     )}
-                    .dir=${computeRTLDirection(this.hass)}
                   >
                     <ha-switch
                       .disabled=${this._user.system_generated ||

src/panels/lovelace/components/hui-entity-editor.ts

@@ -193,6 +193,9 @@ export class HuiEntityEditor extends LitElement {
         .add-entity {
           display: block;
           margin-left: 31px;
+          margin-inline-start: 31px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
         .entity {
           display: flex;

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -261,6 +261,9 @@ export class HuiEntitiesCardRowEditor extends LitElement {
           display: block;
           margin-left: 31px;
           margin-right: 71px;
+          margin-inline-start: 31px;
+          margin-inline-end: 71px;
+          direction: var(--direction);
         }
         .entity {
           display: flex;
@@ -270,6 +273,9 @@ export class HuiEntitiesCardRowEditor extends LitElement {
         .entity .handle {
           padding-right: 8px;
           cursor: move;
+          padding-inline-end: 8px;
+          padding-inline-start: initial;
+          direction: var(--direction);
         }
 
         .entity ha-entity-picker {