fix(docs): add type="do" to unspecified DoDont (#3294)

src/pages/components/UI-shell-header/usage.mdx

@@ -146,7 +146,7 @@ any set of icons for their UI. Icons should always be aligned to the right of
 the header with no gaps between icons.
 
 <DoDontRow>
-  <DoDont caption="Header utilities are right aligned with no gaps">
+  <DoDont type="do" caption="Header utilities are right aligned with no gaps">
 
 ![Example of header icons right aligned with no gaps.](images/utility_placement_do.png)
 

src/pages/components/UI-shell-right-panel/usage.mdx

@@ -104,7 +104,7 @@ The far right header icon is reserved for the switcher icon. The switcher icon
 and the switcher panel should only be used together.
 
 <DoDontRow>
-  <DoDont colLg={6} caption="Positioned the switcher to the far right.">
+  <DoDont type="do" colLg={6} caption="Positioned the switcher to the far right.">
 
 ![Example of the switcher icon being used correctly.](images/right-panel-usage-2.png)
 

src/pages/components/accordion/usage.mdx

@@ -113,13 +113,15 @@ throughout your page and should not alternate.
 
 <DoDontRow>
 <DoDont
+type="do"
 colMd={4} colLg={4}
 caption="In most cases, use the default end icon alignment to keep accordion text aligned with other content on the page.">
 
 ![Do use the default end icon alignment to keep accordion text aligned with other content on the page.](./images/accordion-alignment-do.png)
 
 </DoDont>
 <DoDont
+type="do"
 colMd={4} colLg={4}
 caption="In rare case, you can place icons on the start side for tree like functionality.">
 

src/pages/components/button/usage.mdx

@@ -196,7 +196,7 @@ B. Container (optional) <br /> C. Icon
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do left-align text in a button, even if the button is wide.">
+  <DoDont type="do" caption="Do left-align text in a button, even if the button is wide.">
 
 ![Do left-align text in a button, even if the button is wide.](images/button_usage_5.png)
 
@@ -265,7 +265,7 @@ and dashboards—low emphasis buttons (tertiary or ghost) may be a better choice
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do use high-emphasis and medium-emphasis buttons in a button group.">
+  <DoDont type="do" caption="Do use high-emphasis and medium-emphasis buttons in a button group.">
 
 ![Do use high-emphasis and medium-emphasis buttons in a button group.](images/button_usage_8_test.png)
 
@@ -346,7 +346,7 @@ Other fluid components include tiles and most recently,
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do bleed ghost button hovers when they are paired with other fluid buttons.">
+  <DoDont type="do" caption="Do bleed ghost button hovers when they are paired with other fluid buttons.">
 
 ![Do bleed ghost button hovers when they are paired with other fluid buttons.](images/button_usage_12.png)
 
@@ -421,7 +421,7 @@ or ghost buttons in layouts with more than three calls to action.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do use a primary and two of the same lower emphasis buttons in a button group.">
+  <DoDont type="do" caption="Do use a primary and two of the same lower emphasis buttons in a button group.">
 
 ![Do use a primary and two of the same lower emphasis buttons in a button group.](images/button_usage_17.png)
 
@@ -473,7 +473,7 @@ container with a programmatic 16px gutter between them.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do apply the same width to all buttons in a group, even if they don’t bleed.">
+  <DoDont type="do" caption="Do apply the same width to all buttons in a group, even if they don’t bleed.">
 
 ![Do apply the same width to all buttons in a group](images/button_usage_21.png)
 
@@ -565,7 +565,7 @@ For consistency, see Carbon’s
 recommended action labels.
 
 <DoDontRow>
-  <DoDont caption="Do use the {verb} + {noun} content formula in buttons whenever possible.">
+  <DoDont type="do" caption="Do use the {verb} + {noun} content formula in buttons whenever possible.">
 
 ![Do use the verb + noun content formula in buttons whenever possible](images/button_usage_26.png)
 
@@ -615,7 +615,7 @@ a text label, but use icon buttons cautiously.
 - Glyphs must be the same color value as the text within a button
 
 <DoDontRow>
-  <DoDont caption="Do place the icon on the right side of the button after the text.">
+  <DoDont type="do" caption="Do place the icon on the right side of the button after the text.">
 
 ![Do place the icon on the right side of the button after the text](images/button_usage_28.png)
 

src/pages/components/checkbox/usage.mdx

@@ -75,7 +75,7 @@ instead of checkboxes. Checkboxes allow the user to select multiple items in a
 set whereas radio buttons allow the user to select only one option.
 
 <DoDontRow>
-  <DoDont caption="Do use radio buttons when only one item can be selected.">
+  <DoDont type="do" caption="Do use radio buttons when only one item can be selected.">
 
 ![Do use radio buttons when only one item can be selected.](images/checkbox-usage-2-do.png)
 
@@ -231,7 +231,7 @@ For more information about spacing for the checkbox component itself, see the
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do let text wrap beneath the checkbox so the control and label are top aligned.">
+  <DoDont type="do" caption="Do let text wrap beneath the checkbox so the control and label are top aligned.">
 
 ![Do let text wrap beneath the checkbox so the control and label are top aligned.](images/checkbox-usage-11-do.png)
 

src/pages/components/code-snippet/usage.mdx

@@ -147,7 +147,7 @@ _Note: If using an inline code snippet, the snippet will live within a body of
 text._
 
 <DoDontRow>
-  <DoDont caption="Do align code snippet containers to the grid.">
+  <DoDont type="do" caption="Do align code snippet containers to the grid.">
 
 ![Do align code snippet containers to the grid.](images/code-snippet-usage-2-do.png)
 

src/pages/components/content-switcher/usage.mdx

@@ -137,7 +137,7 @@ longest text label should have 16px spacing to the right of the label. The width
 of all other tabs should match the widest tab.
 
 <DoDontRow>
-  <DoDont caption="Do base content tab width on the longest text label.">
+  <DoDont type="do" caption="Do base content tab width on the longest text label.">
 
 ![Do base content tab width on the longest text label.](images/contentswitcher-usage-3-do.png)
 

src/pages/components/data-table/usage.mdx

@@ -364,6 +364,7 @@ expected to have 2 lines of content in a single row.
 
 <DoDontRow>
 <DoDont
+type="do"
 colMd={4} colLg={4}
 caption="Do use the same row height for the table and header rows.">
 

src/pages/components/dropdown/usage.mdx

@@ -260,7 +260,7 @@ Field containers should vertically align to the grid and with other form
 components on a page.
 
 <DoDontRow>
-  <DoDont caption="Do align field containers to the grid.">
+  <DoDont type="do" caption="Do align field containers to the grid.">
 
 ![Do align field containers to the grid.](images/dropdown-usage-4-do.png)
 

src/pages/components/inline-loading/accessibility.mdx

@@ -52,7 +52,7 @@ the status to assistive technologies like screen readers. Where there is no
 text, Carbon provides a text equivalent (“loading”) for the loading symbol.
 
 <DoDontRow>
-  <DoDont caption="Inline loading text is provided to assistive technologies.">
+  <DoDont type="do" caption="Inline loading text is provided to assistive technologies.">
 
 ![a loading icon with a text message of "Submitting..."](images/inline-loading-accessibility-2.png)
 

src/pages/components/popover/usage.mdx

@@ -111,7 +111,7 @@ four columns.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do keep width between one to four columns.">
+  <DoDont type="do" caption="Do keep width between one to four columns.">
 
 ![Do keep width between one to four columns.](images/popover-usage-4-do.png)
 
@@ -201,7 +201,7 @@ what size button is being used.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do flush align the popover edge with the trigger button.">
+  <DoDont type="do" caption="Do flush align the popover edge with the trigger button.">
 
 ![Do flush align the popover edge with the trigger button.](images/popover-usage-8-do.png)
 
@@ -260,7 +260,7 @@ should be placed 4px away from the popover container.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do align the caret tip center with the trigger button.">
+  <DoDont type="do" caption="Do align the caret tip center with the trigger button.">
 
 ![Do align the caret tip center with the trigger button.](images/popover-usage-12-do.png)
 
@@ -305,7 +305,7 @@ container because they are connected to eachother.
 </Row>
 
 <DoDontRow>
-  <DoDont caption="Do top align the tab tip with the layer behind it.">
+  <DoDont type="do" caption="Do top align the tab tip with the layer behind it.">
 
 ![Do top align the tab tip with the layer behind it.](images/popover-usage-15-do.png)
 

src/pages/components/progress-bar/usage.mdx

@@ -213,7 +213,7 @@ application.
 
 <DoDontRow>
 
-  <DoDont caption="Do keep a width within six columns.">
+  <DoDont type="do" caption="Do keep a width within six columns.">
 
 ![Do keep a width within six columns.](images/progress-bar-usage-8.png)
 
@@ -265,7 +265,7 @@ alignment. Meanwhile, placing the text far away from the progress bar could
 cause confusion in the context.
 
 <DoDontRow>
-  <DoDont caption="Do place text close to the progress bar.">
+  <DoDont type="do" caption="Do place text close to the progress bar.">
 
 ![Do place text inline with the progress bar.](images/progress-bar-usage-12.png)
 
@@ -278,7 +278,7 @@ cause confusion in the context.
 </DoDontRow>
 
 <DoDontRow>
-  <DoDont caption="Do place text close to the progress bar.">
+  <DoDont type="do" caption="Do place text close to the progress bar.">
 
 ![Do place the label close to the progress bar](images/progress-bar-usage-14.png)
 

src/pages/components/radio-button/usage.mdx

@@ -61,7 +61,7 @@ buttons. Radio buttons allow the user to select only one item in a set whereas
 checkboxes allow the user to select multiple options.
 
 <DoDontRow>
-  <DoDont caption="Do use checkboxes when multiple items can be selected.">
+  <DoDont type="do" caption="Do use checkboxes when multiple items can be selected.">
 
 ![Do use checkboxes when multiple items can be selected.](images/radio-button-usage-2-do.png)
 
@@ -261,7 +261,7 @@ context or clarity.
 </Row>
 
 <DoDontRow>
-<DoDont caption="Do let text wrap beneath the radio button so the control and label are top aligned.">
+<DoDont type="do" caption="Do let text wrap beneath the radio button so the control and label are top aligned.">
 
 ![Do let text wrap beneath the radio button so the control and label are top aligned.](images/radio-button-usage-12-do.png)
 

src/pages/components/tabs/usage.mdx

@@ -235,7 +235,7 @@ within another component, such as a card, follow the grid that you are using
 inside the component and align the label with text in the component.
 
 <DoDontRow>
-  <DoDont caption="Do align tab labels with the grid">
+  <DoDont type="do" caption="Do align tab labels with the grid">
 
 ![Do align tab labels with the grid](images/tab-usage-6-do.png)
 

src/pages/components/tile/usage.mdx

@@ -390,7 +390,7 @@ icon button, place the icon or pictorgram in the lower left corner of the tile
 and move the icon button (action) to the right corner.
 
 <DoDontRow>
-  <DoDont caption="Do left align icon, link, or text when it is by itself.">
+  <DoDont type="do" caption="Do left align icon, link, or text when it is by itself.">
 
 ![Do left align icon, link, or text when it is by itself.](images/tile-usage-8.png)
 
@@ -400,18 +400,18 @@ and move the icon button (action) to the right corner.
 
 ![Do not right align an icon, link, or text when it is by itself.](images/tile-usage-9.png)
 
-  </DoDont> 
+  </DoDont>
 </DoDontRow>
 
 <DoDontRow>
 
-  <DoDont caption="Do move icon to the right when there is an icon or pictogram.">
+  <DoDont type="do" caption="Do move icon to the right when there is an icon or pictogram.">
 
 ![Do move icon to the right when there is an icon or pictogram.](images/tile-usage-10.png)
 
   </DoDont>
 
-  <DoDont caption="Do move icon to the right when there is text or link.">
+  <DoDont type="do" caption="Do move icon to the right when there is text or link.">
 
 ![Do move icon to the right when there is text or link.](images/tile-usage-11.png)
 
@@ -541,7 +541,7 @@ confused as links or clickable.
 
 <DoDontRow>
 
-  <DoDont caption="Do use text or icon for clickable tiles if needed.">
+  <DoDont type="do" caption="Do use text or icon for clickable tiles if needed.">
 
 ![Do use text or icon for clickable tiles if needed.](images/tile-usage-22.png)
 

src/pages/components/toggle/accessibility.mdx

@@ -55,12 +55,12 @@ captured programmatically for users who cannot see or understand the visual
 indicators.
 
 <DoDontRow>
-  <DoDont caption="Do include the on/off text for the toggle's state whenever space permits.">
+  <DoDont type="do" caption="Do include the on/off text for the toggle's state whenever space permits.">
 
 ![The alert toggle shows "off" and "on" to indicate state](images/toggle-accessibility-2-do.png)
 
   </DoDont>
-  <DoDont caption="Where space is confined, use the tickmark variation in lieu of on/off text.">
+  <DoDont type="do" caption="Where space is confined, use the tickmark variation in lieu of on/off text.">
 
 ![Toggles in the Alert column of a table show their "on" state with a green tickmark](images/toggle-accessibility-3-do.png)
 
@@ -78,7 +78,7 @@ on/off state of the toggle and the text that is the toggle’s label. The label'
 text should not change based on the on/off state.
 
 <DoDontRow>
-  <DoDont caption="Do keep the label consistent. Only change the state text between On and Off.">
+  <DoDont type="do" caption="Do keep the label consistent. Only change the state text between On and Off.">
 
 ![the same 'Alerts' toggle keeping its label in both states](images/toggle-accessibility-4-do.png)
 

src/pages/components/tooltip/usage.mdx

@@ -91,6 +91,7 @@ tooltips and use toggle tip instead.
 
 <DoDontRow>
 <DoDont
+type="do"
 colMd={6} colLg={6}
 caption="Do use helper text for pertinent information.">
 
@@ -109,6 +110,7 @@ caption="Do not use tooltips for information for a user to complete their task."
 
 <DoDontRow>
 <DoDont
+type="do"
 colMd={6} colLg={6}
 caption="Use succinct, directive text.">
 

src/pages/data-visualization/axes-and-labels/index.mdx

@@ -41,7 +41,7 @@ such as bar and area chart. Truncating the Y axis can distort the perception,
 making a small difference look big and significant.
 
 <DoDontRow>
-<DoDont caption="For bar charts, the numerical axis should start at zero.">
+<DoDont type="do" caption="For bar charts, the numerical axis should start at zero.">
 
 ![Legends behavior highlight on hover](images/axislabel-zero-a.png)