Skip to content

Commit

Permalink
Fix icon size regression in Switcher (#13767)
Browse files Browse the repository at this point in the history
* Fix icon size regression in Switcher

In #12901, a small margin was introduced to the IconButton component when text was present. This caused an issue with block icons, scaling them down when they shouldn't be. A 20x20px icon should show as 20x20, and a 24x24px icon should show as 24x24px.

The additional margin was applied even when the IconButton didn't actually have text. It simply needed `children`, and in the case of the Switcher, it has a dropdown arrow. Combined with the fixed width of the switcher, that meant a 24x24 icon would be rendered as 20x24.

This PR adds a length check so if your IconButton includes more than 2 letters, it's considered to have a text label. This fixes the issue. But as you can tell, maybe it's not the best way to check whether there's text or not. Suggestions most welcome.

* Address feedback.

Props @aduth for essentially writing this PR.
  • Loading branch information
jasmussen authored and youknowriad committed Mar 6, 2019
1 parent acf42c2 commit bda9996
Showing 1 changed file with 7 additions and 4 deletions.
11 changes: 7 additions & 4 deletions packages/editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,13 @@ export class BlockSwitcher extends Component {
label={ label }
tooltip={ label }
onKeyDown={ openOnArrowDown }
>
<BlockIcon icon={ icon } showColors />
<SVG className="editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></SVG>
</IconButton>
icon={ (
<Fragment>
<BlockIcon icon={ icon } showColors />
<SVG className="editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></SVG>
</Fragment>
) }
/>
</Toolbar>
);
} }
Expand Down

0 comments on commit bda9996

Please sign in to comment.