Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ComboBox, Dropdown, TextField doc updates #15100

Merged
merged 8 commits into from
Sep 17, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"type": "patch",
"comment": "Update website content for ComboBox, Dropdown, and TextField",
"packageName": "office-ui-fabric-react",
"email": "[email protected]",
"dependentChangeType": "patch",
"date": "2020-09-17T19:42:26.105Z"
}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
A combo box (`ComboBox`) combines a text field and a drop-down menu, giving people a way to select an option from a list or enter their own choice.
A combo box (`ComboBox`) combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice.
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
### Layout

- Use a dropdown list when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when space is constrained.
- Use a dropdown list when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).
- Use a dropdown when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when space is constrained.
- Use a dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).

### Content

- Use sentence-style capitalization—only capitalize the first word. For more info, see [Capitalization](https://docs.microsoft.com/style-guide/capitalization) in the Microsoft Writing Style Guide.
- The dropdown list label should describe what can be found in the menu.
- The dropdown label should describe what can be found in the list of options.
- Use shortened statements or single words as list options.
- If there isn't a default option, use "Select an option" as placeholder text.
- If "None" is an option, include it.
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
A dropdown menu is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button.
A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms.
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
### Content

- Include a short label above the text field to communicate what information should be entered. Don't use placeholder text instead of a label. Placeholder text poses a variety of accessibility issues (including possible problems with color/contrast, and people thinking the form input is already filled out).
- When part of a form, make it clear which fields are required vs. optional. If the input is required, add "(required)" to the label. Don't exclusively use "\*" to indicate required inputs as it is often not read by screen readers. For example, "First name (required)".
- When part of a form, make it clear which fields are required vs. optional. If the input is required, add an asterisk "\*" to the label. For screen readers, make sure the `aria-required` property is set to `true`.
- Use sentence-style capitalization—only capitalize the first word. For more info, see [Capitalization](https://docs.microsoft.com/style-guide/capitalization) in the Microsoft Writing Style Guide.