From bad5a389b5013351baf65d8e0136edde1648ee82 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Fri, 15 Apr 2022 21:47:46 +0300
Subject: [PATCH] RTL calendar fix - arrows fix and views fix (#12314)

* RTL calendar fix - arrows fix and views fix

* Removed path attributes
---
 src/components/ha-button-toggle-group.ts | 13 +++++++++++++
 src/panels/calendar/ha-full-calendar.ts  | 15 +++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
index 330a6ba134..8534cfba0b 100644
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -117,6 +117,19 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 4px;
         border-right-width: 1px;
       }
+
+      :host([dir="rtl"]) ha-icon-button:first-child,
+      :host([dir="rtl"]) mwc-button:first-child {
+        border-radius: 0 4px 4px 0;
+        border-right-width: 1px;
+        --mdc-shape-small: 0 4px 4px 0;
+        --mdc-button-outline-width: 1px;
+      }
+      :host([dir="rtl"]) ha-icon-button:last-child,
+      :host([dir="rtl"]) mwc-button:last-child {
+        --mdc-shape-small: 4px 0 0 4px;
+        border-radius: 4px 0 0 4px;
+      }
     `;
   }
 }
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 3516a14f06..7ee2042304 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -34,7 +34,10 @@ import { useAmPm } from "../../common/datetime/use_am_pm";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button-toggle-group";
 import "../../components/ha-icon-button";
+import "../../components/ha-icon-button-prev";
+import "../../components/ha-icon-button-next";
 import { haStyle } from "../../resources/styles";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
   CalendarEvent,
   CalendarViewChanged,
@@ -124,26 +127,25 @@ export class HAFullCalendar extends LitElement {
                           "ui.components.calendar.today"
                         )}</mwc-button
                       >
-                      <ha-icon-button
+                      <ha-icon-button-prev
                         .label=${this.hass.localize("ui.common.previous")}
-                        .path=${mdiChevronLeft}
                         class="prev"
                         @click=${this._handlePrev}
                       >
-                      </ha-icon-button>
-                      <ha-icon-button
+                      </ha-icon-button-prev>
+                      <ha-icon-button-next
                         .label=${this.hass.localize("ui.common.next")}
-                        .path=${mdiChevronRight}
                         class="next"
                         @click=${this._handleNext}
                       >
-                      </ha-icon-button>
+                      </ha-icon-button-next>
                     </div>
                     <h1>${this.calendar.view.title}</h1>
                     <ha-button-toggle-group
                       .buttons=${viewToggleButtons}
                       .active=${this._activeView}
                       @value-changed=${this._handleView}
+                      .dir=${computeRTLDirection(this.hass)}
                     ></ha-button-toggle-group>
                   `
                 : html`
@@ -179,6 +181,7 @@ export class HAFullCalendar extends LitElement {
                         .buttons=${viewToggleButtons}
                         .active=${this._activeView}
                         @value-changed=${this._handleView}
+                        .dir=${computeRTLDirection(this.hass)}
                       ></ha-button-toggle-group>
                     </div>
                   `}