refactor(components): reduce post-migration TypeScript errors (#10356)

Minor refactor - some HTML attributes are reflected to properties. Thus, we can access properties instead of calling getAttribute/hasAttribute. Properties are also more type-safe (where as getAttribute string parameter does not have type-checking) And other minor changes.
Esri · Sep 24, 2024 · 97d8bb8 · 97d8bb8
1 parent 427ee46
commit 97d8bb8
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 23 deletions.
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -267,7 +267,7 @@ export class Button
       <InteractiveContainer disabled={this.disabled}>
         <Tag
           aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
-          aria-expanded={this.el.getAttribute("aria-expanded")}
+          aria-expanded={this.el.ariaExpanded}
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
           class={{

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -255,7 +255,6 @@ export class Dialog
             [CSS.containerOpen]: opened,
             [CSS.containerEmbedded]: this.embedded,
           }}
-          ref={this.setContainerEl}
         >
           {this.modal ? (
             <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />
@@ -364,8 +363,6 @@ export class Dialog
 
   transitionEl: HTMLDivElement;
 
-  containerEl: HTMLDivElement;
-
   focusTrap: FocusTrap;
 
   private resizePosition: DialogResizePosition = { ...initialResizePosition };
@@ -764,10 +761,6 @@ export class Dialog
     }
   }
 
-  private setContainerEl = (el: HTMLDivElement): void => {
-    this.containerEl = el;
-  };
-
   private setTransitionEl = (el: HTMLDivElement): void => {
     this.transitionEl = el;
     this.setupInteractions();

diff --git a/packages/calcite-components/src/components/functional/Heading.tsx b/packages/calcite-components/src/components/functional/Heading.tsx
@@ -17,7 +17,7 @@ export const Heading: FunctionalComponent<HeadingProps> = (props, children): VNo
   delete props.level;
 
   return (
-    <HeadingTag class={props.class} key={props.key} level={props.level}>
+    <HeadingTag class={props.class} key={props.key}>
       {children}
     </HeadingTag>
   );

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -774,9 +774,9 @@ export class InputDatePicker
 
   @State() private localeData: DateLocaleData;
 
-  private startInput: HTMLCalciteInputElement;
+  private startInput: HTMLCalciteInputTextElement;
 
-  private endInput: HTMLCalciteInputElement;
+  private endInput: HTMLCalciteInputTextElement;
 
   private floatingEl: HTMLDivElement;
 
@@ -884,11 +884,11 @@ export class InputDatePicker
     syncHiddenFormInput("date", this, input);
   }
 
-  setStartInput = (el: HTMLCalciteInputElement): void => {
+  setStartInput = (el: HTMLCalciteInputTextElement): void => {
     this.startInput = el;
   };
 
-  setEndInput = (el: HTMLCalciteInputElement): void => {
+  setEndInput = (el: HTMLCalciteInputTextElement): void => {
     this.endInput = el;
   };
 

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -363,7 +363,7 @@ export class InputTimePicker
 
   @Element() el: HTMLCalciteInputTimePickerElement;
 
-  @State() calciteInputEl: HTMLCalciteInputElement;
+  @State() calciteInputEl: HTMLCalciteInputTextElement;
 
   defaultValue: InputTimePicker["value"];
 
@@ -853,7 +853,7 @@ export class InputTimePicker
     this.openHandler();
   };
 
-  private setInputEl = (el: HTMLCalciteInputElement): void => {
+  private setInputEl = (el: HTMLCalciteInputTextElement): void => {
     this.calciteInputEl = el;
   };
 

diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
@@ -114,15 +114,19 @@ export class Link implements InteractiveComponent, LoadableComponent {
           This works around that issue for now.
           */
             download={
-              Tag === "a" ? (download === true || download === "" ? "" : download || null) : null
+              childElType === "a"
+                ? download === true || download === ""
+                  ? ""
+                  : download || null
+                : null
             }
-            href={Tag === "a" && this.href}
+            href={childElType === "a" && this.href}
             onClick={this.childElClickHandler}
             ref={this.storeTagRef}
-            rel={Tag === "a" && this.rel}
+            rel={childElType === "a" && this.rel}
             role={role}
             tabIndex={tabIndex}
-            target={Tag === "a" && this.target}
+            target={childElType === "a" && this.target}
           >
             {this.iconStart ? iconStartEl : null}
             <slot />

diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx
@@ -228,7 +228,7 @@ export class CalciteMenu implements LocalizedComponent, T9nComponent, LoadableCo
   }
 
   private getEffectiveRole(): string {
-    return this.el.getAttribute("role") || "menubar";
+    return this.el.role || "menubar";
   }
 
   // --------------------------------------------------------------------------

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -146,8 +146,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   guid = `calcite-tooltip-${guid()}`;
 
-  hasLoaded = false;
-
   openTransitionProp = "opacity";
 
   transitionEl: HTMLDivElement;
@@ -175,7 +173,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
-    this.hasLoaded = true;
   }
 
   disconnectedCallback(): void {