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

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

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

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

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

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

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

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 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

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

8ccaaf3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

eldar-jetbrains commented Dec 10, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

eldar-jetbrains Dec 11, 2024

OlyaB Dec 17, 2024

OlyaB Dec 17, 2024

eldar-jetbrains Dec 18, 2024 •

edited

Loading

OlyaB Dec 17, 2024

eldar-jetbrains Dec 18, 2024

OlyaB Dec 17, 2024

eldar-jetbrains Dec 18, 2024 •

edited

Loading

OlyaB Dec 17, 2024

eldar-jetbrains Dec 18, 2024

OlyaB Dec 17, 2024

OlyaB Dec 17, 2024

OlyaB Dec 17, 2024

OlyaB Dec 17, 2024

eldar-jetbrains Dec 18, 2024

OlyaB Dec 17, 2024


		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.

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

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

eldar-jetbrains Dec 18, 2024 •

edited

Loading

eldar-jetbrains Dec 18, 2024 •

edited

Loading