UX-3157 Suggest reasonable dialog/popup sizes for popular cases #1407

eldar-jetbrains · 2024-12-10T15:13:47Z

New guideline for dialog and popup sizes

topics/Dialog-and-popup-sizes.md

eldar-jetbrains · 2024-12-11T12:45:22Z

topics/Dialog-and-popup-sizes.md

+
+For example, the height of the <control>Git Brunches</control> popup adapts to the amount of the content inside:
+
+![Two Git Branches popups adapting to the height of their content. The popup on the left is shorter because it has fewer branches, while the popup on the right is longer because it has more branches](dialog_popup_sizes_adaptive.png){width="706"}


adapting → adapted

eldar-jetbrains · 2024-12-11T12:45:54Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+        <td width="50%">
+            Vertical <control>Project</control> tool window:
+            <img src="dialog_popup_sizes_tool_window_vertical.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:45:59Z

topics/Dialog-and-popup-sizes.md

+        </td>
+        <td width="50%">
+            Horizontal <control>Build</control> tool window:
+            <img src="dialog_popup_sizes_tool_window_horizontal.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:07Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="369650" style="bold">Correct</format>
+            <img src="dialog_popup_sizes_example_2_correct.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:11Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="DarkOrange" style="bold">Acceptable</format>
+            <img src="dialog_popup_sizes_example_2_acceptable.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:17Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="369650" style="bold">Correct</format>
+            <img src="dialog_popup_sizes_example_3_correct.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:21Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="DarkOrange" style="bold">Acceptable</format>
+            <img src="dialog_popup_sizes_example_3_acceptable.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:25Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="369650" style="bold">Correct</format>
+            <img src="dialog_popup_sizes_empty_state_correct.png" alt=""/>


Alt text is needed

eldar-jetbrains · 2024-12-11T12:47:29Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="E55765" style="bold">Incorrect</format>
+            <img src="dialog_popup_sizes_empty_state_incorrect.png" alt=""/>


Alt text is needed

OlyaB · 2024-12-17T17:23:18Z

topics/Dialog-and-popup-sizes.md

@@ -0,0 +1,278 @@
+<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
+
+# Dialog and Popup Sizes


Here it's dialog and popup but in the article it's also tool windows and editor tabs. Not sure how to solve this though

Possibly separate this article into several under the common group header? Like this:

Default and minimum sizes

Components

Dialogs

Popups

Tool windows

Maybe we could just name the article 'Window sizes'? Editor tabs can be considered as a special case

I think "Window sizes" are ok!

OlyaB · 2024-12-17T17:24:46Z

topics/Dialog-and-popup-sizes.md

+
+### Dialog
+
+There are four recommended window sizes for dialogs: **extra small**, **small**, **medium**, and **large**. Select the size depending on the amount of content to keep the important information visible.


Possibly could make an illustration comparing this sizes where one overlays another, and show sizes on them — can serve as an "at a glance" reference

I was actually thinking about making a preview where we could show a possible layout for each size

Very nice illustration! Possibly add sizes names to the illustration?

topics/Dialog-and-popup-sizes.md

OlyaB · 2024-12-17T17:26:28Z

topics/Dialog-and-popup-sizes.md

+Size: 500×350 px
+
+Best for:
+* Two-column layout with a tree on one column and several components that are stacked vertically in the second column.


Seems 500 px width is too small for this? Is there an example?

You're right, it's quite small. Plus, I couldn't find an example for this case, seems redundant here. I removed it

OlyaB · 2024-12-17T17:28:46Z

topics/Dialog-and-popup-sizes.md

+* A full-width table with two or three columns.
+* A full-width code editor or snippet.
+
+For example, the <control>Evaluate Expressions</control> dialog has two code snippets that are stacked vertically:


I think these are an input field with the editor font and a tree with long lines, not code snippets

Agreed. Could we come up with a collective term for these kinds of inputs? Both code snippets and input fields with code require large width. Or we could just write something like 'A full-width code snippet or input field with long text' in the last

'A full-width code snippet or input field with long text' in the last — I'm for this change, thanks!

OlyaB · 2024-12-17T18:05:59Z

topics/Dialog-and-popup-sizes.md

+
+## Minimum sizes for components
+
+When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.


I think, these min sizes should always be set

Possibly tell we have 2 sets of rules in the beginning of the article? That is, for simple cases use xs, s, m, l sizes. When it doesn't fit well, think about min sizes of controls

Added the paragraph in the beginning about the rules

OlyaB · 2024-12-17T18:08:48Z

topics/Dialog-and-popup-sizes.md

+When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.
+
+### How to set the size correctly
+


Possibly add illustrations for types of content here? Not always clear what it is, and when it's clear, an illustration can help visualize the sizes

Thanks for the idea!

OlyaB · 2024-12-17T18:09:21Z

topics/Dialog-and-popup-sizes.md

+#### Example 1
+
+The <control>Rename Inheritors</control> dialog has a table with FQNs. Add 350&nbsp;px as the minimum width for a table column. This will make the dialog wider than the recommended 500&nbsp;px but will show more of FQNs.
+


Possibly show sizes on the image here? Will also help understanding how the correct example differs from the acceptable

Good idea, thanks

OlyaB · 2024-12-17T18:11:58Z

topics/Dialog-and-popup-sizes.md

+    <tr>
+         <td width="706">
+            <format color="DarkOrange" style="bold">Acceptable</format>
+            <img src="dialog_popup_sizes_example_3_acceptable.png" alt=""/>


Is the "Acceptable" example based on some sizing rules? Unclear how these paddings were chosen

You're right. I should've written here that it's the default XS size

OlyaB · 2024-12-17T18:15:41Z

topics/Dialog-and-popup-sizes.md

+
+Some components, for example, <control>tables</control>, can have an [empty state](empty_state.md) when there is no content. In this case, the minimum size depends on which state takes more space: the component with content or with an empty state.
+
+In most cases, an empty state takes less space than the minimum size of a component. In other cases, the minimum size of the component should be determined by the size of the empty state to reduce unexpected resizing.


I'd suggest adding an example where the component size is defined by its empty state

Possibly write explicitly the sizes of the table again here for this particular example — we take min width and height and get this empty state size

Couldn't find an example for the case when the size of a component is defined by its empty state, and I am not even sure it exists

topics/Dialog-and-popup-sizes.md

OlyaB · 2025-01-08T12:30:49Z

topics/Window-sizes.md

+
+Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products.
+
+For simple cases use default sizes for [dialogs](Window-sizes.md#default-sizes) and [popups](Window-sizes.md#popup). When default sizes don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components).


Possibly make "default sizes" a link here, remove "for dialogs and popups", because there are also tool windows?

You're right, thanks!

topics/Window-sizes.md

OlyaB · 2025-01-08T12:52:39Z

topics/Window-sizes.md

+
+![A preview of recommended window sizes for dialogs: extra small, small, medium, and large](dialog_popup_sizes.png){width="706"}
+
+<note>When setting the default size for your dialog, it should be impossible to make it smaller.</note>


Could it be rewritten a big shorter, e.g. "It should be impossible to make a dialog smaller than its default size." or "The dialog cannot be made smaller than the default size."

✅ Fixed, thanks!

OlyaB · 2025-01-08T14:15:29Z

topics/Window-sizes.md

+
+Best for:
+* A full-width table with four or more columns.
+* Two-column layout with an image or a video in any of the columns. In this case, the image or the video takes the most space.


Possibly call it a "master-detail layout" instead of "two-column"? Or does "two-column" include both the master-detail and two columns that don't depend on each other?

Yeah, by 'two-column' I meant both cases with a master detail and without. I'll write it down explicitly to remove any questions then, thanks

OlyaB · 2025-01-08T14:16:15Z

topics/Window-sizes.md

+
+Best for:
+* A full-width table with four or more columns.
+* Two-column layout with an image or a video in any of the columns. In this case, the image or the video takes the most space.


Images and videos are very rare for the IDEs, I'd suggest putting this bullet point in the end of this list

OlyaB · 2025-01-08T17:06:55Z

topics/Window-sizes.md

+
+## Minimum sizes for components
+
+When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.


What is "important" content? Possibly just remove this word?

✅ Removed

topics/Window-sizes.md

OlyaB · 2025-01-08T17:10:53Z

topics/Window-sizes.md

+    </table>
+
+2. What type of content is used:
+


The central alignment for content that is usually left-aligned seem a big unexpected. Possibly left-align lines inside each of the examples?

✅ Thought this too, fixed

OlyaB · 2025-01-08T17:14:04Z

topics/Window-sizes.md

+
+#### Example 1
+
+The <control>Rename Inheritors</control> dialog has a table with FQNs. Add 350&nbsp;px as the minimum width for a table column. This will make the dialog wider than the recommended 500&nbsp;px but will show more of FQNs.


"recommended 500 px" — both 350 px for FQN and 500 px for dialog are recommened, so I'd suggest changing this phrase to "default Small size (500x350 px)"

✅ Fixed, thanks

OlyaB · 2025-01-08T17:21:54Z

topics/Window-sizes.md

+
+#### Example 3
+
+Add horizontal and vertical 100&nbsp;px insets inside the <control>Diagram</control> popup to make it adaptable to the different amounts of content inside.


It seems, the dialog can adapt to content regardless of how much empty space it has. Possibly, the 100 px insets help the diagram dialog be more noticeable when the diagram is small, and also makes the diagram easier to read because the edge nodes are further away from the edges.

Also, I'd suggest mentioning what default size is used for the Acceptable case.

✅ You're right, thanks! I changed the content of this example

…is displayed' and 'Type of content' tables

MariannaKononenko

Great work, added some comments

MariannaKononenko · 2025-01-17T16:19:28Z

topics/Window-sizes.md

+
+Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products.
+
+For simple cases use [default sizes](Window-sizes.md#default-sizes). When they don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components).


"set minimum sizes" is not 100% clear here. does it mean to "set your dialog width and height to minimum values described below" or " set minimum and maximum width and height as described below"? if the latter, still not clear which sizes to use if standard sizes don't fit

The link actually refers to a different chapter about components and controls sizes inside dialogs and popups

MariannaKononenko · 2025-01-17T16:25:20Z

topics/Window-sizes.md

+
+![A preview of recommended window sizes for dialogs: extra small, small, medium, and large](dialog_popup_sizes.png){width="706"}
+
+<note>A dialog can't be made smaller than the default size.</note>


maybe clarify a bit: The user shouldn't be able to resize the dialog to smaller dimensions than the defined standard size.

It actually was something like you suggested at first, but then we made it shorter and now it kinda works fine as well

MariannaKononenko · 2025-01-17T16:28:36Z

topics/Window-sizes.md

+Size: 500×350 px
+
+Best for:
+* Multiple components with short labels that are divided into two columns.


Ideally, each case requires its own sample, but I understand it might be too much for this article already

Yeah, I suppose the guide would be super hard to read + there is not much content for each specific bullet point

MariannaKononenko · 2025-01-17T16:31:54Z

topics/Window-sizes.md

+* Two-column layout with code snippets or input fields with long texts in both columns.
+* Three-or-more-column layout regardless of the content.
+
+For example, <control>Code Style</control> settings for Java in the <control>Settings</control> dialog. The dialog has three columns with a tree, a table, and a code snippet in different columns:


Here is not clear if this size is applied to a specific page of the Settings dialog. How does it work in this case? Should it resize automatically?

Good point. I rewrote this part

MariannaKononenko · 2025-01-17T16:46:51Z

topics/Window-sizes.md

+
+### Popup
+
+Popups should have the same default width as dialogs. In addition, there is an **extra small** size for popups – 200 px wide, when the content is narrow.


add a link to deault dialog size section here

Thanks, added!

MariannaKononenko · 2025-01-17T16:47:27Z

topics/Window-sizes.md

+
+### Popup
+
+Popups should have the same default width as dialogs. In addition, there is an **extra small** size for popups – 200 px wide, when the content is narrow.


wide, when - the comma is not needed here

Thanks, removed!

MariannaKononenko · 2025-01-17T16:47:58Z

topics/Window-sizes.md

+
+Popups should have the same default width as dialogs. In addition, there is an **extra small** size for popups – 200 px wide, when the content is narrow.
+
+<note>A popup can't be made smaller than the default size.</note>


the same suggestion as above

MariannaKononenko · 2025-01-17T16:50:54Z

topics/Window-sizes.md

+
+#### Maximum width and height
+
+The maximum width and height shouldn't exceed 80% of a screen size. Use a [scrollbar](scrollbar.md) if a popup's content doesn't fit within the set dimensions.


can we write here something like: set maximum dimensions to 80% of a screen size

Thanks, yeah, this is simpler

topics/Window-sizes.md

UX-3157 Suggest reasonable dialog/popup sizes for popular cases

7e27cdd

eldar-jetbrains requested review from MariannaKononenko and OlyaB December 10, 2024 15:13

eldar-jetbrains self-assigned this Dec 10, 2024

eldar-jetbrains added 2 commits December 11, 2024 11:18

UX-3157 Suggest reasonable dialog/popup sizes for popular cases

071da94

UX-3157 Suggest reasonable dialog/popup sizes for popular cases

901ec1a

eldar-jetbrains commented Dec 11, 2024

View reviewed changes

topics/Dialog-and-popup-sizes.md Outdated Show resolved Hide resolved

eldar-jetbrains commented Dec 11, 2024

View reviewed changes

topics/Dialog-and-popup-sizes.md Outdated Show resolved Hide resolved

eldar-jetbrains commented Dec 11, 2024

View reviewed changes

OlyaB requested changes Dec 17, 2024

View reviewed changes

eldar-jetbrains added 3 commits December 19, 2024 17:17

UX-3157 Suggest reasonable dialog/popup sizes for popular cases

8ccaaf3

Intermediate changes

e7576a4

UX-3157 Suggest reasonable dialog/popup sizes for popular cases

b0a6345

eldar-jetbrains commented Jan 3, 2025

View reviewed changes

topics/Dialog-and-popup-sizes.md Outdated Show resolved Hide resolved

eldar-jetbrains added 8 commits January 3, 2025 18:11

UX-3157 Intermediate changes

d5a13ac

UX-3157 Intermediate changes

71b365f

UX-3157 Intermediate changes

3c7087a

UX-3157 Intermediate changes

b84b561

UX-3157 Intermediate changes

c86c53b

Images fixed

203daff

UX-3157. New topic title

b1764a0

UX-3157, New topic title

c799675

eldar-jetbrains requested review from OlyaB and MariannaKononenko and removed request for MariannaKononenko January 7, 2025 22:14

UX-3157, Small text fixes, added alternative texts

35d3efe

OlyaB requested changes Jan 8, 2025

View reviewed changes

eldar-jetbrains added 5 commits January 15, 2025 17:00

UX-3157, Small text fixes, added alternative texts

4233346

UX-3157, Small text fixes, added alternative texts

ef779c2

UX-3157, Small text fixes, added alternative texts

dfac58d

UX-3157, Minor fixes in the texts and images of the 'How the content …

7c10bb0

…is displayed' and 'Type of content' tables

UX-3157, Minor fixes in the texts

469e230

MariannaKononenko approved these changes Jan 17, 2025

View reviewed changes

UX-3157, Minor fixes in the texts

d643dbf

eldar-jetbrains requested a review from OlyaB January 22, 2025 15:06

OlyaB requested changes Jan 22, 2025

View reviewed changes

UX-3157, Changes in the texts and images

9774db0

eldar-jetbrains requested review from OlyaB and MariannaKononenko January 23, 2025 09:57

UX-3157, Changes in the texts and images

2a7884f

OlyaB approved these changes Jan 23, 2025

View reviewed changes

UX-3157, Minor changes in the text and images

c14ec8a


		For example, the height of the <control>Git Brunches</control> popup adapts to the amount of the content inside:

		![Two Git Branches popups adapting to the height of their content. The popup on the left is shorter because it has fewer branches, while the popup on the right is longer because it has more branches](dialog_popup_sizes_adaptive.png){width="706"}

		@@ -0,0 +1,278 @@
		<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->

		# Dialog and Popup Sizes


		### Dialog

		There are four recommended window sizes for dialogs: extra small, small, medium, and large. Select the size depending on the amount of content to keep the important information visible.


		## Minimum sizes for components

		When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.

		When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to important content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.

		### How to set the size correctly

		#### Example 1

		The <control>Rename Inheritors</control> dialog has a table with FQNs. Add 350 px as the minimum width for a table column. This will make the dialog wider than the recommended 500 px but will show more of FQNs.


		Some components, for example, <control>tables</control>, can have an [empty state](empty_state.md) when there is no content. In this case, the minimum size depends on which state takes more space: the component with content or with an empty state.

		In most cases, an empty state takes less space than the minimum size of a component. In other cases, the minimum size of the component should be determined by the size of the empty state to reduce unexpected resizing.


		Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products.

		For simple cases use default sizes for [dialogs](Window-sizes.md#default-sizes) and [popups](Window-sizes.md#popup). When default sizes don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components).


		![A preview of recommended window sizes for dialogs: extra small, small, medium, and large](dialog_popup_sizes.png){width="706"}

		<note>When setting the default size for your dialog, it should be impossible to make it smaller.</note>


		#### Example 3

		Add horizontal and vertical 100 px insets inside the <control>Diagram</control> popup to make it adaptable to the different amounts of content inside.


		Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products.

		For simple cases use [default sizes](Window-sizes.md#default-sizes). When they don't work well, set [minimum sizes for components](Window-sizes.md#minimum-sizes-for-components).


		![A preview of recommended window sizes for dialogs: extra small, small, medium, and large](dialog_popup_sizes.png){width="706"}

		<note>A dialog can't be made smaller than the default size.</note>


		### Popup

		Popups should have the same default width as dialogs. In addition, there is an extra small size for popups – 200 px wide, when the content is narrow.


		Popups should have the same default width as dialogs. In addition, there is an extra small size for popups – 200 px wide, when the content is narrow.

		<note>A popup can't be made smaller than the default size.</note>


		#### Maximum width and height

		The maximum width and height shouldn't exceed 80% of a screen size. Use a [scrollbar](scrollbar.md) if a popup's content doesn't fit within the set dimensions.

UX-3157 Suggest reasonable dialog/popup sizes for popular cases #1407

Are you sure you want to change the base?

UX-3157 Suggest reasonable dialog/popup sizes for popular cases #1407

Conversation

eldar-jetbrains commented Dec 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eldar-jetbrains Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eldar-jetbrains Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MariannaKononenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eldar-jetbrains Dec 18, 2024 •

edited

Loading

eldar-jetbrains Dec 18, 2024 •

edited

Loading