Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

split_button_marianna #1393

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

split_button_marianna #1393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11d4069
UX-2323 Update existing UI Guidelines: Button, update tables and images
MariannaKononenko Nov 12, 2024
34fca95
UX-2323 Update existing UI Guidelines: Split Button, update text and …
MariannaKononenko Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/ui/built_in_button/button_split_button.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ui/built_in_button/split_button_tooltip_on_hover_tooltip_dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 13 additions & 15 deletions topics/ui/controls/button.topic
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
<img src="when_to_use_button.png" alt="When to use a button" width="706"/>
</chapter>
<chapter title="When not to use" id="when-not-to-use">
<table style="none">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="50%"><img src="link_instead_of_button.png" alt="Using links instead of buttons" width="378"/></td>
<td><img src="link_instead_of_button.png" alt="Using links instead of buttons" width="378"/></td>
<td><p>Use a link instead if:</p>
<list>
<li><p>The action takes the user to another page of the same dialog or an external source like
Expand All @@ -36,12 +36,12 @@
</td>
</tr>
<tr>
<td width="50%"><img src="toolbar_button.png" alt="Using toolbar buttons instead of buttons" width="378"/></td>
<td><img src="toolbar_button.png" alt="Using toolbar buttons instead of buttons" width="378"/></td>
<td><p>Use a <a href="toolbar.md">toolbar button</a> instead if there are several buttons related to a table or list.</p>
</td>
</tr>
<tr>
<td width="50%"><img src="split_button.png" alt="Using split buttons instead of buttons" width="378"/></td>
<td><img src="button_split_button.png" alt="Using split buttons instead of buttons" width="378"/></td>
<td><p>Use a <a href="split_button.md">split button</a> instead if:</p>
<list>
<li>There are more than two related actions, but the space is limited and/or packed.</li>
Expand All @@ -52,7 +52,7 @@
</td>
</tr>
<tr>
<td width="50%">
<td>
<img src="built-in_button.png" alt="Using built-in buttons instead of buttons" width="378"/>
</td>
<td><p>Use a <a href="built_in_button.md">built-in button</a> instead if it's related to an input field, combo box,
Expand All @@ -78,7 +78,7 @@
<p>The button should answer the question in the title, so the user can skip the description. Prefer specific
labels over
generic ones:</p>
<table style="none">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="50%">
<p>
Expand All @@ -105,7 +105,7 @@
use the word
<control>Now</control> in labels because buttons always trigger an immediate action:
</p>
<table style="none">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="50%">
<p>
Expand All @@ -130,7 +130,7 @@
<p>The label should be short, not more than five words. If it’s not obvious what element the button is related
to, add more
words to make it clear. Prefer clear labels to short ones:</p>
<table style="none">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="50%">
<p>
Expand Down Expand Up @@ -202,8 +202,6 @@
</li>
</list>
</chapter>


<chapter title="Focused" id="focused">
<img src="focused_button.png" alt="'Cancel' button in a focused state" width="706"/>
<p>All buttons can get focus, even on macOS if the
Expand Down Expand Up @@ -313,7 +311,7 @@
<p>On hovering over a button, show a tooltip with the shortcut and the action name if it can be clarified.
For more details,
see <a href="context_help.md">Context help</a>.</p>
<table style="none" column-width="fixed">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="378">
<img src="hovered_button.png" alt="Hovered buttons" width="378"/>
Expand All @@ -332,7 +330,7 @@
</chapter>
<chapter title="Standard buttons" id="standard-buttons">
<chapter title="Apply" id="apply">
<table style="none" column-width="fixed">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="378">
<img src="apply.png" alt="Hovered buttons" width="378"/>
Expand All @@ -350,7 +348,7 @@
</table>
</chapter>
<chapter title="Cancel" id="cancel">
<table style="none" column-width="fixed">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="378">
<img src="cancel.png" alt="Hovered buttons" width="378"/>
Expand Down Expand Up @@ -386,7 +384,7 @@
</chapter>

<chapter title="Close">
<table style="none" column-width="fixed">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="378">
<img src="close.png" alt="Hovered buttons" width="378"/>
Expand All @@ -413,7 +411,7 @@
</table>
</chapter>
<chapter title="Help" id="help">
<table style="none" column-width="fixed">
<table style="none" border="false" column-width="fixed">
<tr>
<td width="378">
<img src="help.png" alt="Hovered buttons" width="378"/>
Expand Down
9 changes: 5 additions & 4 deletions topics/ui/controls/split_button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ If unrelated actions are hidden under the dropdown menu, they are hard to find:

### Only one related action

Putting the single action in the dropdown menu doesn't save a lot of space:
Putting a single action in the dropdown menu doesn't save a lot of space:

<format color="E55765" style="bold">Incorrect</format>

Expand Down Expand Up @@ -86,7 +86,8 @@ Show a tooltip:

### Dropdown menu

Place related actions into the dropdown menu. Do not duplicate the main action in the dropdown menu, otherwise it is confusing how to trigger the main action — with the button or from the menu.
Place related actions into the dropdown menu. Do not duplicate the main action in the dropdown menu.
Otherwise, it is not clear how to trigger the main action: with the button or from the menu.

<format color="E55765" style="bold">Incorrect</format>

Expand Down Expand Up @@ -119,7 +120,7 @@ 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

Expand All @@ -144,7 +145,7 @@ Place related actions into the dropdown menu. Do not duplicate the main action i
<p><shortcut>Tab</shortcut></p>
<p><shortcut>Shift + Tab</shortcut></p>
</td>
<td>Move focus to the control next to the split button and hide the dropdown menu.</td>
<td>Move focus to a component next to the split button and hide the dropdown menu.</td>
</tr>
</table>

Expand Down