Implement UI part for List Styles feature

[pomek]

Part of #1031.

[pomek]

Blindly estimated as 2.

[oleq]

Designs

Unordered list styles

Ordered list styles

Button states

I followed the hover styles first implemented in special characters and combined them with heading dropdown active styles.

The question of default/revert

Context and Problem Statement

My designs contain the "reset/default/revert" button although I haven't found any WYSIWYG editor out there that would use such a thing. I wanted to see how would it look. The button is a tricky thing because it's a feature of CSS world but a potential UX anti-pattern.

Decision drivers

• The feature should be as useful as it is possible to the users (they should be able to do everything with it – apply styles, change and reset them).
• Users should not be confused about what each button does.

Considered options

Use the "reset" button

1. When clicked, the "reset" button removes the attribute completely from the model.
2. In this scenario, all buttons work one way (previous style -> new style). Clicking the same button twice will not toggle/reset the style.

Don't use the "reset" button

1. In this scenario, assuming that if a selection is inside a list but there's no style applied in the model, simply none of the buttons will be active.
   1. Alternatively, we can activate the "most likely style". If a list is numbered, we can assume that most CMSs/UAs/web pages will style it as "numbered" ("1.").
2. If a style has already been applied, the only way to reset it back to the CSS cascade/inherit is clicking its button once again.
   1. So in this scenario buttons work as toggles.

Pros and Cons of the Options

Option 1 (use the "reset" button)

👍 The button is logical from the CSS perspective – removing the inline style falls back to the inherited (UA) style and this makes sense.

👎 The button is totally illogical from the UX perspective – you need to understand CSS to know what's going on there. Non-technical users will be confused about what it is for – they see a numbered list in the content but the numbered list button is not active. Why? (they do not know that the style isn't in the model, it's just a UA/CMS default list style)

👎 No one uses this kind of button in their UI.

Option 2 (do not use the button)

👍 There is no confusion around what the button is for because... there is no button.

👍 Cleaner, uncluttered UI.

👎 If we go with the "no style in the model, no active button" approach, users may be confused why their list is numbered but "numbered" style in the drop-down is inactive (they don't know its a browser/CMS default style being rendered).

👎 If we go with the "no style in the model, activate the most likely button" approach, users may be confused why their list is numbered using roman letters (I. II. III.) but the Arabic (1. 2. 3.) style in the drop-down is active (the default browser/CMS style for <ul> was roman).

👎 (unlikely) But if someone wanted to reset their list style back to the browser/CMS default, they have to discover they need to click the active style again (low discoverability).

[niegowski]

If we are voting, then I'm for the 2nd option. 

👎 If we go with the "no style in the model, no active button" approach, users may be confused why their list is numbered but "numbered" style in the drop-down is inactive (they don't know its a browser/CMS default style being rendered).

The same happens for the font family feature when supportAllValues is activated. If there was some font in the editor data that wasn't configured then none of the options is selected. Also, there is the "Default" option that is for the no-attribute state.

👎 (unlikely) But if someone wanted to reset their list style back to the browser/CMS default, they have to discover they need to click the active style again (low discoverability).

Users always can use the "Remove Format" button.

[oleq]

Users always can use the "Remove Format" button.

A side-question to @pomek: Do the list styles have the isFormatting property?

[Reinmar]

Thanks @oleq for the research.

I think I'd go with the 2nd option as well. I feel that we can always add the reset button if we see that "click the active option to remove" is not discoverable.

👎 If we go with the "no style in the model, no active button" approach, users may be confused why their list is numbered but "numbered" style in the drop-down is inactive (they don't know its a browser/CMS default style being rendered).

This applies to both options, right?

👎 If we go with the "no style in the model, activate the most likely button" approach, users may be confused why their list is numbered using roman letters (I. II. III.) but the Arabic (1. 2. 3.) style in the drop-down is active (the default browser/CMS style for <ul> was roman).

OK, now I understand the previous point :D Yeah... I think I'm for "no style in the model, no active button".

[pomek]

A side-question to @pomek: Do the list styles have the isFormatting property?

Not yet but I'll add it.

[pomek]

Done in #7845.