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.

Sign up for GitHub

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

Jump to bottom

refactor: add 'do' type to DoDont uses that don't specify it #3257

Merged
merged 4 commits into from
Nov 15, 2022
Merged

refactor: add 'do' type to DoDont uses that don't specify it #3257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
930a4bc
refactor: add 'do' type to DoDont uses that don't specify it
francinelucca Nov 14, 2022
32f967e
Merge branch 'main' of github.com:francinelucca/carbon-website into r…
francinelucca Nov 14, 2022
1f23771
refactor: add 'do' type to DoDont uses that don't specify it
francinelucca Nov 14, 2022
23787c7
fix: format
francinelucca Nov 14, 2022
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
2 changes: 1 addition & 1 deletion src/pages/components/UI-shell-header/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/UI-shell-right-panel/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
14 changes: 7 additions & 7 deletions src/pages/components/button/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,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)

Expand Down Expand Up @@ -273,7 +273,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)

Expand Down Expand Up @@ -354,7 +354,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)

Expand Down Expand Up @@ -429,7 +429,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)

Expand Down Expand Up @@ -481,7 +481,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)

Expand Down Expand Up @@ -573,7 +573,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)

Expand Down Expand Up @@ -623,7 +623,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)

Expand Down
4 changes: 2 additions & 2 deletions src/pages/components/checkbox/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -233,7 +233,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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/code-snippet/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/content-switcher/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/dropdown/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/inline-loading/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,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)

Expand Down
8 changes: 4 additions & 4 deletions src/pages/components/popover/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,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)

Expand Down Expand Up @@ -203,7 +203,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)

Expand Down Expand Up @@ -262,7 +262,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)

Expand Down Expand Up @@ -307,7 +307,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)

Expand Down
6 changes: 3 additions & 3 deletions src/pages/components/progress-bar/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,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)

Expand Down Expand Up @@ -290,7 +290,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)

Expand All @@ -303,7 +303,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)

Expand Down
4 changes: 2 additions & 2 deletions src/pages/components/radio-button/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ buttons. Radio buttons allow the user to select only one item in a set whereas
checkboxes allow the user to select multiple items.

<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)

Expand Down Expand Up @@ -253,7 +253,7 @@ label for the radio button component itself is not needed.
</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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/components/tabs/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,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)

Expand Down
4 changes: 2 additions & 2 deletions src/pages/components/text-input/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ user. There are no minimum or maximum widths but you should avoid excessively
wide fields that are disproportionate to the intended data being collected.

<DoDontRow>
<DoDont caption="Do make text input widths proportional to the content and align to grid columns.">
<DoDont type="do" caption="Do make text input widths proportional to the content and align to grid columns.">

![Do use proportional widths](images/text-input-width-do.png)

Expand All @@ -245,7 +245,7 @@ Labels and 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/text-input-usage-4-do.png)

Expand Down
10 changes: 5 additions & 5 deletions src/pages/components/tile/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,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)

Expand All @@ -418,18 +418,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)

Expand Down Expand Up @@ -559,7 +559,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)

Expand Down
6 changes: 3 additions & 3 deletions src/pages/components/toggle/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,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)

Expand All @@ -89,7 +89,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)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/data-visualization/axes-and-labels/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
16 changes: 8 additions & 8 deletions src/pages/guidelines/2x-grid/implementation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,7 @@ columns within our system.
</Row>

<DoDontRow>
<DoDont caption="Do feel free to mix and match column structure.">
<DoDont type="do" caption="Do feel free to mix and match column structure.">

![Do feel free to mix and match column structure.](images/Responsive_classes_do.png)

Expand Down Expand Up @@ -603,7 +603,7 @@ the gutter in order to get field type to align.
![32px gutter](images/32px_gutter.png)

<DoDontRow>
<DoDont caption="Do align type (outside of a container), components, and tiles to the columns.">
<DoDont type="do" caption="Do align type (outside of a container), components, and tiles to the columns.">

![Do align type (outside of a container), components and tiles to the columns.](images/32px_do.png)

Expand Down Expand Up @@ -677,7 +677,7 @@ Wide and a Narrow grid scenario in the [Mix and match](#mix-and-match) section.
![16px gutter](images/16px_gutter.png)

<DoDontRow>
<DoDont caption="Do align components within containers flush to the columns.">
<DoDont type="do" caption="Do align components within containers flush to the columns.">

![Do align components within containers flush to the columns.](images/16px_do.png)

Expand Down Expand Up @@ -748,7 +748,7 @@ dropdowns, should not hang into the gutter.
![1px gutter](images/2px_gutter.png)

<DoDontRow>
<DoDont caption="Do keep all type (inside and outside containers) aligned with the column grid.">
<DoDont type="do" caption="Do keep all type (inside and outside containers) aligned with the column grid.">

![Do keep all type (inside and outside containers) aligned with the column grid.](images/2px_do.png)

Expand Down Expand Up @@ -785,7 +785,7 @@ cases as we find them.
<br />

<DoDontRow>
<DoDont caption="Do apply different grid modes to different components (like input fields with labels and tiles).">
<DoDont type="do" caption="Do apply different grid modes to different components (like input fields with labels and tiles).">

![Do apply different grid modes to different components (like input fields with labels and tiles).](images/Mixed_use_do.png)

Expand All @@ -807,7 +807,7 @@ cases as we find them.
<br />

<DoDontRow>
<DoDont caption="Do apply different grid modes to different components (like input fields with labels and tiles).">
<DoDont type="do" caption="Do apply different grid modes to different components (like input fields with labels and tiles).">

![Do apply different grid modes to different components (like input fields with labels and tiles).](images/Mixed_use_do_2.png)

Expand Down Expand Up @@ -1319,7 +1319,7 @@ Image size can change ratios when the breakpoint changes.
![Aspect ratio flexible](images/Aspect_Ratio_flexible.png)

<DoDontRow>
<DoDont caption="When combining tiles, or tiles and images, do give each a designated aspect ratio.">
<DoDont type="do" caption="When combining tiles, or tiles and images, do give each a designated aspect ratio.">

![When combining tiles, or tiles and images, do give each a designated aspect ratio.](images/AR_do_1.png)

Expand All @@ -1332,7 +1332,7 @@ Image size can change ratios when the breakpoint changes.
</DoDontRow>

<DoDontRow>
<DoDont caption="Do use a designated aspect ratio for a grid of same-size fixed ratio tiles.">
<DoDont type="do" caption="Do use a designated aspect ratio for a grid of same-size fixed ratio tiles.">

![Do use a designated aspect ratio for a grid of same-size fixed ratio tiles.](images/AR_do_2.png)

Expand Down
2 changes: 1 addition & 1 deletion src/pages/guidelines/2x-grid/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ if necessary.
![Padding](images/Layout_overview_Paddings.svg)

<DoDontRow>
<DoDont caption="Always place type against the padding.">
<DoDont type="do" caption="Always place type against the padding.">

![Always place type against the padding.](images/Layout_overview_Paddings-do.svg)

Expand Down
Loading