d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
7.4 KiB
Split Button
UI guidelines on using split buttons.
Implementation: JBOptionButton
The Split button is a button that has two parts — the main action on the left and a control button which shows a dropdown with less common actions on the right.
{width=218}
When to use
Use the split button:
When more than 2 related actions are possible but the space is limited and/or packed: For example, it is useful for the Commit actions group in the Commit dialog:
{width=218}
The Split button is not useful in the Replace popup, since not all actions are related. For example, Open in Find Window is not related to the main action. Such actions are hard to find in the drop-down menu:
| Incorrect | Correct |
|---|---|
 {width="152"} |
 {width="327"} |
In the Adjust Code Style dialog, only 1 related action is possible, and it does not save a lot of space:
| Incorrect | Correct |
|---|---|
 {width="152"} |
 {width="234"} |
To hide actions which are dangerous and uncommon. Dangerous means an action can destroy users’ data and cannot be easily undone. It is less possible to accidentally click an action hidden in a menu. It is recommended to hide even a single related uncommon dangerous action. For example, Force Push can override remote commits from other authors and should not be easily available:
{width=111}
If an action is dangerous but common, do not hide it under the split button, use simple buttons.
Do not use the Split Button in other cases, use simple Buttons instead.
How to use
Main action
| Click | Invoke the main action |
Control button
| Click |
|
| Hover |
|
Dropdown menu
Place actions related to the main button’s action in the dropdown menu.
{width=218}
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.
Keyboard navigation & shortcuts
Trigger the main action when the default button shortcut is pressed if the split button is the default one.
Open the dropdown menu with the first menu item selected on Alt+Shift+Enter.
Do not show the dropdown menu when the button gains focus.
Focus on the button
| Enter and Ctrl+Enter |
|
| Space |
|
| Arrow Down |
|
| Tab and Shift + Tab |
|
Focus in the drop-down menu
| Enter and Space | Invoke the selected action |
| Arrow Down and Arrow Up |
|
| Esc | Close the popup and move the focus to the split button |
Sizes and placement
Follow the rules for the simple button.
Button
The width of the split button equals to the width of the main button (follow the rules of the simple button) plus the width of the drop-down button.
| Windows | Mac | Darcula |
|---|---|---|
 {width="92"} |
 {width="90"} |
 {width="94"} |
A different width for the split button makes it easier to understand that this button is different from other buttons in the dialog.
Drop-down menu
Follow the rules for menus with regard to sizes, colors, fonts and spacing.
Menu item height and spacing between the menu and the button:
{width=232}
Style
Increase line height in the dropdown menu to lessen the chance of choosing the wrong menu item by mistake.
Leave 2px around the separator inactive to lessen the chance of choosing the wrong menu item by mistake:
{width=218}
Align the dropdown with the button left border:
{width=219}