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.
| @@ -10,10 +10,11 @@ | |||
|
|
|||
| </tldr> | |||
|
|
|||
| Tabs organize content in dialogs by grouping similar UI controls. | |||
| Tabs organize content by grouping similar UI controls. | |||
There was a problem hiding this comment.
Possibly replace the word "similar" with "related"?
|
|
||
| ## 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.
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
There was a problem hiding this comment.
Possibly add more mistakes to the Incorrect version? It appears under a paragraph with several rules but illustrates only one about Advanced.
|
|
||
| Place the most frequently used content in the first tab. | ||
|
|
||
| Tabs that do not fit allotted screen space automatically hide under the dropdown component. | ||
| (It is better to add no more than 8 tabs, but this number is not limited.) |
There was a problem hiding this comment.
I'd suggest removing the round brackets here, just leave the sentence without them.
| </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?
|
|
||
| <format color="Red" style="bold">Incorrect</format> | ||
| Always place tabs on top. It is possible to place them at other sides of the content — bottom, left, or right — but such a placement is extremely rare and might confuse users. |
There was a problem hiding this comment.
When reading the first time, had the question "on top of what?". Possibly write as "Always place tabs on top of the content", and remove "of the content" in the 2nd sentence.
|
|
||
| <format color="Red" style="bold">Incorrect</format> | ||
| When there are other UI controls above tabs, separate them with a vertical indent. |
There was a problem hiding this comment.
This sentence appears right under the "Incorrect" example, which makes the structure a bit unclear. Possibly add an inividual header for this sentence, e.g. "Controls above tabs"
|
|
||
| When there are other UI controls above tabs, separate them with a vertical indent. | ||
| ### Bottom border |
There was a problem hiding this comment.
I'd suggest calling this "Tabs border" because there's only one border in tabs
No description provided.