T/ckeditor5/645: Updated UI components to bring the support for the refreshed Lark #362
Conversation
…fix bugs with misaligned elements since the default font size has changed in Lark.
…. in the dropdown panel.
…d DropdownView tests.
| pointer-events: none; | ||
| z-index: var(--ck-z-default); | ||
|
|
||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate3d( 0, -50%, 0 ); | ||
| top: 52%; |
There was a problem hiding this comment.
I'm wondering why are we using here some "weird" numbers (52%, 55%)? Is the reason not perfectly centred align icons? As I see in the manual test there is no big difference with previous values and I made a little comparison, with 52% top dropdown icon fits not correctly to button box-size.
There was a problem hiding this comment.
I guess 52 vs. 55 is a bug. They should probably be the same.
But my intention was to make the arrow centered in terms of perception, not geometry. The arrow gravitates visually to the top so moving it down a little bit makes the alignment more appealing IMO.
| :root { | ||
| --ck-dropdown-icon-size: 10px; | ||
| } | ||
|
|
||
| .ck-dropdown { | ||
| display: inline-block; | ||
| position: relative; | ||
|
|
||
| /* A triangle displayed to indicate this is actually a dropdown. */ |
There was a problem hiding this comment.
IMO we can remove comment here, .ck-dropdown__arrow explains everything.
| @@ -5,21 +5,27 @@ | |||
|
|
|||
| @import "../tooltip/mixins/_tooltip.css"; | |||
|
|
|||
| :root { | |||
| --ck-dropdown-icon-size: 10px; | |||
There was a problem hiding this comment.
We need here em values. Let's change -ck-font-size-base to 40px:
Changing it to var(--ck-font-size-tiny) works well.
Suggested merge commit message (convention)
Feature: Updated UI components to bring the support for the refreshed Lark theme (see ckeditor/ckeditor5#645).
BREAKING CHANGE: The DOM structure of the dropdown component has changed. Please refer to the documentation to find out more.
BREAKING CHANGE: Basic properties of the balloon panel component have changed (i.e. the location of the arrow, the default positions), which may have an impact on existing integrations.
Additional information