UX-2323 Update existing UI Guidelines: SplitButton, fix review comments

This commit is contained in:
marianna.kononenko 2025-01-10 15:02:55 +01:00
parent 7b25f24816
commit e91606b318
24 changed files with 19 additions and 9 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 63 KiB

View File

@ -62,7 +62,7 @@ Putting the single action in the dropdown menu doesn't save a lot of space:
<format color="369650" style="bold">Correct</format>
<img src="split_button_unrelated_actions_correct.png" alt="Unrelated actions in separate buttons" width="706"/>
<img src="split_button_one_two_buttons.png" alt="Unrelated actions in separate buttons" width="706"/>
<note><control>Exception</control>: If the action is <a anchor="the-second-action-is-dangerous-and-uncommon">dangerous and uncommon</a>, you can put it in the menu.</note>
@ -96,6 +96,9 @@ Place related actions into the dropdown menu. Do not duplicate the main action i
![Unique actions in dropdown menu](split_button_related_actions.png){width=706}
If there is a dangerous action among other actions in the dropdown, add the line separators above and below it to lessen the chance of calling this action by mistake:
![Dangerous action in the dropdown menu](split_button_dangerous_action_separator.png){width=706}
[//]: # (### Reduce split button to simple action buttons)
@ -119,18 +122,25 @@ Place related actions into the dropdown menu. Do not duplicate the main action i
* Open the dropdown menu with the first menu item selected on <shortcut>Alt+Shift+Enter</shortcut>.
* Do **not** show the dropdown menuwhen the button gains focus.
* Do not show the dropdown menu when the button gains focus.
### Focus on the button
<table style="none">
<tr>
<td width="15%">
<p><shortcut>Enter</shortcut></p>
<p><shortcut>Ctrl+Enter</shortcut></p>
</td>
<td width="85%">Invoke the default button action.</td>
</tr>
[//]: # ( <tr>)
[//]: # ( <td width="15%">)
[//]: # ( <p><shortcut>Enter</shortcut></p>)
[//]: # ( <p><shortcut>Ctrl+Enter</shortcut></p>)
[//]: # ( </td>)
[//]: # ( <td width="85%">Invoke the default button action.</td>)
[//]: # ( </tr>)
<tr>
<td><shortcut>Space</shortcut></td>
<td>Invoke the main action.</td>