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

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

Merged
merged 5 commits into from
Jan 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c73514d
[icons] fix: transformOrigin attribute name
adidahiya Dec 8, 2023
257874a
Merge remote-tracking branch 'origin/develop' into ad/transform-origi…
adidahiya Jan 4, 2024
e5f3a43
move transform-origin to <svg> element
adidahiya Jan 4, 2024
0d144b9
apply style in CSS
adidahiya Jan 4, 2024
6fe6fc6
suppress lint error
adidahiya Jan 4, 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
1 change: 0 additions & 1 deletion packages/icons/scripts/iconComponent.tsx.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const {{pascalCase iconName}}: React.FC<SVGIconProps> = React.forwardRef<
<path
d={isLarge ? "{{icon20pxPath}}" : "{{icon16pxPath}}"}
fillRule="evenodd"
transform-origin="center"
transform={`scale({{pathScaleFactor}}, -{{pathScaleFactor}}) translate(${translation}, ${translation})`}
/>
</SVGIconContainer>
Expand Down
14 changes: 14 additions & 0 deletions packages/icons/src/blueprint-icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,17 @@ Licensed under the Apache License, Version 2.0.

@import "generated/16px/blueprint-icons-16";
@import "generated/20px/blueprint-icons-20";

/* stylelint-disable-next-line @blueprintjs/no-prefix-literal -- we don't have access to core variables in this file */
.bp5-icon-svg {
// 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 apply the necessary style in CSS instead. Note that this needs to apply directly to the `<path>` element
// and not the container `<svg>`. See:
// - https://github.com/facebook/react/pull/26130
// - https://github.com/palantir/blueprint/issues/6591
path {
transform-origin: center;
}
}
1 change: 1 addition & 0 deletions packages/icons/src/classes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@

const NS = "bp5";
export const ICON = `${NS}-icon`;
export const ICON_SVG = `${ICON}-svg`;
7 changes: 4 additions & 3 deletions packages/icons/src/svgIconContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
const titleId = uniqueId("iconTitle");
const sharedSvgProps = {
"data-icon": iconName,
const sharedSvgProps: React.SVGProps<SVGSVGElement> = {
fill: color,
height: size,
role: "img",
Expand All @@ -81,9 +80,11 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
return (
<svg
aria-labelledby={title ? titleId : undefined}
data-icon={iconName}
ref={ref as React.Ref<SVGSVGElement>}
{...sharedSvgProps}
{...htmlProps}
className={classNames(Classes.ICON_SVG, className, svgProps?.className)}
>
{title && <title id={titleId}>{title}</title>}
{children}
Expand All @@ -99,7 +100,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
ref,
title: htmlTitle,
},
<svg {...sharedSvgProps}>
<svg data-icon={iconName} {...sharedSvgProps} className={classNames(Classes.ICON_SVG, svgProps?.className)}>
{title && <title>{title}</title>}
{children}
</svg>,
Expand Down