From bda9996e5daf7f4d7eedd8c7cf4eab369a92dc7f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 13 Feb 2019 07:35:05 +0100 Subject: [PATCH] Fix icon size regression in Switcher (#13767) * 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. --- .../editor/src/components/block-switcher/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js index 3bd61ff38e210..4a7413fb36422 100644 --- a/packages/editor/src/components/block-switcher/index.js +++ b/packages/editor/src/components/block-switcher/index.js @@ -116,10 +116,13 @@ export class BlockSwitcher extends Component { label={ label } tooltip={ label } onKeyDown={ openOnArrowDown } - > - - - + icon={ ( + + + + + ) } + /> ); } }