t/394: Block toolbar improvements

[oleq]

Suggested merge commit message (convention)

Other: Allowed list item's buttons to have an outer, visible box-shadow. Ensured the balloon panel's arrow does not cover panel's children. Closes ckeditor/ckeditor5#5456.

---

Additional information

Note: This is a piece of the constellation https://github.com/ckeditor/ckeditor5/tree/t/ckeditor5-ui/394 containing the following PRs:

• t/ckeditor5-ui/394: Used a solid box-shadow to indicate the :focus state of the .ck-button ckeditor5-theme-lark#187 (the best part of the PR)
• t/ckeditor5-ui/394: Refreshed the paragraph icon ckeditor5-paragraph#35 (icon)
• t/ckeditor5-ui/394: Refreshed the heading icons ckeditor5-heading#109 (icons)
• t/ckeditor5-ui/394: Refreshed the pilcrow icon ckeditor5-core#136 (icon)

Note: Please build docs and check out all guides/examples when reviewing.

Note: Screenshots from Letters would also help /cc @dkonopka

[Mgsy]

LGTM 👍

[pjasiun]

It looks good to me too, expect the pilcrow icon. I still feel it does not fit the rest of the interface, which is flat with no serifs. Since it is the most outstanding element of the editor which uses it (like Letters, it is the only icon users always see) we already spend much time to make it fit well. We may open a ticket about it, to improve it, but this ticket was not about it. I think we should bring such change through the back door.

[dkonopka]

Let's see new icons & buttons focus in the Letters, it looks nice 👍

And as I said in the past, this pilcrow icon is really stylish, but IMHO it's not fit well here 😢

[dkonopka]

Should we change focus color for disabled buttons (I mean decreased opacity/lightness)?

vs

[Reinmar]

It looks good to me too, expect the blockquote icon.

? Did you mean the pilcrow icon?

[Reinmar]

Regarding the pilcrow icon – its fanciness makes it stand out and I'd say that this is for good. The block toolbar's button is inlined on a page where CKEditor 5 is rendered. A more graphical icon makes it more distinctive. IMO, it's a bit more clear that this is a part of the UI. Something in line with what @scofalik mentioned too – that the button is too "flat". This icon may partially help with that.

---

We may open a ticket about it, to improve it, but this ticket was not about it.

Previously you wrote:

I want to make this ticket more generric to gather whole feedback about the UI of block toolbar in CKE 5.

The button is part of the block toolbar feature, so it's not completely out of the scope.

[pjasiun]

It looks good to me too, expect the blockquote icon.

? Did you mean the pilcrow icon?

Yes, I mean pilcrow icon. Can we move the discussion about it to the separate ticket, since already 3 people said it does not fit?

[oleq]

Should we change focus color for disabled buttons (I mean decreased opacity/lightness)?

Truth to tell, as I browsed Material UI and Bootstrap docs, I noticed that disabled items don't get focus in the first place. They're excluded from the navigation, which could be a solution for the issue (perhaps a followup?).

For now, we can make the outline less visible, as you suggested 👍

[Reinmar]

Can we move the discussion about it to the separate ticket, since already 3 people said it does not fit?

Sure. But not because 3 people said something.

[oleq]

FYI: De-serifed the pilcrow and adjusted the :focus shadows for disabled buttons in respective repos. Another round of review, please ;-)

[dkonopka]

👍

[pjasiun]

Looks great, feel free to merge it. 👍