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 index 665d0125a..c528e6393 100644 Binary files a/images/ui/built_in_button/built_in_button_browse_correct.png 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 index 8235243b7..58fe6bbd6 100644 Binary files a/images/ui/built_in_button/built_in_button_browse_correct_dark.png and b/images/ui/built_in_button/built_in_button_browse_correct_dark.png differ diff --git a/topics/ui/controls/built_in_button.md b/topics/ui/controls/built_in_button.md index e0d0c82fd..3498540e4 100644 --- a/topics/ui/controls/built_in_button.md +++ b/topics/ui/controls/built_in_button.md @@ -8,17 +8,33 @@ A built-in button is an icon placed inside an input control. ![Built-in-button](built_in_button.png){width=706} + + +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. + + ## 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
+ + ### Browse -The **Browse** button shows a dialog for opening files from the disk, a tree view, or a table of values. Use the **Browse** icon to select a single file or a folder from the disc. Browse [//]: # (An input field with browse button: [`TextFieldWithBrowseButton`](%gh-ic%/platform/platform-api/src/com/intellij/openapi/ui/TextFieldWithBrowseButton.java)) - +

A combo box with the Browse button:

@@ -74,18 +90,17 @@ extComboBox.setEditor(new BasicComboBoxEditor() { ### Expand a field 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)): +use an input field with the **Expand** button: ![Collapsed built-in button](built_in_button_collapsed.png){width=706} -When the field is expanded, show the **Collapse** button: +Expanded field: ![Expanded built-in button](built_in_button_expanded.png){width=706} ### List values -Use the **List** icon to select a value 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: ![List of values](built_in_button_list.png){width=706} @@ -94,22 +109,6 @@ Use the **Add** button to select multiple values, such as files, variables, fold ![Add a value to the field](built_in_button_add.png){width=706} -## How to use - -Place the built-in button inside the input field. Do not place the built-in button next to the field control: - - - - - -
Correct -Browse buttonIncorrect -Incorrect 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 @@ -139,3 +138,7 @@ Do not use the **Help** or **Info** buttons to open an external link or a hint. 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.