Ckeditor5: Implement Alignment UI as split button

[jodator]

From @oleq's input from ckeditor/ckeditor5#2113 about UI:

1. Each alignment style will have own UI toolbar button.
2. By default, the buttons will be aggregated in the group.
   
   It's a TODO because ATM there's no such possibility. Things to consider:
   
   
   
   1. A new UI component (dropdown) that groups other components is needed.
   
   
   2. How would toolbar config look like?
   
   
   3. Should it be configurable at all? Or maybe the AlignmentUI will provide the grouped buttons as w whole and to use them separately (4 buttons in the toolbar, next to each other) another UI will be required? This is a very generic problem for all our features.
   
   

[oleq]

@jodator There's already an issue for the UI component. It should be developed there and used in alignment.

[dkonopka]

Regarding the issue Shared UI and UX between CKEditor 5 and Letters you can find here proposed design for dropdowns.

• dropdown arrow is separated element (:after pseudoelement or additional <span>)
• button with dropdown should be a little bit wider (in this design is +5px difference)

IMO by default, buttons should be grouped in a dropdown, but we should let developers disable dropdown and use inline buttons.

[fredck]

@dkonopka, your proposal is very good.

I would just include the default option (left align) in the list as well. Got confused by not seeing it in your images.

[dkonopka]

@fredck Currently design is showing an active state of text-align: left property, that's why it is not doubled in the dropdown. If user click right align icon it will change the place with active.

That's was just my idea to save some space, but it's only proposal, we can stay with KISS and do not complicate things.

[pjasiun]

I think that icon aggregation should be an util on top of having separate icons. I should be able to have these icons separated or group them in the drop-down. We could start from having icon aggregator designed for this feature and then make it more generic as a UI util.

[jodator]

@pjasiun: you mean this comment: https://github.com/ckeditor/ckeditor5-heading/issues/74#issuecomment-305224952 (own issue in: https://github.com/ckeditor/ckeditor5-ui/issues/322)

[Reinmar]

I think that we shouldn't release this feature without the dropdown, so I'm not going to include this in the upcoming alpha.2.

BTW, I'm not sure if this was discussed in some place, but I see this as two plugins – one proposing separate buttons and one proposing a dropdown. The same concept is planned for the heading feature (e.g. HeadingButtons and HeadingDropdown). Aggregation, while cool and needed at some point, is a separate feature and I'd propose to not spend time on it just yet. It can be added later. Having more editing features first should be, IMO, our priority.

[oleq]

@jodator Can you create a PR out of https://github.com/ckeditor/ckeditor5-alignment/blob/t/4 so we can comment?

---

For now, I'll leave my quick comments here:

• The editing view must be focused upon execution of the button: https://github.com/ckeditor/ckeditor5-alignment/blob/378ddf13e07dbf1d40fdfa6c92fde2426a32220d/src/alignmentui.js#L127 Otherwise, when navigating using the keyboard, if pressed Enter, the selection is lost in the editor.
• Just like other buttons in the toolbar, when under .ck-editor-toolbar, the drop-down should have no background/border. It's a button with some extra features rather than just a regular drop-down.
• A focused button in the drop-down should have higher z-index to avoid focus outlines overlapping.
  
• Any button in the drop-down should have no border-radius (image above).

I didn't have much time to read all the code, especially in ckeditor5-ui, but it looks and works great 🎉 Waiting for PRs in both repos so we can get into details ;-)