refactor: Remove setting 'dir' attribute within components. #2079

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}

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"

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}

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">

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>
     );

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)}

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}

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}

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"

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}

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

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}

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}

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>
     );

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}