From 93f74a4ff076e9e36759217e7f36881ca74f20a1 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 6 Dec 2021 11:43:18 -0800
Subject: [PATCH] refactor: Remove setting 'dir' attribute within components.
 #2079

---
 src/components/calcite-avatar/calcite-avatar.tsx   | 13 ++-----------
 src/components/calcite-chip/calcite-chip.tsx       |  1 -
 .../calcite-color-picker-hex-input.tsx             |  6 ++----
 .../calcite-color-picker/calcite-color-picker.tsx  |  2 --
 .../calcite-date-picker-month-header.tsx           | 14 ++++----------
 .../calcite-date-picker-month.tsx                  | 10 +++-------
 .../calcite-date-picker/calcite-date-picker.tsx    |  8 +-------
 .../calcite-dropdown-group.tsx                     |  4 +---
 .../calcite-dropdown-item.tsx                      |  2 --
 src/components/calcite-fab/calcite-fab.tsx         |  7 ++-----
 .../calcite-input-date-picker.tsx                  |  9 +--------
 src/components/calcite-input/calcite-input.tsx     |  3 +--
 src/components/calcite-link/calcite-link.tsx       |  1 -
 .../calcite-pagination/calcite-pagination.tsx      |  6 ++----
 .../calcite-pick-list/shared-list-render.tsx       |  3 ---
 .../calcite-radio-group-item.tsx                   |  4 +---
 src/components/calcite-rating/calcite-rating.tsx   |  1 -
 .../calcite-split-button/calcite-split-button.tsx  |  7 +------
 .../calcite-tab-title/calcite-tab-title.tsx        |  2 --
 src/components/functional/CalciteExpandToggle.tsx  |  3 +--
 20 files changed, 22 insertions(+), 84 deletions(-)

diff --git a/src/components/calcite-avatar/calcite-avatar.tsx b/src/components/calcite-avatar/calcite-avatar.tsx
index b21305cbe8b..e21b180b5ce 100644
--- a/src/components/calcite-avatar/calcite-avatar.tsx
+++ b/src/components/calcite-avatar/calcite-avatar.tsx
@@ -1,5 +1,4 @@
 import { Component, Element, h, Prop, State } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";
 import { Scale } from "../interfaces";
 import { hexToHue, stringToHex } from "./utils";
@@ -66,23 +65,15 @@ export class CalciteAvatar {
   //--------------------------------------------------------------------------
 
   private determineContent() {
-    const dir = getElementDir(this.el);
-
     if (this.thumbnail && !this.error) {
       return (
-        <img
-          alt=""
-          class="thumbnail"
-          dir={dir}
-          onError={() => (this.error = true)}
-          src={this.thumbnail}
-        />
+        <img alt="" class="thumbnail" onError={() => (this.error = true)} src={this.thumbnail} />
       );
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
     return (
-      <span class="background" dir={dir} style={{ backgroundColor }}>
+      <span class="background" style={{ backgroundColor }}>
         {initials ? (
           <span aria-hidden="true" class="initials">
             {initials}
diff --git a/src/components/calcite-chip/calcite-chip.tsx b/src/components/calcite-chip/calcite-chip.tsx
index 04692bf5f04..1f6293ebbdc 100644
--- a/src/components/calcite-chip/calcite-chip.tsx
+++ b/src/components/calcite-chip/calcite-chip.tsx
@@ -115,7 +115,6 @@ export class CalciteChip {
     const iconEl = (
       <calcite-icon
         class={CSS.calciteChipIcon}
-        dir={dir}
         flipRtl={this.iconFlipRtl}
         icon={this.icon}
         scale="s"
diff --git a/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx b/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx
index a6fe135f6da..7dc00a737ae 100644
--- a/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx
+++ b/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx
@@ -23,7 +23,7 @@ import Color from "color";
 import { CSS } from "./resources";
 import { Scale } from "../interfaces";
 import { RGB } from "../calcite-color-picker/interfaces";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
 import { getKey } from "../../utils/key";
 
@@ -243,15 +243,13 @@ export class CalciteColorPickerHexInput {
   //--------------------------------------------------------------------------
 
   render(): VNode {
-    const { el, intlHex, value } = this;
+    const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    const elementDir = getElementDir(el);
 
     return (
       <div class={CSS.container}>
         <calcite-input
           class={CSS.input}
-          dir={elementDir}
           label={intlHex}
           maxLength={6}
           onCalciteInputBlur={this.onCalciteInputBlur}
diff --git a/src/components/calcite-color-picker/calcite-color-picker.tsx b/src/components/calcite-color-picker/calcite-color-picker.tsx
index e6ef07a2c85..5068280a9de 100644
--- a/src/components/calcite-color-picker/calcite-color-picker.tsx
+++ b/src/components/calcite-color-picker/calcite-color-picker.tsx
@@ -817,7 +817,6 @@ export class CalciteColorPicker {
                 <calcite-color-picker-hex-input
                   allowEmpty={allowEmpty}
                   class={CSS.control}
-                  dir={elementDir}
                   onCalciteColorPickerHexInputChange={this.handleHexInputChange}
                   scale={hexInputScale}
                   value={selectedColorInHex}
@@ -830,7 +829,6 @@ export class CalciteColorPicker {
                   [CSS.colorModeContainer]: true,
                   [CSS.splitSection]: true
                 }}
-                dir={elementDir}
                 scale={hexInputScale}
               >
                 <calcite-tab-nav slot="tab-nav">
diff --git a/src/components/calcite-date-picker-month-header/calcite-date-picker-month-header.tsx b/src/components/calcite-date-picker-month-header/calcite-date-picker-month-header.tsx
index bd01c3e5866..e1d9b7a2e33 100644
--- a/src/components/calcite-date-picker-month-header/calcite-date-picker-month-header.tsx
+++ b/src/components/calcite-date-picker-month-header/calcite-date-picker-month-header.tsx
@@ -10,7 +10,6 @@ import {
   Watch,
   Fragment
 } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import {
   dateFromRange,
   nextMonth,
@@ -97,15 +96,10 @@ export class CalciteDatePickerMonthHeader {
   }
 
   render(): VNode {
-    const dir = getElementDir(this.el);
-    return (
-      <div class="header" dir={dir}>
-        {this.renderContent(dir)}
-      </div>
-    );
+    return <div class="header">{this.renderContent()}</div>;
   }
 
-  renderContent(dir: string): VNode {
+  renderContent(): VNode {
     if (!this.activeDate || !this.localeData) {
       return null;
     }
@@ -132,7 +126,7 @@ export class CalciteDatePickerMonthHeader {
           role="button"
           tabindex={this.prevMonthDate.getMonth() === activeMonth ? -1 : 0}
         >
-          <calcite-icon dir={dir} flip-rtl icon="chevron-left" scale={iconScale} />
+          <calcite-icon flip-rtl icon="chevron-left" scale={iconScale} />
         </a>
         <div class={{ text: true, "text--reverse": reverse }}>
           <CalciteHeading class="month" level={this.headingLevel}>
@@ -174,7 +168,7 @@ export class CalciteDatePickerMonthHeader {
           role="button"
           tabindex={this.nextMonthDate.getMonth() === activeMonth ? -1 : 0}
         >
-          <calcite-icon dir={dir} flip-rtl icon="chevron-right" scale={iconScale} />
+          <calcite-icon flip-rtl icon="chevron-right" scale={iconScale} />
         </a>
       </Fragment>
     );
diff --git a/src/components/calcite-date-picker-month/calcite-date-picker-month.tsx b/src/components/calcite-date-picker-month/calcite-date-picker-month.tsx
index 722437e1653..be786a02e3e 100644
--- a/src/components/calcite-date-picker-month/calcite-date-picker-month.tsx
+++ b/src/components/calcite-date-picker-month/calcite-date-picker-month.tsx
@@ -11,7 +11,6 @@ import {
 } from "@stencil/core";
 import { inRange, sameDate, dateFromRange, HoverRange } from "../../utils/date";
 import { getKey } from "../../utils/key";
-import { getElementDir } from "../../utils/dom";
 import { DateLocaleData } from "../calcite-date-picker/utils";
 import { Scale } from "../interfaces";
 
@@ -176,20 +175,19 @@ export class CalciteDatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
-    const dir = getElementDir(this.el);
     const days = [
       ...prevMonDays.map((day) => {
         const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, dir, date, true, true);
+        return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
         const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       })
     ];
 
@@ -360,7 +358,6 @@ export class CalciteDatePickerMonth {
   private renderDateDay(
     active: boolean,
     day: number,
-    dir: string,
     date: Date,
     currentMonth?: boolean,
     ref?: boolean
@@ -381,7 +378,6 @@ export class CalciteDatePickerMonth {
         }}
         currentMonth={currentMonth}
         day={day}
-        dir={dir}
         disabled={!inRange(date, this.min, this.max)}
         endOfRange={this.isEndOfRange(date)}
         highlighted={this.betweenSelectedRange(date)}
diff --git a/src/components/calcite-date-picker/calcite-date-picker.tsx b/src/components/calcite-date-picker/calcite-date-picker.tsx
index 0f8772e4b60..0929bef8bcd 100644
--- a/src/components/calcite-date-picker/calcite-date-picker.tsx
+++ b/src/components/calcite-date-picker/calcite-date-picker.tsx
@@ -12,7 +12,6 @@ import {
   Build
 } from "@stencil/core";
 import { getLocaleData, DateLocaleData } from "./utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, dateFromISO, dateToISO, getDaysDiff, HoverRange } from "../../utils/date";
 import { HeadingLevel } from "../functional/CalciteHeading";
 import { getKey } from "../../utils/key";
@@ -233,11 +232,9 @@ export class CalciteDatePicker {
           : this.maxAsDate
         : this.maxAsDate;
 
-    const dir = getElementDir(this.el);
-
     return (
       <Host onBlur={this.reset} onKeyUp={this.keyUpHandler} role="application">
-        {this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)}
+        {this.renderCalendar(activeDate, maxDate, minDate, date, endDate)}
       </Host>
     );
   }
@@ -395,7 +392,6 @@ export class CalciteDatePicker {
    */
   private renderCalendar(
     activeDate: Date,
-    dir: string,
     maxDate: Date,
     minDate: Date,
     date: Date,
@@ -405,7 +401,6 @@ export class CalciteDatePicker {
       this.localeData && [
         <calcite-date-picker-month-header
           activeDate={activeDate}
-          dir={dir}
           headingLevel={this.headingLevel || HEADING_LEVEL}
           intlNextMonth={this.intlNextMonth}
           intlPrevMonth={this.intlPrevMonth}
@@ -418,7 +413,6 @@ export class CalciteDatePicker {
         />,
         <calcite-date-picker-month
           activeDate={activeDate}
-          dir={dir}
           endDate={this.range ? endDate : undefined}
           hoverRange={this.hoverRange}
           localeData={this.localeData}
diff --git a/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx b/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx
index 023b27a9d46..7452761d4c9 100644
--- a/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx
+++ b/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx
@@ -9,7 +9,7 @@ import {
   Prop,
   VNode
 } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementProp } from "../../utils/dom";
 import { SelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 import { CSS } from "./resources";
@@ -70,7 +70,6 @@ export class CalciteDropdownGroup {
   }
 
   render(): VNode {
-    const dir = getElementDir(this.el);
     const scale: Scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title">
@@ -90,7 +89,6 @@ export class CalciteDropdownGroup {
             [CSS.containerMedium]: scale === "m",
             [CSS.containerLarge]: scale === "l"
           }}
-          dir={dir}
           title={this.groupTitle}
         >
           {dropdownSeparator}
diff --git a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
index 04ddda0cbe3..e473553bc81 100644
--- a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
+++ b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
@@ -113,7 +113,6 @@ export class CalciteDropdownItem {
     const iconStartEl = (
       <calcite-icon
         class="dropdown-item-icon-start"
-        dir={dir}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
         scale="s"
@@ -127,7 +126,6 @@ export class CalciteDropdownItem {
     const iconEndEl = (
       <calcite-icon
         class="dropdown-item-icon-end"
-        dir={dir}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale="s"
diff --git a/src/components/calcite-fab/calcite-fab.tsx b/src/components/calcite-fab/calcite-fab.tsx
index 519b1b5ded0..74e61ac0770 100755
--- a/src/components/calcite-fab/calcite-fab.tsx
+++ b/src/components/calcite-fab/calcite-fab.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Method, Prop, h, VNode } from "@stencil/core";
 import { Appearance, Scale } from "../interfaces";
 import { ButtonColor } from "../calcite-button/interfaces";
 import { CSS, ICONS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 
 @Component({
   tag: "calcite-fab",
@@ -91,17 +91,14 @@ export class CalciteFab {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { appearance, color, disabled, el, loading, scale, textEnabled, icon, label, text } =
-      this;
+    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
     const title = !textEnabled ? label || text || null : null;
-    const dir = getElementDir(el);
 
     return (
       <calcite-button
         appearance={appearance === "solid" ? "solid" : "outline"}
         class={CSS.button}
         color={color}
-        dir={dir}
         disabled={disabled}
         iconStart={icon}
         label={label}
diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
index 4ef1adfd91c..a185e240bcd 100644
--- a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
+++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
@@ -14,7 +14,6 @@ import {
   Build
 } from "@stencil/core";
 import { getLocaleData, DateLocaleData } from "../calcite-date-picker/utils";
-import { getElementDir } from "../../utils/dom";
 import {
   dateFromRange,
   inRange,
@@ -303,17 +302,11 @@ export class CalciteInputDatePicker implements LabelableComponent, FormComponent
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    const dir = getElementDir(this.el);
 
     return (
       <Host onBlur={this.deactivate} onKeyUp={this.keyUpHandler} role="application">
         {this.localeData && (
-          <div
-            aria-expanded={this.active.toString()}
-            class="input-container"
-            dir={dir}
-            role="application"
-          >
+          <div aria-expanded={this.active.toString()} class="input-container" role="application">
             {
               <div class="input-wrapper" ref={this.setStartWrapper}>
                 <calcite-input
diff --git a/src/components/calcite-input/calcite-input.tsx b/src/components/calcite-input/calcite-input.tsx
index 39ac61d5173..84edaf43546 100644
--- a/src/components/calcite-input/calcite-input.tsx
+++ b/src/components/calcite-input/calcite-input.tsx
@@ -659,7 +659,6 @@ export class CalciteInput implements LabelableComponent, FormComponent {
     const iconEl = (
       <calcite-icon
         class={CSS.inputIcon}
-        dir={dir}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
         scale="s"
@@ -786,7 +785,7 @@ export class CalciteInput implements LabelableComponent, FormComponent {
 
     return (
       <Host onClick={this.inputFocusHandler} onKeyDown={this.keyDownHandler}>
-        <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }} dir={dir}>
+        <div class={{ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
           {this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
             : null}
diff --git a/src/components/calcite-link/calcite-link.tsx b/src/components/calcite-link/calcite-link.tsx
index 83e6b6f5165..1abc502b1e8 100644
--- a/src/components/calcite-link/calcite-link.tsx
+++ b/src/components/calcite-link/calcite-link.tsx
@@ -93,7 +93,6 @@ export class CalciteLink {
       <Host role="presentation">
         <Tag
           class={{ [CSS_UTILITY.rtl]: dir === "rtl" }}
-          dir={dir}
           href={Tag === "a" && this.href}
           ref={this.storeTagRef}
           rel={Tag === "a" && this.rel}
diff --git a/src/components/calcite-pagination/calcite-pagination.tsx b/src/components/calcite-pagination/calcite-pagination.tsx
index 805dd23ec7f..a72923e076a 100644
--- a/src/components/calcite-pagination/calcite-pagination.tsx
+++ b/src/components/calcite-pagination/calcite-pagination.tsx
@@ -9,7 +9,6 @@ import {
   VNode,
   Fragment
 } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { Scale } from "../interfaces";
 
 import { CSS, TEXT } from "./resources";
@@ -208,7 +207,6 @@ export class CalcitePagination {
   }
 
   render(): VNode {
-    const dir = getElementDir(this.el);
     const { total, num, start } = this;
     const prevDisabled = num === 1 ? start <= num : start < num;
     const nextDisabled = num === 1 ? start + num > total : start + num > total;
@@ -223,7 +221,7 @@ export class CalcitePagination {
           disabled={prevDisabled}
           onClick={this.previousClicked}
         >
-          <calcite-icon dir={dir} flipRtl icon="chevronLeft" scale="s" />
+          <calcite-icon flipRtl icon="chevronLeft" scale="s" />
         </button>
         {total > num ? this.renderPage(1) : null}
         {this.renderLeftEllipsis()}
@@ -239,7 +237,7 @@ export class CalcitePagination {
           disabled={nextDisabled}
           onClick={this.nextClicked}
         >
-          <calcite-icon dir={dir} flipRtl icon="chevronRight" scale="s" />
+          <calcite-icon flipRtl icon="chevronRight" scale="s" />
         </button>
       </Fragment>
     );
diff --git a/src/components/calcite-pick-list/shared-list-render.tsx b/src/components/calcite-pick-list/shared-list-render.tsx
index 666768cc34f..a5890e62deb 100644
--- a/src/components/calcite-pick-list/shared-list-render.tsx
+++ b/src/components/calcite-pick-list/shared-list-render.tsx
@@ -1,7 +1,6 @@
 import { FunctionalComponent, h, Host, VNode } from "@stencil/core";
 import { JSXBase } from "@stencil/core/internal";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 import { handleFilter } from "./shared-list-logic";
 import DOMAttributes = JSXBase.DOMAttributes;
 
@@ -24,7 +23,6 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes> = (
     dataForFilter,
     handleFilter,
     filterPlaceholder,
-    el,
     setFilterEl
   },
   ...rest
@@ -38,7 +36,6 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes> = (
             <calcite-filter
               aria-label={filterPlaceholder}
               data={dataForFilter}
-              dir={getElementDir(el)}
               disabled={loading || disabled}
               onCalciteFilterChange={handleFilter}
               placeholder={filterPlaceholder}
diff --git a/src/components/calcite-radio-group-item/calcite-radio-group-item.tsx b/src/components/calcite-radio-group-item/calcite-radio-group-item.tsx
index 23a20899945..ae796cb712c 100644
--- a/src/components/calcite-radio-group-item/calcite-radio-group-item.tsx
+++ b/src/components/calcite-radio-group-item/calcite-radio-group-item.tsx
@@ -10,7 +10,7 @@ import {
   State,
   VNode
 } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementProp } from "../../utils/dom";
 import { RadioAppearance } from "../calcite-radio-group/interfaces";
 import { Position, Layout, Scale } from "../interfaces";
 import { SLOTS, CSS } from "./resources";
@@ -92,7 +92,6 @@ export class CalciteRadioGroupItem {
 
   render(): VNode {
     const { checked, useFallback, value } = this;
-    const dir = getElementDir(this.el);
     const scale: Scale = getElementProp(this.el, "scale", "m");
     const appearance: RadioAppearance = getElementProp(this.el, "appearance", "solid");
     const layout: Layout = getElementProp(this.el, "layout", "horizontal");
@@ -100,7 +99,6 @@ export class CalciteRadioGroupItem {
     const iconEl = (
       <calcite-icon
         class={CSS.radioGroupItemIcon}
-        dir={dir}
         flipRtl={this.iconFlipRtl}
         icon={this.icon}
         scale="s"
diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
index 726be2f64c7..522de2bcd71 100644
--- a/src/components/calcite-rating/calcite-rating.tsx
+++ b/src/components/calcite-rating/calcite-rating.tsx
@@ -193,7 +193,6 @@ export class CalciteRating implements LabelableComponent, FormComponent {
         {(count || average) && showChip ? (
           <calcite-chip
             class={{ [CSS_UTILITY.rtl]: dir === "rtl" }}
-            dir={dir}
             scale={scale}
             value={count?.toString()}
           >
diff --git a/src/components/calcite-split-button/calcite-split-button.tsx b/src/components/calcite-split-button/calcite-split-button.tsx
index 60094bbbba1..5a2b5be31ec 100644
--- a/src/components/calcite-split-button/calcite-split-button.tsx
+++ b/src/components/calcite-split-button/calcite-split-button.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Prop, VNode } from "@stencil/core";
 import { CSS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 import { ButtonAppearance, ButtonColor, DropdownIconType } from "../calcite-button/interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { OverlayPositioning } from "../../utils/popper";
@@ -72,7 +71,6 @@ export class CalciteSplitButton {
   @Event() calciteSplitButtonSecondaryClick: EventEmitter;
 
   render(): VNode {
-    const dir = getElementDir(this.el);
     const widthClasses = {
       [CSS.container]: true,
       [CSS.widthAuto]: this.width === "auto",
@@ -82,11 +80,10 @@ export class CalciteSplitButton {
     const buttonWidth = this.width === "auto" ? "auto" : "full";
 
     return (
-      <div class={widthClasses} dir={dir}>
+      <div class={widthClasses}>
         <calcite-button
           appearance={this.appearance}
           color={this.color}
-          dir={dir}
           disabled={this.disabled}
           icon-end={this.primaryIconEnd ? this.primaryIconEnd : null}
           icon-start={this.primaryIconStart ? this.primaryIconStart : null}
@@ -105,7 +102,6 @@ export class CalciteSplitButton {
         </div>
         <calcite-dropdown
           active={this.active}
-          dir={dir}
           onClick={this.calciteSplitButtonSecondaryClickHandler}
           overlayPositioning={this.overlayPositioning}
           placement="bottom-trailing"
@@ -115,7 +111,6 @@ export class CalciteSplitButton {
           <calcite-button
             appearance={this.appearance}
             color={this.color}
-            dir={dir}
             disabled={this.disabled}
             icon-start={this.dropdownIcon}
             label={this.dropdownLabel}
diff --git a/src/components/calcite-tab-title/calcite-tab-title.tsx b/src/components/calcite-tab-title/calcite-tab-title.tsx
index 3053940da40..637417d12e0 100644
--- a/src/components/calcite-tab-title/calcite-tab-title.tsx
+++ b/src/components/calcite-tab-title/calcite-tab-title.tsx
@@ -139,7 +139,6 @@ export class CalciteTabTitle {
     const iconStartEl = (
       <calcite-icon
         class="calcite-tab-title--icon icon-start"
-        dir={dir}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
         scale="s"
@@ -149,7 +148,6 @@ export class CalciteTabTitle {
     const iconEndEl = (
       <calcite-icon
         class="calcite-tab-title--icon icon-end"
-        dir={dir}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale="s"
diff --git a/src/components/functional/CalciteExpandToggle.tsx b/src/components/functional/CalciteExpandToggle.tsx
index da09608d1c9..1b98d793fd9 100644
--- a/src/components/functional/CalciteExpandToggle.tsx
+++ b/src/components/functional/CalciteExpandToggle.tsx
@@ -1,5 +1,5 @@
 import { FunctionalComponent, h } from "@stencil/core";
-import { getElementDir, getElementStyleDir } from "../../utils/dom";
+import { 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";
@@ -86,7 +86,6 @@ export const CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>
 
   const actionNode = (
     <calcite-action
-      dir={getElementDir(el) === "rtl" ? "rtl" : "ltr"}
       icon={expanded ? expandIcon : collapseIcon}
       onClick={toggle}
       ref={(referenceElement): HTMLCalciteActionElement =>