Karol Lewandowski d8e83b57ea
UI Guidelines (#1308)
* Add UI Guidelines to  SDK docs

* Add UI Guidelines to  SDK docs

* Fixing build errors

* optimize PNGs

* add UI guidelines landing page placeholder

* IJ SDK Docs <-> UI guidelines crosslinks updated

* split_button.md: remove reference to removed setting

* use <ui-path>

* use MD instead of <note>

* use %gh-ic% links

* drop_down.md: fix <control>

* code samples: fix most obvious issues

* remove obsolete `_defaults.md`

* ijs.tree: UI cleanup

* Delete "under construction" pages

* Fix headers

* Add link-summary

* Remove invalid links

* Delete unused files

* Remove ''@2x' from image file names

* Use Markdown syntax for some images and tables

* Rename non-unique files to unique

* Remove alpha in images where content is unreadable

* align quotation marks

* Controls: cleanup/fixes, add code links, edit

* tooltip.md: fix HTML

* misc fixes

* typography.md: fix table contents

* typography.md: fix table header

* UI guidelines landing page + TOC fixes

* remove unused icons_list.md

* Normalize image paths

* validation_errors.md: Fix broken tab

* "correct"/"incorrect" labels styling

* Resize images to 50%

* button.topic: fixes

* grammar, spelling, minor edits

* remove '&nbsp;'

* fix 99px

* cleanup

* UI_kit.md: minor

* Fix "MRK058: Large image in paragraph rendered as a block element by default."

* button.topic: Add img[alt]

* mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack

* split_button.md: Use ui-path

* UI landing: add feedback snippet

* Improve code snippets formatting and naming

* Fix code samples

* Fix code samples

* Add Kotlin variants for code samples

* Add icons_list.md

* crosslinks

* Change external link to https://intellij-icons.jetbrains.design/

* icons list -> https://intellij-icons.jetbrains.design

* Hide info about reducing split button to simple action button (now it is available through the registry only)

* reformat

* icons_style.md: Images in new line

---------

Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com>
Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
2024-05-16 13:51:56 +02:00

45 lines
1.4 KiB
Markdown

<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
# Group Header
<link-summary>UI guidelines on using group headers.</link-summary>
<tldr>
**Implementation:** [`TitledSeparator`](%gh-ic%/platform/platform-api/src/com/intellij/ui/TitledSeparator.java)
</tldr>
A group header clearly labels a group of UI controls.
![](01_group_header.png){width=455}
## When to use
Follow the rules in [Groups of controls](groups_of_controls.md).
Do **not** use group headers when each group contains 3 controls and less. Separate with [vertical insets](layout.md#organize-with-insets) instead.
<format color="Red" style="bold">Incorrect</format>
![](6_03_group_incorrect.png){width=569 style=block}
*Each group has less than 3 controls. Group headers only add noise in this case because control labels are enough to understand their purpose.*
<format color="Green" style="bold">Correct</format>
![](6_03_group_correct.png){width=569}
## How to use
Use title capitalization for the label.
Make the label short, preferably no more than 4 words. Avoid generic words, such as "General" or "Options". See [Writing short and clear](writing_short.md).
If a group contains rarely used or advanced settings, use a **collapsible group header** and collapse it by default.
![](02_collapsed_header.png){width=455}