Merge pull request #5668 from magento/5248-ol-list-prefix-3

Fixed ordered list prefix (MD029) - Group 3

Author: jeff-matthews

guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.md

@@ -32,12 +32,12 @@ _Example of panel animation_
 
 The active panel should include the following elements:
 
-* Content container (Panel)
-* A Page title
-* Close control "×" (ESC-key via keyboard)
-* Button bar for actions, including a "Cancel" (ESC-key is Cancel via keyboard)
-* Page content
-* "Shade" to disable lower level page
+*  Content container (Panel)
+*  A Page title
+*  Close control "×" (ESC-key via keyboard)
+*  Button bar for actions, including a "Cancel" (ESC-key is Cancel via keyboard)
+*  Page content
+*  "Shade" to disable lower level page
 
 ![Example of active panel positioned over "parent"](img/slideout-panel2.png)
 
@@ -82,7 +82,7 @@ If the form in slide-in panel creates new entities, or changes existing ones (Cr
 Clicking that button will:
 
 1. Validate the form in Slideout. If form has errors, it will show the error messages following the Error Messaging Pattern. If no errors found, it will:
-2. Close the Slideout and apply changes immediately (entity will be created in the database, for example).
+1. Close the Slideout and apply changes immediately (entity will be created in the database, for example).
 
 ### Extend Form
 
@@ -91,7 +91,7 @@ Clicking that button will:
 If the Slideout panel is a part of the form, extending it (like Advanced Inventory, or Advanced Pricing), primary action should be labeled as "Done". Clicking it will:
 
 1. Validate the form in Slideout. If form has errors, it will show the error messages following the Error Messaging Pattern. If no errors found, it will:
-2. Close the Slideout and save the contents of its form. User still has to click "Save" button on the main form to apply changes.
+1. Close the Slideout and save the contents of its form. User still has to click "Save" button on the main form to apply changes.
 
 Clicking "Cancel" or clicking "×" or clicking outside of the panel (passive close) in both cases should reset contents of the current level Slideout form to default state.
 If user made changes to a form, he is presented with the modal window to confirm Cancellation:
@@ -133,12 +133,12 @@ _Example of a Confirmation Modal_
 
 The active modal should include the following elements:
 
-* Content container (Modal Window)
-* A Title
-* Close control "×" (ESC-key via keyboard)
-* Page content
-* Call to action(s), including "Cancel" (ESC-key is Cancel via keyboard)
-* "Shade" to disable lower level page
+*  Content container (Modal Window)
+*  A Title
+*  Close control "×" (ESC-key via keyboard)
+*  Page content
+*  Call to action(s), including "Cancel" (ESC-key is Cancel via keyboard)
+*  "Shade" to disable lower level page
 
 ### Cancel and Close controls
 
@@ -168,10 +168,10 @@ _Sample of progress bar in modal_
 
 Modal windows are implemented by the following Magento [jQuery](https://glossary.magento.com/jquery) widgets:
 
-* [modal]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html)
-* [alert]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_alert.html) (extends modal)
-* [confirm]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_confirm.html) (extends modal)
-* [prompt]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_prompt.html) (extends modal)
+*  [modal]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html)
+*  [alert]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_alert.html) (extends modal)
+*  [confirm]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_confirm.html) (extends modal)
+*  [prompt]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_prompt.html) (extends modal)
 
 ## Overlays
 
@@ -223,8 +223,8 @@ _Data-table with Confirmation Message_
 
 ## Assets
 
-* [Download Slide-out Panels PSD source](src/Slide-out-Panels.psd)
-* [Download Modal PSD source](src/Modal.psd)
+*  [Download Slide-out Panels PSD source](src/Slide-out-Panels.psd)
+*  [Download Modal PSD source](src/Modal.psd)
 
 ## Technical Implementation
 

guides/v2.2/pattern-library/controls/Expandable_Sections/expand-collapse.md

@@ -17,48 +17,48 @@ Required fields should not be located within a collapsed section, as this increa
 
 ### Position and dimensions
 
-* Expandable sections can exist with or without a left sidebar.
-* A level 1 expandable section has 24px top padding and 30px bottom padding of the section title.
-* Level 2, 3, and 4 expandable sections have 18px top and bottom padding of the section title. Each expandable sub-section is indented by 40px.
+*  Expandable sections can exist with or without a left sidebar.
+*  A level 1 expandable section has 24px top padding and 30px bottom padding of the section title.
+*  Level 2, 3, and 4 expandable sections have 18px top and bottom padding of the section title. Each expandable sub-section is indented by 40px.
 
   ![Specs](img/specs.png)
 
-* If the expandable section belongs to a [layout](https://glossary.magento.com/layout) with a sidebar, and the content area contains forms, then the form field starts at the 7th column for level 2 and at 8th column for levels 3 and 4.
-* The content areas in the expandable section have 30px padding at the top and bottom. _The current design proposal accommodates 4 levels of nested expandable sections._
+*  If the expandable section belongs to a [layout](https://glossary.magento.com/layout) with a sidebar, and the content area contains forms, then the form field starts at the 7th column for level 2 and at 8th column for levels 3 and 4.
+*  The content areas in the expandable section have 30px padding at the top and bottom. _The current design proposal accommodates 4 levels of nested expandable sections._
 
 ### Visual appearance
 
-* A simple expandable section is a container with a border, section header, and a toggle arrow (right aligned) to control the showing and hiding of content.
+*  A simple expandable section is a container with a border, section header, and a toggle arrow (right aligned) to control the showing and hiding of content.
 
   ![Simple expandable section](img/simple.png)
 
-* A nested expandable section is a sub-section within an expandable section. The nested expandable section has all the same features as the "simple" expandable section, however the expand and collapse control is located on the left. This is to help the User more easily identify the expandable sub-sections within an expanded section.
+*  A nested expandable section is a sub-section within an expandable section. The nested expandable section has all the same features as the "simple" expandable section, however the expand and collapse control is located on the left. This is to help the User more easily identify the expandable sub-sections within an expanded section.
 
   ![Nested section](img/nested.png)
 
-* When expanded, the control (chevron symbol) points upward, and it points downward when closed or collapsed. This indicates the direction the section will expand or collapse when clicked.
+*  When expanded, the control (chevron symbol) points upward, and it points downward when closed or collapsed. This indicates the direction the section will expand or collapse when clicked.
 
-* The section deader title font size is 17px semibold.
+*  The section deader title font size is 17px semibold.
 
 ## Functional behavior
 
-* Expandable sections should expand to become visible when the heading or toggle arrow is clicked.
-* Several expandable sections can be kept open at the same time.
-* When a page contains several expandable sections, all sections remain collapsed by default.
-* Once the user expands or collapses a few panels, the system remembers the panels states and on a return visit the same states are displayed.
-* For nested panels, if a section is collapsed, all "nested" expandable sections within that section should be collapsed as well.
+*  Expandable sections should expand to become visible when the heading or toggle arrow is clicked.
+*  Several expandable sections can be kept open at the same time.
+*  When a page contains several expandable sections, all sections remain collapsed by default.
+*  Once the user expands or collapses a few panels, the system remembers the panels states and on a return visit the same states are displayed.
+*  For nested panels, if a section is collapsed, all "nested" expandable sections within that section should be collapsed as well.
 
 ## Variations
 
 1. Simple – section that contains a single level of expansion in a section (no nested expandable sub-sections).
 
    ![Simple section](img/simple_exp.png)
 
-2. Nested – section that contains one or more expandable sub-sections.
+1. Nested – section that contains one or more expandable sub-sections.
 
    ![Nested section](img/nested_exp.png)
 
-3. Single expandable – section that contains only one expandable section; usually used to hide additional information.
+1. Single expandable – section that contains only one expandable section; usually used to hide additional information.
 
    ![Single expandable section](img/single_exp.png)
 

guides/v2.2/pattern-library/controls/button-bar/button-bar.md

@@ -8,27 +8,27 @@ For solutions not described in this article, please refer to other related patte
 
 ## When to Use
 
-* When page level actions are necessary.
+*  When page level actions are necessary.
 
 ## When Not to Use
 
-* When there is already a button bar.
-* When there is a wizard bar.
-* When buttons are needed but they are not page level buttons.
+*  When there is already a button bar.
+*  When there is a wizard bar.
+*  When buttons are needed but they are not page level buttons.
 
 ## Rules
 
 ### General Rules
 
-* Only one button bar is allowed per page.
-* Either use a button bar or a wizard bar. Both cannot be on the page.
-* The buttons within the button bar must be one of the page-level buttons from [buttons pattern](../buttons/buttons.html).
-* All the buttons in button bar should be visible at all time.
+*  Only one button bar is allowed per page.
+*  Either use a button bar or a wizard bar. Both cannot be on the page.
+*  The buttons within the button bar must be one of the page-level buttons from [buttons pattern](../buttons/buttons.html).
+*  All the buttons in button bar should be visible at all time.
 
 ### Location
 
-* Button bar can be used in a page or a slide-in panel.
-* Its location in either scenario must be right below the page title or the slide-in panel title.
+*  Button bar can be used in a page or a slide-in panel.
+*  Its location in either scenario must be right below the page title or the slide-in panel title.
 
 #### Button Bar Position in Page
 
@@ -40,18 +40,18 @@ For solutions not described in this article, please refer to other related patte
 
 ### Page Level Button Order and Priority - General Rules
 
-* There should never be more than one primary page level button on a single page.
-* Primary page level buttons should always be placed on the far right of the button order.
-* If a Back button is present, it should always fall on the far left of the button order.
-* Buttons should be ordered by group as specified below. In situations where button groups do not apply, they should be ordered by importance.
+*  There should never be more than one primary page level button on a single page.
+*  Primary page level buttons should always be placed on the far right of the button order.
+*  If a Back button is present, it should always fall on the far left of the button order.
+*  Buttons should be ordered by group as specified below. In situations where button groups do not apply, they should be ordered by importance.
 
 ### Ordering of Button Bar
 
 Page level buttons can be logically grouped as follows:
 
-* Regress
-* Remove
-* Progress
+*  Regress
+*  Remove
+*  Progress
 
 Groups can contain multiple CTAs but only one primary CTA. Groups should follow the below order:
 
@@ -72,7 +72,7 @@ All buttons should be right aligned. The button bar is spread across 12 columns
 ## Recommendation
 
 1. It is recommended that all buttons in button bar should only be in one line. Because the button bar is in fluid grid, it is possible for the buttons to be wrap around to the next line.
-2. If you have multiple page-level buttons. We recommend using the split button rather having too many buttons that will clutter the page.
+1. If you have multiple page-level buttons. We recommend using the split button rather having too many buttons that will clutter the page.
 
 ![](img/button-bar-with-splitbutton.jpg)
 

guides/v2.2/pattern-library/displaying-data/tree/tree.md

@@ -82,9 +82,9 @@ Icons should always be placed on the left of the icon label and Icons should NOT
 
 Select All is the default state for tree with multi select functionality. When this functionality is triggered:
 
-* All checkboxes are checked
-* Complete tree DOESN’T highlight
-* "Select All" link changes to "Clear All".
+*  All checkboxes are checked
+*  Complete tree DOESN’T highlight
+*  "Select All" link changes to "Clear All".
 
 When Clear All functionality is triggered – All the checkboxes are deselected. The "Clear All" link is only shown when everything is selected.
 
@@ -96,25 +96,25 @@ _Note:_ The "Expand All/Collapse All" control can appear simultaneously with the
 
 #### Select Indicators
 
-* Partial Selection – this appears when a parent has items BOTH in checked and unchecked states. Partial selection only occurs at anchor level
-* Unchecked State – Item not selected and can be clicked for selection
-* Checked State – item selected and can be unchecked for de-selection
-* Unchecked and Inactive – this state appears when the item is unselected and not active
-* Checked and Inactive – this state appears when the item is selected and not active.
+*  Partial Selection – this appears when a parent has items BOTH in checked and unchecked states. Partial selection only occurs at anchor level
+*  Unchecked State – Item not selected and can be clicked for selection
+*  Checked State – item selected and can be unchecked for de-selection
+*  Unchecked and Inactive – this state appears when the item is unselected and not active
+*  Checked and Inactive – this state appears when the item is selected and not active.
 
 ![](img/states.jpg)
 
 *3. Checking a checkbox for a child item should automatically change its parent state to:*
 
-* Partially selected – if parent also contains unchecked children
-* Checked – if all checkboxes for all children are in "checked" state
-* Unchecked – if all children are in "unchecked" state.
+*  Partially selected – if parent also contains unchecked children
+*  Checked – if all checkboxes for all children are in "checked" state
+*  Unchecked – if all children are in "unchecked" state.
 
 *4. Checking a checkbox for a Parent item should automatically change its child state to:*
 
-* Checked – if the parent state is changed from "unchecked" to "checked" state
-* Unchecked – if the parent state is changed from "checked" to "unchecked" state
-* Partial Selection – if parent has a partial selection state, clicking on it will deselect all the child items.
+*  Checked – if the parent state is changed from "unchecked" to "checked" state
+*  Unchecked – if the parent state is changed from "checked" to "unchecked" state
+*  Partial Selection – if parent has a partial selection state, clicking on it will deselect all the child items.
 
 ## Drag and Arrange
 
@@ -172,7 +172,7 @@ The 'Add' triggers should be placed above the tree container area. (Note: the ou
 There are two types of items that can be added:
 
 1. *A Group item* This is the parent item, which means there can be children. Example: a folder for the media [library](https://glossary.magento.com/library) or a new [category](https://glossary.magento.com/category). The group item can also be added to another parent group. This allows for n-level tree.
-2. *An item* This is the child. Example: a media item or a sub-category. The child item will be added to whichever parent is selected or to the same parent as sibling.
+1. *An item* This is the child. Example: a media item or a sub-category. The child item will be added to whichever parent is selected or to the same parent as sibling.
 
 The "add child" button should always have more importance than the "add parent" button.
 

guides/v2.2/pattern-library/feedbackToUser/progressIndicator/progressIndicator.md

@@ -8,18 +8,18 @@ The use of progress indicator should follow this guideline.
 
 ## When to Use
 
-* Use when needing to provide feedback to the user that a process is running, especially when user initiate the process.
-* When a percentage of completion can be shown and the process , use a progress bar.
-* When a percentage of completion cannot be shown or the process is relatively short, use a spinner.
+*  Use when needing to provide feedback to the user that a process is running, especially when user initiate the process.
+*  When a percentage of completion can be shown and the process , use a progress bar.
+*  When a percentage of completion cannot be shown or the process is relatively short, use a spinner.
 
 ## When Not to Use
 
-* When process' progress communicates well enough on its own.
-* When process completes so quickly that it is distracting to show progress. If the task takes less than 500ms.
-* When the process waits for the user to complete the task.
-* When the user doesn't need to know something is happening
-* When the process operates in the background and doesn't block user activity, progress indicator can be used but is not necessary.
-* When you can use content from the operation to visualize progress.
+*  When process' progress communicates well enough on its own.
+*  When process completes so quickly that it is distracting to show progress. If the task takes less than 500ms.
+*  When the process waits for the user to complete the task.
+*  When the user doesn't need to know something is happening
+*  When the process operates in the background and doesn't block user activity, progress indicator can be used but is not necessary.
+*  When you can use content from the operation to visualize progress.
 
 ## Behavior
 
@@ -32,8 +32,8 @@ Spinner is a gif image.
 ![](img/Spinner-lg.gif)
 
 1. Process is triggered
-2. Show spinner - To avoid flickering, if a process generally takes 2 seconds to complete, but can be completed under 500ms. Delay 500ms before showing the spinner.
-3. Once process is completed, the spinner disappear along with other indicative elements depending on the context.
+1. Show spinner - To avoid flickering, if a process generally takes 2 seconds to complete, but can be completed under 500ms. Delay 500ms before showing the spinner.
+1. Once process is completed, the spinner disappear along with other indicative elements depending on the context.
 
 ### Progress Bar
 
@@ -47,19 +47,19 @@ In general, it is not recommended to use the progress bar if the process can be
 
    This process trigger is what the user tell system to start process. It can be anything depending on the context such as a button or a drop action.
 
-2. **Starting State**
+1. **Starting State**
 
    ![](img/progressbar-starting-state.png)
 
-3. **Progressing**
+1. **Progressing**
 
    ![](img/progressbar-progressing.png)
 
-4. **Success**
+1. **Success**
 
    Once success, the page should refresh to show success status. The success status and behavior will depend on context of the scenario. (ie. open new page, stay on the same page, success message, etc.)
 
-5. **Failed**
+1. **Failed**
 
    The progress bar will disappeared and is replaced with this error message.
 

guides/v2.2/pattern-library/getting-user-input/image_uploader/image_uploader.md

@@ -15,8 +15,8 @@ This pattern should be used specifically to upload images, and not to upload doc
 ## Variations
 
 1. Upload Single Image
-2. Upload Multiple Images
-3. Upload Video Content
+1. Upload Multiple Images
+1. Upload Video Content
 
 ## Behavior