Improve UI panel arrow design

[msamsel]

Type of report

Feature request

Provide description of the new feature

Extracted from #2062 (comment)

Arrow next to UI panel button seems to be a little to close to icon. In case of emoji dropdown (maybe also in background) it's clearly visible. We should be able to somehow control position of this arrow or just improve its position to be better in such scenarios.

[jacekbogdanski]

Arrow has already attached CSS class and so emoji button. I wonder if we really need special treatment for the case which could by already easily styled by CSS?

.cke_button__emojipanel .cke_button_arrow {
  margin-left: 5px;
}

WDYT @mlewand, @msamsel ?

[mlewand]

I think the change should be applied to all icons that have this kind of arrow. Language/SCAYT dropdown also look kinda weird with the arrow so close to it.

However simply increasing causes our toolbar to go into 4 lines for the full preset, which is not an option. So we need to adjust that, maybe shaving some padding somewhere else?

[jacekbogdanski]

I changed left margin from 1 to 2px. Unfortunately, the bigger margin will require cutting some other buttons to avoid line wrapping which don't seem good also. Take a look on screenshot please, especially @dkonopka :

[dkonopka]

☝️ Still, 2px looks too small spacing IMHO. How does it look with for example 4 pixels?

[jacekbogdanski]

4 pixels look definitely better, although they wrap the first line of the toolbar which as @mlewand mentioned creates 4 lines for full CKEditor. I was wondering about changing the padding size of buttons but they are just perfect sized in my eye. Do you see some place where we can cut some pixels to fit full editor in 3 lines?

4px margin:

[jacekbogdanski]

It seems like line wrapping is caused by container outside of the editor. It makes me wonder if we can change anything without sacrificing some space of existing toolbar elements. Any change resulting in bigger/smaller toolbar may break some users interfaces - even as small as 1px margin.

I think we may update a little our button element with class giving us information if the button is expandable and if so - shrink its left and right paddings to build a place for arrow margin. It's already possible with aria-haspopup="true" but I prefer to not rely CSS styles on aria labels. I will try this approach to see if it's working correctly.