Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: fixup typescript errors #10295

Merged
merged 2 commits into from
Sep 15, 2024
Merged

refactor: fixup typescript errors #10295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
433ddff
refactor: fixup typescript errors
maxpatiiuk Sep 13, 2024
a5a393c
fix(button,link): correctly handle empty string download prop
maxpatiiuk Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import { DatePickerMessages } from "./components/date-picker/assets/date-picker/
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { OverlayPositioning as OverlayPositioning1 } from "./components";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
Expand Down Expand Up @@ -134,7 +133,6 @@ export { DatePickerMessages } from "./components/date-picker/assets/date-picker/
export { DateLocaleData } from "./components/date-picker/utils";
export { HoverRange } from "./utils/date";
export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { OverlayPositioning as OverlayPositioning1 } from "./components";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
Expand Down Expand Up @@ -1752,7 +1750,7 @@ export namespace Components {
/**
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning": OverlayPositioning1;
"overlayPositioning": OverlayPositioning;
/**
* Specifies the placement of the dialog.
*/
Expand Down Expand Up @@ -9795,7 +9793,7 @@ declare namespace LocalJSX {
/**
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning"?: OverlayPositioning1;
"overlayPositioning"?: OverlayPositioning;
/**
* Specifies the placement of the dialog.
*/
Expand Down
6 changes: 5 additions & 1 deletion packages/calcite-components/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,11 @@ export class Button
}}
disabled={childElType === "button" ? this.disabled || this.loading : null}
download={
childElType === "a" && (this.download === "" || this.download) ? this.download : null
childElType === "a"
Copy link
Member Author

@maxpatiiuk maxpatiiuk Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with this change, when this.download is true, we set the prop as "" instead.
not required for Stencil, but this is needed for Lit as download attribute is typed as string rather than string | boolean in Lumina for technical reasons (it's one few such special attributes for legacy dom reasons)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be updated or reverted. It breaks this test.

This change changes how the internal element's download attribute is applied.

before

Screenshot 2024-09-13 at 10 19 03 PM

after

Screenshot 2024-09-13 at 10 21 15 PM

? this.download === true || this.download === ""
? ""
: this.download || null
: null
}
href={childElType === "a" && this.href}
name={childElType === "button" && this.name}
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import {
import { componentOnReady } from "../../utils/component";
import { SLOTS as PANEL_SLOTS } from "../panel/resources";
import { HeadingLevel } from "../functional/Heading";
import { OverlayPositioning } from "../../components";
import type { OverlayPositioning } from "../../utils/floating-ui";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since components.d.ts will be deleted, I'm changing this to import from the actual origin

import { DialogMessages } from "./assets/dialog/t9n";
import {
CSS,
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/functional/FloatingArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { FunctionalComponent, h, VNode } from "@stencil/core";
import { JSXAttributes } from "@stencil/core/internal";
import { FloatingLayout } from "../../utils/floating-ui";

interface FloatingArrowProps extends JSXAttributes {
interface FloatingArrowProps extends JSXAttributes<SVGSVGElement> {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this way ref callback is typed correctly, rather than as broad Element

floatingLayout: FloatingLayout;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/handle/handle.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, disabled, hidden, renders, themed, t9n } from "../../tests/commonTests";
import { HandleMessages } from "../../components";
import type { HandleMessages } from "./assets/handle/t9n";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rearrangement causes an import/order lint error. Can you run the linter to autofix?

If you have a custom groups option for that rule, I can update ours separately to follow suit.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, interesting that pre-commit hook didn't catch this. maybe my node_modules was out of date 🤔

import { CSS, SUBSTITUTIONS } from "./resources";

describe("calcite-handle", () => {
Expand Down
6 changes: 4 additions & 2 deletions packages/calcite-components/src/components/link/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,9 @@ export class Link implements InteractiveComponent, LoadableComponent {
When the 'download' property of type 'boolean | string' is set to true, the value is "".
This works around that issue for now.
*/
download={Tag === "a" && (download === "" || download) ? download : null}
download={
Tag === "a" ? (download === true || download === "" ? "" : download || null) : null
}
href={Tag === "a" && this.href}
onClick={this.childElClickHandler}
ref={this.storeTagRef}
Expand Down Expand Up @@ -174,7 +176,7 @@ export class Link implements InteractiveComponent, LoadableComponent {
/** the rendered child element */
private childEl: HTMLAnchorElement | HTMLSpanElement;

private childElClickHandler = (event: PointerEvent): void => {
private childElClickHandler = (event: MouseEvent): void => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClick emits MouseEvent, not PointerEvent

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW, this might change in the near future since Chrome and Firefox already emit pointer events, and it looks like Safari will soon (adhering to the updated spec).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fyi.
I will revert this change and update Lumina's JSX typings.

For the future, I am looking to automate the process of keeping Lumina's JSX typings up to date with the web platform to fix the DX issue we are having with Maquette and Stencil.

if (!event.isTrusted) {
// click was invoked internally, we stop it here
event.stopPropagation();
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,7 +700,7 @@ export class Panel
};

render(): VNode {
const { disabled, loading, panelKeyDownHandler, isClosed } = this;
const { disabled, loading, isClosed } = this;

const panelNode = (
<article
Expand All @@ -718,7 +718,7 @@ export class Panel
);

return (
<Host onKeyDown={panelKeyDownHandler}>
<Host onKeyDown={this.panelKeyDownHandler}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noop change, but this makes it easy for the codemod to refactor-out <Host>

I earlier mentioned that special utils would be needed to replace <Host> in Lit, but after reading <Host> source code in Stencil, that doesn't seem to be necessary

<InteractiveContainer disabled={disabled}>
{loading ? <calcite-scrim loading={loading} /> : null}
{panelNode}
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ export class Popover

@State() defaultMessages: PopoverMessages;

arrowEl: SVGElement;
arrowEl: SVGSVGElement;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the correct type for the <svg> element is SVGSVGElement.
SVGElement means "any element from the SVG namespace", just like HTMLElement means "any element from the HTML namespace"


closeButtonEl: HTMLCalciteActionElement;

Expand Down Expand Up @@ -515,7 +515,7 @@ export class Popover
deactivateFocusTrap(this);
}

storeArrowEl = (el: SVGElement): void => {
storeArrowEl = (el: SVGSVGElement): void => {
this.arrowEl = el;
this.reposition(true);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/rating/rating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ export class Rating
}
};

private handleInputChange = (event: InputEvent) => {
private handleInputChange = (event: Event) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onChange emits Event
onInput emits InputEvent

if (this.isKeyboardInteraction === true) {
const inputVal = Number(event.target["value"]);
this.hoverValue = inputVal;
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/tooltip/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {

@State() floatingLayout: FloatingLayout = "vertical";

arrowEl: SVGElement;
arrowEl: SVGSVGElement;

guid = `calcite-tooltip-${guid()}`;

Expand Down Expand Up @@ -344,7 +344,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
>
<FloatingArrow
floatingLayout={floatingLayout}
ref={(arrowEl: SVGElement) => (this.arrowEl = arrowEl)}
ref={(arrowEl) => (this.arrowEl = arrowEl)}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no longer need to type this here now that FloatingArrow ref type is typed correctly

/>
<div class={CSS.container}>
<slot />
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/utils/floating-ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const positionFloatingUI =
flipPlacements?: FlipPlacement[];
offsetDistance?: number;
offsetSkidding?: number;
arrowEl?: SVGElement;
arrowEl?: SVGSVGElement;
type: UIType;
},
): Promise<void> => {
Expand Down Expand Up @@ -335,7 +335,7 @@ function getMiddleware({
flipPlacements?: EffectivePlacement[];
offsetDistance?: number;
offsetSkidding?: number;
arrowEl?: SVGElement;
arrowEl?: SVGSVGElement;
type: UIType;
}): Middleware[] {
const defaultMiddleware = [shift(), hide()];
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/utils/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { FunctionalComponent, h, VNode } from "@stencil/core";
import { Writable } from "type-fest";
import { IconNameOrString, Status } from "../components";
import { Status } from "../components/interfaces";
import type { IconNameOrString } from "../components/icon/interfaces";
import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/utils/selectableComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { SelectionMode } from "../components";
import { SelectionMode } from "../components/interfaces";

/**
* Defines interface for group components that manage selection behavior of their children.
Expand Down
1 change: 0 additions & 1 deletion packages/eslint-plugin-calcite-components/src/rules/require-event-emitter-type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Rule } from "eslint";
// @ts-ignore
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PSA: do not use // @ts-ignore as it's dangerous.
Reason: once the thing that was causing the TypeScript error is fixed, the // @ts-ignore comment may remain in the code. In the future, if another TypeScript error may occur in that place, you won't see it because // @ts-ignore would hide it.

Safer alternative: // @ts-expect-error - acts just like // @ts-ignore, except, if no error was reported, TypeScript will complain of needless // @ts-expect-error (just like it was needless in this case it seems like)

import { stencilComponentContext } from "stencil-eslint-core";

const rule: Rule.RuleModule = {
Expand Down
1 change: 0 additions & 1 deletion packages/eslint-plugin-calcite-components/src/rules/strict-boolean-attributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Rule } from "eslint";
// @ts-ignore
import { getDecorator, stencilComponentContext } from "stencil-eslint-core";

const rule: Rule.RuleModule = {
Expand Down
Loading