split_icon_button_olya

topics/ui/controls/icon_button.md

@@ -1,4 +1,4 @@
-<!-- Copyright 2000-2025 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
+<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
 
 # Icon Button
 
@@ -10,73 +10,51 @@
 
 </tldr>
 
-A toolbar icon button is an icon that appears on a toolbar.
-
-<img src="icon_button_example.png" alt="Icon button" width="200"/>
-
-## Types
-
-<p>There are three types of toolbar icon buttons:</p>
-
-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]&#40;menu_list.md&#41; guidelines for drop-down buttons.)
-
-![](drop-down.png){width=284}
+<table style="none" border="false" column-width="fixed">
+    <tr>
+        <td><img src="toolbar_icon_button.png" alt="Using links instead of buttons" width="378"/></td>
+        <td>
+            A toolbar icon button contains only an icon. There are three types of icon buttons:
+            <list>
+                <li> An <b>action</b> triggers immediately.</li>
+                <li> A <b>toggle</b> switches between on and off states.</li>
+                <li> A <b>drop-down</b> opens a menu.</li>
+            </list>
+        </td>
+    </tr>
+</table>
 
 ## 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
+<table style="none" border="false" column-width="fixed">
+    <tr>
+        <td><img src="toolbar_icon_button_tooltip.png" alt="Using links instead of buttons" width="378"/></td>
+        <td>Always provide a tooltip for an icon button. Include a shortcut if there is one. See <a href="tooltip.md">Tooltip</a> for details.</td>
+    </tr>
+</table>
 
-## Sizes and placement
+### States
+<table style="none" border="false" column-width="fixed">
+    <tr>
+        <td><img src="toolbar_icon_button_states.png" alt="Using links instead of buttons" width="378"/></td>
+        <td>When an action is not available in a particular context, disable the icon button.</td>
+    </tr>
+</table>
 
-Icons size is 16&times;16px, icon selection is 22&times;22px.
+### Filter badge
+<img src="toolbar_icon_button_badge.png" alt="Using links instead of buttons" width="706"/>
 
-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.
 
-<!--
-## Style
+### Search option icon
+<img src="toolbar_icon_button_search_option.png" alt="Using links instead of buttons" width="706"/>
 
-<table>
- <col width="50%">
- <tr>
-     <td> Hovered </td>
-     <td> ActionButton.hoverBackground<br/>
-          ActionButton.hoverBorderColor
-     </td>
- </tr>
- <tr>
-     <td> Background </td>
-     <td> ActionButton.pressedBackground<br/>
-          ActionButton.pressedBorderColor
-     </td>
- </tr>
-</table>
--->
+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.

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.
+<note>To decide whether to add the actions to the toolbar, follow the <a href="toolbar.md#what-items-to-add-on-toolbar">Toolbar</a> guidelines.</note>
 
 ## 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}