mirror of
https://github.com/JetBrains/intellij-sdk-code-samples.git
synced 2025-07-28 09:17:50 +08:00
d8e83b57ea
* 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 ' ' * 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>
81 lines
2.2 KiB
Markdown
81 lines
2.2 KiB
Markdown
<!-- Copyright 2000-2024 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license. -->
|
||
|
||
# Description Text
|
||
|
||
<link-summary>UI guidelines on descriptions texts.</link-summary>
|
||
|
||
Description text provides explanatory information about a set of settings or a single item in a list or tree.
|
||
|
||
{width=715}
|
||
|
||
## When to Use
|
||
|
||
Use description text to:
|
||
|
||
* Show details about items in a list or tree:
|
||
|
||
{width=665}
|
||
|
||
* Describe a group of settings:
|
||
|
||
{width=1012}
|
||
|
||
## How to Use
|
||
|
||
### Text
|
||
|
||
Follow general rules in [Writing short and clear](writing_short.md) and [Punctuation](punctuation.md).
|
||
|
||
Use the default text style for plain text. Increase line height by 3px from the default value.
|
||
|
||
Use [H4 bold](typography.md) (Default bold) for headings or to highlight important words:
|
||
|
||
{width=320}
|
||
|
||
Use the editor font to highlight code snippets:
|
||
|
||
{width=283}
|
||
|
||
Use bullets for lists:
|
||
|
||
{width=283}
|
||
|
||
Limit the width of the line to 70–80 symbols, as it is not convenient to read very long lines:
|
||
|
||
<format color="Red" style="bold">Incorrect</format>
|
||
|
||
{width=878}
|
||
|
||
<format color="Green" style="bold">Correct</format>
|
||
|
||
{width=878}
|
||
|
||
If the text does not fit, add a scrollbar:
|
||
|
||
{width=333}
|
||
|
||
### Appearance
|
||
|
||
Do not add borders around the description text. Use the panel color for the background.
|
||
|
||
| <format color="Red" style="bold">Incorrect</format> | <format color="Green" style="bold">Correct</format> |
|
||
|-----------------------------------------------------|-----------------------------------------------------|
|
||
| {width="302"} | {width="302"} |
|
||
|
||
For [links](link.md), use the default link color: `Link.activeForeground`. Underline links on hover:
|
||
|
||
{width=283}
|
||
|
||
### Insets
|
||
|
||
Separate the text from the surroundings with insets.
|
||
|
||
Use a 12px horizontal inset if the description text’s area has other elements:
|
||
|
||
{width=586}
|
||
|
||
Increase inset up to 20px if the description text is the only element:
|
||
|
||
{width=571}
|
||
|