Button, Icon: fix iconSize prop doesn't work with some icons #43821
Conversation
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
t-hamano
added
[Type] Bug
Contributor
Author
|
This PR has changed the order of the attributes of the |
t-hamano
commented
Sep 2, 2022
| } ); | ||
|
|
||
| it( 'renders an svg element and passes the size as its width and height', () => { | ||
| it( 'renders an svg element and override its width and height', () => { |
Contributor
Author
There was a problem hiding this comment.
This test is originally intended to test that the width/height of the svg element is respected, but should be overridden by the size prop of the Icon component.
|
Size Change: +393 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
mirka
approved these changes
Sep 5, 2022
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
Works great, thanks 👍
Just to clarify so others don't get confused by the PR description: This fix is in the @wordpress/components Icon component, not the @wordpress/icons Icon. The wp-icons Icon component already works as expected on trunk.
packages/components/CHANGELOG.md
Outdated
|
|
||
| ### Bug Fix | ||
|
|
||
| - `Button`: Fix `iconSize` prop doesn't work with some icons ([#43821](https://github.com/WordPress/gutenberg/pull/43821)). |
Member
There was a problem hiding this comment.
We probably also want to mention that it was fixed in the Icon component.
t-hamano
changed the title
Contributor
Author
Thanks for pointing that out! The sample code I presented contains the wrong test 😅 Is this title appropriate as a commit message at merge time? |
Member
Works for me 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fix #43745
What?
This PR fixes an issue where theiconSizeprop of theButtoncomponent was not reflected in some icons.This PR fixes a problem in the
@wordpress/componentspackage where theiconSizeprop of theButtonandIconcomponent was not reflected in some icons.Why?
This is because the
iconSizeprop is overridden if the icon's svg element has awidth/heightattribute, as noted in this comment.The following are those icons:
How?
In the internal Icon component, I have made the passed props (such as iconSize) take precedence over the attributes of the SVG element.
Testing Instructions
Rewrite edit.js for any of the core blocks as follows and confirm that they all render at the expected size:
@add: This example also uses
@wordpress/iconsIcon, which is incorrect. It's not a problem with the@wordpress/iconspackage, as this comment states.helpicon on the left has no width / height attributes on the svg element.helpFilledicon on the right has width / height attributes on the svg element.On trunk
ON this branch
Screenshots or screencast