diff --git a/.changeset/a11y-docs-img-empty-alts.md b/.changeset/a11y-docs-img-empty-alts.md new file mode 100644 index 0000000000..85a6ffe05b --- /dev/null +++ b/.changeset/a11y-docs-img-empty-alts.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +fix(Docs): add "GATSBY_EMPTY_ALT" as alt text for empty alts. \ No newline at end of file diff --git a/website/react-magma-docs/src/pages/api-intro/page-templates.mdx b/website/react-magma-docs/src/pages/api-intro/page-templates.mdx index 3052ad7023..d05e47309d 100644 --- a/website/react-magma-docs/src/pages/api-intro/page-templates.mdx +++ b/website/react-magma-docs/src/pages/api-intro/page-templates.mdx @@ -16,7 +16,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; This template is ideal for applications that need as much of the screen as possible.
- + GATSBY_EMPTY_ALT
```tsx @@ -141,7 +141,7 @@ export function Example() { This template is great for pages that focus more on reading content like marketing materials, articles, etc.
- + GATSBY_EMPTY_ALT
```tsx @@ -246,7 +246,7 @@ export function Example() { This template includes a screen region for a left sidebar and includes all of the necessary responsive behavior.
- + GATSBY_EMPTY_ALT
```tsx @@ -342,7 +342,7 @@ export function Example() { This template also includes the sidebar screen region, but the header extends all the way across the top of the page.
- + GATSBY_EMPTY_ALT
```tsx diff --git a/website/react-magma-docs/src/pages/design-intro/layout.mdx b/website/react-magma-docs/src/pages/design-intro/layout.mdx index 720f4d626c..66d5ec9535 100644 --- a/website/react-magma-docs/src/pages/design-intro/layout.mdx +++ b/website/react-magma-docs/src/pages/design-intro/layout.mdx @@ -28,7 +28,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Every layout is made up of columns, gutters, and margins that respond accordingly to the size of the viewport.
- + GATSBY_EMPTY_ALT
1. Columns @@ -40,7 +40,7 @@ Every layout is made up of columns, gutters, and margins that respond accordingl The columns indicate where the content of the page goes. The widths of the columns are fluid, allowing content to scale and resize depending on the width of the device. The number of columns is determined by pre-defined breakpoint ranges.
- + GATSBY_EMPTY_ALT
When the viewport is greater than 768px wide, the layout has 12 columns.
@@ -49,7 +49,7 @@ The columns indicate where the content of the page goes. The widths of the colum
- + GATSBY_EMPTY_ALT
When the viewport is 768px wide or smaller, the layout has 6 columns.
@@ -58,7 +58,7 @@ The columns indicate where the content of the page goes. The widths of the colum
- + GATSBY_EMPTY_ALT
When the viewport is 375px wide and smaller, the layout changes to 4 columns. @@ -72,7 +72,7 @@ Gutters are the spaces in between columns. This space is used to separate conten The width of gutters on standard Cengage page layouts should be set to 24px. On smaller screens the gutters change to 16px.
- + GATSBY_EMPTY_ALT
When the viewport is greater than 600px wide, gutters are 24px wide.
@@ -81,7 +81,7 @@ The width of gutters on standard Cengage page layouts should be set to 24px. On
- + GATSBY_EMPTY_ALT
When the viewport is 600px wide and smaller, gutters are 16px wide.
@@ -98,7 +98,7 @@ Margins are a fixed value, typically consistent with the gutter widths. The widt The width of margins on standard Cengage full-width page layouts should be set to 24px. On smaller screens the margins change to 16px.
- + GATSBY_EMPTY_ALT
#### Restricted-width Layout @@ -106,7 +106,7 @@ The width of margins on standard Cengage full-width page layouts should be set t Larger margins based on percentages can be used to restrict the maximum width of the content area. Commonly used for text-heavy pages displaying sales materials, articles, etc.
- + GATSBY_EMPTY_ALT
--- @@ -165,7 +165,7 @@ _\* Even for full-width layouts, we are only allowing the content area to size u Some Cengage web applications have a global sidebar on the left side of the page. This sidebar necessitates that the main content changes from 12 columns to 6 at 1024px wide and below. This is much earlier than the other layouts detailed above.
- + GATSBY_EMPTY_ALT
When using the global sidebar, the main content area still has 12 columns when the viewport is wider than 1024px @@ -175,7 +175,7 @@ Some Cengage web applications have a global sidebar on the left side of the page
- + GATSBY_EMPTY_ALT
When using the global sidebar, the main content area changes to 6 columns when the viewport is 1024px wide and below. diff --git a/website/react-magma-docs/src/pages/design-intro/spacing.mdx b/website/react-magma-docs/src/pages/design-intro/spacing.mdx index cfa723622a..8cfd411a60 100644 --- a/website/react-magma-docs/src/pages/design-intro/spacing.mdx +++ b/website/react-magma-docs/src/pages/design-intro/spacing.mdx @@ -155,7 +155,7 @@ The spacing scale helps us determine how much space to put between or inside of
- + GATSBY_EMPTY_ALT
Example of using spacing properties to add padding inside a card, as well as the margins between the content within the card. @@ -165,7 +165,7 @@ The spacing scale helps us determine how much space to put between or inside of
- + GATSBY_EMPTY_ALT
Example of using spacing properties to create the space between cards in a grid. diff --git a/website/react-magma-docs/src/pages/design-intro/typography.mdx b/website/react-magma-docs/src/pages/design-intro/typography.mdx index 9370d0995a..4a15514406 100644 --- a/website/react-magma-docs/src/pages/design-intro/typography.mdx +++ b/website/react-magma-docs/src/pages/design-intro/typography.mdx @@ -809,7 +809,7 @@ The headings presets above are assigned by default to H1 through H6 in the Modal component. For optimal accessibility the title of the modal needs to be an H1, but we definitely don't want it to be styled with text that large. So we use an H1, but apply the Productive Heading Small style to it. This flexibility allows consumers of Magma to design using the styles that work best for the UI, but still have a clear informational hierarchy for assistive technologies.
- + GATSBY_EMPTY_ALT
#### Consistency is Key @@ -821,7 +821,7 @@ Continuing from above, there isn't just one way an H1 or and H3 should be styled Another advantage to using the presets above is that Responsive behavior is already built into each style so you don't have to figure out and include it yourself. This means a number of the larger sizes will automatically reduce in size at 600px wide. This ensures we have appropriate text sizes on smaller devices. The breakpoint can be overridden if you want this change to happen earlier or later.
- + GATSBY_EMPTY_ALT
--- @@ -839,7 +839,7 @@ Our primary typface is Work Sans. It’s clear and approachable and is great for
- + GATSBY_EMPTY_ALT
@@ -867,7 +867,7 @@ Noto Serif is a beautiful serif font. It's easy to read, provides a nice contras
- + GATSBY_EMPTY_ALT
@@ -901,7 +901,7 @@ Line-heights are also defined at this level to adhere to an 8px spacing system, If you have a need to use a font size outside of the pre-made sets above, you may only choose from this list.
- + GATSBY_EMPTY_ALT
--- @@ -916,7 +916,7 @@ Font weight is an important typographic variable that can add emphasis and diffe
- + GATSBY_EMPTY_ALT
@@ -931,7 +931,7 @@ Each weight has an italic style, which should only be used when you need to emph
- + GATSBY_EMPTY_ALT
@@ -946,7 +946,7 @@ Type color should be carefully considered, with legibility and accessibility as
- + GATSBY_EMPTY_ALT

Correct

@@ -958,7 +958,7 @@ Type color should be carefully considered, with legibility and accessibility as

- + GATSBY_EMPTY_ALT

Correct

On dark backgrounds, neutral text appears as white.

@@ -969,7 +969,7 @@ Type color should be carefully considered, with legibility and accessibility as
- + GATSBY_EMPTY_ALT

Incorrect

Don't use color as decoration.

@@ -978,7 +978,7 @@ Type color should be carefully considered, with legibility and accessibility as
- + GATSBY_EMPTY_ALT

Incorrect

@@ -992,7 +992,7 @@ Type color should be carefully considered, with legibility and accessibility as

- + GATSBY_EMPTY_ALT

Correct

@@ -1005,7 +1005,7 @@ Type color should be carefully considered, with legibility and accessibility as

- + GATSBY_EMPTY_ALT

Correct

@@ -1026,12 +1026,12 @@ It is common to lighten certain pieces of text in order to create more contrast.

- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -1044,7 +1044,7 @@ It is common to lighten certain pieces of text in order to create more contrast. Headings and paragraphs have margins built into them by default. These margins provide the desired rhythm created by spacing when they are used together in a traditional narrative context. These margins can be easily modified using the spacing scale or completely removed when using headings or paragraphs in other contexts.
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/accordion.mdx b/website/react-magma-docs/src/pages/design/accordion.mdx index 665a598e65..e7b0333bb5 100644 --- a/website/react-magma-docs/src/pages/design/accordion.mdx +++ b/website/react-magma-docs/src/pages/design/accordion.mdx @@ -44,7 +44,7 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr
- + GATSBY_EMPTY_ALT

Correct

@@ -54,7 +54,7 @@ In some scenarios, the accordion can be modified to place the chevron icon in fr

- + GATSBY_EMPTY_ALT

Caution

@@ -72,7 +72,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted

Incorrect

@@ -83,7 +83,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted
- + GATSBY_EMPTY_ALT

Incorrect

@@ -95,7 +95,7 @@ If you place the chevron icon on the left side of the title, don’t be tempted

- + GATSBY_EMPTY_ALT

Incorrect

@@ -111,13 +111,13 @@ Accordions can be placed within main page content or placed inside of a containe

- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/alert.mdx b/website/react-magma-docs/src/pages/design/alert.mdx index 6f57312789..2249abfb80 100644 --- a/website/react-magma-docs/src/pages/design/alert.mdx +++ b/website/react-magma-docs/src/pages/design/alert.mdx @@ -21,7 +21,7 @@ This page focuses primarily on the commonalities between the different alert typ Use alerts to inform users of updates, changes to system status, or as feedback to an action they have taken. Proactively communicating with users and providing immediate feedback is important for building trust and maintaining a constant awareness of the system status. While alerts are an effective method of communicating with users, they have the potential to be disruptive and should be used with care.
- + GATSBY_EMPTY_ALT
--- @@ -47,7 +47,7 @@ Alerts are interruptive, but their level of interruption should match the inform The basic anatomy of the alert is the same across all three types (banner, inline, toast).
- + GATSBY_EMPTY_ALT
1. Container @@ -103,13 +103,13 @@ Alerts have an inverse option where we have defined colors that are optimized fo Inline alerts are embedded within the content of a page. They can provide the user with helpful information regarding a specific process or part of the interface. They can also be triggered by an action the user took, like submitting a form before filling out all the required fields.
- + GATSBY_EMPTY_ALT
If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissible by the user and persist until the issue is fixed either by the user or the system.
- + GATSBY_EMPTY_ALT
--- @@ -119,7 +119,7 @@ If an inline alert is being used to communicate some general information to the When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert.
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/badge.mdx b/website/react-magma-docs/src/pages/design/badge.mdx index 067ce8c26c..8d13b6c9ad 100644 --- a/website/react-magma-docs/src/pages/design/badge.mdx +++ b/website/react-magma-docs/src/pages/design/badge.mdx @@ -20,7 +20,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Badges are used as a form of inline feedback and labeling. They are typically used to provide additional context to components already on the page.
- + GATSBY_EMPTY_ALT
--- @@ -28,7 +28,7 @@ Badges are used as a form of inline feedback and labeling. They are typically us ## Text Badges
- + GATSBY_EMPTY_ALT
Text badges provide a way to provide feedback or label pieces of data. @@ -42,7 +42,7 @@ Unless the context is clear, consider including additional context with a visual ## Counters
- + GATSBY_EMPTY_ALT
Counters can be used as part of links or buttons, or simply in a context that conveys the count of something to the user. When space is limited, and if the exact count isn't important, you may consider limiting the count to "99+". @@ -52,7 +52,7 @@ Counters can be used as part of links or buttons, or simply in a context that co ## Color
- + GATSBY_EMPTY_ALT
There are multiple colors available for badges, but they should be used with purpose. The colors that should be used most commonly are primary, secondary/high contrast, and light/low contrast. The best color to use will most likely be determined by which one gives the appropriate level of emphasis with the surrounding content. diff --git a/website/react-magma-docs/src/pages/design/banner.mdx b/website/react-magma-docs/src/pages/design/banner.mdx index a12bb971aa..15bf3685af 100644 --- a/website/react-magma-docs/src/pages/design/banner.mdx +++ b/website/react-magma-docs/src/pages/design/banner.mdx @@ -15,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
- + GATSBY_EMPTY_ALT
## Usage @@ -29,7 +29,7 @@ Banner alerts typically appear at the very top of the browser viewport and exten When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert.
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/breadcrumb.mdx b/website/react-magma-docs/src/pages/design/breadcrumb.mdx index 969bbae4ea..0019fc83e6 100644 --- a/website/react-magma-docs/src/pages/design/breadcrumb.mdx +++ b/website/react-magma-docs/src/pages/design/breadcrumb.mdx @@ -20,7 +20,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; The default breadcrumb component is styled for use on backgrounds **neutral100** or **neutral200**. For dark backgrounds you can use the inverse version.
- + GATSBY_EMPTY_ALT
--- @@ -33,7 +33,7 @@ As the viewport gets smaller, the breadcrumb component will simply wrap to as ma
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/button.mdx b/website/react-magma-docs/src/pages/design/button.mdx index 11e8913375..41d188960a 100644 --- a/website/react-magma-docs/src/pages/design/button.mdx +++ b/website/react-magma-docs/src/pages/design/button.mdx @@ -68,7 +68,7 @@ Text labels should always be short and have clear purpose. If a button requires
- + GATSBY_EMPTY_ALT

Correct

Keep labels short

@@ -77,7 +77,7 @@ Text labels should always be short and have clear purpose. If a button requires
- + GATSBY_EMPTY_ALT

Incorrect

@@ -91,7 +91,7 @@ Text labels should always be short and have clear purpose. If a button requires

- + GATSBY_EMPTY_ALT

Correct

@@ -107,7 +107,7 @@ Text labels should always be short and have clear purpose. If a button requires

- + GATSBY_EMPTY_ALT

Correct

@@ -119,7 +119,7 @@ Text labels should always be short and have clear purpose. If a button requires

- + GATSBY_EMPTY_ALT

Caution

@@ -141,7 +141,7 @@ You can place icons next to text labels to both clarify an action and call atten

- + GATSBY_EMPTY_ALT

Correct

Use icons that clearly communicate their meaning.

@@ -150,7 +150,7 @@ You can place icons next to text labels to both clarify an action and call atten
- + GATSBY_EMPTY_ALT

Correct

@@ -164,7 +164,7 @@ You can place icons next to text labels to both clarify an action and call atten

- + GATSBY_EMPTY_ALT

Incorrect

@@ -176,7 +176,7 @@ You can place icons next to text labels to both clarify an action and call atten

- + GATSBY_EMPTY_ALT

Incorrect

Don’t use two icons in the same button.

@@ -216,7 +216,7 @@ When you are pairing together primary and secondary actions such as "Save" and "
- + GATSBY_EMPTY_ALT
@@ -233,12 +233,12 @@ An additional benefit of the subtle button's very neutral appearance is to help
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -252,7 +252,7 @@ For actions that delete things, you can emphasize this action with the **danger*
- + GATSBY_EMPTY_ALT
@@ -273,7 +273,7 @@ If your button is going on a dark background, all of the buttons have an inverse
- + GATSBY_EMPTY_ALT
@@ -289,7 +289,7 @@ Buttons have clear states to provide feedback to the user.
- + GATSBY_EMPTY_ALT
@@ -305,7 +305,7 @@ The solid outline is 2px thick with at least a 2px offset, and the color is info
- + GATSBY_EMPTY_ALT
@@ -333,7 +333,7 @@ Multiple button types can be used to express different emphasis levels. When usi
- + GATSBY_EMPTY_ALT

Correct

@@ -345,7 +345,7 @@ Multiple button types can be used to express different emphasis levels. When usi

- + GATSBY_EMPTY_ALT

Correct

@@ -360,7 +360,7 @@ Multiple button types can be used to express different emphasis levels. When usi

- + GATSBY_EMPTY_ALT

Correct

@@ -384,7 +384,7 @@ Button sizes and placements will sometimes need to change because of the size of

- + GATSBY_EMPTY_ALT

Correct

@@ -397,7 +397,7 @@ Button sizes and placements will sometimes need to change because of the size of

- + GATSBY_EMPTY_ALT

Correct

diff --git a/website/react-magma-docs/src/pages/design/buttongroup.mdx b/website/react-magma-docs/src/pages/design/buttongroup.mdx index 7113959c02..096b6e3927 100644 --- a/website/react-magma-docs/src/pages/design/buttongroup.mdx +++ b/website/react-magma-docs/src/pages/design/buttongroup.mdx @@ -28,7 +28,7 @@ ButtonGroup can be either horizontal or vertical in its orientation. By default,

- + GATSBY_EMPTY_ALT
@@ -43,7 +43,7 @@ ButtonGroup comes in three different sizes: small, medium, and large. The medium
- + GATSBY_EMPTY_ALT
@@ -58,7 +58,7 @@ You can easily remove the space between buttons to create a single unit. When yo
- + GATSBY_EMPTY_ALT
@@ -77,12 +77,12 @@ The most critical action within a ButtonGroup should be a primary, marketing, or
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -96,7 +96,7 @@ ButtonGroups are aligned contextually. In general, ButtonGroups are left-aligned
- + GATSBY_EMPTY_ALT
@@ -111,12 +111,12 @@ The order of button priority should match the alignment of surrounding text. Whe
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -130,12 +130,12 @@ Not all buttons in a group require an icon, but buttons with icons should always
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -149,7 +149,7 @@ Use ButtonGroup to show any additional actions related to the most critical acti
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/card.mdx b/website/react-magma-docs/src/pages/design/card.mdx index 163ad3aa5f..3addf91886 100644 --- a/website/react-magma-docs/src/pages/design/card.mdx +++ b/website/react-magma-docs/src/pages/design/card.mdx @@ -24,12 +24,12 @@ Cards are one of the core building blocks in React Magma. They can be used to cr
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -41,7 +41,7 @@ Cards are one of the core building blocks in React Magma. They can be used to cr The only part of a card that is required is the container itself. All other content is optional and completely depends on the purpose of the card.
- + GATSBY_EMPTY_ALT
1. Container @@ -59,7 +59,7 @@ Inset dividers do not extend to the edges of the card. Inset dividers are used t Use full-width dividers that extend to the edges of a card to separate more distinct pieces of content or isolate actions that have more to do with the card than any specific piece of content within it.
- + GATSBY_EMPTY_ALT
@@ -78,7 +78,7 @@ The card component is by default displayed as flat. This implies the card itself If a card can move, such as in a carousel or a drag and drop scenario, you should use the property that adds a dropshadow to the container to help communicate the dynamic nature of that component.
- + GATSBY_EMPTY_ALT
@@ -94,7 +94,7 @@ To avoid these issues, you should instead provide links within the card to view
- + GATSBY_EMPTY_ALT

Correct

@@ -107,7 +107,7 @@ To avoid these issues, you should instead provide links within the card to view

- + GATSBY_EMPTY_ALT

Incorrect

@@ -129,7 +129,7 @@ To avoid these issues, you should instead provide links within the card to view Depending how the card is being used, the card could contain any number of action buttons. Like with everything else, make sure the primary action is clear compared to any secondary actions. For small cards, avoid cluttering the card with too many actions by creating an overflow menu within a dropdown.

- + GATSBY_EMPTY_ALT
### UI Controls @@ -137,7 +137,7 @@ Depending how the card is being used, the card could contain any number of actio Cards can contain many kinds of UI controls, including buttons, tabs, toggle switches, etc. These allow the user to interact with the content of the card.
- + GATSBY_EMPTY_ALT
@@ -150,7 +150,7 @@ Various colors from the global color palette may be used as the background of a **Important:** Conveying meaning with color does not translate to assistive technologies. If the communication of this meaning is important, make sure it is also obvious in the content that is visible, or is possibly delivered through alternative methods such as visibly hidden text that is read by screen readers.
- + GATSBY_EMPTY_ALT
@@ -163,7 +163,7 @@ Callout cards add a band of color to the left edge of the container. This can be **Important:** Conveying meaning with color does not translate to assistive technologies. If the communication of this meaning is important, make sure it is also obvious in the content that is visible, or is possibly delivered through alternative methods such as visibly hidden text that is read by screen readers.
- + GATSBY_EMPTY_ALT
@@ -178,7 +178,7 @@ When cards are grouped together, it's because they are working together for a co In general, cards change size depending on the amount of content within them. But you can emphasize certain cards creating a layout that implies a hierarchy on the page with different sized columns. Just be mindful the card is large enough to support the content of the card, and that the content responds appropriately on smaller screens.
- + GATSBY_EMPTY_ALT
### Scannable @@ -186,7 +186,7 @@ In general, cards change size depending on the amount of content within them. Bu If you want a group of cards to be easy to scan, use a clean and consistent pattern for the layout.
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/character-counter.mdx b/website/react-magma-docs/src/pages/design/character-counter.mdx index ec3a57b34b..ef2a21956b 100644 --- a/website/react-magma-docs/src/pages/design/character-counter.mdx +++ b/website/react-magma-docs/src/pages/design/character-counter.mdx @@ -44,7 +44,7 @@ The character counter initially tells the user the maximum number of characters
- + GATSBY_EMPTY_ALT
@@ -57,7 +57,7 @@ As the user types, the character counter updates in real-time and informs the us
- + GATSBY_EMPTY_ALT
@@ -70,7 +70,7 @@ When the user exceeds the maximum number of characters allowed, the character co
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/checkboxes.mdx b/website/react-magma-docs/src/pages/design/checkboxes.mdx index 5af1b975ad..1987b9639b 100644 --- a/website/react-magma-docs/src/pages/design/checkboxes.mdx +++ b/website/react-magma-docs/src/pages/design/checkboxes.mdx @@ -24,7 +24,7 @@ Use checkboxes to:
- + GATSBY_EMPTY_ALT

Checkboxes

@@ -43,7 +43,7 @@ Checkboxes can have a parent-child relationship with other checkboxes.
@@ -57,7 +57,7 @@ Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enable
- + GATSBY_EMPTY_ALT

Checkbox states

@@ -72,7 +72,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale
@@ -86,7 +86,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale

Incorrect

@@ -101,7 +101,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale

Incorrect

@@ -121,7 +121,7 @@ Use the inverse version when using the checkboxes on a dark background.
- + GATSBY_EMPTY_ALT

Inverse colors

diff --git a/website/react-magma-docs/src/pages/design/date-picker.mdx b/website/react-magma-docs/src/pages/design/date-picker.mdx index d729c3060c..b757146f2f 100644 --- a/website/react-magma-docs/src/pages/design/date-picker.mdx +++ b/website/react-magma-docs/src/pages/design/date-picker.mdx @@ -17,7 +17,7 @@ import { Link } from 'gatsby';
- + GATSBY_EMPTY_ALT
@@ -51,7 +51,7 @@ The field label tells the user what information they need to input. Using placeh
- + GATSBY_EMPTY_ALT

Incorrect

Do not truncate field labels.

@@ -60,7 +60,7 @@ The field label tells the user what information they need to input. Using placeh
- + GATSBY_EMPTY_ALT

Caution

@@ -82,7 +82,7 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d

- + GATSBY_EMPTY_ALT

This example shows how the placeholder text provides a hint to the @@ -103,7 +103,7 @@ Helper text is pertinent information that assists the user in completing a field

- + GATSBY_EMPTY_ALT

Example of input helper text

@@ -121,7 +121,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th
- + GATSBY_EMPTY_ALT

Correct

@@ -134,7 +134,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

- + GATSBY_EMPTY_ALT

Correct

@@ -148,7 +148,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

- + GATSBY_EMPTY_ALT

Incorrect

@@ -178,7 +178,7 @@ Inputs have a 5px border radius to be consistent with buttons, which often accom

- + GATSBY_EMPTY_ALT

Examples of text fields on light and dark backgrounds.

@@ -198,7 +198,7 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty
- + GATSBY_EMPTY_ALT

Example of input with leading icon. The Visa icon helps identify the @@ -209,7 +209,7 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty

- + GATSBY_EMPTY_ALT

Example of input with trailing icon. The calendar icon is a button @@ -231,7 +231,7 @@ The icon can be configured to simply display a message within a tooltip or also

- + GATSBY_EMPTY_ALT

Example of input with Help icon

@@ -249,7 +249,7 @@ The icon can be configured to simply display a message within a tooltip or also
- + GATSBY_EMPTY_ALT

Inputs can display the following states: active, disabled, focused, @@ -277,7 +277,7 @@ When the input provided is invalid, an error message should be used to provide i

- + GATSBY_EMPTY_ALT

Example of input with error message

diff --git a/website/react-magma-docs/src/pages/design/dropdown.mdx b/website/react-magma-docs/src/pages/design/dropdown.mdx index d6ea40d92e..5a6b90b721 100644 --- a/website/react-magma-docs/src/pages/design/dropdown.mdx +++ b/website/react-magma-docs/src/pages/design/dropdown.mdx @@ -18,7 +18,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Usage
- + GATSBY_EMPTY_ALT
--- @@ -33,7 +33,7 @@ Dropdown menus typically contain a list of text-only menu items.
- + GATSBY_EMPTY_ALT

There is 8px of space above the first item in the dropdown, and @@ -61,7 +61,7 @@ Dropdown menu items may also use an icon on the left side to help clarify the me

- + GATSBY_EMPTY_ALT
@@ -85,7 +85,7 @@ Dropdown menus may use a selection state by placing a checkmark next to the curr
@@ -107,7 +107,7 @@ Some dropdowns benefit from organizing the choices or options into groups, and t
- + GATSBY_EMPTY_ALT
@@ -124,7 +124,7 @@ A dropdown will stretch horizontally by default to fit the longest item in the l
- + GATSBY_EMPTY_ALT

Incorrect

@@ -136,7 +136,7 @@ A dropdown will stretch horizontally by default to fit the longest item in the l

- + GATSBY_EMPTY_ALT

Correct

@@ -150,7 +150,7 @@ A dropdown will stretch horizontally by default to fit the longest item in the l

- + GATSBY_EMPTY_ALT

Correct

@@ -172,7 +172,7 @@ Dropdowns have a default max-height of 250px and will scroll if necessary. This

- + GATSBY_EMPTY_ALT

Correct

@@ -184,7 +184,7 @@ Dropdowns have a default max-height of 250px and will scroll if necessary. This

- + GATSBY_EMPTY_ALT

Caution

@@ -209,7 +209,7 @@ The standard dropdown button is the most common element used to trigger a dropdo

- + GATSBY_EMPTY_ALT

Example of single dropdown button.

@@ -227,7 +227,7 @@ Split buttons combine a single action button with a menu of related choices into
- + GATSBY_EMPTY_ALT

Example of split-dropdown button.

@@ -247,7 +247,7 @@ Other button variants may be used as a trigger for a dropdown menu. Caution shou

@@ -261,7 +261,7 @@ Other button variants may be used as a trigger for a dropdown menu. Caution shou

Example of a "more options" dropdown menu.

@@ -280,14 +280,14 @@ Dropdowns are positioned relative to the trigger element that is clicked on to o A dropdown is typically displayed below the trigger element, and the left edge of the dropdown is aligned with the left edge of the trigger element. To make sure dropdowns don’t become obscured by running off the edge of the browser, you may position the dropdown to the left, right, or above the trigger element. You may also change the alignment to the right, top, or bottom edges.
- + GATSBY_EMPTY_ALT

Dropdowns can be left or right aligned.

- + GATSBY_EMPTY_ALT

Dropdowns can be positioned above the trigger element. If using a button, @@ -297,7 +297,7 @@ A dropdown is typically displayed below the trigger element, and the left edge o

- + GATSBY_EMPTY_ALT

Dropdowns can be positioned to the left or right of the trigger element. @@ -315,7 +315,7 @@ Dropdowns are capable of displaying any kind of content, but great care should b

- + GATSBY_EMPTY_ALT

Small forms can be shown inside a dropdown instead of going to a new @@ -326,7 +326,7 @@ Dropdowns are capable of displaying any kind of content, but great care should b

- + GATSBY_EMPTY_ALT

Menu items can be combined with custom content.

diff --git a/website/react-magma-docs/src/pages/design/header.mdx b/website/react-magma-docs/src/pages/design/header.mdx index ef9e13d49a..a54c35d3be 100644 --- a/website/react-magma-docs/src/pages/design/header.mdx +++ b/website/react-magma-docs/src/pages/design/header.mdx @@ -33,13 +33,13 @@ The header component is designed to be extremely flexible allowing designers to
- + GATSBY_EMPTY_ALT
Header on small/mobile screen
- + GATSBY_EMPTY_ALT
Header on large/desktop screen
@@ -48,17 +48,17 @@ The header component is designed to be extremely flexible allowing designers to Horizontal specifications are consistent across all “flavors” of the header (standard, compact, and responsive.)
- + GATSBY_EMPTY_ALT
Header on small/mobile screen
- + GATSBY_EMPTY_ALT
Header on large/desktop screen
- + GATSBY_EMPTY_ALT
Header with sidebar menu icon
@@ -67,7 +67,7 @@ Horizontal specifications are consistent across all “flavors” of the header In certain circumstances, designers may need to left-justify header features. The component allows for this and uses the same basic rules of horizontal and vertical spacing.
- + GATSBY_EMPTY_ALT
Header with left justification
@@ -76,7 +76,7 @@ In certain circumstances, designers may need to left-justify header features. Th The header should span the full width of the screen. On extra wide displays, the content may include expanded margins on each side, but the header logo should remain left-justfied to the edge of the screen, and (in most cases) the icons, features and inputs should remain right-justfied to the edge of the screen.
- + GATSBY_EMPTY_ALT
## Vertical Specifications @@ -84,12 +84,12 @@ The header should span the full width of the screen. On extra wide displays, the Vertical specifications vary between the standard and compact views.
- + GATSBY_EMPTY_ALT
Compact header
- + GATSBY_EMPTY_ALT
Standard header
@@ -124,7 +124,7 @@ Here are several examples of strategies that designers should avoid: ### Don't use too many icons
- + GATSBY_EMPTY_ALT

Incorrect

Incorrect: Too many icons create inbalance and clutter

@@ -136,7 +136,7 @@ Here are several examples of strategies that designers should avoid: Don't duplicate items that already exist in the sidebar or elsewhere on the UI.
- + GATSBY_EMPTY_ALT

Incorrect

These already exist in the sidebar or are better suited there

@@ -146,7 +146,7 @@ Don't duplicate items that already exist in the sidebar or elsewhere on the UI. ### Don't use a collapsed sidebar and hamburger menu
- + GATSBY_EMPTY_ALT

Incorrect

Sidebar controls should never co-exist with the hamburger menu

diff --git a/website/react-magma-docs/src/pages/design/icon.mdx b/website/react-magma-docs/src/pages/design/icon.mdx index 5d88a4ba5b..e555f6b1bd 100644 --- a/website/react-magma-docs/src/pages/design/icon.mdx +++ b/website/react-magma-docs/src/pages/design/icon.mdx @@ -40,7 +40,7 @@ This example illustrates how 12px, 14px, 16px, and 20px text strings are paired
- + GATSBY_EMPTY_ALT

Correct

@@ -52,7 +52,7 @@ This example illustrates how 12px, 14px, 16px, and 20px text strings are paired

- + GATSBY_EMPTY_ALT

Incorrect

@@ -77,7 +77,7 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

- + GATSBY_EMPTY_ALT

Correct

@@ -90,7 +90,7 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

- + GATSBY_EMPTY_ALT

Incorrect

@@ -105,7 +105,7 @@ The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the

- + GATSBY_EMPTY_ALT

Incorrect

@@ -130,7 +130,7 @@ When positioning an icon next to text you should always center-align them.

- + GATSBY_EMPTY_ALT

Correct

@@ -141,7 +141,7 @@ When positioning an icon next to text you should always center-align them.

- + GATSBY_EMPTY_ALT

Incorrect

diff --git a/website/react-magma-docs/src/pages/design/indeterminate.mdx b/website/react-magma-docs/src/pages/design/indeterminate.mdx index 7d685b6aed..71cea9f69d 100644 --- a/website/react-magma-docs/src/pages/design/indeterminate.mdx +++ b/website/react-magma-docs/src/pages/design/indeterminate.mdx @@ -24,7 +24,7 @@ View the documentation for checkboxes for

diff --git a/website/react-magma-docs/src/pages/design/input.mdx b/website/react-magma-docs/src/pages/design/input.mdx index 4b3ff09e81..58b4a6e379 100644 --- a/website/react-magma-docs/src/pages/design/input.mdx +++ b/website/react-magma-docs/src/pages/design/input.mdx @@ -19,7 +19,7 @@ Inputs can be used alone or they can be combined with other types of inputs to c
- + GATSBY_EMPTY_ALT
@@ -53,7 +53,7 @@ View component API for text fields.
- + GATSBY_EMPTY_ALT
@@ -65,7 +65,7 @@ View component API for text areas.
- + GATSBY_EMPTY_ALT
@@ -77,7 +77,7 @@ View the password input documentation
- + GATSBY_EMPTY_ALT
@@ -89,7 +89,7 @@ View component API for number inputs.
- + GATSBY_EMPTY_ALT
@@ -101,7 +101,7 @@ View component API or
- + GATSBY_EMPTY_ALT
@@ -113,7 +113,7 @@ View component API for date inputs.
- + GATSBY_EMPTY_ALT
@@ -147,7 +147,7 @@ The field label tells the user what information they need to input. Using placeh
- + GATSBY_EMPTY_ALT

Incorrect

Do not truncate field labels.

@@ -156,7 +156,7 @@ The field label tells the user what information they need to input. Using placeh
- + GATSBY_EMPTY_ALT

Caution

@@ -178,7 +178,7 @@ Placeholder text provides hints or examples of what to enter. Placeholder text d

- + GATSBY_EMPTY_ALT

This example shows how the placeholder text provides a hint to the @@ -199,7 +199,7 @@ Helper text is pertinent information that assists the user in completing a field

- + GATSBY_EMPTY_ALT

Example of input helper text

@@ -217,7 +217,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th
- + GATSBY_EMPTY_ALT

Correct

@@ -230,7 +230,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

- + GATSBY_EMPTY_ALT

Correct

@@ -244,7 +244,7 @@ Required fields should be indicated by putting an asterisk (\*) at the end of th

- + GATSBY_EMPTY_ALT

Incorrect

@@ -274,7 +274,7 @@ Inputs have a 5px border radius to be consistent with buttons, which often accom

- + GATSBY_EMPTY_ALT

Examples of text fields on light and dark backgrounds.

@@ -294,7 +294,7 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty
- + GATSBY_EMPTY_ALT

Example of input with leading icon. The Visa icon helps identify the @@ -305,7 +305,7 @@ Icons can be used to help provide clarity or functionality. Leading icons are ty

- + GATSBY_EMPTY_ALT

Example of input with trailing icon. The calendar icon is a button @@ -327,7 +327,7 @@ The icon can be configured to simply display a message within a tooltip or also

- + GATSBY_EMPTY_ALT

Example of input with Help icon

@@ -345,7 +345,7 @@ The icon can be configured to simply display a message within a tooltip or also
- + GATSBY_EMPTY_ALT

Inputs can display the following states: active, disabled, focused, @@ -373,7 +373,7 @@ When the input provided is invalid, an error message should be used to provide i

- + GATSBY_EMPTY_ALT

Example of input with error message

diff --git a/website/react-magma-docs/src/pages/design/list.mdx b/website/react-magma-docs/src/pages/design/list.mdx index adc8ff8938..3f2d0e870b 100644 --- a/website/react-magma-docs/src/pages/design/list.mdx +++ b/website/react-magma-docs/src/pages/design/list.mdx @@ -29,7 +29,7 @@ Use ordered (numbered) lists when you need to convey a sequence or hierarchy bet
- + GATSBY_EMPTY_ALT
The list in this image shows a list of grocery items in no particular order. @@ -38,7 +38,7 @@ Use ordered (numbered) lists when you need to convey a sequence or hierarchy bet
- + GATSBY_EMPTY_ALT
The list in this image shows a list of the top 7 best-selling car brands. @@ -78,12 +78,12 @@ You can use the spacing tokens in React Magma to increase the vertical space bet
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -97,7 +97,7 @@ The icon list is really just a variant of the Unordered List, but instead of bul
- + GATSBY_EMPTY_ALT
@@ -112,7 +112,7 @@ There are three icon size choices, including small, medium, and large. These siz
- + GATSBY_EMPTY_ALT
@@ -127,7 +127,7 @@ You can align the icon with the center or top of the associated content. This la
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/loading-indicator.mdx b/website/react-magma-docs/src/pages/design/loading-indicator.mdx index 759545e3dd..8c9b1b07c9 100644 --- a/website/react-magma-docs/src/pages/design/loading-indicator.mdx +++ b/website/react-magma-docs/src/pages/design/loading-indicator.mdx @@ -33,7 +33,7 @@ Circular spinners are used when the amount of time needed to run a process or lo
@@ -49,7 +49,7 @@ Progress bars should be used when real progress data can be fed to it, and you a
- + GATSBY_EMPTY_ALT
@@ -67,7 +67,7 @@ Many actions happen quickly, such as saving updates, submitting a form, or loadi If you know that it will take less than a second to complete an action, then no loading indicator is necessary. If you know the action is going to take 1 - 5 seconds to complete, you should use a circular spinner.
- + GATSBY_EMPTY_ALT

Replace the label in the button with the circular spinner after clicking @@ -82,7 +82,7 @@ If you know that it will take less than a second to complete an action, then no If you are loading large amounts of data like an entire page or large areas of data, the amount of time it takes to load can vary greatly. We need to effectively communicate with the user what is happening, but that takes some informed decisions on our part.

- + GATSBY_EMPTY_ALT

In this example, we are using a loading indicator while the Learning Path @@ -99,7 +99,7 @@ If there is no way of measuring how long it will take in real-time, but you know

Messaging should tell the user what is happening and what to expect.

@@ -116,7 +116,7 @@ If you know from testing that it typically takes more than 15 seconds to load, *
- + GATSBY_EMPTY_ALT

@@ -133,7 +133,7 @@ This component also allows for three messages, although at different intervals t

Messaging should tell the user what is happening and what to expect.

diff --git a/website/react-magma-docs/src/pages/design/modal.mdx b/website/react-magma-docs/src/pages/design/modal.mdx index 109a0c1721..6e5c2a1971 100644 --- a/website/react-magma-docs/src/pages/design/modal.mdx +++ b/website/react-magma-docs/src/pages/design/modal.mdx @@ -28,13 +28,13 @@ A modal is intentionally interruptive and blocks the user from interacting with Clearly describe the decision being made by the user, and explain any possible consequences it could cause. The primary button should also reinforce the action being taken. If the action being taken is irreversible, make that clear to the user as well. The user should also be able to cancel the action with a secondary button or closing the modal. - +GATSBY_EMPTY_ALT ### Edit or Manage Tasks It's very common to use a modal to quickly edit or manage one or more items on a page without going back and forth between multiple pages. The emphasis here is "quickly". If the settings or management of an item becomes relatively complex and requires many decisions or multiple steps, please consider using a separate page or something other than a modal. If a particular action is often done repeatedly, consider allowing the action to be done directly on the main page rather than in a modal. - +GATSBY_EMPTY_ALT --- @@ -42,7 +42,7 @@ It's very common to use a modal to quickly edit or manage one or more items on a Modals come in three responsive sizes: small, medium, and large. - +GATSBY_EMPTY_ALT ### Small @@ -86,12 +86,12 @@ Modals should always contain a way to close them, and there are typically multip When a modal is opened, the focus is automatically put on the title of the modal rather than the first actionable element. We intentionally do this to provide an optimal experience for both people using assistive technologies and those who don't. - +GATSBY_EMPTY_ALT ### Validation Always validate a user's input entries before a modal is closed. If there are any errors, an inline error alert should be displayed above the form, as well as error messages on any specific inputs that failed validation. The error messages should provide clear instructions on how to resolve the errors and complete the action. - +GATSBY_EMPTY_ALT diff --git a/website/react-magma-docs/src/pages/design/password-input.mdx b/website/react-magma-docs/src/pages/design/password-input.mdx index f542227477..a47589ca58 100644 --- a/website/react-magma-docs/src/pages/design/password-input.mdx +++ b/website/react-magma-docs/src/pages/design/password-input.mdx @@ -15,7 +15,7 @@ import { Link } from 'gatsby';
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/progress-bar.mdx b/website/react-magma-docs/src/pages/design/progress-bar.mdx index 8d6cc04081..b1087ca599 100644 --- a/website/react-magma-docs/src/pages/design/progress-bar.mdx +++ b/website/react-magma-docs/src/pages/design/progress-bar.mdx @@ -25,7 +25,7 @@ To see how progress bars are used as loading indicators, view the [loading indic
- + GATSBY_EMPTY_ALT
@@ -35,7 +35,7 @@ To see how progress bars are used as loading indicators, view the [loading indic
- + GATSBY_EMPTY_ALT
@@ -58,7 +58,7 @@ The width of the progress bar is controlled by the container it is within. For m When a static progress bar is used, it represents the progress of something at that point in time and does not change until an explicit action is performed that updates the progress bar.
- + GATSBY_EMPTY_ALT

Example of using progress bar to help communicate that the user is on step @@ -67,7 +67,7 @@ When a static progress bar is used, it represents the progress of something at t

- + GATSBY_EMPTY_ALT

Progress bars can be used to visually display the same data point for @@ -82,7 +82,7 @@ When a static progress bar is used, it represents the progress of something at t When a dynamic progress bar is used, it means it's updating in real-time while you wait for a series of processes outside of your control to complete.

- + GATSBY_EMPTY_ALT

Example of using progress bar to help communicate that the data is loading @@ -107,7 +107,7 @@ The track on the dark/inverse progress bar has a black background at 25% opacity

- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/radio.mdx b/website/react-magma-docs/src/pages/design/radio.mdx index b0caab11eb..451812660b 100644 --- a/website/react-magma-docs/src/pages/design/radio.mdx +++ b/website/react-magma-docs/src/pages/design/radio.mdx @@ -21,7 +21,7 @@ Radio buttons should have the most commonly used option selected by default.
@@ -34,7 +34,7 @@ Radio buttons should have the most commonly used option selected by default.

Correct

@@ -48,7 +48,7 @@ Radio buttons should have the most commonly used option selected by default.

Incorrect

@@ -63,7 +63,7 @@ Radio buttons should have the most commonly used option selected by default.
- + GATSBY_EMPTY_ALT

Radio buttons - only one option can be selected at a time.

@@ -76,7 +76,7 @@ Radio buttons can be off or on. Radio buttons have enabled, focused and pressed
- + GATSBY_EMPTY_ALT

Radio states

@@ -89,7 +89,7 @@ Use the inverse version when using the radio buttons on a dark background.
- + GATSBY_EMPTY_ALT

Inverse colors

diff --git a/website/react-magma-docs/src/pages/design/search.mdx b/website/react-magma-docs/src/pages/design/search.mdx index 28324a6fb6..40dcc7ae85 100644 --- a/website/react-magma-docs/src/pages/design/search.mdx +++ b/website/react-magma-docs/src/pages/design/search.mdx @@ -29,12 +29,12 @@ Set the user’s context for the search with helpful placeholder text within the
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/stepper.mdx b/website/react-magma-docs/src/pages/design/stepper.mdx index 3e5c15b6fb..fe71feeb97 100644 --- a/website/react-magma-docs/src/pages/design/stepper.mdx +++ b/website/react-magma-docs/src/pages/design/stepper.mdx @@ -18,7 +18,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Steppers aid in guiding a user's expectations while navigating through a multistep process. They indicate the current step, the total number of steps, and the overall progress towards task completion.
- + GATSBY_EMPTY_ALT
### When to use @@ -43,7 +43,7 @@ Steppers aid in guiding a user's expectations while navigating through a multist
- + GATSBY_EMPTY_ALT
@@ -65,7 +65,7 @@ Steppers aid in guiding a user's expectations while navigating through a multist The default placement of the labels is under each status indicator on the line. This layout benefits from short labels, especially as the number of steps increases.
- + GATSBY_EMPTY_ALT
#### No Labels @@ -73,7 +73,7 @@ The default placement of the labels is under each status indicator on the line. If the nature of the labels would simply be too much text to reasonably fit, then it is acceptable to hide the labels on the stepper component. However, this means having clear titles within the content of the step itself is extremely important. It can be helpful to change to this layout on small screens.
- + GATSBY_EMPTY_ALT
#### Summary View @@ -81,7 +81,7 @@ If the nature of the labels would simply be too much text to reasonably fit, the The step summary layout shows the primary and secondary labels, but only for the step you are currently on. It also tells you what number step you are on, and how many steps there are in total. This layout can be a nice middle-point between showing all labels and not showing labels at all, and you can use it on large or small screens.
- + GATSBY_EMPTY_ALT
### Placement @@ -89,15 +89,15 @@ The step summary layout shows the primary and secondary labels, but only for the The stepper component can be placed on a full page, in a modal, or in a side panel.
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
--- @@ -114,7 +114,7 @@ The label should succinctly convey the user's objectives for each step in one or
- + GATSBY_EMPTY_ALT
@@ -130,7 +130,7 @@ Secondary labels are optional and should be used if some additional description
- + GATSBY_EMPTY_ALT
@@ -148,7 +148,7 @@ When there isn’t enough space, the labels will wrap to as many lines as necess
- + GATSBY_EMPTY_ALT
@@ -172,7 +172,7 @@ A step is complete when a user has filled out the required information within a
- + GATSBY_EMPTY_ALT
@@ -188,7 +188,7 @@ A step is current when a user is interacting with the information within that st
- + GATSBY_EMPTY_ALT
@@ -204,7 +204,7 @@ A step is not started when a user has not yet interacted with that step. Steps t
- + GATSBY_EMPTY_ALT
@@ -220,7 +220,7 @@ A step may be in error when a user has entered invalid or incomplete information
- + GATSBY_EMPTY_ALT
@@ -235,7 +235,7 @@ Currently, the stepper is not interactive, providing only a visual update of the A common example includes buttons labeled as “Next” and “Back”, and often ending with a button labeled “Finish.” But the labels themselves need to make sense for the process being completed, so there isn’t any mandated language to use. You can also choose to not include a “Back” button if you don’t want the user to go back to previous steps. Whatever you do, we suggest conducting usability tests to ensure you have created the best experience possible.
- + GATSBY_EMPTY_ALT
### Validation @@ -245,7 +245,7 @@ When possible, use validation to confirm that a step has been completed before t If the user cannot proceed due to a server-side issue, then an inline alert should appear.
- + GATSBY_EMPTY_ALT
### Responsive Behavior @@ -258,7 +258,7 @@ If you don’t have very many steps and the labels are short, it is very possibl
- + GATSBY_EMPTY_ALT
@@ -268,7 +268,7 @@ Hiding the labels on small screens is acceptable, but only if you are using very
- + GATSBY_EMPTY_ALT
@@ -278,7 +278,7 @@ This may be the most common format for small screens or zooming in. You only dis
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/table.mdx b/website/react-magma-docs/src/pages/design/table.mdx index 9f08602d4b..8d944b9bde 100644 --- a/website/react-magma-docs/src/pages/design/table.mdx +++ b/website/react-magma-docs/src/pages/design/table.mdx @@ -42,7 +42,7 @@ Tables display information in a grid-like format of rows and columns. They organ ## Anatomy
- + GATSBY_EMPTY_ALT
1. Table title @@ -56,7 +56,7 @@ Tables display information in a grid-like format of rows and columns. They organ Tables come in three different sizes or densities: compact, normal, and loose. This is applied to the entire table and not just a specific row or cell.
- + GATSBY_EMPTY_ALT
### Compact Density @@ -64,7 +64,7 @@ Tables come in three different sizes or densities: compact, normal, and loose. T The compact density can be useful for tables with a relatively large number of columns and rows by allowing you to simply fit more on the screen at once.
- + GATSBY_EMPTY_ALT
### Normal Density @@ -72,7 +72,7 @@ The compact density can be useful for tables with a relatively large number of c The default padding of tables is optimized for a nice balance between compact and loose densities.
- + GATSBY_EMPTY_ALT
### Loose Density @@ -80,7 +80,7 @@ The default padding of tables is optimized for a nice balance between compact an The loose density can be useful if you have a relatively small amount of data and if the user would benefit from the table having more white-space within it.
- + GATSBY_EMPTY_ALT
--- @@ -96,12 +96,12 @@ The loose density can be useful if you have a relatively small amount of data an
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -113,13 +113,13 @@ The loose density can be useful if you have a relatively small amount of data an - In cases where a column title is too long, the text will wrap to two lines.
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT

Incorrect

Don't truncate column titles.

@@ -128,7 +128,7 @@ The loose density can be useful if you have a relatively small amount of data an
- + GATSBY_EMPTY_ALT

Correct

Let long column titles wrap naturally.

@@ -153,7 +153,7 @@ The loose density can be useful if you have a relatively small amount of data an Striped rows (zebra striping) is an optional styling you may apply to your table. This can make data-heavy tables easier for your user to read, as the stripes help guide the eye across the table and then back to the next row.
- + GATSBY_EMPTY_ALT
### Hover @@ -161,7 +161,7 @@ Striped rows (zebra striping) is an optional styling you may apply to your table The table’s row hover state can help your user visually scan the columns of data in a row even if the row is not interactive. This feature is optional and is easily enabled for any table, and may be used in combination with striped rows.
- + GATSBY_EMPTY_ALT
### Sorting @@ -171,7 +171,7 @@ Columns can be sorted in ascending or descending order. Sorting controls are loc A sorted table has three states: unsorted (sort-double-arrow), sorted-up (arrow-upward) or sorted-down (arrow-downward). The icon indicates the current sorted state. All sortable columns display an arrow icon, but only one can be actively sorted at a time.
- + GATSBY_EMPTY_ALT
### Inline Actions @@ -182,12 +182,12 @@ Inline actions are functions that may be performed on a specific table row. In o
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/tabs.mdx b/website/react-magma-docs/src/pages/design/tabs.mdx index 9297760950..b64a027cba 100644 --- a/website/react-magma-docs/src/pages/design/tabs.mdx +++ b/website/react-magma-docs/src/pages/design/tabs.mdx @@ -22,7 +22,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; ## Anatomy
- +
1. Tab @@ -40,7 +40,7 @@ Text labels should clearly and succinctly describe the content they represent. T
- + GATSBY_EMPTY_ALT

Caution

@@ -52,7 +52,7 @@ Text labels should clearly and succinctly describe the content they represent. T

- + GATSBY_EMPTY_ALT

Incorrect

@@ -65,7 +65,7 @@ Text labels should clearly and succinctly describe the content they represent. T

- + GATSBY_EMPTY_ALT

Incorrect

@@ -77,7 +77,7 @@ Text labels should clearly and succinctly describe the content they represent. T

- + GATSBY_EMPTY_ALT

Incorrect

@@ -99,7 +99,7 @@ Icons can be very helpful in helping identify the type or context of the content Icons can be placed to the left of the label or on top of the label, depending on the desired outcome or constraints of the layout. The added space required by the icon requires even greater effort to make the text label as short as possible.

- + GATSBY_EMPTY_ALT

Icons and text labels can be used together to help communicate what the @@ -109,7 +109,7 @@ Icons can be placed to the left of the label or on top of the label, depending o

- + GATSBY_EMPTY_ALT

Icons can be stacked on top of the label which saves horizontal space, but @@ -123,7 +123,7 @@ Icons can be placed to the left of the label or on top of the label, depending o Icon-only tabs can be very useful for communicating the content they represent, especially in small areas or on small devices.

- + GATSBY_EMPTY_ALT

Caution

@@ -142,7 +142,7 @@ The active tab indicator helps make it very clear which tab is currently selecte

- + GATSBY_EMPTY_ALT

Correct

The indicator appears on the bottom of the tab by default.

@@ -151,7 +151,7 @@ The active tab indicator helps make it very clear which tab is currently selecte
- + GATSBY_EMPTY_ALT

Caution

@@ -172,7 +172,7 @@ The active tab indicator helps make it very clear which tab is currently selecte ## States

- + GATSBY_EMPTY_ALT
1. Inactive @@ -188,14 +188,14 @@ The active tab indicator helps make it very clear which tab is currently selecte Tabs are displayed in a single row or column, with each tab connected to the content they represent. Tabs can be attached to headers, main content areas, side panels, and nestled into cards.
- + GATSBY_EMPTY_ALT

Example of tabs in the header of a panel.

- + GATSBY_EMPTY_ALT

Example of tabs in a column.

@@ -205,7 +205,7 @@ Tabs are displayed in a single row or column, with each tab connected to the con
- + GATSBY_EMPTY_ALT

Incorrect

Don't nest tabs to create multiple levels.

@@ -214,7 +214,7 @@ Tabs are displayed in a single row or column, with each tab connected to the con
- + GATSBY_EMPTY_ALT

Incorrect

Don't stack tabs meant to be horizontal on top of each other.

@@ -237,21 +237,21 @@ The default width of a tab is undefined and is determined by the content within Auto-width tabs can be left-aligned, right-aligned, or centered.
- + GATSBY_EMPTY_ALT

By default, auto-width tabs are left aligned.

- + GATSBY_EMPTY_ALT

You may also right-align the tabs with the content below or above.

- + GATSBY_EMPTY_ALT

On wider layouts, centering the tabs may work well.

@@ -262,7 +262,7 @@ Auto-width tabs can be left-aligned, right-aligned, or centered. The tab container for auto-width tabs will automatically scroll if the container becomes too small to show all the tabs. Buttons to scroll left and right will automatically be added, but users with touch-based devices will also be able to drag the tab container left and right.
- + GATSBY_EMPTY_ALT

If there are more tabs to see beyond the edge of the container, you will @@ -276,14 +276,14 @@ The tab container for auto-width tabs will automatically scroll if the container Full-width tabs can be calculated by the width of the container divided by the number of tabs. Full-width tabs should only be used if you can guarantee that all tabs will be visible without truncation regardless of the size of the container.

- + GATSBY_EMPTY_ALT

Simple example of full-width tabs, each tab being of equal width.

- + GATSBY_EMPTY_ALT

Caution

@@ -301,7 +301,7 @@ Tabs may also be placed to the left of their corresponding content in a vertical **NOTE:** There isn’t any default Responsive behavior for when the content area gets too narrow to display the tabs next to the content. You are encouraged to reuse solutions from other instances of vertical tabs. In the event no solution exists that will work in your scenario, a new solution will have to be designed.

- + GATSBY_EMPTY_ALT

Simple example of vertical tabs on the left side of the content.

@@ -312,7 +312,7 @@ Tabs may also be placed to the left of their corresponding content in a vertical Vertical tabs will also automatically scroll when the height of their container is too small to display all of the tabs.
- + GATSBY_EMPTY_ALT

If there are more tabs to see beyond the bottom of the container, you will @@ -328,7 +328,7 @@ Vertical tabs will also automatically scroll when the height of their container The tabs have inverse styling available for use on dark backgrounds. Take care with the color you choose for the background to make sure the necessary contrast ratios are upheld for accessibility compliance.

- + GATSBY_EMPTY_ALT

Example of tabs on a dark blue background.

diff --git a/website/react-magma-docs/src/pages/design/time-picker.mdx b/website/react-magma-docs/src/pages/design/time-picker.mdx index 68f109a29f..9bfb5130a1 100644 --- a/website/react-magma-docs/src/pages/design/time-picker.mdx +++ b/website/react-magma-docs/src/pages/design/time-picker.mdx @@ -19,7 +19,7 @@ The Time input gives the user the ability to input a time in a format the develo
- + GATSBY_EMPTY_ALT
@@ -29,7 +29,7 @@ You can tab into the Time input to individually manipulate the hours, minutes, a
- + GATSBY_EMPTY_ALT
diff --git a/website/react-magma-docs/src/pages/design/toast.mdx b/website/react-magma-docs/src/pages/design/toast.mdx index 1a72d558bf..9aa96955e4 100644 --- a/website/react-magma-docs/src/pages/design/toast.mdx +++ b/website/react-magma-docs/src/pages/design/toast.mdx @@ -20,7 +20,7 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Toasts are the least intrusive of the three types of alerts and are used primarily for communicating non-critical information to the user. Toasts appear in the lower-left corner of the viewport.
- + GATSBY_EMPTY_ALT
--- @@ -30,7 +30,7 @@ Toasts are the least intrusive of the three types of alerts and are used primari The basic anatomy of the alert is the same across all three types (banner, inline, toast).
- + GATSBY_EMPTY_ALT
1. Container @@ -46,7 +46,7 @@ The basic anatomy of the alert is the same across all three types (banner, inlin If multiple toasts are triggered, they will automatically stack vertically. When at all possible, try to group batch-like actions into a single toast instead of triggering multiple alerts.
- + GATSBY_EMPTY_ALT

Incorrect

@@ -56,7 +56,7 @@ If multiple toasts are triggered, they will automatically stack vertically. When

- + GATSBY_EMPTY_ALT

Correct

Combine the results from a single action into a single toast alert.

@@ -77,7 +77,7 @@ Avoid displaying errors or warnings with toasts, but if you have to, then these

Correct

@@ -92,7 +92,7 @@ Avoid displaying errors or warnings with toasts, but if you have to, then these

Correct

@@ -125,7 +125,7 @@ Take the following guidelines into consideration when crafting your message: When the viewport is 600px wide and smaller, we automatically reduce the icon and font size to optimize the amount of space given to the message and optional links or buttons in the alert. The toast will also automatically stretch to 100% of the viewport width with spacing around it.
- + GATSBY_EMPTY_ALT
--- diff --git a/website/react-magma-docs/src/pages/design/toggle.mdx b/website/react-magma-docs/src/pages/design/toggle.mdx index 804803e5c4..622adfd406 100644 --- a/website/react-magma-docs/src/pages/design/toggle.mdx +++ b/website/react-magma-docs/src/pages/design/toggle.mdx @@ -19,7 +19,7 @@ Toggle switches are a great way to adjust settings when you are simply turning s
@@ -35,7 +35,7 @@ Toggles can be on, off, or disabled.
diff --git a/website/react-magma-docs/src/pages/design/tooltip.mdx b/website/react-magma-docs/src/pages/design/tooltip.mdx index 0e1bd36349..69888055db 100644 --- a/website/react-magma-docs/src/pages/design/tooltip.mdx +++ b/website/react-magma-docs/src/pages/design/tooltip.mdx @@ -23,7 +23,7 @@ Tooltips are necessary for interactive elements whose function may not be clearl
- + GATSBY_EMPTY_ALT

Correct

Use tooltips for interactive imagery like icon buttons.

@@ -32,7 +32,7 @@ Tooltips are necessary for interactive elements whose function may not be clearl
- + GATSBY_EMPTY_ALT

Incorrect

Don’t use tooltips to restate visible UI text.

diff --git a/website/react-magma-docs/src/pages/design/tree-view.mdx b/website/react-magma-docs/src/pages/design/tree-view.mdx index 2991b3b09b..e87d286d67 100644 --- a/website/react-magma-docs/src/pages/design/tree-view.mdx +++ b/website/react-magma-docs/src/pages/design/tree-view.mdx @@ -19,7 +19,7 @@ A tree view comprises nested heading levels, establishing a content hierarchy fo
- + GATSBY_EMPTY_ALT
@@ -46,7 +46,7 @@ When dealing with a single level of nested information, consider utilizing an al
- + GATSBY_EMPTY_ALT
@@ -70,7 +70,7 @@ Nodes stack directly on top of each other with 0px space between them. Having no
- + GATSBY_EMPTY_ALT
@@ -86,12 +86,12 @@ Nested nodes in a tree view rely on organized and consistent alignment to group
- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -117,7 +117,7 @@ Icons can be a helpful way of scanning a list for various item types. Icons shou
- + GATSBY_EMPTY_ALT

Correct

@@ -128,7 +128,7 @@ Icons can be a helpful way of scanning a list for various item types. Icons shou

- + GATSBY_EMPTY_ALT

Incorrect

@@ -152,12 +152,12 @@ Branch nodes and leaf nodes exhibit identical styles across various states. The

- + GATSBY_EMPTY_ALT
- + GATSBY_EMPTY_ALT
@@ -177,7 +177,7 @@ To expand or collapse a branch node the user can click anywhere within the arrow
- + GATSBY_EMPTY_ALT
@@ -194,7 +194,7 @@ To expand or collapse a branch node the user can click anywhere within the arrow
- + GATSBY_EMPTY_ALT