Button, Icon: fix iconSize prop doesn't work with some icons #43821
Conversation
This file contains 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
|
This PR has changed the order of the attributes of the |
t-hamano
commented
Sep 2, 2022
| @@ -63,7 +63,7 @@ describe( 'Icon', () => { | |||
| expect( wrapper.prop( 'height' ) ).toBe( 24 ); | |||
| } ); | |||
|
|
|||
| 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', () => { | |||
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
packages/components/CHANGELOG.md
Outdated
| @@ -4,12 +4,13 @@ | |||
|
|
|||
| ### Bug Fix | |||
|
|
|||
| - `Button`: Fix `iconSize` prop doesn't work with some icons ([#43821](https://github.com/WordPress/gutenberg/pull/43821)). | |||
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
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? |
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