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.

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

chore(components): refactor InteractivePopover to take a type argument for the trigger element #6495

Merged
merged 2 commits into from
Dec 4, 2024

Conversation

kraenhansen
Copy link
Contributor

Description

As a follow-up to this #6486 (comment), I suggest adding a type argument to the InteractivePopover to specify the concrete HTMLElement used when declaring the type of the ref passed through the trigger callback.

We can't just pass React.Ref<HTMLElement> as that (as an example) isn't possible to pass via ref to a <button />:

const ref = React.useRef<HTMLElement>(null);
return <button ref={ref} />;

☝️ yields this TS error related to the ref prop:

Type 'RefObject<HTMLElement>' is not assignable to type 'LegacyRef<HTMLButtonElement> | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLButtonElement>'.
    Type 'HTMLElement' is missing the following properties from type 'HTMLButtonElement': disabled, form, formAction, formEnctype, and 15 more.ts(2322)

Checklist

Motivation and Context

  • Bugfix
  • New feature
  • Dependency update
  • Misc

Open Questions

Dependents

Types of changes

  • Backport Needed
  • Patch (non-breaking change which fixes an issue)
  • Minor (non-breaking change which adds functionality)
  • Major (fix or feature that would cause existing functionality to change)

@kraenhansen kraenhansen added the no-title-validation Skips validation of PR titles (conventional commit adherence + JIRA ticket inclusion) label Nov 14, 2024
@kraenhansen kraenhansen self-assigned this Nov 14, 2024
@@ -42,12 +42,12 @@ const closeButtonStyles = css({
right: spacing[2],
});

type InteractivePopoverProps = {
type InteractivePopoverProps<TriggerElement extends HTMLElement> = {
Copy link
Contributor Author

@kraenhansen kraenhansen Nov 14, 2024

Choose a reason for hiding this comment

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

This could have followed a pattern and be named T but it felt a bit too vague 🤔

@kraenhansen kraenhansen force-pushed the kh/refactor-interactive-popover branch from 406964e to a2ccca2 Compare November 14, 2024 13:34
@@ -102,7 +102,7 @@ export default function ConnectionsFilterPopover({
onMouseLeave={handleButtonMouseLeave}
active={open}
aria-label="Filter connections"
ref={ref as React.Ref<unknown>}
ref={ref}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I believe it's possible to pass the ref here without having to provide an explicit type parameter to the InteractivePopover above, is possible because the IconButton use the forwardRef utility internally.

Copy link
Collaborator

@gribnoysup gribnoysup left a comment

Choose a reason for hiding this comment

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

Neat, thanks for the follow up to clean this up!

@kraenhansen kraenhansen requested a review from Anemy November 14, 2024 18:20
@kraenhansen kraenhansen force-pushed the kh/refactor-interactive-popover branch from a2ccca2 to 02fd75e Compare November 28, 2024 11:51
@kraenhansen kraenhansen merged commit 0f249c3 into main Dec 4, 2024
30 checks passed
@kraenhansen kraenhansen deleted the kh/refactor-interactive-popover branch December 4, 2024 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
no-title-validation Skips validation of PR titles (conventional commit adherence + JIRA ticket inclusion)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants