tabs-vika #1410
tabs-vika #1410
Conversation
Replaced outdated tab images with new, detailed examples, including dark theme variants, and archived the old images for reference. Enhanced the tab guidelines by restructuring sections, improving clarity, and adding visual examples to emphasize best practices.
topics/ui/controls/tabs.md
Outdated
|
|
||
| ## Tabs in Code Editors |
There was a problem hiding this comment.
Possibly rename this to "Tab Control Implementations" and tell that this article covers tabs in dialogs but there are two other implementations? To make it more clear about which tabs this article is.
There was a problem hiding this comment.
We could say these are tabs for dialogs, but they also seem perfectly usable in settings — which aren’t technically dialogs anymore.
And I can imagine someone using the editor for some kind of content with tabs inside, too.
Maybe it’s better to just link to the implementations of editor tabs and tool window tabs and leave it at that?
There was a problem hiding this comment.
Links are good. But my concern here — info about implementation is in two separate parts, above the illustration and below it. I think it might be easier to read if it's unified. Possibly just move all links to the tldr tag and remove/shorten descriptions? Here are examples from other articles: two links to implementaitons https://plugins.jetbrains.com/docs/intellij/checkbox.html, or "Related" https://plugins.jetbrains.com/docs/intellij/got-it-tooltip.html
topics/ui/controls/tabs.md
Outdated
| </tr> | ||
| </table> | ||
|
|
||
| ### Organization and Accessibility |
There was a problem hiding this comment.
"Accessibility" creates expectations that this part might tell something about voice-over, high contrast and other stuff usually associated with this word. Possibly make the header about tabs order?
There was a problem hiding this comment.
Maybe something like this? Tab Order and Layout
There was a problem hiding this comment.
Nice! Please use sentence capitalization
Simplified and clarified the language in the tabs documentation for better readability. Updated multiple associated images to align with the revised content and improve visual consistency across light and dark themes.
Replaced the table layout for correct/incorrect tab examples with styled inline images for better clarity and consistency. Updated image files to reflect changes in visual examples.
Revised the color codes and formatting for "Correct" and "Incorrect" labels in tab examples. Improved clarity by providing more explicit formatting and ensuring consistency with the documentation style.
| @@ -10,11 +10,12 @@ | |||
|
|
|||
| </tldr> | |||
|
|
|||
| Tabs organize content in dialogs by grouping similar UI controls. | |||
| Tabs help organize related content. | |||
There was a problem hiding this comment.
Possibly rewrite as an imperative: "Use tabs to organize related content." And move to "When to use" — see Button article for an example
topics/ui/controls/tabs.md
Outdated
|
|
||
| ## Tabs in Code Editors |
There was a problem hiding this comment.
Links are good. But my concern here — info about implementation is in two separate parts, above the illustration and below it. I think it might be easier to read if it's unified. Possibly just move all links to the tldr tag and remove/shorten descriptions? Here are examples from other articles: two links to implementaitons https://plugins.jetbrains.com/docs/intellij/checkbox.html, or "Related" https://plugins.jetbrains.com/docs/intellij/got-it-tooltip.html
|
|
||
| Make the label short, preferably no more than 3 words. | ||
| Use title capitalization for tab labels. Make the label short, preferably no more than 3 words. | ||
| Avoid generic words, such as "General" or "Advanced". | ||
| See [Writing short and clear](writing_short.md). |
There was a problem hiding this comment.
Possibly make these a bullet list?
topics/ui/controls/tabs.md
Outdated
| </tr> | ||
| </table> | ||
|
|
||
| ### Organization and Accessibility |
There was a problem hiding this comment.
Nice! Please use sentence capitalization
|
|
||
| {width=706} | ||
|
|
||
| Do **not** surround the tab content area with a visible border. |
There was a problem hiding this comment.
Possibly place this sentence after the 1st sentence in this section, and add an "incorrect" label here? So you have two sentences together in the beginning and then 3 illustrations
No description provided.