Added missing attribute transform-origin#26115
Closed
arav-ind wants to merge 4 commits intofacebook:mainfrom
Closed
Added missing attribute transform-origin#26115arav-ind wants to merge 4 commits intofacebook:mainfrom
arav-ind wants to merge 4 commits intofacebook:mainfrom
Conversation
|
Comparing: 78d2e9e...cc2c487 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
eps1lon
requested changes
Feb 8, 2023
Collaborator
There was a problem hiding this comment.
This is missing an update to DOMProperty to ensure transformOrigin is written as transform-origin to the DOM.
Made the necessary local changes but since you made the PR from your default branch instead of a new one, I can't push them. In the future, please create a new branch, make the PR from that branch and allow maintainers to edit.
patches
commit b0af6973c6fb899b989b5421c890dbc56ee784d0
Author: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed Feb 8 16:36:19 2023 +0100
Ensure correct attribute is written
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 55928a644..559a82fa4 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -1,4 +1,4 @@
-## `about` (on `<div>` inside `<div>`)
+## `about` (on `<div>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `about=(string)`| (changed)| `"a string"` |
@@ -11401,23 +11401,23 @@
## `transformOrigin` (on `<svg>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
-| `transformOrigin=(string)`| (initial)| `<null>` |
-| `transformOrigin=(empty string)`| (initial)| `<null>` |
-| `transformOrigin=(array with string)`| (initial)| `<null>` |
-| `transformOrigin=(empty array)`| (initial)| `<null>` |
-| `transformOrigin=(object)`| (initial)| `<null>` |
-| `transformOrigin=(numeric string)`| (initial)| `<null>` |
-| `transformOrigin=(-1)`| (initial)| `<null>` |
-| `transformOrigin=(0)`| (initial)| `<null>` |
-| `transformOrigin=(integer)`| (initial)| `<null>` |
-| `transformOrigin=(NaN)`| (initial, warning)| `<null>` |
-| `transformOrigin=(float)`| (initial)| `<null>` |
+| `transformOrigin=(string)`| (changed)| `"a string"` |
+| `transformOrigin=(empty string)`| (changed)| `<empty string>` |
+| `transformOrigin=(array with string)`| (changed)| `"string"` |
+| `transformOrigin=(empty array)`| (changed)| `<empty string>` |
+| `transformOrigin=(object)`| (changed)| `"result of toString()"` |
+| `transformOrigin=(numeric string)`| (changed)| `"42"` |
+| `transformOrigin=(-1)`| (changed)| `"-1"` |
+| `transformOrigin=(0)`| (changed)| `"0"` |
+| `transformOrigin=(integer)`| (changed)| `"1"` |
+| `transformOrigin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transformOrigin=(float)`| (changed)| `"99.99"` |
| `transformOrigin=(true)`| (initial, warning)| `<null>` |
| `transformOrigin=(false)`| (initial, warning)| `<null>` |
-| `transformOrigin=(string 'true')`| (initial)| `<null>` |
-| `transformOrigin=(string 'false')`| (initial)| `<null>` |
-| `transformOrigin=(string 'on')`| (initial)| `<null>` |
-| `transformOrigin=(string 'off')`| (initial)| `<null>` |
+| `transformOrigin=(string 'true')`| (changed)| `"true"` |
+| `transformOrigin=(string 'false')`| (changed)| `"false"` |
+| `transformOrigin=(string 'on')`| (changed)| `"on"` |
+| `transformOrigin=(string 'off')`| (changed)| `"off"` |
| `transformOrigin=(symbol)`| (initial, warning)| `<null>` |
| `transformOrigin=(function)`| (initial, warning)| `<null>` |
| `transformOrigin=(null)`| (initial)| `<null>` |
diff --git a/packages/react-dom-bindings/src/shared/DOMProperty.js b/packages/react-dom-bindings/src/shared/DOMProperty.js
index 1c73df1a6..9e7b7bf67 100644
--- a/packages/react-dom-bindings/src/shared/DOMProperty.js
+++ b/packages/react-dom-bindings/src/shared/DOMProperty.js
@@ -521,6 +521,7 @@ const capitalize = (token: string) => token[1].toUpperCase();
'text-anchor',
'text-decoration',
'text-rendering',
+ 'transform-origin',
'underline-position',
'underline-thickness',
'unicode-bidi',
commit 270a6ccd52a73d6b3aa3de95c62dbf9d55e50c23
Author: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed Feb 8 16:13:52 2023 +0100
Add to attribute-behavior fixture
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 93ae5b010..55928a644 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -11373,6 +11373,56 @@
| `transform=(null)`| (initial)| `[]` |
| `transform=(undefined)`| (initial)| `[]` |
+## `transform-origin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transform-origin=(string)`| (changed, warning)| `"a string"` |
+| `transform-origin=(empty string)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(array with string)`| (changed, warning)| `"string"` |
+| `transform-origin=(empty array)`| (changed, warning)| `<empty string>` |
+| `transform-origin=(object)`| (changed, warning)| `"result of toString()"` |
+| `transform-origin=(numeric string)`| (changed, warning)| `"42"` |
+| `transform-origin=(-1)`| (changed, warning)| `"-1"` |
+| `transform-origin=(0)`| (changed, warning)| `"0"` |
+| `transform-origin=(integer)`| (changed, warning)| `"1"` |
+| `transform-origin=(NaN)`| (changed, warning)| `"NaN"` |
+| `transform-origin=(float)`| (changed, warning)| `"99.99"` |
+| `transform-origin=(true)`| (initial, warning)| `<null>` |
+| `transform-origin=(false)`| (initial, warning)| `<null>` |
+| `transform-origin=(string 'true')`| (changed, warning)| `"true"` |
+| `transform-origin=(string 'false')`| (changed, warning)| `"false"` |
+| `transform-origin=(string 'on')`| (changed, warning)| `"on"` |
+| `transform-origin=(string 'off')`| (changed, warning)| `"off"` |
+| `transform-origin=(symbol)`| (initial, warning)| `<null>` |
+| `transform-origin=(function)`| (initial, warning)| `<null>` |
+| `transform-origin=(null)`| (initial, warning)| `<null>` |
+| `transform-origin=(undefined)`| (initial, warning)| `<null>` |
+
+## `transformOrigin` (on `<svg>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `transformOrigin=(string)`| (initial)| `<null>` |
+| `transformOrigin=(empty string)`| (initial)| `<null>` |
+| `transformOrigin=(array with string)`| (initial)| `<null>` |
+| `transformOrigin=(empty array)`| (initial)| `<null>` |
+| `transformOrigin=(object)`| (initial)| `<null>` |
+| `transformOrigin=(numeric string)`| (initial)| `<null>` |
+| `transformOrigin=(-1)`| (initial)| `<null>` |
+| `transformOrigin=(0)`| (initial)| `<null>` |
+| `transformOrigin=(integer)`| (initial)| `<null>` |
+| `transformOrigin=(NaN)`| (initial, warning)| `<null>` |
+| `transformOrigin=(float)`| (initial)| `<null>` |
+| `transformOrigin=(true)`| (initial, warning)| `<null>` |
+| `transformOrigin=(false)`| (initial, warning)| `<null>` |
+| `transformOrigin=(string 'true')`| (initial)| `<null>` |
+| `transformOrigin=(string 'false')`| (initial)| `<null>` |
+| `transformOrigin=(string 'on')`| (initial)| `<null>` |
+| `transformOrigin=(string 'off')`| (initial)| `<null>` |
+| `transformOrigin=(symbol)`| (initial, warning)| `<null>` |
+| `transformOrigin=(function)`| (initial, warning)| `<null>` |
+| `transformOrigin=(null)`| (initial)| `<null>` |
+| `transformOrigin=(undefined)`| (initial)| `<null>` |
+
## `type` (on `<button>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
index b84a0d11d..c0e5a133f 100644
--- a/fixtures/attribute-behavior/src/attributes.js
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -1981,6 +1981,16 @@ const attributes = [
overrideStringValue:
'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
},
+ {
+ name: 'transform-origin',
+ tagName: 'svg',
+ read: getSVGAttribute('transform-origin'),
+ },
+ {
+ name: 'transformOrigin',
+ tagName: 'svg',
+ read: getSVGAttribute('transform-origin'),
+ },
{name: 'type', tagName: 'button', overrideStringValue: 'reset'},
{
name: 'type',
Contributor
Author
Hi.. Sorry for this. This is my first PR. I will make sure this does not happen in future. So, now I just need to integrate the patches to my main and update the PR. Is that correct? |
Collaborator
Yep! Though I'd recommend, redoing it with the GitHub flow explained below for practice. Then I can push my patches directly.
No worries. Happy to assist. Let me know if https://docs.github.com/en/get-started/quickstart/github-flow#prerequisites helps or if there's anything unclear. |
Contributor
Author
I have created a new PR as recommended. Please let me know if anything incorrect. |
Collaborator
|
Clsoing in favor of #26130 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR resolves #26112
While trying to use the attribute
transformOrigin, we get the following warning.'React does not recognize the
transformOriginprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasetransformorigininstead. If you accidentally passed it from a parent component, remove it from the DOM element.'This issue was already raised by #11265, at that point 'transform-origin' was not a valid SVG attribute.
As mentioned in #26112, transform-origin is now a proper SVG attribute (seen here).
So added the same to possibleStandardNames.
How did you test this change?
The issue can be seen here
I made the changes and run
yarn build react/index,react-dom/index --type=UMD. Please find the bundle screenshot.Added the following changes in
fixtures/packaging/babel-standalone/dev.html, to verify the issue.transformOrigin.