refactor: Use getElementStyleDir where applicable. #2079 (#3622)

Esri · Dec 6, 2021 · d7f78a9 · d7f78a9
1 parent 890d354
commit d7f78a9
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 22 deletions.
diff --git a/src/components/calcite-block-section/calcite-block-section.tsx b/src/components/calcite-block-section/calcite-block-section.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, h, VNode } from "@stencil/core";
 
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS, ICONS, TEXT } from "./resources";
 import { BlockSectionToggleDisplay } from "./interfaces";
@@ -112,7 +112,7 @@ export class CalciteBlockSection {
 
   render(): VNode {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-    const dir = getElementDir(el);
+    const dir = getElementStyleDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"

diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -13,7 +13,7 @@ import {
   Host
 } from "@stencil/core";
 import { filter } from "../../utils/filter";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, getElementStyleDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
 import { getKey } from "../../utils/key";
 import {
@@ -372,7 +372,7 @@ export class CalciteCombobox implements LabelableComponent, FormComponent {
   };
 
   keydownHandler = (event: KeyboardEvent): void => {
-    const key = getKey(event.key, getElementDir(this.el));
+    const key = getKey(event.key, getElementStyleDir(this.el));
 
     switch (key) {
       case "Tab":

diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
@@ -11,7 +11,7 @@ import {
   Fragment
 } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getElementDir, getElementStyleDir, getSlotted } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { Scale } from "../interfaces";
 import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading";
@@ -221,7 +221,7 @@ export class CalcitePanel {
   renderBackButton(): VNode {
     const { el } = this;
 
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = getElementStyleDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;

diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx
@@ -12,7 +12,7 @@ import {
   Watch
 } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement } from "../../utils/dom";
+import { focusElement, getElementStyleDir } from "../../utils/dom";
 import { Scale } from "../interfaces";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
@@ -23,7 +23,6 @@ import {
 } from "../../utils/form";
 import { CSS } from "./resources";
 import { getKey } from "../../utils/key";
-import { getElementDir } from "../../utils/dom";
 import { getRoundRobinIndex } from "../../utils/array";
 
 @Component({
@@ -304,7 +303,7 @@ export class CalciteRadioButton implements LabelableComponent, CheckableFormComp
 
     let adjustedKey = key;
 
-    if (getElementDir(el) === "rtl") {
+    if (getElementStyleDir(el) === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

diff --git a/src/components/calcite-radio-group/calcite-radio-group.tsx b/src/components/calcite-radio-group/calcite-radio-group.tsx
@@ -13,7 +13,7 @@ import {
   VNode
 } from "@stencil/core";
 
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { Layout, Scale, Width } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label";
@@ -180,7 +180,7 @@ export class CalciteRadioGroup implements LabelableComponent, FormComponent {
 
     let adjustedKey = key;
 
-    if (getElementDir(el) === "rtl") {
+    if (getElementStyleDir(el) === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

diff --git a/src/components/calcite-tab-nav/calcite-tab-nav.tsx b/src/components/calcite-tab-nav/calcite-tab-nav.tsx
@@ -12,7 +12,7 @@ import {
   Watch
 } from "@stencil/core";
 import { TabChangeEventDetail } from "../calcite-tab/interfaces";
-import { getElementDir, filterDirectChildren } from "../../utils/dom";
+import { getElementStyleDir, filterDirectChildren } from "../../utils/dom";
 import { TabID, TabLayout } from "../calcite-tabs/interfaces";
 import { TabPosition } from "../calcite-tabs/interfaces";
 import { Scale } from "../interfaces";
@@ -151,7 +151,7 @@ export class CalciteTabNav {
   }
 
   render(): VNode {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
@@ -290,7 +290,7 @@ export class CalciteTabNav {
   };
 
   private updateOffsetPosition(): void {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
     const tabLeft = this.selectedTabEl?.offsetLeft;
     const tabWidth = this.selectedTabEl?.offsetWidth;

diff --git a/src/components/calcite-tab-title/calcite-tab-title.tsx b/src/components/calcite-tab-title/calcite-tab-title.tsx
@@ -15,7 +15,7 @@ import {
 } from "@stencil/core";
 import { TabChangeEventDetail } from "../calcite-tab/interfaces";
 import { guid } from "../../utils/guid";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementDir, getElementProp, getElementStyleDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { TabID, TabLayout, TabPosition } from "../calcite-tabs/interfaces";
 import { FlipContext, Scale } from "../interfaces";
@@ -217,14 +217,14 @@ export class CalciteTabTitle {
         e.preventDefault();
         break;
       case "ArrowRight":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusNext.emit();
         } else {
           this.calciteTabsFocusPrevious.emit();
         }
         break;
       case "ArrowLeft":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         } else {
           this.calciteTabsFocusNext.emit();

diff --git a/src/components/calcite-tip-manager/calcite-tip-manager.tsx b/src/components/calcite-tip-manager/calcite-tip-manager.tsx
@@ -11,7 +11,7 @@ import {
   VNode
 } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading";
 import { createObserver } from "../../utils/observers";
 
@@ -233,7 +233,7 @@ export class CalciteTipManager {
   // --------------------------------------------------------------------------
 
   renderPagination(): VNode {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
 
     const nextLabel = intlNext || TEXT.next;

diff --git a/src/components/functional/CalciteExpandToggle.tsx b/src/components/functional/CalciteExpandToggle.tsx
@@ -1,5 +1,5 @@
 import { FunctionalComponent, h } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, getElementStyleDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";
 import { Position, Scale } from "../interfaces";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
@@ -71,7 +71,7 @@ export const CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>
   ref,
   scale
 }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
 
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
@@ -86,7 +86,7 @@ export const CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>
 
   const actionNode = (
     <calcite-action
-      dir={rtl ? "rtl" : "ltr"}
+      dir={getElementDir(el) === "rtl" ? "rtl" : "ltr"}
       icon={expanded ? expandIcon : collapseIcon}
       onClick={toggle}
       ref={(referenceElement): HTMLCalciteActionElement =>