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 00000000000..2af81a0461f 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 00000000000..ef5d7bc9e12 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 00000000000..6c6ca0bfc38 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 00000000000..457c19d9044 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 00000000000..665d0125a83 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 00000000000..c0694162488 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 00000000000..4e791204d74 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 00000000000..efda2b5dd3a 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 00000000000..e911b1ff0dc 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 00000000000..a35d06ee127 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 00000000000..1a0f9b74737 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 00000000000..b750043ff0d 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 00000000000..d4c2932b7a2 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 00000000000..714b38ed75c 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 00000000000..437b935054a 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 00000000000..ffadb3dac42 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 00000000000..a589f0ed65f 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 00000000000..c50e1ba7841 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 00000000000..d25ef766d75 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 00000000000..514ea3861f3 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 00000000000..d8ab686ccac 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 00000000000..d13ff1ba792 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 00000000000..3eec38af00e 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 00000000000..c2acbb145d5 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 88df19acff9..b32369abb90 100644 --- a/topics/ui/controls/built_in_button.md +++ b/topics/ui/controls/built_in_button.md @@ -6,31 +6,19 @@ 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. - -## 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 field +### Expand a 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} +When the field is expanded, show the **Collapse** button: +![Expanded built-in button](built_in_button_expanded.png){width=706} -Do **not** use the Show Viewer button instead. +### List values -![](input_expand.png){width=357} +Use the **List** icon to select a value from the list of classes, methods, or environment variables: -### List values +![List of values](built_in_button_list.png){width=706} -Use a control with the table icon to select from the list of classes, methods or environment variables: +### Add value -![](input_table.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. -Use a combo box instead of the Variables button. This icon works as a combo box. +![Add a value to the field](built_in_button_add.png){width=706} -![](variables_combobox.png){width=514} +## How to use -### Add value +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
-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} +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. -### Copy, Info +The shortcut for a built-in button is Shift+Enter. -| ![](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. + + + + + + + + + +
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
diff --git a/topics/ui/controls/button.topic b/topics/ui/controls/button.topic index d3363ea5b50..b211bdecc32 100644 --- a/topics/ui/controls/button.topic +++ b/topics/ui/controls/button.topic @@ -19,7 +19,7 @@ When to use a button - +
Using links instead of buttons

Use a link instead if:

@@ -78,7 +78,7 @@

The button should answer the question in the title, so the user can skip the description. Prefer specific labels over generic ones:

- +

@@ -105,7 +105,7 @@ use the word Now in labels because buttons always trigger an immediate action:

- +

@@ -130,7 +130,7 @@

The label should be short, not more than five words. If it’s not obvious what element the button is related to, add more words to make it clear. Prefer clear labels to short ones:

- +

@@ -313,7 +313,7 @@

On hovering over a button, show a tooltip with the shortcut and the action name if it can be clarified. For more details, see Context help.

- +
Hovered buttons @@ -332,7 +332,7 @@ - +
Hovered buttons @@ -350,7 +350,7 @@
- +
Hovered buttons @@ -386,7 +386,7 @@ - +
Hovered buttons @@ -413,7 +413,7 @@
- +
Hovered buttons diff --git a/topics/ui/controls/input_field.md b/topics/ui/controls/input_field.md index 09c5ea38419..fa847fabafe 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}