origin/radio_button_vika #1412
origin/radio_button_vika #1412
Conversation
Replaced old radio button images with updated versions, adding light and dark mode variants for clarity and consistency. Older assets were moved to a dedicated "old" folder for archival purposes. This improves structure and supports a more modern visual design.
Updated phrasing to improve clarity and consistency, emphasizing when to use checkboxes for two opposing choices. No functional or structural changes were made.
| <td><img src="dropdown_correct.png" alt="" width="351" /></td> | ||
| </tr> | ||
| </table> | ||
| {width=706} |
There was a problem hiding this comment.
Maybe add real examples for this image? If it is a language group, it could be Java, Kotlin, Python, etc
| <table style="none" border="false"> | ||
| <tr> | ||
| <td width="50%"> | ||
| <format color="Green" style="bold">Correct</format><img src="04_When_to_use_correct.png" alt="A correct example of using a drop-down list instead of radiobuttons"/> |
There was a problem hiding this comment.
The width of the menu here should be bigger because the labels should be aligned vertically
| * The screen space is limited. | ||
| * The option might be used less often than other options on the screen. | ||
| * There are other drop-down lists in the same group of UI components. A radio button group is more noticeable than a drop-down list, so it will look like a more important setting. | ||
| * There is a combination of several UI components for one setting: | ||
| {width=575} | ||
| {width=706} |
There was a problem hiding this comment.
Here also the case with the narrow menu of the dropdown when it should be wider
There was a problem hiding this comment.
Also, I think the chevron is missing on the right of the dropdown
| @@ -89,19 +107,22 @@ Use the imperative form of verbs. | |||
|
|
|||
| Do not use negation in labels as it complicates understanding. | |||
There was a problem hiding this comment.
- Possibly add examples for each rule here with correct incorrect usages to help people better understand the rules
- Add bullets to the bullet list
There was a problem hiding this comment.
This shouldn't be a bullet list according to how we write articles now. See how the same section is structured in the Button article
|
|
||
| Make labels short and intelligible — see [Writing short and clear text](writing_short.md). | ||
|
|
||
| ### Group label | ||
|
|
||
| {width=267} | ||
| {width=706} | ||
|
|
||
| Always start a radio button group with a group label. It explains what the options are for. |
There was a problem hiding this comment.
Add bullet points to the list here
There was a problem hiding this comment.
I'd suggest not making it a bullet list but two paragraphs each with its own illustration:
Always start a radio button group with a group label. It explains what the options are for. Use a colon at the end of a group label.
[new illustration here]
Use a checkbox or another radio button as a group label if the radio button group needs to be turned on or off.
[existing illustration here]
|
|
||
| ### Use dropdown |
There was a problem hiding this comment.
Should be drop-down?
| <td><img src="07_How_to_use.png" alt="An example of a label spanning two lines." width="378"/></td> | ||
| <td><p>If a label is long, split it into two lines. Avoid labels that take more than two lines. See recommendations on writing concise labels below.</p></td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| To implement this, use HTML formatting: |
There was a problem hiding this comment.
Make a collapsible "Implementation" chapter
|
|
||
| Make labels short and intelligible — see [Writing short and clear text](writing_short.md). | ||
|
|
||
| ### Group label | ||
|
|
||
| {width=267} | ||
| {width=706} | ||
|
|
||
| Always start a radio button group with a group label. It explains what the options are for. | ||
|
|
There was a problem hiding this comment.
I would replace the content in Sizes and placement chapter into this one: https://plugins.jetbrains.com/docs/intellij/layout.html#checkboxes-and-radio-buttons as "Follow the layout of /checkboxes and radio-buttons/(anchor-link)
|
|
||
| * Several options in a group can be selected. Use a group of [checkboxes](checkbox.md) instead. | ||
| * There are only 2 opposite yes/no options. Use a checkbox instead. | ||
| ### Several options in a group can be selected |
There was a problem hiding this comment.
Possibly make it a bit shorter, e.g. "Several options can be selected"
| * Several options in a group can be selected. Use a group of [checkboxes](checkbox.md) instead. | ||
| * There are only 2 opposite yes/no options. Use a checkbox instead. | ||
| ### Several options in a group can be selected | ||
| Use a group of [checkboxes](checkbox.md) instead. |
There was a problem hiding this comment.
Since this sentence now is not a second sentence as it was in old guidelines, I'd add more context to it: "Use a group of checkboxes when several options can be selected."
|
|
||
| {width=427} | ||
| ### Binary Yes/No Options |
There was a problem hiding this comment.
Please use sentence case in the header
There was a problem hiding this comment.
Also, possibly it works without "binary"? Seems "yes/no" is same as "binary"?
|
|
||
| {width=427} | ||
| ### Binary Yes/No Options | ||
| For only two opposing yes/no options, use a checkbox instead. |
There was a problem hiding this comment.
"instead" is not needed here
|
|
||
| * There are 5 and more options. Use a [drop-down list](drop_down.md): | ||
| ### 5 and more options | ||
| If the options have short labels, use a segmented button. Or, if the options can be represented on an axis, such as a time delay, use a slider instead. |
There was a problem hiding this comment.
Possibly add subheaders here — "Short option labels" and "Long option labels"?
| * The screen space is limited. | ||
| * The option might be used less often than other options on the screen. | ||
| * There are other drop-down lists in the same group of UI components. A radio button group is more noticeable than a drop-down list, so it will look like a more important setting. | ||
| * There is a combination of several UI components for one setting: | ||
| {width=575} | ||
| {width=706} | ||
| *The automatic updates setting consists of a checkbox, three lengthy-labeled options in a dropdown and a button.* |
There was a problem hiding this comment.
We don't have image captions in other rewritten articles. Captions are either moved to be above the image as a part of a regular paragraph, or removed. I think this caption can be removed, it just describes what's in the picture.
| <table style="none" border="false" column-width="fixed"> | ||
| <tr> | ||
| <td><img src="06_How_to_use.png" alt="Label example" width="378"/></td> | ||
| <td><p>A label accompanies each checkbox and is placed next to it.</p></td> |
There was a problem hiding this comment.
Please replace "checkbox" with "radio button" here
| <td><img src="07_How_to_use.png" alt="An example of a label spanning two lines." width="378"/></td> | ||
| <td><p>If a label is long, split it into two lines. Avoid labels that take more than two lines. See recommendations on writing concise labels below.</p></td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| To implement this, use HTML formatting: |
There was a problem hiding this comment.
I'd suggest replacing "this" with what exactly is implemented here because now there's a table above, the paragraph about two lines appears to the right and can be skipped.
| @@ -89,19 +107,22 @@ Use the imperative form of verbs. | |||
|
|
|||
| Do not use negation in labels as it complicates understanding. | |||
There was a problem hiding this comment.
This shouldn't be a bullet list according to how we write articles now. See how the same section is structured in the Button article
|
|
||
| Make labels short and intelligible — see [Writing short and clear text](writing_short.md). | ||
|
|
||
| ### Group label | ||
|
|
||
| {width=267} | ||
| {width=706} | ||
|
|
||
| Always start a radio button group with a group label. It explains what the options are for. |
There was a problem hiding this comment.
I'd suggest not making it a bullet list but two paragraphs each with its own illustration:
Always start a radio button group with a group label. It explains what the options are for. Use a colon at the end of a group label.
[new illustration here]
Use a checkbox or another radio button as a group label if the radio button group needs to be turned on or off.
[existing illustration here]
No description provided.