Docs component content updates carbon-design-system#3 (carbon-design-…

…system#1176) * docs: component content updates carbon-design-system#3 * docs: update inline loading
natashadecoste · May 19, 2021 · 5eea830 · 5eea830
1 parent 0343db4
commit 5eea830
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 16 deletions.
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
@@ -1,6 +1,6 @@
 ---
 title: Inline loading
-description: Inline loading spinners notify a user that their action is being processed.
+description: The inline loading component provides visual feedback that a user's action is being processed.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
@@ -48,7 +48,7 @@ The inline loading component provides visual feedback that a user's action is be
 
 ## General guidance
 
-Inline loading spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they work to reassure the user that their action is being processed.
+Inline loading spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
 
 Use an inline loading component for any Create, Update, or Delete actions. It can be used in a table, after a primary or secondary button click, or even in a modal.
 

diff --git a/src/pages/components/list/usage.mdx b/src/pages/components/list/usage.mdx
@@ -1,9 +1,24 @@
 ---
 title: List
-description: Lists consist of related content grouped together and organized vertically.
+description: Lists are vertical groupings of related content. List items begin with either a number or a bullet.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+Lists are vertical groupings of related content. List items begin with either a number or a bullet.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Variations</AnchorLink>
+<AnchorLink>Content</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -90,7 +105,11 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## General guidance
 
-_Lists_ consist of related content grouped together and organized vertically.
+Lists consist of related content grouped together and organized vertically.
+
+Use bulleted lists when you don't need to convey a specific order for list items.
+
+Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.
 
 ## Variations
 
@@ -120,3 +139,7 @@ Use list items that are grammatically parallel. For example, do not mix passive
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
@@ -4,6 +4,20 @@ description: Loading spinners are used when retrieving data or performing slow c
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Size</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -33,7 +47,7 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## General guidance
 
-_Loading_ spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.
+Loading spinners are used when retrieving data or performing slow computations. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
 
 It is best practice to use a loading spinner whenever the wait time is anticipated to be longer than three seconds.
 
@@ -48,3 +62,7 @@ Loading spinners may be scaled down if the loading experience is contextual to a
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
@@ -1,9 +1,23 @@
 ---
 title: Number input
-description: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
+description: The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Formatting</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -69,9 +83,9 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 _Number inputs_ are similar to text inputs, but contain controls used to increase or decrease an incremental value.
 
-## Format
+## Formatting
 
-- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that only require a few clicks.
+- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that require only a few clicks.
 - Enable the user to also choose to type a number in the field.
 - Ensure that a default value is shown within the field.
 - Use a clear and concise label for the number input.
@@ -85,3 +99,7 @@ _Number inputs_ are similar to text inputs, but contain controls used to increas
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
@@ -1,9 +1,23 @@
 ---
 title: Overflow menu
-description: Overflow menus are used when additional options are available to the user and there is a space constraint.
+description: Use the overflow menu component when additional options are available to the user but there is a space constraint.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+Use the overflow menu component when additional options are available to the user but there is a space constraint.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Formatting</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -44,9 +58,9 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## General guidance
 
-_Overflow menu_ is used when additional options are available to the user and there is a space constraint.
+Overflow menu is used when additional options are available to the user and there is a space constraint.
 
-## Format
+## Formatting
 
 #### Text
 
@@ -81,3 +95,7 @@ Depending on where the Overflow Menu appears within the UI, the caret or arrow m
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
@@ -4,6 +4,20 @@ description: Pagination is used for splitting up content or data into several pa
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Best practices</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -55,9 +69,9 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## General guidance
 
-_Pagination_ is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
+Generally, pagination is used if there are more than 25 items displayed in one view.
 
-Generally, pagination is used if there are more than 25 items displayed in one view. The default number displayed will vary depending on the context.
+The default number displayed will vary depending on the context.
 
 ## Best practices
 
@@ -96,3 +110,7 @@ Use an inline select within the pagination bar so the user can change the amount
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
@@ -1,9 +1,23 @@
 ---
 title: Progress indicator
-description: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.
+description: A progress indicator is a visual representation of a user's progress through a set of steps, guiding toward the completion of a specified process.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
+<PageDescription>
+
+A progress indicator is a visual representation of a user's progress through a set of steps, guiding toward the completion of a specified process.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>General guidance</AnchorLink>
+<AnchorLink>Best practices</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 <ComponentDemo
   components={[
     {
@@ -72,8 +86,6 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## General guidance
 
-_Progress indicator_ is a visual representation of a users progress through a set of steps. They guide the user through a number of steps in order to complete a specified process.
-
 Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.
 
 ## Best practices
@@ -97,3 +109,7 @@ Use validation to confirm that a previous step has been completed. If the user c
 
 </Column>
 </Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).