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

fix(Icon, SVGIconContainer): add generic type param to specify root element type #6285

Merged
merged 5 commits into from
Jul 19, 2023

Conversation

adidahiya
Copy link
Contributor

@adidahiya adidahiya commented Jul 18, 2023

Changes proposed in this pull request:

This fixes a regression in @blueprintjs/core v5.1.x where <Icon> elements no longer accepted HTML attributes like draggable={true}. Previously, these attributes were unsafely allowed to be forwarded to the root element of any <Icon> component, even when tagName={null} and those the root element was an <svg> element which should not accept them.

After much iteration, I figured out a way to make <Icon> and <SVGIconContainer> each have a generic type parameter (similar to <Select>). This turned out to be a lot harder to do for function components which use React.forwardRef() than for class components. See my code comments for more info.

I added documentation and test cases to demonstrate the new behavior. This may be a bit of overkill (we could be a little unsafe and just allow React.HTMLAttributes to go through to <Icon> root elements), but it turned out to be an interesting exercise in exploring TypeScript generics & conditional types. I think it makes the public API a little more expressive.

Reviewers should focus on:

No regressions in <Icon> component props (these should be mostly covered by test cases).

Screenshot

N/A

@adidahiya
Copy link
Contributor Author

fix(Icon, SVGIconContainer): add generic type param to specify root element

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

suppress prefer-arrow-callback

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

Merge remote-tracking branch 'origin/develop' into ad/icon-html-attributes

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya
Copy link
Contributor Author

This change makes the props interface table a lot less usable than it used to be:

image

Before:

image

I'll look into improving this...

@adidahiya
Copy link
Contributor Author

update docs

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya adidahiya merged commit da85370 into develop Jul 19, 2023
12 checks passed
@adidahiya adidahiya deleted the ad/icon-html-attributes branch July 19, 2023 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant