diff --git a/images/ui/built_in_button/built_in_button.png b/images/ui/built_in_button/built_in_button.png new file mode 100644 index 000000000..eaf960664 Binary files /dev/null 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_add_dark.png b/images/ui/built_in_button/built_in_button_add_dark.png new file mode 100644 index 000000000..6c6ca0bfc Binary files /dev/null and b/images/ui/built_in_button/built_in_button_add_dark.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..c528e6393 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_correct_dark.png b/images/ui/built_in_button/built_in_button_browse_correct_dark.png new file mode 100644 index 000000000..58fe6bbd6 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_browse_correct_dark.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..c06941624 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_collapsed_dark-1.png b/images/ui/built_in_button/built_in_button_collapsed_dark-1.png new file mode 100644 index 000000000..a35d06ee1 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_collapsed_dark-1.png differ diff --git a/images/ui/built_in_button/built_in_button_collapsed_dark.png b/images/ui/built_in_button/built_in_button_collapsed_dark.png new file mode 100644 index 000000000..1a0f9b747 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_collapsed_dark.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..1bf196dcd 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_correct_dark.png b/images/ui/built_in_button/built_in_button_copy_correct_dark.png new file mode 100644 index 000000000..eed8b0ea8 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_copy_correct_dark.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..21771ab7f 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_copy_incorrect_dark.png b/images/ui/built_in_button/built_in_button_copy_incorrect_dark.png new file mode 100644 index 000000000..4760b0613 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_copy_incorrect_dark.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 new file mode 100644 index 000000000..e1055e2c5 Binary files /dev/null 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_expanded_dark.png b/images/ui/built_in_button/built_in_button_expanded_dark.png new file mode 100644 index 000000000..c50e1ba78 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_expanded_dark.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_correct_dark.png b/images/ui/built_in_button/built_in_button_help_correct_dark.png new file mode 100644 index 000000000..514ea3861 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_help_correct_dark.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_help_incorrect_dark.png b/images/ui/built_in_button/built_in_button_help_incorrect_dark.png new file mode 100644 index 000000000..d13ff1ba7 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_help_incorrect_dark.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/images/ui/built_in_button/built_in_button_list_dark.png b/images/ui/built_in_button/built_in_button_list_dark.png new file mode 100644 index 000000000..c2acbb145 Binary files /dev/null and b/images/ui/built_in_button/built_in_button_list_dark.png differ diff --git a/topics/ui/controls/built_in_button.md b/topics/ui/controls/built_in_button.md index 88df19acf..3498540e4 100644 --- a/topics/ui/controls/built_in_button.md +++ b/topics/ui/controls/built_in_button.md @@ -6,31 +6,36 @@ A built-in button is an icon placed inside an input control. -![](input_browse.png){width=250} +![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. +## When to use + +Use a built-in button instead of adding a separate [button](button.topic) on the right where possible to save space and declutter the interface: + + + + + +
Correct +Browse buttonIncorrect +Incorrect browse button
-## Types ### Browse +Use the **Browse** icon to select a single file or a folder from the disc. -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} +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 +84,61 @@ 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 the place is constrained, +use an input field with the **Expand** button: -If the input text can be long and place is constrained, use a built-in button to expand the control -([`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java)): +![Collapsed built-in button](built_in_button_collapsed.png){width=706} -![](expandable_1.png){width=332} +Expanded field: -![](expandable_2.png){width=582} - -Do **not** use the Show Viewer button instead. - -![](input_expand.png){width=357} +![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 objects such as 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 +Use the **Add** button to select multiple values, such as files, variables, folder paths. The selected values will be added to the existing list. -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} +![Add a value to the field](built_in_button_add.png){width=706} -### Copy, Info -| ![](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} +## 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. + + + + + +
+ Correct + Browse button + + Incorrect + Incorrect 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. + + + + + + +
Correct +Context help Incorrect +Incorrect browse button
+ +## Shortcut +The shortcut for a built-in button is Shift+Enter. +The shortcut activates only when the input field with the button is focused. diff --git a/topics/ui/controls/input_field.md b/topics/ui/controls/input_field.md index 09c5ea384..fa847faba 100644 --- a/topics/ui/controls/input_field.md +++ b/topics/ui/controls/input_field.md @@ -131,8 +131,8 @@ If users are more likely to re-enter the entire value, select the whole text whe ### Input field types -If the input text can be long and place is constrained, use an expandable input field [`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java). -For more details, see [built-in buttons](built_in_button.md#expand-field). +If the input text can be long and the place is constrained, use an expandable input field [`ExpandableTextField`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/fields/ExpandableTextField.java). +For more details, see [built-in buttons](built_in_button.md#expand-a-field). ![](expandable_1.png){width=332}