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

[icons] fix: invalid DOM attribute warning for transform-origin #6594

Merged
merged 5 commits into from
Jan 4, 2024

Conversation

adidahiya
Copy link
Contributor

@adidahiya adidahiya commented Dec 8, 2023

Fixes #6591

Changes proposed in this pull request:

Fix attribute name typo

This turned out to be more complicated than originally anticipated. Despite being added to added as a supported SVG attribute to React in 2023, the transformOrigin JSX attribute
is still difficult to use in our statically-generated icon components (<AddClip>, <Calendar>, etc.) which rely on a centered scale transform="..." to display their <path> elements correctly. To work around this, we now apply the necessary style in CSS instead. Note that this needs to apply directly to the <path> element and not the container <svg>.

See:

Reviewers should focus on:

No regressions in icon behavior

Screenshot

image

image

image

@adidahiya adidahiya changed the title [icons] fix: transformOrigin attribute name [icons] fix: invalid DOM attribute warning for transform-origin Jan 4, 2024
@adidahiya
Copy link
Contributor Author

suppress lint error

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 267f271 into develop Jan 4, 2024
12 checks passed
@adidahiya adidahiya deleted the ad/transform-origin-icon branch January 4, 2024 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Invalid DOM property 'transform-origin' inside icon SVG elements
1 participant