diff --git a/images/ui/built_in_button/built_in_button.png b/images/ui/built_in_button/built_in_button.png index 20cd8be57..2af81a046 100644 Binary files a/images/ui/built_in_button/built_in_button.png and b/images/ui/built_in_button/built_in_button.png differ diff --git a/images/ui/built_in_button/built_in_button_add.png b/images/ui/built_in_button/built_in_button_add.png new file mode 100644 index 000000000..ef5d7bc9e Binary files /dev/null and b/images/ui/built_in_button/built_in_button_add.png differ diff --git a/images/ui/built_in_button/built_in_button_browse.png b/images/ui/built_in_button/built_in_button_browse.png new file mode 100644 index 000000000..457c19d90 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse.png differ diff --git a/images/ui/built_in_button/built_in_button_browse_correct.png b/images/ui/built_in_button/built_in_button_browse_correct.png new file mode 100644 index 000000000..665d0125a Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse_correct.png differ diff --git a/images/ui/built_in_button/built_in_button_browse_dark.png b/images/ui/built_in_button/built_in_button_browse_dark.png new file mode 100644 index 000000000..8235243b7 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse_dark.png differ diff --git a/images/ui/built_in_button/built_in_button_browse_incorrect.png b/images/ui/built_in_button/built_in_button_browse_incorrect.png new file mode 100644 index 000000000..4e791204d Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse_incorrect.png differ diff --git a/images/ui/built_in_button/built_in_button_browse_incorrect_dark.png b/images/ui/built_in_button/built_in_button_browse_incorrect_dark.png new file mode 100644 index 000000000..efda2b5dd Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse_incorrect_dark.png differ diff --git a/images/ui/built_in_button/built_in_button_collapsed.png b/images/ui/built_in_button/built_in_button_collapsed.png new file mode 100644 index 000000000..e911b1ff0 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_collapsed.png differ diff --git a/images/ui/built_in_button/built_in_button_copy_correct.png b/images/ui/built_in_button/built_in_button_copy_correct.png new file mode 100644 index 000000000..b750043ff Binary files /dev/null and b/images/ui/built_in_button/built_in_button_copy_correct.png differ diff --git a/images/ui/built_in_button/built_in_button_copy_incorrect.png b/images/ui/built_in_button/built_in_button_copy_incorrect.png new file mode 100644 index 000000000..714b38ed7 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_copy_incorrect.png differ diff --git a/images/ui/built_in_button/built_in_button_dark.png b/images/ui/built_in_button/built_in_button_dark.png index fed1227ea..ffadb3dac 100644 Binary files a/images/ui/built_in_button/built_in_button_dark.png and b/images/ui/built_in_button/built_in_button_dark.png differ diff --git a/images/ui/built_in_button/built_in_button_expanded.png b/images/ui/built_in_button/built_in_button_expanded.png new file mode 100644 index 000000000..a589f0ed6 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_expanded.png differ diff --git a/images/ui/built_in_button/built_in_button_help_correct.png b/images/ui/built_in_button/built_in_button_help_correct.png new file mode 100644 index 000000000..d25ef766d Binary files /dev/null and b/images/ui/built_in_button/built_in_button_help_correct.png differ diff --git a/images/ui/built_in_button/built_in_button_help_incorrect.png b/images/ui/built_in_button/built_in_button_help_incorrect.png new file mode 100644 index 000000000..d8ab686cc Binary files /dev/null and b/images/ui/built_in_button/built_in_button_help_incorrect.png differ diff --git a/images/ui/built_in_button/built_in_button_list.png b/images/ui/built_in_button/built_in_button_list.png new file mode 100644 index 000000000..3eec38af0 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_list.png differ diff --git a/topics/ui/controls/built_in_button.md b/topics/ui/controls/built_in_button.md index 67356279e..b32369abb 100644 --- a/topics/ui/controls/built_in_button.md +++ b/topics/ui/controls/built_in_button.md @@ -8,29 +8,17 @@ A built-in button is an icon placed inside an input control. ![Built-in-button](built_in_button.png){width=706} -## How to use - -Place the built-in button inside the input control. Do **not** place the built-in button on the right of a control: - -![](outside.png){width=250} - -To place a button inside a text field, use [`ExtendableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExtendableTextField.java) and -its `addExtension()` method. - -The shortcut for a built-in button is Shift+Enter. - -## Types +## When to use ### Browse - -A browse button opens a dialog with the disk, a tree view or a table of values. -Use a control with the browse icon for a file/folder path selected from the disk. - -![](input_browse.png){width=378} +The **Browse** button opens a dialog with the disk, a tree view, or a table of values. +Use the **Browse** icon for a file/folder path selected from the disk: +Browse [//]: # (An input field with browse button: [`TextFieldWithBrowseButton`](%gh-ic%/platform/platform-api/src/com/intellij/openapi/ui/TextFieldWithBrowseButton.java)) -A combo box with browse button: + +

A combo box with the Browse button:

@@ -79,44 +67,77 @@ extComboBox.setEditor(new BasicComboBoxEditor() { + -Do **not** place the button on the right of the control. -![](browse_buttons.png){width=250} +### Expand a field -### Expand field - -If the input text can be long and place is constrained, use a built-in button to expand the control +If the input text can be long and the place is constrained, +use the **Expand** button to expand the control ([`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java)): -![](expandable_1.png){width=332} +![Collapsed built-in button](built_in_button_collapsed.png){width=706} -![](expandable_2.png){width=582} - -Do **not** use the Show Viewer button instead. - -![](input_expand.png){width=357} +When the field is expanded, show the **Collapse** button: +![Expanded built-in button](built_in_button_expanded.png){width=706} ### List values -Use a control with the table icon to select from the list of classes, methods or environment variables: +Use the **List** icon to select a value from the list of classes, methods, or environment variables: -![](input_table.png){width=250} - -Use a combo box instead of the Variables button. This icon works as a combo box. - -![](variables_combobox.png){width=514} +![List of values](built_in_button_list.png){width=706} ### Add value -The Plus button works the same way as the Browse button. -The only difference is that the selected value is added, instead of overwriting the existing one. -Place the plus icon inside the control. -![](plus.png){width=250} +The **Plus** button works the same way as the **[Browse](#browse)** button. +The only difference is that the selected value is added instead of overwriting the existing one. -### Copy, Info +![Add a value to the field](built_in_button_add.png){width=706} -| ![](copy_button.png){width="57"} | Do not use the Copy button, the content can be selected and copied using the Cmd/Ctrl+C shortcut or the context menu. | -|----------------------------------|-----------------------------------------------------------------------------------------------------------------------| -| ![](info_button.png){width="57"} | Do not use the info button to open an external link. Use context help instead. | -{style=none} +## How to use + +Place the built-in button inside the input field. Do not place the built-in button next to the field control: + + + + + + + + + +
CorrectIncorrect
Browse buttonIncorrect browse button
+ +To place a button inside a text field, use [`ExtendableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExtendableTextField.java) and +its `addExtension()` method. + +The shortcut for a built-in button is Shift+Enter. + +## When not to use + +### Cut, Copy, Paste +Do not use the **Copy**, **Paste** or **Cut** button. Instead, make sure these actions are available on pressing Cmd/Ctrl+X, Cmd/Ctrl+C, and Cmd/Ctrl+V shortcuts or from the context menu. + + + + + + + + + +
CorrectIncorrect
Browse buttonIncorrect browse button
+ +### Help, Info +Do not use the **Help** or **Info** buttons to open an external link or a hint. Use the [context help](context_help.md) instead. + + + + + + + + + + +
CorrectIncorrect
Context help Incorrect browse button