From c73514d1c55203a2f5be499546fac9f0eade25ea Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Fri, 8 Dec 2023 08:22:02 -0500 Subject: [PATCH 1/4] [icons] fix: transformOrigin attribute name --- packages/icons/scripts/iconComponent.tsx.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/scripts/iconComponent.tsx.hbs b/packages/icons/scripts/iconComponent.tsx.hbs index 8ce8758639..b5a956be4b 100644 --- a/packages/icons/scripts/iconComponent.tsx.hbs +++ b/packages/icons/scripts/iconComponent.tsx.hbs @@ -27,7 +27,7 @@ export const {{pascalCase iconName}}: React.FC = React.forwardRef< From e5f3a436d312c2b7d6fe48faf9a557920d658632 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Thu, 4 Jan 2024 10:58:13 -0500 Subject: [PATCH 2/4] move transform-origin to element --- packages/icons/scripts/iconComponent.tsx.hbs | 1 - packages/icons/src/svgIconContainer.tsx | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/icons/scripts/iconComponent.tsx.hbs b/packages/icons/scripts/iconComponent.tsx.hbs index b5a956be4b..b1d20eb9f6 100644 --- a/packages/icons/scripts/iconComponent.tsx.hbs +++ b/packages/icons/scripts/iconComponent.tsx.hbs @@ -27,7 +27,6 @@ export const {{pascalCase iconName}}: React.FC = React.forwardRef< diff --git a/packages/icons/src/svgIconContainer.tsx b/packages/icons/src/svgIconContainer.tsx index ed992a72f9..fc09c3859a 100644 --- a/packages/icons/src/svgIconContainer.tsx +++ b/packages/icons/src/svgIconContainer.tsx @@ -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 = { fill: color, height: size, role: "img", @@ -81,7 +80,9 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func return ( } + transform-origin="center" {...sharedSvgProps} {...htmlProps} > @@ -99,7 +100,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func ref, title: htmlTitle, }, - + {title && {title}} {children} , From 0d144b969448f2ab81d8d4fd5f8128fdc655afdd Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Thu, 4 Jan 2024 11:22:59 -0500 Subject: [PATCH 3/4] apply style in CSS --- packages/icons/src/blueprint-icons.scss | 13 +++++++++++++ packages/icons/src/classes.ts | 1 + packages/icons/src/svgIconContainer.tsx | 4 ++-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/icons/src/blueprint-icons.scss b/packages/icons/src/blueprint-icons.scss index cffa457e1a..07267e7099 100644 --- a/packages/icons/src/blueprint-icons.scss +++ b/packages/icons/src/blueprint-icons.scss @@ -5,3 +5,16 @@ Licensed under the Apache License, Version 2.0. @import "generated/16px/blueprint-icons-16"; @import "generated/20px/blueprint-icons-20"; + +.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 (``, ``, etc.) + // which rely on a centered scale `transform="..."` to display their `` elements correctly. To work around + // this, we apply the necessary style in CSS instead. Note that this needs to apply directly to the `` element + // and not the container ``. See: + // - https://github.com/facebook/react/pull/26130 + // - https://github.com/palantir/blueprint/issues/6591 + path { + transform-origin: center; + } +} diff --git a/packages/icons/src/classes.ts b/packages/icons/src/classes.ts index 29f679e21a..374c804fc1 100644 --- a/packages/icons/src/classes.ts +++ b/packages/icons/src/classes.ts @@ -15,3 +15,4 @@ const NS = "bp5"; export const ICON = `${NS}-icon`; +export const ICON_SVG = `${ICON}-svg`; diff --git a/packages/icons/src/svgIconContainer.tsx b/packages/icons/src/svgIconContainer.tsx index fc09c3859a..721ca6b1cf 100644 --- a/packages/icons/src/svgIconContainer.tsx +++ b/packages/icons/src/svgIconContainer.tsx @@ -82,9 +82,9 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func aria-labelledby={title ? titleId : undefined} data-icon={iconName} ref={ref as React.Ref} - transform-origin="center" {...sharedSvgProps} {...htmlProps} + className={classNames(Classes.ICON_SVG, className, svgProps?.className)} > {title && {title}} {children} @@ -100,7 +100,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func ref, title: htmlTitle, }, - + {title && {title}} {children} , From 6fe6fc66e5b2b1ea30594f0fce13384f12cfd0b8 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Thu, 4 Jan 2024 12:14:35 -0500 Subject: [PATCH 4/4] suppress lint error --- packages/icons/src/blueprint-icons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/icons/src/blueprint-icons.scss b/packages/icons/src/blueprint-icons.scss index 07267e7099..058787ed4d 100644 --- a/packages/icons/src/blueprint-icons.scss +++ b/packages/icons/src/blueprint-icons.scss @@ -6,6 +6,7 @@ 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 (``, ``, etc.)