diff --git a/images/ui/icon_button/drop-down.png b/images/ui/icon_button/drop-down.png deleted file mode 100644 index 99e27615dd9..00000000000 Binary files a/images/ui/icon_button/drop-down.png and /dev/null differ diff --git a/images/ui/icon_button/icon_button_example.png b/images/ui/icon_button/icon_button_example.png deleted file mode 100644 index 38df1c185de..00000000000 Binary files a/images/ui/icon_button/icon_button_example.png and /dev/null differ diff --git a/images/ui/icon_button/states.png b/images/ui/icon_button/states.png deleted file mode 100644 index fdb337d3b06..00000000000 Binary files a/images/ui/icon_button/states.png and /dev/null differ diff --git a/images/ui/icon_button/toggle.png b/images/ui/icon_button/toggle.png deleted file mode 100644 index 67b7e48171b..00000000000 Binary files a/images/ui/icon_button/toggle.png and /dev/null differ diff --git a/images/ui/icon_button/toolbar_icon_button.png b/images/ui/icon_button/toolbar_icon_button.png new file mode 100644 index 00000000000..0fc45f23301 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_badge.png b/images/ui/icon_button/toolbar_icon_button_badge.png new file mode 100644 index 00000000000..ea104996527 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_badge.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_badge_dark.png b/images/ui/icon_button/toolbar_icon_button_badge_dark.png new file mode 100644 index 00000000000..29c152d53ae Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_badge_dark.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_dark.png b/images/ui/icon_button/toolbar_icon_button_dark.png new file mode 100644 index 00000000000..1fc7422f362 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_dark.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_search_option.png b/images/ui/icon_button/toolbar_icon_button_search_option.png new file mode 100644 index 00000000000..3affe244e3e Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_search_option.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_search_option_dark.png b/images/ui/icon_button/toolbar_icon_button_search_option_dark.png new file mode 100644 index 00000000000..9b8e1be6956 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_search_option_dark.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_states.png b/images/ui/icon_button/toolbar_icon_button_states.png new file mode 100644 index 00000000000..b1067ea106e Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_states.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_states_dark.png b/images/ui/icon_button/toolbar_icon_button_states_dark.png new file mode 100644 index 00000000000..a1a8509114f Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_states_dark.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_tooltip.png b/images/ui/icon_button/toolbar_icon_button_tooltip.png new file mode 100644 index 00000000000..203a2f02ca2 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_tooltip.png differ diff --git a/images/ui/icon_button/toolbar_icon_button_tooltip_dark.png b/images/ui/icon_button/toolbar_icon_button_tooltip_dark.png new file mode 100644 index 00000000000..9bb1defca96 Binary files /dev/null and b/images/ui/icon_button/toolbar_icon_button_tooltip_dark.png differ diff --git a/images/ui/icon_button/tooltip.png b/images/ui/icon_button/tooltip.png deleted file mode 100644 index ede5bc4adcc..00000000000 Binary files a/images/ui/icon_button/tooltip.png and /dev/null differ diff --git a/images/ui/split_icon_button/behavior.png b/images/ui/split_icon_button/behavior.png deleted file mode 100644 index 70f5bfe6938..00000000000 Binary files a/images/ui/split_icon_button/behavior.png and /dev/null differ diff --git a/images/ui/split_icon_button/click.png b/images/ui/split_icon_button/click.png deleted file mode 100644 index 80b83c3fc17..00000000000 Binary files a/images/ui/split_icon_button/click.png and /dev/null differ diff --git a/images/ui/split_icon_button/group_actions.png b/images/ui/split_icon_button/group_actions.png deleted file mode 100644 index 2646b5edcb4..00000000000 Binary files a/images/ui/split_icon_button/group_actions.png and /dev/null differ diff --git a/images/ui/split_icon_button/split_icon_button.png b/images/ui/split_icon_button/split_icon_button.png new file mode 100644 index 00000000000..a6d1e19a85b Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button.png differ diff --git a/images/ui/split_icon_button/split_icon_button_dark.png b/images/ui/split_icon_button/split_icon_button_dark.png new file mode 100644 index 00000000000..dd1998a711c Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button_dark.png differ diff --git a/images/ui/split_icon_button/split_icon_button_disabled.png b/images/ui/split_icon_button/split_icon_button_disabled.png deleted file mode 100644 index 4840780a9c2..00000000000 Binary files a/images/ui/split_icon_button/split_icon_button_disabled.png and /dev/null differ diff --git a/images/ui/split_icon_button/split_icon_button_disabled_item.png b/images/ui/split_icon_button/split_icon_button_disabled_item.png new file mode 100644 index 00000000000..ea9ea6ebc92 Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button_disabled_item.png differ diff --git a/images/ui/split_icon_button/split_icon_button_disabled_item_dark.png b/images/ui/split_icon_button/split_icon_button_disabled_item_dark.png new file mode 100644 index 00000000000..139b542a3d1 Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button_disabled_item_dark.png differ diff --git a/images/ui/split_icon_button/split_icon_button_example.png b/images/ui/split_icon_button/split_icon_button_example.png deleted file mode 100644 index 1d65a8c5c0c..00000000000 Binary files a/images/ui/split_icon_button/split_icon_button_example.png and /dev/null differ diff --git a/images/ui/split_icon_button/split_icon_button_hover.png b/images/ui/split_icon_button/split_icon_button_hover.png deleted file mode 100644 index 6f49119f2c4..00000000000 Binary files a/images/ui/split_icon_button/split_icon_button_hover.png and /dev/null differ diff --git a/images/ui/split_icon_button/split_icon_button_main_action_icon.png b/images/ui/split_icon_button/split_icon_button_main_action_icon.png new file mode 100644 index 00000000000..041928a0267 Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button_main_action_icon.png differ diff --git a/images/ui/split_icon_button/split_icon_button_main_action_icon_dark.png b/images/ui/split_icon_button/split_icon_button_main_action_icon_dark.png new file mode 100644 index 00000000000..4815ee19b74 Binary files /dev/null and b/images/ui/split_icon_button/split_icon_button_main_action_icon_dark.png differ diff --git a/topics/ui/controls/icon_button.md b/topics/ui/controls/icon_button.md index 62df9f2d17c..1a0867811ed 100644 --- a/topics/ui/controls/icon_button.md +++ b/topics/ui/controls/icon_button.md @@ -1,4 +1,4 @@ - + # Icon Button @@ -10,73 +10,51 @@ -A toolbar icon button is an icon that appears on a toolbar. - -Icon button - -## Types - -

There are three types of toolbar icon buttons:

- -An action button triggers an action immediately on clicking it, e.g., the Open button. - -A toggle button switches the state on clicking it, e.g., a button to show and hide warnings in the output tree. - -![](toggle.png){width=143} - -A drop-down button has an arrow icon in the bottom right corner and opens a menu with actions or checkboxes. - -[//]: # (TODO: Use [menu list](menu_list.md) guidelines for drop-down buttons.) - -![](drop-down.png){width=284} + + + + + +
Using links instead of buttons + A toolbar icon button contains only an icon. There are three types of icon buttons: + +
  • An action triggers immediately.
    • +
  • A toggle switches between on and off states.
    • +
  • A drop-down opens a menu.
    • +     +
    ## When to use -Follow the rules for [toolbar](toolbar.md#what-items-to-add-on-toolbar). +Follow the guidelines for the [Toolbar](toolbar.md#what-items-to-add-on-toolbar). ## How to use -Provide a recognizable icon. Use an [existing icon](https://intellij-icons.jetbrains.design) or create a new one using [icon guidelines](icons_style.md). +### Icon +Use an [existing icon](https://intellij-icons.jetbrains.design) or create a new one following the [icon guidelines](icons_style.md). -Provide a short and descriptive name for a toolbar icon button. Show a tooltip with the button name on mouse hover. -Include a shortcut if there is one. See [Context help](context_help.md) for details. - -![](tooltip.png){width=163} - -Highlight a toolbar icon button on mouse hover. Highlight a toolbar icon button with a brighter color on clicking it. - -* Toggle buttons remain highlighted when they are in the switched on mode. Toggled on buttons do not change color on hover. - -* Drop-down buttons remain highlighted while the menu is opened. - -![](states.png){width=183} - -If an action is not available in this context, disable the corresponding button and gray out the icon. -For toolbar drop-down buttons, disable the arrow icon as well. -Do **not** highlight a disabled icon on mouse hover. +### Tooltip + + + + + +
    Using links instead of buttonsAlways provide a tooltip for an icon button. Include a shortcut if there is one. See Tooltip for details.
    -## Sizes and placement +### States + + + + + +
    Using links instead of buttonsWhen an action is not available in a particular context, disable the icon button.
    -Icons size is 16×16px, icon selection is 22×22px. +### Filter badge +Using links instead of buttons -For guidelines on the space between toolbar icon buttons see [Toolbar](toolbar.md). +For filter actions, show a badge over an icon when a non-default option is selected. The badge helps to see if the content is in its default state or filtered. - +Search option icons have a more noticeable pressed state to allow quickly seeing what affects the search results. See [Search options](search_field.md#search-options) for details. diff --git a/topics/ui/controls/split_icon_button.md b/topics/ui/controls/split_icon_button.md index 9d8ce1e144e..2515b8a9ef1 100644 --- a/topics/ui/controls/split_icon_button.md +++ b/topics/ui/controls/split_icon_button.md @@ -12,48 +12,27 @@ A split icon button appears on a horizontal toolbar and consists of two parts: the main icon and a triangle icon for the action list. -![](split_icon_button_example.png){width=278} +![](split_icon_button.png){width=706} ## When to use -The split icon button helps reduce the number of icons on the toolbar and minimize visual noise. +Use the split icon button to reduce the number of actions on a toolbar if the following conditions are met: +* The toolbar is horizontal. The split icon button is too wide for vertical toolbars. +* There are already many controls on the toolbar. +* There is a group of similar actions. +* The user invokes one action more often than others. Or the user invokes one action several times, then switches to another action and invokes it several times but does not switch between actions too often. -Use the split icon button for a group of similar actions if there are already many icons on the toolbar and: - -* The user invokes one action more often than others, - -* Or if the user invokes one action several times, then switches to another action and invokes it several times but does not switch between actions too often. - -![](group_actions.png){width=325} - -*Profiler actions are grouped into a split button* - -If the user invokes actions with the same frequency or often switches from one action to another, use separate icons for each action. - -To decide whether to add the whole group of actions on the toolbar, follow the rules for the [toolbar](toolbar.md#what-items-to-add-on-toolbar). - -Use the split icon button on horizontal toolbars only, as it’s too wide for vertical toolbars. +To decide whether to add the actions to the toolbar, follow the Toolbar guidelines. ## How to use -Make sure that all actions in the popup menu have icons. When an action is launched, its icon will be used as the main icon. - -![](behavior.png){width=325} - -*The user clicks Profile Allocations, the action starts, and its icon is shown as the main icon.* - -## Built-in behavior - -On hover, the main icon and the triangle icon are highlighted separately, and the line between two parts is added. -The tooltip for the main icon action is shown on hovering over it. - -![](split_icon_button_hover.png){width=192} - -The main icon invokes its action on click. The triangle icon opens the action menu on click: +### Add icons to all menu actions +Make sure that all actions in the drop-down menu have icons. When an action is selected, its icon will be used as the main icon. -![](click.png){width=325} +![](split_icon_button_main_action_icon.png){width=706} -If some actions are unavailable, the corresponding menu items are disabled. The action menu should always open, even if all the items in it are disabled. +### Disable unavailable actions +Do not hide the unavailable actions, show them as disabled to help users locate them in the future. The action menu should always open, even if all the items in it are disabled. -![](split_icon_button_disabled.png){width=325} +![](split_icon_button_disabled_item.png){width=706}