From 05e947c33c212b657333344d0ad4914e07f408f8 Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Thu, 19 Sep 2024 10:47:57 -0700 Subject: [PATCH 1/4] refactor: simplify reflected attribute accesses --- .../calcite-components/src/components/button/button.tsx | 2 +- .../calcite-components/src/components/dialog/dialog.tsx | 7 ------- .../components/input-date-picker/input-date-picker.tsx | 8 ++++---- .../src/components/input-number/input-number.tsx | 4 ++-- .../src/components/input-text/input-text.tsx | 4 ++-- .../calcite-components/src/components/input/input.tsx | 6 +++--- packages/calcite-components/src/components/menu/menu.tsx | 2 +- 7 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index ffbae59a0be..0055426a824 100644 --- 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 {this.modal ? ( @@ -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/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index c4d1d1a7e0e..3abe5824478 100644 --- 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-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index ac3a9d14042..56e6b1c4af0 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -1095,8 +1095,8 @@ export class InputNumber autofocus={this.el.autofocus ? true : null} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")} - inputMode={this.el.inputMode || this.el.getAttribute("inputmode") || "decimal"} + enterKeyHint={this.el.enterKeyHint} + inputMode={this.el.inputMode || "decimal"} key="localized-input" maxLength={this.maxLength} minLength={this.minLength} diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 746d854f78a..56a53b63545 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -680,8 +680,8 @@ export class InputText }} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")} - inputMode={this.el.inputMode || this.el.getAttribute("inputmode")} + enterKeyHint={this.el.enterKeyHint} + inputMode={this.el.inputMode} maxLength={this.maxLength} minLength={this.minLength} name={this.name} diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 82bb21206ce..ac0a6b14c9d 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -1171,9 +1171,9 @@ export class Input const prefixText =
{this.prefixText}
; const suffixText =
{this.suffixText}
; - const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null; - const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"); - const inputMode = this.el.inputMode || this.el.getAttribute("inputmode"); + const autofocus = this.el.autofocus ? true : null; + const enterKeyHint = this.el.enterKeyHint; + const inputMode = this.el.inputMode; const localeNumberInput = this.type === "number" ? ( diff --git a/packages/calcite-components/src/components/menu/menu.tsx b/packages/calcite-components/src/components/menu/menu.tsx index 32bc6ff2ee6..4419f854140 100644 --- 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"; } // -------------------------------------------------------------------------- From 9e64d87495dbe0988fe16a262e746fbca81cf34d Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Thu, 19 Sep 2024 11:10:20 -0700 Subject: [PATCH 2/4] refactor: use correct input-text type --- .../src/components/input-number/input-number.tsx | 4 ++-- .../src/components/input-text/input-text.tsx | 4 ++-- .../src/components/input-time-picker/input-time-picker.tsx | 4 ++-- packages/calcite-components/src/components/input/input.tsx | 6 +++--- .../calcite-components/src/components/tooltip/tooltip.tsx | 3 --- 5 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 56e6b1c4af0..ac3a9d14042 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -1095,8 +1095,8 @@ export class InputNumber autofocus={this.el.autofocus ? true : null} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.el.enterKeyHint} - inputMode={this.el.inputMode || "decimal"} + enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")} + inputMode={this.el.inputMode || this.el.getAttribute("inputmode") || "decimal"} key="localized-input" maxLength={this.maxLength} minLength={this.minLength} diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 56a53b63545..746d854f78a 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -680,8 +680,8 @@ export class InputText }} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.el.enterKeyHint} - inputMode={this.el.inputMode} + enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")} + inputMode={this.el.inputMode || this.el.getAttribute("inputmode")} maxLength={this.maxLength} minLength={this.minLength} name={this.name} 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 index b4ed46414a4..84260c9a7f8 100644 --- 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/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index ac0a6b14c9d..82bb21206ce 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -1171,9 +1171,9 @@ export class Input const prefixText =
{this.prefixText}
; const suffixText =
{this.suffixText}
; - const autofocus = this.el.autofocus ? true : null; - const enterKeyHint = this.el.enterKeyHint; - const inputMode = this.el.inputMode; + const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null; + const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"); + const inputMode = this.el.inputMode || this.el.getAttribute("inputmode"); const localeNumberInput = this.type === "number" ? ( diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx index e7682bf3d73..46babba2918 100644 --- 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 { From 5696e2270b8d178c8f6241fef8defbe583620226 Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Tue, 24 Sep 2024 12:08:02 -0700 Subject: [PATCH 3/4] refactor(link): don't conflate JSX tag name and string `Tag` and `childElType` are the same in Stencil, but will be different in Lit - so we should use `childElType` in places where the string check is needed. --- .../calcite-components/src/components/link/link.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index fdbae4c2c2e..0ca6c891e6a 100644 --- 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} From a73a79de864d2f22a0b2ec6a543793230217f6d9 Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Tue, 24 Sep 2024 12:09:41 -0700 Subject: [PATCH 4/4] fix(Heading): remove non-existent dom prop --- .../calcite-components/src/components/functional/Heading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/functional/Heading.tsx b/packages/calcite-components/src/components/functional/Heading.tsx index 11da0cfe095..9e77ff3d722 100644 --- 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 = (props, children): VNo delete props.level; return ( - + {children} );