From 09b6ec01da0311f4ac20b67dc15a6271bd5e0b19 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 4 Oct 2024 09:31:10 -0400 Subject: [PATCH] docs: fix image sizes and content lost in conflict merge (#1949) * docs(accordion): add missing width * docs(alert): update docs to correct images and sizes * docs(audio-player): update missing image widths * docs(avatar): add missing width attributes * docs: update heights and widths * docs(surface): fix grid * docs(accordion): remove px * docs: add height auto to correctly size images with height attr * docs(back-to-top): correct width and height attrs * docs(badge): add width and height attrs to images * docs(blockquote): add missing height and width attributes * docs(breadcrumb): add missing height and width attributes * docs(button): add missing height and width attrs * docs(card): add missing height and width attrs * docs(code-block): add missing height and width attrs to images * docs(cta): add missing height and width attributes from images * docs(dialog): add missing height and width attributes to images * docs(footer): add missing height and width attributes to images * docs(health-index): add missing height and width attributes to images * docs(icon): add missing height and width attributes to images * docs(jump-links): add missing height and width attributes to images * docs(navigation): add missing height and width attributes to images * docs(navigation-secondary): add missing height and width attributes to images * docs(pagination): add missing height and width attributes to images * docs(popover): add missing height and width attributes to images * docs(progress-steps): add missing height and width attributes to images * docs(site-status): add missing height and width attributes to images * docs(skip-link): add missing height and width attributes to images * docs(spinner): add missing height and width attributes to images * docs(stat): add missing height and width attributes to images * docs(subnav): add missing height and width attributes to images * docs(surface): remove unneeded extra styles from guidelines page * docs(switch): add missing height and width attributes to images * docs(table): add missing height and width attributes to images * docs(tabs): add missing height and width attributes to images * docs(tag): add missing height and width attributes to images * docs(tile): add missing height and width attributes to images * docs(timestamp): add missing height and width attributes to images * docs(tooltip): add missing height and width attributes to images * docs(video-embed): add missing height and width attributes to images * docs(accordion): missed height width attrs on accessibility page * docs(accordion): missed width-adjustment attr * docs(accordion): incorrect values oops * docs(blockquote): fix image paths * docs(blockquote): fix image paths on blockquote guidelines * docs(cta): fix width-adjustment values * docs(health-index): fix width-adjustment values * docs(icon): fix width-adjustment values * docs(switch): fix width-adjustment values * docs(table): fix width-adjustment values * docs(tabs): fix width-adjustment values * docs: clean up masthead and subnav z-index * docs: small tweak broken image errant character --- .../javascript/elements/uxdot-example.css | 1 + .../javascript/elements/uxdot-masthead.css | 4 - docs/styles/styles.css | 14 +- elements/rh-accordion/docs/00-overview.md | 7 +- elements/rh-accordion/docs/10-style.md | 103 +++- elements/rh-accordion/docs/20-guidelines.md | 96 +-- .../rh-accordion/docs/40-accessibility.md | 21 +- elements/rh-alert/docs/00-overview.md | 19 +- elements/rh-alert/docs/10-style.md | 139 ++--- elements/rh-alert/docs/20-guidelines.md | 300 +++++----- elements/rh-alert/docs/40-accessibility.md | 46 +- elements/rh-alert/docs/alert-anatomy.svg | 52 -- .../rh-alert/docs/alert-behavior-stack-1.svg | 102 ---- .../rh-alert/docs/alert-behavior-stack-2.svg | 54 -- .../rh-alert/docs/alert-bestpractice-1.svg | 45 -- .../rh-alert/docs/alert-bestpractice-2.svg | 60 -- .../rh-alert/docs/alert-bestpractice-3.svg | 76 --- .../docs/alert-dismissal-examples.svg | 82 --- elements/rh-alert/docs/alert-focus-order.svg | 54 -- .../docs/alert-guidelines-behavior-1.svg | 219 ++++--- ...rt-guidelines-responsive-small-screens.svg | 317 +++++----- .../docs/alert-guidelines-severity.svg | 559 ++++++++++-------- .../docs/alert-interaction-states-active.svg | 158 ----- .../docs/alert-interaction-states-focus.svg | 83 --- .../docs/alert-interaction-states-hover.svg | 128 ---- .../docs/alert-interaction-states-link.svg | 53 -- .../docs/alert-positioning-inline-global.svg | 44 -- .../docs/alert-positioning-inline-local.svg | 154 ----- .../alert-positioning-toast-persistent.svg | 62 -- .../alert-positioning-toast-temporary.svg | 57 -- .../docs/alert-responsive-large-screens.svg | 67 --- .../docs/alert-responsive-small-screens.svg | 58 -- elements/rh-alert/docs/alert-sample.svg | 55 -- elements/rh-alert/docs/alert-severity.svg | 201 ------- .../rh-alert/docs/alert-spacing-inline.svg | 113 ---- .../docs/alert-spacing-toast-layout.svg | 105 ---- .../rh-alert/docs/alert-spacing-toast.svg | 105 ---- .../rh-alert/docs/alert-style-inline-alt.svg | 44 -- elements/rh-alert/docs/alert-style-inline.svg | 38 -- elements/rh-alert/docs/alert-style-toast.svg | 54 -- elements/rh-audio-player/docs/10-style.md | 67 ++- elements/rh-audio-player/docs/20-features.md | 49 +- .../rh-audio-player/docs/30-guidelines.md | 111 +++- .../rh-audio-player/docs/50-accessibility.md | 14 +- elements/rh-avatar/docs/00-overview.md | 5 +- elements/rh-avatar/docs/10-style.md | 75 ++- elements/rh-avatar/docs/20-guidelines.md | 51 +- elements/rh-back-to-top/docs/00-overview.md | 5 +- elements/rh-back-to-top/docs/10-style.md | 51 +- elements/rh-back-to-top/docs/20-guidelines.md | 63 +- .../rh-back-to-top/docs/40-accessibility.md | 5 +- elements/rh-badge/docs/00-overview.md | 5 +- elements/rh-badge/docs/10-style.md | 25 +- elements/rh-badge/docs/20-guidelines.md | 20 +- elements/rh-blockquote/docs/00-overview.md | 5 +- elements/rh-blockquote/docs/10-style.md | 60 +- elements/rh-blockquote/docs/20-guidelines.md | 152 ++++- elements/rh-breadcrumb/docs/00-overview.md | 5 +- elements/rh-breadcrumb/docs/10-style.md | 55 +- elements/rh-breadcrumb/docs/20-guidelines.md | 70 ++- .../rh-breadcrumb/docs/40-accessibility.md | 5 +- elements/rh-button/docs/00-overview.md | 5 +- elements/rh-button/docs/10-style.md | 55 +- elements/rh-button/docs/20-guidelines.md | 75 ++- elements/rh-button/docs/40-accessibility.md | 15 +- elements/rh-card/docs/00-overview.md | 5 +- elements/rh-card/docs/10-style.md | 45 +- elements/rh-card/docs/20-guidelines.md | 58 +- .../docs/{10-overview.md => 00-overview.md} | 5 +- .../docs/{20-style.md => 10-style.md} | 25 +- .../{30-guidelines.md => 20-guidelines.md} | 30 +- .../docs/{40-code.md => 30-code.md} | 0 ...0-accessibility.md => 40-accessibility.md} | 0 elements/rh-cta/docs/00-overview.md | 5 +- elements/rh-cta/docs/10-style.md | 90 ++- elements/rh-cta/docs/20-guidelines.md | 183 ++++-- elements/rh-cta/docs/40-accessibility.md | 19 +- elements/rh-dialog/docs/00-overview.md | 5 +- elements/rh-dialog/docs/10-style.md | 40 +- elements/rh-dialog/docs/20-guidelines.md | 75 ++- elements/rh-dialog/docs/40-accessibility.md | 10 +- elements/rh-footer/docs/10-style.md | 75 ++- elements/rh-footer/docs/20-guidelines.md | 85 ++- elements/rh-footer/docs/40-accessibility.md | 15 +- elements/rh-health-index/docs/00-overview.md | 7 +- elements/rh-health-index/docs/10-style.md | 66 ++- .../rh-health-index/docs/20-guidelines.md | 52 +- elements/rh-icon/docs/00-overview.md | 5 +- elements/rh-icon/docs/10-style.md | 15 +- elements/rh-icon/docs/20-guidelines.md | 65 +- elements/rh-icon/docs/40-accessibility.md | 14 +- elements/rh-jump-links/docs/00-overview.md | 5 +- elements/rh-jump-links/docs/10-style.md | 45 +- elements/rh-jump-links/docs/20-guidelines.md | 35 +- .../docs/00-overview.md | 5 +- .../rh-navigation-secondary/docs/10-style.md | 75 ++- .../docs/20-guidelines.md | 95 ++- .../docs/40-accessibility.md | 5 +- elements/rh-navigation/docs/00-overview.md | 5 +- elements/rh-navigation/docs/10-style.md | 105 +++- elements/rh-navigation/docs/20-guidelines.md | 130 +++- elements/rh-pagination/docs/00-overview.md | 5 +- elements/rh-pagination/docs/10-style.md | 120 +++- elements/rh-pagination/docs/20-guidelines.md | 100 +++- .../rh-pagination/docs/40-accessibility.md | 20 +- elements/rh-popover/docs/00-overview.md | 5 +- elements/rh-popover/docs/10-style.md | 77 ++- elements/rh-popover/docs/20-guidelines.md | 92 ++- .../rh-progress-steps/docs/00-overview.md | 5 +- elements/rh-progress-steps/docs/10-style.md | 45 +- .../rh-progress-steps/docs/20-guidelines.md | 85 ++- elements/rh-site-status/docs/00-overview.md | 5 +- elements/rh-site-status/docs/10-style.md | 65 +- elements/rh-site-status/docs/20-guidelines.md | 61 +- .../rh-site-status/docs/40-accessibility.md | 5 +- elements/rh-skip-link/docs/00-overview.md | 5 +- elements/rh-skip-link/docs/10-style.md | 56 +- elements/rh-skip-link/docs/20-guidelines.md | 30 +- .../rh-skip-link/docs/40-accessibility.md | 10 +- elements/rh-spinner/docs/00-overview.md | 5 +- elements/rh-spinner/docs/10-style.md | 35 +- elements/rh-spinner/docs/20-guidelines.md | 32 +- elements/rh-stat/docs/00-overview.md | 5 +- elements/rh-stat/docs/10-style.md | 35 +- elements/rh-stat/docs/20-guidelines.md | 95 ++- elements/rh-stat/docs/40-accessibility.md | 10 +- elements/rh-subnav/docs/00-overview.md | 5 +- elements/rh-subnav/docs/10-style.md | 35 +- elements/rh-subnav/docs/20-guidelines.md | 85 ++- elements/rh-subnav/docs/40-accessibility.md | 15 +- elements/rh-surface/docs/00-overview.md | 25 +- elements/rh-surface/docs/20-guidelines.md | 30 +- elements/rh-switch/docs/00-overview.md | 5 +- elements/rh-switch/docs/10-style.md | 45 +- elements/rh-switch/docs/20-guidelines.md | 49 +- elements/rh-switch/docs/40-accessibility.md | 15 +- elements/rh-table/docs/00-overview.md | 5 +- elements/rh-table/docs/10-style.md | 60 +- elements/rh-table/docs/20-guidelines.md | 62 +- elements/rh-table/docs/40-accessibility.md | 15 +- elements/rh-tabs/docs/00-overview.md | 5 +- elements/rh-tabs/docs/10-style.md | 102 +++- elements/rh-tabs/docs/20-guidelines.md | 122 +++- elements/rh-tabs/docs/40-accessibility.md | 15 +- elements/rh-tag/docs/00-overview.md | 4 +- elements/rh-tag/docs/10-style.md | 44 +- elements/rh-tag/docs/20-guidelines.md | 52 +- elements/rh-tag/docs/40-accessibility.md | 8 +- elements/rh-tile/docs/00-overview.md | 5 +- elements/rh-tile/docs/10-style.md | 100 +++- elements/rh-tile/docs/20-guidelines.md | 50 +- elements/rh-tile/docs/40-accessibility.md | 10 +- elements/rh-timestamp/docs/10-style.md | 15 +- elements/rh-timestamp/docs/20-guidelines.md | 52 +- elements/rh-tooltip/docs/00-overview.md | 5 +- elements/rh-tooltip/docs/10-style.md | 30 +- elements/rh-tooltip/docs/20-guidelines.md | 35 +- elements/rh-tooltip/docs/40-accessibility.md | 5 +- elements/rh-video-embed/docs/00-overview.md | 5 +- elements/rh-video-embed/docs/10-style.md | 65 +- elements/rh-video-embed/docs/20-guidelines.md | 35 +- .../rh-video-embed/docs/40-accessibility.md | 5 +- 162 files changed, 4634 insertions(+), 4090 deletions(-) delete mode 100644 elements/rh-alert/docs/alert-anatomy.svg delete mode 100644 elements/rh-alert/docs/alert-behavior-stack-1.svg delete mode 100644 elements/rh-alert/docs/alert-behavior-stack-2.svg delete mode 100644 elements/rh-alert/docs/alert-bestpractice-1.svg delete mode 100644 elements/rh-alert/docs/alert-bestpractice-2.svg delete mode 100644 elements/rh-alert/docs/alert-bestpractice-3.svg delete mode 100644 elements/rh-alert/docs/alert-dismissal-examples.svg delete mode 100644 elements/rh-alert/docs/alert-focus-order.svg delete mode 100644 elements/rh-alert/docs/alert-interaction-states-active.svg delete mode 100644 elements/rh-alert/docs/alert-interaction-states-focus.svg delete mode 100644 elements/rh-alert/docs/alert-interaction-states-hover.svg delete mode 100644 elements/rh-alert/docs/alert-interaction-states-link.svg delete mode 100644 elements/rh-alert/docs/alert-positioning-inline-global.svg delete mode 100644 elements/rh-alert/docs/alert-positioning-inline-local.svg delete mode 100644 elements/rh-alert/docs/alert-positioning-toast-persistent.svg delete mode 100644 elements/rh-alert/docs/alert-positioning-toast-temporary.svg delete mode 100644 elements/rh-alert/docs/alert-responsive-large-screens.svg delete mode 100644 elements/rh-alert/docs/alert-responsive-small-screens.svg delete mode 100644 elements/rh-alert/docs/alert-sample.svg delete mode 100644 elements/rh-alert/docs/alert-severity.svg delete mode 100644 elements/rh-alert/docs/alert-spacing-inline.svg delete mode 100644 elements/rh-alert/docs/alert-spacing-toast-layout.svg delete mode 100644 elements/rh-alert/docs/alert-spacing-toast.svg delete mode 100644 elements/rh-alert/docs/alert-style-inline-alt.svg delete mode 100644 elements/rh-alert/docs/alert-style-inline.svg delete mode 100644 elements/rh-alert/docs/alert-style-toast.svg rename elements/rh-code-block/docs/{10-overview.md => 00-overview.md} (80%) rename elements/rh-code-block/docs/{20-style.md => 10-style.md} (58%) rename elements/rh-code-block/docs/{30-guidelines.md => 20-guidelines.md} (52%) rename elements/rh-code-block/docs/{40-code.md => 30-code.md} (100%) rename elements/rh-code-block/docs/{50-accessibility.md => 40-accessibility.md} (100%) diff --git a/docs/assets/javascript/elements/uxdot-example.css b/docs/assets/javascript/elements/uxdot-example.css index fb809cf0b4..ab2827185d 100644 --- a/docs/assets/javascript/elements/uxdot-example.css +++ b/docs/assets/javascript/elements/uxdot-example.css @@ -29,6 +29,7 @@ align-items: var(--_alignment, center); justify-content: center; max-width: 100%; + height: auto; width: var(--_width, 100%); } diff --git a/docs/assets/javascript/elements/uxdot-masthead.css b/docs/assets/javascript/elements/uxdot-masthead.css index 97bc7dac2e..8d14be931e 100644 --- a/docs/assets/javascript/elements/uxdot-masthead.css +++ b/docs/assets/javascript/elements/uxdot-masthead.css @@ -2,13 +2,9 @@ display: block; background-color: var(--rh-color-surface-darkest); color: var(--rh-color-text-primary-on-dark); - position: fixed; - inset: 0; height: max-content; - z-index: var(--uxdot-masthead-z-index, 2); container-type: inline-size; container-name: host; - z-index: 10; } #container { diff --git a/docs/styles/styles.css b/docs/styles/styles.css index c13c792236..1a948c48a2 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -77,6 +77,7 @@ @layer layout { :root { --uxdot-masthead-max-height: 72px; + --uxdot-masthead-z-index: 4; --container-min-width: 992px; --container-max-width: 1332px; } @@ -291,14 +292,25 @@ top: unset; } + /** + * position masthead as fixed + * z-index: to float above scroll page content + */ + uxdot-masthead { + position: fixed; + inset: 0; + z-index: var(--uxdot-masthead-z-index); + } + /** * Sticky header pattern * progressive enhancement sticky, using :has() + * z-index: of masthead + 1 **/ uxdot-header:has(rh-subnav) { position: sticky; top: -54px; /* masthead height (72px) + subnav height (56px) - header mobile height (182px) */ - z-index: 2; + z-index: calc(var(--uxdot-masthead-z-index) - 1); /* z-index 1 under masthead to allow content to scroll under */ @container main (min-width: 768px) { top: -70px; /* masthead (72px) + subnav (56px) - header tablet (198px) */ diff --git a/elements/rh-accordion/docs/00-overview.md b/elements/rh-accordion/docs/00-overview.md index d0296f6a9e..960270a54f 100644 --- a/elements/rh-accordion/docs/00-overview.md +++ b/elements/rh-accordion/docs/00-overview.md @@ -1,8 +1,11 @@ ## Overview {{ tagName | getElementDescription }} - - An accordion with four collapsed panels and one expanded panel + + An accordion with four collapsed panels and one expanded panel {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-accordion/docs/10-style.md b/elements/rh-accordion/docs/10-style.md index 8bea1353dd..a07e615f35 100644 --- a/elements/rh-accordion/docs/10-style.md +++ b/elements/rh-accordion/docs/10-style.md @@ -3,8 +3,11 @@ Accordion panels include title text, a chevron icon, body text, and other conten ### Anatomy - - Anatomy of an accordion with lots of annotations pointing to various parts + + Anatomy of an accordion with lots of annotations pointing to various parts 1) Collapsed panel @@ -21,58 +24,80 @@ Accordion panels include title text, a chevron icon, body text, and other conten ### Sizes There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines. - - A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’ + + A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’ ## Theme An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not. ### Light theme - - Light theme accordion with an expanded panel + + Light theme accordion with an expanded panel ### Dark theme - - Dark theme accordion with an expanded panel + + Dark theme accordion with an expanded panel ## Configuration An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned. - - How an accordion is constructed showing alignment, space, scrolling, and width details + + How an accordion is constructed showing alignment, space, scrolling, and width details ### Accent slot The accent slot can be positioned inline or below the panel's title. This can contain tags, badges, or other small elements with secondary information. - - Accordion panel with two tags in inline accent slot and an accordion with two tags below the title + + Accordion panel with two tags in inline accent slot and an accordion with two tags below the title ### Nested panels Panels can be nested to help organize complex or granular sections of content. - - An accordion with an expanded panel and a nested expanded panel + + An accordion with an expanded panel and a nested expanded panel ### Stacked panels Multiple panels can be expanded simultaneously even when nested. - - An accordion with one collapsed panel on top and two stacked expanded panels below + + An accordion with one collapsed panel on top and two stacked expanded panels below ## Space - - Accordion spacing within panels and in between elements like titles, body text, rules, and icons + + Accordion spacing within panels and in between elements like titles, body text, rules, and icons @@ -89,12 +114,18 @@ Interaction states are visual representations used to communicate the status of ### Hover - - Light theme accordion with a hover state + + Light theme accordion with a hover state - - Dark theme accordion with a hover state + + Dark theme accordion with a hover state @@ -119,12 +150,18 @@ Interaction states are visual representations used to communicate the status of ### Focus - - Light theme accordion with a focus state + + Light theme accordion with a focus state - - Dark theme accordion with a focus state + + Dark theme accordion with a focus state @@ -153,12 +190,18 @@ Interaction states are visual representations used to communicate the status of ### Active - - Light theme accordion with an active state + + Light theme accordion with an active state - - Dark theme accordion with an active state + + Dark theme accordion with an active state diff --git a/elements/rh-accordion/docs/20-guidelines.md b/elements/rh-accordion/docs/20-guidelines.md index 506082524d..0d72e8496d 100644 --- a/elements/rh-accordion/docs/20-guidelines.md +++ b/elements/rh-accordion/docs/20-guidelines.md @@ -19,18 +19,22 @@ information that might not be critical to read or impact the experience. An accordion can also accommodate multiple sections of content, whereas a disclosure can only accommodate one. - - Comparison of how to use accordion vs. disclosure elements showing an accordion on top and a disclosure on the bottom + + Comparison of how to use accordion vs. disclosure elements showing an accordion on top and a disclosure on the bottom ### Sizes It is acceptable to use the Small size on large breakpoints, but do not use the Large size on small breakpoints. - - Size comparison of accordions; a wide small size accordion is on top, which is acceptable to use, and a thin large size accordion below it which is not acceptable to use + + Size comparison of accordions; a wide small size accordion is on top, which is acceptable to use, and a thin large size accordion below it which is not acceptable to use ## Writing content @@ -42,15 +46,21 @@ or when translated. If title text is too long, create another section. Do not write title text to sound like a call to action, make it as easy as possible for users to understand the content within. - - Title text examples of various lengths; it should not be too long, too short, or too vague +
+ + Title text examples of various lengths; it should not be too long, too short, or too vague +
-1) Title text is too long and should be broken into two sections -2) Title text is short and might not help users understand the content within -3) Title text should not be written like a call to action - {.example-notes} +1. Title text is too long and should be broken into two sections +2. Title text is short and might not help users understand the content within +3. Title text should not be written like a call to action + +
+
### Character count @@ -71,9 +81,11 @@ When a panel is expanded, some content must appear below the title text and chevron icon. Content can include text, cards, images, etc. Text blocks should not exceed `750px` to maintain optimal readability. - - Accordion showing different elements you may include in the expanded panel like headings, body text, links, cards, and more + + Accordion showing different elements you may include in the expanded panel like headings, body text, links, cards, and more ### Long title text @@ -81,8 +93,10 @@ not exceed `750px` to maintain optimal readability. Title text can be two lines on small breakpoints, but no more. - Two accordions; one wide accordion with the text title on one line and one thin accordion with the text title on two lines + Two accordions; one wide accordion with the text title on one line and one thin accordion with the text title on two lines ## Layout @@ -91,8 +105,10 @@ The width of an accordion can be adjusted on large breakpoints to fit fewer columns if necessary. - A wider accordion placed on a 12-column grid and occupying four grid columns + A wider accordion placed on a 12-column grid and occupying four grid columns ## Behavior @@ -108,8 +124,10 @@ Users can expand multiple panels simultaneously either stacked on top of each other or not. Expanding one panel does not collapse another. - Two accordions; one is showing two expanded panels stacked on top of each other and the other is showing two expanded panels and one collapsed panel in between + Two accordions; one is showing two expanded panels stacked on top of each other and the other is showing two expanded panels and one collapsed panel in between ## Responsive design @@ -117,14 +135,18 @@ other or not. Expanding one panel does not collapse another. An accordion changes from the Large size to the Small size as breakpoints get smaller. - - Accordions on large breakpoints + + Accordions on large breakpoints - Accordions on small breakpoints + Accordions on small breakpoints ### Breakpoints @@ -148,25 +170,31 @@ smaller. Do not display one panel only, use an expandable section instead. - + Accordion having only one panel is incorrect usage + src="../accordion-best-practice-1.png" + width="872" + height="61"> ### Text readability Text within panels should not exceed `750px` to maintain optimal readability. - - Accordion with body text exceeding 750px wide which is incorrect usage + + Accordion with body text exceeding 750px wide which is incorrect usage ### Mixing themes Do not use a dark theme accordion in a light theme environment and vice versa. - + Do not use a dark theme accordion in a light theme environment and vice versa + src="../accordion-best-practice-3.png" + width="872" + height="181"> diff --git a/elements/rh-accordion/docs/40-accessibility.md b/elements/rh-accordion/docs/40-accessibility.md index df7b3fc305..adeb29bf56 100644 --- a/elements/rh-accordion/docs/40-accessibility.md +++ b/elements/rh-accordion/docs/40-accessibility.md @@ -1,8 +1,11 @@ ## Keyboard interactions Each panel is a focus stop where `Enter` or `Space` expands or collapses each panel. - - Accordion keyboard interactions; pressing Tab will focus the top panel, pressing Tab again will move focus to the next panel underneath, and pressing Enter or Space will expand the panel + + Accordion keyboard interactions; pressing Tab will focus the top panel, pressing Tab again will move focus to the next panel underneath, and pressing Enter or Space will expand the panel @@ -34,15 +37,21 @@ Each panel is a focus stop where `Enter` or `Space` expands or collapses each pa {% include 'partials/accessibility/focusorder.md' %} - - Accordion showing the order how focus moves through the element when pressing Tab continuously + + Accordion showing the order how focus moves through the element when pressing Tab continuously ## Touch targets Each panel is selectable instead of only title text or the chevrons. - - Accordion showing touch target size examples for large and small sizes + + Accordion showing touch target size examples for large and small sizes> {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-alert/docs/00-overview.md b/elements/rh-alert/docs/00-overview.md index a271af6ce0..0b3d763f2b 100644 --- a/elements/rh-alert/docs/00-overview.md +++ b/elements/rh-alert/docs/00-overview.md @@ -1,18 +1,25 @@ + + ## Overview {{ tagName | getElementDescription }} - + Two examples of the alert element + width="456" + height="276"> {% repoStatusList repoStatus=repoStatus %} ## Sample element - +

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Confirm @@ -21,8 +28,8 @@ ## When to use - - To communicate essential information in a prominent way - - To notify a user of a change in status - - To communicate urgency using severity + - Communicate essential information in a prominent way + - Notify a user of a change in status + - Communicate urgency using severity {% repoStatusChecklist repoStatus=repoStatus %} diff --git a/elements/rh-alert/docs/10-style.md b/elements/rh-alert/docs/10-style.md index 872769ef75..9dbc19c380 100644 --- a/elements/rh-alert/docs/10-style.md +++ b/elements/rh-alert/docs/10-style.md @@ -1,115 +1,102 @@ ## Style -An alert contains title text with an icon, body text, and a close button. They -may also include action buttons below the text or inline links. There are two -variants, toast and inline, which serve different purposes. +An alert is a layout including an icon, title, text, actions, and a close button. It comes in a variety of colors depending on status. A toast is a variant of alert. Instead of having a background color, it has a white background with a drop shadow. ### Anatomy - - Alert with numbers pointing to parts of the element - - -1. Severity indicator -2. Severity icon -3. Title -4. Body -5. Actions -6. Close button -{.example-notes} +
+ + Alert with numbers pointing to parts of the element + +
+
    +
  1. Status icon
    2. +
  2. Title
    3. +
  3. Body text
    4. +
  4. Action buttons
    5. +
  5. Close button
    6. +
  6. Color background
    7. +
  7. White background with drop shadow
    8. +
+
+
+å ## Variants ### Inline -The required elements of an Inline alert are a thin top bar or thin border, -icon, title, close button, and a container background. Supporting text and -buttons may or may not be included below the title to add clarity or optional -actions. +The default alert is inline. At minimum, the status icon and title needs to be visible. - - Two examples of an inline alert + + Two examples of an inline alert -### Inline, alternate +### Inline alternate -The alternate Inline alert style includes a border instead of a line which can -be used to express more urgency or better grab the attention of a user. +There is an alternate inline alert where the border covers all sides. - - Two examples of an alternate design for inline alerts + + Two examples of an alternate design for inline alerts ### Toast -The required elements of a Toast alert are a thin top bar, icon, title, close -button, and a white container with a subtle drop shadow. Supporting text and -buttons may or may not be included below the title to add clarity or optional -actions. - - - Two examples of a toast alert - - -## Interaction states - -Interaction states are visual representations used to communicate the status of -a component or element. The close button and any linked content are the only -interactive elements in both alert variants. - -### Hover +Same as the inline alert, at minimum, the status icon and title needs to be visible. - - Examples showing hover state + + Two examples of a toast alert -### Focus - - - Examples showing focus state - -### Active +## Space - - Examples showing active state + + Diagram of spacing for inline alerts -## Spacing - -### Inline - - - Diagram of spacing for inline alerts + + Diagram of spacing for toast alerts -### Toast - - - Diagram of spacing for toast alerts + + Diagram of spacing for alerts on mobile {% spacerTokensTable + caption='', headingLevel="4", tokens="--rh-space-md, --rh-space-lg, --rh-space-xl" %} {% endspacerTokensTable %} -### Toast (stacked) +## Interaction states - - Diagram of spacing between stacked toast alerts - +Refer to these documentation pages for interaction states. +- [Button](/elements/button/style/#interaction-states) diff --git a/elements/rh-alert/docs/20-guidelines.md b/elements/rh-alert/docs/20-guidelines.md index caa8047958..ff9e324168 100644 --- a/elements/rh-alert/docs/20-guidelines.md +++ b/elements/rh-alert/docs/20-guidelines.md @@ -1,214 +1,226 @@ +## General guidelines -## Guidelines +In general, use an alert to communicate essential information to a user in a prominent way. -An alert is best used to notify a user of a change or attract their attention -about other messages. +### When to use an inline alert -### Using an Inline alert +Use an inline alert to communicate a short message about a specific user action within a component or layout. An inline alert appears in a content area and disappears when a user closes it or navigates away from the page. For example, use an inline alert to inform a user their form was submitted with errors. -An Inline alert is used to present a local message or return feedback as the -result of a user action, like if a form is submitted with errors. +### When to use a toast alert -### Using a Toast alert +Use a toast alert to communicate a time-based update, confirmation, or other short message to a user without blocking their workflow. A toast alert overlays content in the top right corner of a page and disappears when a user closes it or when it times out. For example, use a toast alert to inform a user their information was submitted successfully. -A Toast alert is used to present a global message about an event, update, or -confirmation, like the result of a user action that cannot be presented within a -specific layout or component. +## Communicating severity -### Severity - -Severity communicates the **urgency** of a message and is denoted by various -styling configurations. - -- **Default** - Indicates generic information or a message with no severity -- **Info** - Indicates helpful information or a message with very little to no - severity -- **Success** - Indicates a success state, like if a process was completed - without errors -- **Warning** - Indicates a caution state, like a non-blocking error that might - need to be fixed -- **Danger** - Indicates a danger state, like an error that is blocking a user - from completing a task +The five severity levels for alerts are Default, Info, Success, Warning, and Danger. Each level communicates a specific urgency. -

Learn More

-

Visit the Color foundation page to learn - more about how to use colors for status and severity.

+

Helpful tip

+

Visit the Color page to learn more about using severity colors.

 - - Examples of the different colors indicating alert severity + + Examples of the different colors indicating alert severity ### Dismissal -Alert variants have different rules regarding their ability to be dismissed by a -user. - -- Default, Info, and Success Inline alerts can be dismissed by a user selecting - the close button -- Warning and Danger Inline alerts can be dismissed by a user resolving the - issues caused by the alert -- All Toast alerts can be dismissed by a user selecting the close button or - waiting for them to time out - - -

Warning

-

If an issue cannot be resolved on the current page or if a user needs to - correct a situation outside of the experience, use a Dialog instead.

- +Depending on the message, an inline alert can be dismissible or not dismissible. The close button should not be included if it is critical that a user read or interact with the alert. A toast alert is always dismissible. - - Alert element dismissal examples + + Alert element dismissal inline examples -## Writing content - -### Title - -The title should fit on one line at any screen size and would typically be only -one to three words, if the alert includes body text. If the alert does not -contain body text, however, the title can be a concise, full sentence. The title -can also communicate the severity of the alert, e.g. **Warning** or **Success**. + + Alert element dismissal toast examples + -### Body +## Writing content -The body would ideally be one brief sentence. This is especially important for -toast alerts because users may receive more than one at a time. Not all alerts -will require body text if the title is enough to convey the message. +Both alert variants have limited space therefore content should be short and concise. A user should be able to quickly scan the content and know what steps to take next. -### Character count + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementCharacter countHow to write
Title text60 +
    +
  • Short and descriptive
    • +
  • Try and communicate the primary message using only title text
    • +
  • Must communicate severity
    • +
  • Write less words if there is body text
    • +
  • Write more words if there is no body text
    • +
+
Body text150 +
    +
  • Write 1 - 2 concise sentences and include links if necessary
    • +
  • Be concise and explain how to resolve an issue
    • +
  • Optional if title text accurately communicates the message
    • +
+
Action text20 per button +
    +
  • Write 1 - 3 short words
    • +
  • Clearly write an action that a user can take
    • +
  • No long words or phrases
    • +
+
+ -The recommended maximum character count for the elements of an alert are listed -below and include spaces. +## Actions - +Actions enable a user to perform a specific action in relation to the alert message. Both alert variants may include actions, but no more than two. Actions require using specific elements, however including actions is optional. -| Element | Character count | -|------------|-----------------| -| Title text | 60 | +- Primary action - use the [Secondary button](/elements/button/guidelines/#variants) element +- Secondary action - use the [Link button](/elements/button/guidelines/#variants) element - + + Example of button action text + ## Layout ### Inline -An Inline alert can be placed toward the **top of a layout** if the message -applies globally or **inline near specific content** if the message applies -locally. Depending on where they are used, an Inline alert can span the width of -a grid or container, so there is no set width. +An inline alert appears at the top of a content area or close to an item needing attention. The width varies based on content and layout. They can expand to fill a container or related content area. - - Example of an inline alert at the top of a layout + + Example of an inline alert at the top of a layout - - Example of an inline alert inside a form + + Example of an inline alert inside a form ### Toast -A Toast alert slides in from the top right edge of the screen and overlaps any -content underneath. They can be set as **persistent** or **temporary** depending -on the message that needs to be communicated to a user. +A toast alert slides in from the top right corner of a page and then disappears when a user closes it or when it times out. A toast alert can be set as persistent or temporary depending on the message. -- **Persistent** - Set if the content will be relevant after a task is complete -- **Temporary** - Set if the content will be be acknowledged and no longer - relevant +- Persistent - does not disappear unless dismissed by a user +- Temporary - disappears after eight seconds unless dismissed by a user first -If a Toast alert is set to persistent, a close button needs to be included so a -user can dismiss the alert if desired. - - - Toast alert with a link in the body text includes a close button + + Toast alert with a link in the body text includes a close button -If a Toast alert is set to be temporary or time out, the alert will disappear -after **eight seconds**. A user might want to dismiss the alert before then, in -which case a close button needs be included. - - - Toast alert without actions or links includes a close button - ## Behavior ### Stacking -When multiple Toast alerts are triggered around the same time, they will stack -on top of each other. The most recent alert is placed at the top of the stack -and pushes the other alerts down. When stacked Toast alerts are dismissed by a -user or time out, the remaining alerts will slide up and fill the empty space. +When multiple toast alerts appear one after the other, they stack. The most recent alert appears at the top and pushes the rest down. When an alert disappears, the rest will fill the empty space. - - Three toast alerts are stacked in the top left corner of a layout + + Three toast alerts are stacked in the top left corner of a layout - - Only one toast alert in the stack from the previous image is left + + Only one toast alert in the stack from the previous image is left ## Responsive design ### Large screens -The maximum width of a Toast alert on large screens is **six grid columns**. +On large screens, inline alert height is determined by the amount of content included. Inline alert width is determined by the width of its container or related content area. Toast alert height is also determined by content, but its max width is 480px. - - Toast alert spans six grid columns, while inline alert spans all grid columns + + Example of inline alert spanning content column width -### Small screens - -On small screens, both alert variants will span the full column of the layout. -Toast alerts will continue to stack on top of each other, so be mindful of how -much vertical space the group will occupy if multiple Toast alerts need to be -displayed. - - Toast and inline alerts span full column of small screen layout + + Example of a toast alert at content width -## Best practices - -### Inline as Toast +### Small screens -Do not use an Inline alert to communicate messages about important events, -updates, or confirmations. +On small screens, both alert variants will span one column and toast alerts will continue to stack. - - Inline alert is incorrectly positioned like a toast alert + + Example of toast and inline alerts span full column of small screen layout -### Toast as Inline +## Best practices + +### Mixing use cases -Do not use a Toast alert to present simple information or inline messages. + + + Example of using correct variants + - - Toast alert incorrectly placed inline with a layout - +

Use the correct alert variants for the correct use cases.

+ -### Different variants + + + Example of using incorrect variants + -Do not use both variants when stacking. +

Do not use an inline alert for toast alert use cases and vice versa.

+ - - Toast and inline alerts incorrectly stacked in top left corner of page - diff --git a/elements/rh-alert/docs/40-accessibility.md b/elements/rh-alert/docs/40-accessibility.md index f4fe3aca23..4bf097ca90 100644 --- a/elements/rh-alert/docs/40-accessibility.md +++ b/elements/rh-alert/docs/40-accessibility.md @@ -1,22 +1,48 @@ - ## Keyboard interactions - +A user should have the ability to navigate to and interact with alerts using their keyboard. -| Key | Result | -| --------------------------------- | ------------------------------------------------------------------------------- | -| Tab | Moves the focus to the Close button or to the next interactive element | -| Shift + Tab | Moves the focus outside of the component or to the previous interactive element | -| Enter | Selects the Close button or button link with focus | + + Example of the keyboard navigation tab stops on both inline and toast variant alerts + + + + + + + + + + + + + + + + + + + + + + +
KeyResult
TabMoves focus to the next interactive element (e.g., from the close button to the first action button in the alert)
Shift + TabMoves focus to the previous interactive element (e.g., from the first action button in the alert back to the close button)
EnterSelects the close button, action, or link/td> +
## Focus order -A logical focus order helps visitors understand and operate our websites. Elements need to receive focus in an order that preserves meaning. Therefore the focus order should make sense and not jump around randomly. +A logical focus order helps users understand and operate our websites and products. Elements need to receive focus in an order that preserves meaning. Therefore the focus order should make sense and not jump around randomly. - - Focus goes to action buttons and to the close button last + + Focus goes to action buttons and to the close button last {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-alert/docs/alert-anatomy.svg b/elements/rh-alert/docs/alert-anatomy.svg deleted file mode 100644 index 213904f9cc..0000000000 --- a/elements/rh-alert/docs/alert-anatomy.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - Continue - Go back - - Your information has been submitted successfully. - Success - - - - - - - - - - - 1 - - - - 3 - - - - 4 - - - - 5 - - - - 6 - - - - - 2 - - - - diff --git a/elements/rh-alert/docs/alert-behavior-stack-1.svg b/elements/rh-alert/docs/alert-behavior-stack-1.svg deleted file mode 100644 index 5d47425999..0000000000 --- a/elements/rh-alert/docs/alert-behavior-stack-1.svg +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-behavior-stack-2.svg b/elements/rh-alert/docs/alert-behavior-stack-2.svg deleted file mode 100644 index 366a7ff36e..0000000000 --- a/elements/rh-alert/docs/alert-behavior-stack-2.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-bestpractice-1.svg b/elements/rh-alert/docs/alert-bestpractice-1.svg deleted file mode 100644 index fbbdfe0a5f..0000000000 --- a/elements/rh-alert/docs/alert-bestpractice-1.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-bestpractice-2.svg b/elements/rh-alert/docs/alert-bestpractice-2.svg deleted file mode 100644 index 5112043f07..0000000000 --- a/elements/rh-alert/docs/alert-bestpractice-2.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-bestpractice-3.svg b/elements/rh-alert/docs/alert-bestpractice-3.svg deleted file mode 100644 index 712c13ca74..0000000000 --- a/elements/rh-alert/docs/alert-bestpractice-3.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-dismissal-examples.svg b/elements/rh-alert/docs/alert-dismissal-examples.svg deleted file mode 100644 index f6183f08d5..0000000000 --- a/elements/rh-alert/docs/alert-dismissal-examples.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-focus-order.svg b/elements/rh-alert/docs/alert-focus-order.svg deleted file mode 100644 index e3d2f9ea91..0000000000 --- a/elements/rh-alert/docs/alert-focus-order.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - Continue - Go back - - Your information has been submitted successfully. - Success - - - - - - - - - - - - - - - - - - - - - - - - - - - 3 - - - - 1 - - - - 2 - - - diff --git a/elements/rh-alert/docs/alert-guidelines-behavior-1.svg b/elements/rh-alert/docs/alert-guidelines-behavior-1.svg index 89af150b9b..f47cd31788 100644 --- a/elements/rh-alert/docs/alert-guidelines-behavior-1.svg +++ b/elements/rh-alert/docs/alert-guidelines-behavior-1.svg @@ -1,111 +1,110 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-alert/docs/alert-guidelines-responsive-small-screens.svg b/elements/rh-alert/docs/alert-guidelines-responsive-small-screens.svg index cb65555da4..5963e8df00 100644 --- a/elements/rh-alert/docs/alert-guidelines-responsive-small-screens.svg +++ b/elements/rh-alert/docs/alert-guidelines-responsive-small-screens.svg @@ -1,160 +1,159 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-alert/docs/alert-guidelines-severity.svg b/elements/rh-alert/docs/alert-guidelines-severity.svg index 826f3cb11c..a29bfbb670 100644 --- a/elements/rh-alert/docs/alert-guidelines-severity.svg +++ b/elements/rh-alert/docs/alert-guidelines-severity.svg @@ -1,255 +1,304 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-alert/docs/alert-interaction-states-active.svg b/elements/rh-alert/docs/alert-interaction-states-active.svg deleted file mode 100644 index 34abb049c5..0000000000 --- a/elements/rh-alert/docs/alert-interaction-states-active.svg +++ /dev/null @@ -1,158 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-interaction-states-focus.svg b/elements/rh-alert/docs/alert-interaction-states-focus.svg deleted file mode 100644 index 846c0797ef..0000000000 --- a/elements/rh-alert/docs/alert-interaction-states-focus.svg +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-interaction-states-hover.svg b/elements/rh-alert/docs/alert-interaction-states-hover.svg deleted file mode 100644 index c34287d7a8..0000000000 --- a/elements/rh-alert/docs/alert-interaction-states-hover.svg +++ /dev/null @@ -1,128 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-interaction-states-link.svg b/elements/rh-alert/docs/alert-interaction-states-link.svg deleted file mode 100644 index d9d93b6e67..0000000000 --- a/elements/rh-alert/docs/alert-interaction-states-link.svg +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-positioning-inline-global.svg b/elements/rh-alert/docs/alert-positioning-inline-global.svg deleted file mode 100644 index aa1b4aaab7..0000000000 --- a/elements/rh-alert/docs/alert-positioning-inline-global.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-positioning-inline-local.svg b/elements/rh-alert/docs/alert-positioning-inline-local.svg deleted file mode 100644 index 346011c939..0000000000 --- a/elements/rh-alert/docs/alert-positioning-inline-local.svg +++ /dev/null @@ -1,154 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-positioning-toast-persistent.svg b/elements/rh-alert/docs/alert-positioning-toast-persistent.svg deleted file mode 100644 index 5dab260808..0000000000 --- a/elements/rh-alert/docs/alert-positioning-toast-persistent.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-positioning-toast-temporary.svg b/elements/rh-alert/docs/alert-positioning-toast-temporary.svg deleted file mode 100644 index cbcfd90cad..0000000000 --- a/elements/rh-alert/docs/alert-positioning-toast-temporary.svg +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-responsive-large-screens.svg b/elements/rh-alert/docs/alert-responsive-large-screens.svg deleted file mode 100644 index 45f24a8bcd..0000000000 --- a/elements/rh-alert/docs/alert-responsive-large-screens.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-responsive-small-screens.svg b/elements/rh-alert/docs/alert-responsive-small-screens.svg deleted file mode 100644 index 75a17a498a..0000000000 --- a/elements/rh-alert/docs/alert-responsive-small-screens.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-sample.svg b/elements/rh-alert/docs/alert-sample.svg deleted file mode 100644 index 3fafb3464a..0000000000 --- a/elements/rh-alert/docs/alert-sample.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-severity.svg b/elements/rh-alert/docs/alert-severity.svg deleted file mode 100644 index 8c79f0dcef..0000000000 --- a/elements/rh-alert/docs/alert-severity.svg +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-spacing-inline.svg b/elements/rh-alert/docs/alert-spacing-inline.svg deleted file mode 100644 index 9f726241e9..0000000000 --- a/elements/rh-alert/docs/alert-spacing-inline.svg +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - Continue - Go back - - Your information has been submitted successfully. - Success - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 8 - - - - - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 24 - - - - - diff --git a/elements/rh-alert/docs/alert-spacing-toast-layout.svg b/elements/rh-alert/docs/alert-spacing-toast-layout.svg deleted file mode 100644 index 2954716e2a..0000000000 --- a/elements/rh-alert/docs/alert-spacing-toast-layout.svg +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-spacing-toast.svg b/elements/rh-alert/docs/alert-spacing-toast.svg deleted file mode 100644 index 45b20fdc64..0000000000 --- a/elements/rh-alert/docs/alert-spacing-toast.svg +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - - - - - - - - - From the Settings tab, select View logs. - - - - - - - Download complete with errors - - - - - - - - - - - - - - - - - - - - - - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 16 - - - - - - - 8 - - - - - - - 8 - - - - - diff --git a/elements/rh-alert/docs/alert-style-inline-alt.svg b/elements/rh-alert/docs/alert-style-inline-alt.svg deleted file mode 100644 index 714cbb3b87..0000000000 --- a/elements/rh-alert/docs/alert-style-inline-alt.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-style-inline.svg b/elements/rh-alert/docs/alert-style-inline.svg deleted file mode 100644 index 58b45b121e..0000000000 --- a/elements/rh-alert/docs/alert-style-inline.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-alert/docs/alert-style-toast.svg b/elements/rh-alert/docs/alert-style-toast.svg deleted file mode 100644 index 0685291e30..0000000000 --- a/elements/rh-alert/docs/alert-style-toast.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-audio-player/docs/10-style.md b/elements/rh-audio-player/docs/10-style.md index dc8db1da79..d582c91769 100644 --- a/elements/rh-audio-player/docs/10-style.md +++ b/elements/rh-audio-player/docs/10-style.md @@ -10,7 +10,10 @@ The audio player is a collection of elements used to play audio clips and browse ### Anatomy - Image of audio player anatomy showing all players with lots of annotations + Image of audio player anatomy showing all players with lots of annotations 1) Image @@ -32,7 +35,10 @@ The audio player is a collection of elements used to play audio clips and browse There are three available sizes and the only difference is the amount of interface elements. The Compact and Mini players can be used on large breakpoints, but the Full player cannot be used on small breakpoints due to space constraints. - Image of all audio player sizes with text labels + Image of all audio player sizes with text labels ## Theme @@ -41,13 +47,19 @@ The audio player is available in both light and dark themes. ### Light theme - Image of light theme audio players + Image of light theme audio players ### Dark theme - Image of dark theme audio players + Image of dark theme audio players ### Custom theme @@ -58,21 +70,30 @@ The audio player is available in both light and dark themes. - Image of custom theme audio players + Image of custom theme audio players ## Configuration The size of audio players change if an image is included or not. - - Image of all audio players showing various specs like alignment, border radius, height, width, and more + + Image of all audio players showing various specs like alignment, border radius, height, width, and more ## Space The amount of space in all audio players remains the same on all breakpoints. - Image of audio player spacing for all sizes + Image of audio player spacing for all sizes @@ -95,11 +116,17 @@ Interaction states are visual representations used to communicate the status of - Image of light theme audio player hover states + Image of light theme audio player hover states - Image of dark theme audio player hover states + Image of dark theme audio player hover states @@ -111,11 +138,17 @@ Interaction states are visual representations used to communicate the status of - Image of light theme audio player focus states + Image of light theme audio player focus states - Image of dark theme audio player focus states + Image of dark theme audio player focus states ### Active @@ -126,9 +159,15 @@ Interaction states are visual representations used to communicate the status of - Image of light theme audio player active states + Image of light theme audio player active states - Image of dark theme audio player active states + Image of dark theme audio player active states diff --git a/elements/rh-audio-player/docs/20-features.md b/elements/rh-audio-player/docs/20-features.md index b874221252..425e554110 100644 --- a/elements/rh-audio-player/docs/20-features.md +++ b/elements/rh-audio-player/docs/20-features.md @@ -4,22 +4,31 @@ Three features are included and are accessible within the contextual menu. ## Contextual menu Pressing the `More options` button opens the contextual menu. The description and title are visible in the Full player but not in the Compact player, so there is an extra option in the contextual menu so users can access that information. - - Image of all audio player sizes showing the open contextual menu + + Image of all audio player sizes showing the open contextual menu ## Content panel When a feature is selected, the audio player expands and reveals the content panel. In the Full player, some interface elements get smaller, rearrange, or become hidden. In the Compact and Mini players, the content panel is below the controls. The `More options` button changes to a `Close` button as well which allows users to close the panel and return to the audio player at any time. - - Image of all audio player sizes showing the open content panel + + Image of all audio player sizes showing the open content panel ## Audio info Displays the description and title in the Compact player only. - - Image of two Compact players; one is showing the description and title and the other is showing only the title + + Image of two Compact players; one is showing the description and title and the other is showing only the title ## Audio summary @@ -30,28 +39,40 @@ Provides users with a short summary of the audio clip. Optional attribution may

When renaming this feature, the maximum character count is 20.

- - Image of the Full and Compact players showing the Audio summary feature in the content panel + + Image of the Full and Compact players showing the Audio summary feature in the content panel ## Subscribe Provides users with links to various audio websites so they can subscribe. - - Image of the Full and Compact players showing the Subscribe feature in the content panel + + Image of the Full and Compact players showing the Subscribe feature in the content panel ## Transcript A transcript is an accessible alternative for users who are hard of hearing, deaf, or just want to read along. - - Image of the Full and Compact players showing the Transcript feature in the content panel + + Image of the Full and Compact players showing the Transcript feature in the content panel ### Highlighting When audio is playing, the transcript scrolls automatically and words are highlighted as they are spoken. Users also have the option to scroll on their own or download the entire transcript. - - Image of the Full and Compact players showing a phrase being highlighting as it is spoken in the Transcript feature + + Image of the Full and Compact players showing a phrase being highlighting as it is spoken in the Transcript feature - Image of all audio player sizes with text labels + Image of all audio player sizes with text labels @@ -40,14 +43,20 @@ When choosing one size over the other, consider where it is being used and what It is acceptable to remove optional elements, but doing so will change the height or width of the audio player. - Image of two Full players; one is without an image and the other is without an image and description text + Image of two Full players; one is without an image and the other is without an image and description text ### Mini player In certain edge cases, the Mini player can hide the volume and contextual menu buttons. - Image of three Mini players; one is the default state, one is missing the menu button, and one is missing both the volume and menu buttons + Image of three Mini players; one is the default state, one is missing the menu button, and one is missing both the volume and menu buttons ## Writing content @@ -61,7 +70,10 @@ The description and title help add context to an audio clip. The description is - Image of the Full player and two Compact players; one Compact player has both description and title text and the other Compact player has only title text + Image of the Full player and two Compact players; one Compact player has both description and title text and the other Compact player has only title text @@ -95,15 +107,20 @@ Using too many characters will cause the description and title to scroll outside Compact and Mini players can be used inline with titles, headings, and a call to action. - Image of Compact and Mini players used with titles, headings, and calls to action + Image of Compact and Mini players used with titles, headings, and calls to action ### Stacking Compact players can be stacked with headings, text, and horizontal rules. - - Image of the Compact player in a stacked layout with headers, text, and horizontal rules + Image of the Compact player in a stacked layout with headers, text, and horizontal rules ### Full-width @@ -114,12 +131,18 @@ The Compact size can span the width of a browser window and be anchored to the t

When a Compact size is used full-width, the contextual menu button is replaced by a close button and there is no access to features.

- - Image of a full-width Compact player in a light theme context + + Image of a full-width Compact player in a light theme context - - Image of a full-width Compact player in a dark theme context + + Image of a full-width Compact player in a dark theme context ## Behavior @@ -128,14 +151,20 @@ The Compact size can span the width of a browser window and be anchored to the t When a page loads, audio should **never** start playing automatically without receiving input from a user first. - Image of the Full player showing audio stopped + Image of the Full player showing audio stopped ### Scrolling text If the description or title is long, it scrolls from left to right while audio is playing. - Image of the Full player with description and title text cut off and scrolling from left to right as audio plays + Image of the Full player with description and title text cut off and scrolling from left to right as audio plays ## Playback @@ -145,42 +174,60 @@ To see a list of all keystroke controls, go to the [Accessibility](../accessibil Dragging the current time indicator will jump to a specific time. Arrow keys will rewind or advance audio by 15 seconds. - Image of the Full player showing how to seek with a cursor or keyboard + Image of the Full player showing how to seek with a cursor or keyboard ### Unmute/mute Audio can be toggled on or off by pressing the unmute/mute button. - Image of the Full player showing how to toggle the unmute/mute button with a cursor or keyboard + Image of the Full player showing how to toggle the unmute/mute button with a cursor or keyboard ### Volume Dragging the slider will adjust the volume. Arrow keys will increase or decrease the volume by 25% intervals. - Image of the Full player showing how to adjust the volume with a cursor or keyboard + Image of the Full player showing how to adjust the volume with a cursor or keyboard ### Speed The rate of speed can be adjusted by clicking the carets or selecting the speed button and choosing a speed in the menu. - - Image of the Full player showing how to open the speed menu and selecting another speed with a cursor or keyboard + + Image of the Full player showing how to open the speed menu and selecting another speed with a cursor or keyboard ### Rewind/forward Audio rewinds or advances by 15 seconds if either button is pressed. - Image of the Full player showing how to toggle the rewind or forward buttons with a cursor or keyboard + Image of the Full player showing how to toggle the rewind or forward buttons with a cursor or keyboard ### Play/pause Audio playback can be resumed/stopped by pressing the play/pause button. - Image of the Full player showing how to toggle the play/pause button with a cursor or keyboard + Image of the Full player showing how to toggle the play/pause button with a cursor or keyboard ## Responsive design @@ -189,19 +236,27 @@ Audio playback can be resumed/stopped by pressing the play/pause button. All audio players can be used on large breakpoints. The Mini player can be stretched to fit any grid or container size. - Image of the Full, Full without image, and Compact players as well as a stretched Mini player on large breakpoints + Image of the Full, Full without image, and Compact players as well as a stretched Mini player on large breakpoints - Image of the Full player and a stretched Compact player on large breakpoints + Image of the Full player and a stretched Compact player on large breakpoints ### Small breakpoints - Image of the Full, Full without image, and Compact players as well as a stretched Mini player on small breakpoints + Image of the Full, Full without image, and Compact players as well as a stretched Mini player on small breakpoints ## Best practices @@ -210,12 +265,18 @@ The Full player will change to the Compact player and the Compact player will ch Be careful when using the Full player near too many other elements. - Image of the Full player used near lots of other elements + Image of the Full player used near lots of other elements ### Contextual menu Do not alter contextual menu theming. - Image of Compact players with contextual menus that are a different theme than the audio player which is incorrect usage + Image of Compact players with contextual menus that are a different theme than the audio player which is incorrect usage diff --git a/elements/rh-audio-player/docs/50-accessibility.md b/elements/rh-audio-player/docs/50-accessibility.md index ca5aca8651..be2021241a 100644 --- a/elements/rh-audio-player/docs/50-accessibility.md +++ b/elements/rh-audio-player/docs/50-accessibility.md @@ -3,7 +3,9 @@ Every interactive element is a focus stop and controls are operated using different keyboard inputs. Users should be able to open and close menus while navigating other controls without losing focus. Audio playback and the volume level are expected to respond to keyboard inputs as well. - Image of all players with labels of how to activate or adjust all controls and menus + Image of all players with labels of how to activate or adjust all controls and menus @@ -55,14 +57,20 @@ Every interactive element is a focus stop and controls are operated using differ A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. The focus moves across the audio player from left to right and top to bottom. When the focus is moved outside of the contextual menu, the menu closes. - Image of all players and the Compact player with a contextual menu open showing the focus order from left to right and top to bottom + Image of all players and the Compact player with a contextual menu open showing the focus order from left to right and top to bottom ### Toggling a feature When a user closes a feature by pressing Space or Esc, focus returns to the contextual menu button so users can easily open the menu again to return to that feature or select a new one. - Image of the Compact player showing focus landing on the contextual menu or close buttons regardless if a feature is open or closed + Image of the Compact player showing focus landing on the contextual menu or close buttons regardless if a feature is open or closed {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-avatar/docs/00-overview.md b/elements/rh-avatar/docs/00-overview.md index 331980ff73..2e625599df 100644 --- a/elements/rh-avatar/docs/00-overview.md +++ b/elements/rh-avatar/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of an avatar group with a photo of a woman and text + Image of an avatar group with a photo of a woman and text {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-avatar/docs/10-style.md b/elements/rh-avatar/docs/10-style.md index 5f10d48c07..86e2160b05 100644 --- a/elements/rh-avatar/docs/10-style.md +++ b/elements/rh-avatar/docs/10-style.md @@ -8,7 +8,10 @@ including their full name, job title, and company.
- Anatomy of an avatar group with numbered annotations + Anatomy of an avatar group with numbered annotations
    @@ -27,7 +30,10 @@ their name. A specific name is linked to the same pattern, so thumbnails can stay static without storing lots of generated images. - Image of all avatar groups including default, photo, green squares, purple squares, and blue triangles + Image of all avatar groups including default, photo, green squares, purple squares, and blue triangles ### Plain @@ -37,7 +43,10 @@ The avatar thumbnail can be used on its own in places like [cards](https://ux.redhat.com/elements/card/), navigations, tables, and more. - Image of a row of only avatar thumbnails + Image of a row of only avatar thumbnails ### Link @@ -50,7 +59,10 @@ Links can be applied to full name or job details text. - Image of two avatar groups; one has the full name linked and the other has the company name linked + Image of two avatar groups; one has the full name linked and the other has the company name linked ## Theme @@ -60,11 +72,17 @@ All avatar variants are available in both light and dark themes. ### Light and dark themes - Image of a light theme avatar group + Image of a light theme avatar group - Image of a dark theme avatar group + Image of a dark theme avatar group @@ -94,7 +112,10 @@ examples, go to the [Guidelines](https://ux.redhat.com/elements/avatar/guidelines/) page. - Image of two avatar groups showing specs like height, width, and centering/alignment + Image of two avatar groups showing specs like height, width, and centering/alignment ### Job details text @@ -102,7 +123,10 @@ examples, go to the Job details text has specific styles applied to it. - Image of two avatar groups showing only job details text left justified and center justified + Image of two avatar groups showing only job details text left justified and center justified @@ -135,7 +159,10 @@ Job details text has specific styles applied to it. Space values are the same for all variants and on all breakpoints. - Image of all avatar groups with spacing values in between + Image of all avatar groups with spacing values in between @@ -153,11 +180,17 @@ Interaction states are visual representations used to communicate the status of ### Hover - Image of light theme avatar group hover states + Image of light theme avatar group hover states - Image of dark theme avatar group hover states + Image of dark theme avatar group hover states @@ -207,11 +240,17 @@ Interaction states are visual representations used to communicate the status of - Image of light theme avatar group focus states + Image of light theme avatar group focus states - Image of dark theme avatar group focus states + Image of dark theme avatar group focus states @@ -242,11 +281,17 @@ Interaction states are visual representations used to communicate the status of - Image of light theme avatar group active states + Image of light theme avatar group active states - Image of dark theme avatar group active states + Image of dark theme avatar group active states diff --git a/elements/rh-avatar/docs/20-guidelines.md b/elements/rh-avatar/docs/20-guidelines.md index 3ad5aa2fde..86c67fb6a7 100644 --- a/elements/rh-avatar/docs/20-guidelines.md +++ b/elements/rh-avatar/docs/20-guidelines.md @@ -10,7 +10,10 @@ room for customization. The avatar thumbnail can be used at different sizes based on our design tokens. The default size is 64px. - Image of all avatar thumbnail sizes and their pixel values underneath + Image of all avatar thumbnail sizes and their pixel values underneath @@ -43,7 +46,10 @@ The avatar thumbnail can be used at different sizes based on our design tokens. Separate each part of the job title and company name with a comma. - Image of three job details text, ranging from short to long + Image of three job details text, ranging from short to long ## Layout @@ -54,7 +60,10 @@ The avatar thumbnail and job details text can be horizontally or vertically centered. - Image of two avatar groups; one is horizontally centered and the other is vertically centered + Image of two avatar groups; one is horizontally centered and the other is vertically centered @@ -63,7 +72,10 @@ centered. There is `48px` of space when avatar groups are stacked vertically. - Image of three avatar groups stacked vertically with 48 pixel of space in between + Image of three avatar groups stacked vertically with 48 pixel of space in between ## Responsive design @@ -71,13 +83,19 @@ There is `48px` of space when avatar groups are stacked vertically. ### Large breakpoints - Image of two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center + Image of two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center ### Small breakpoints - Image of four avatar groups used on small breakpoints; two are aligned left and the other two are aligned in the center + Image of four avatar groups used on small breakpoints; two are aligned left and the other two are aligned in the center ### Line breaks @@ -86,7 +104,10 @@ As breakpoints or containers get smaller, regardless if job details text will break to more lines, it is still anchored at the top. - Image of two avatar groups with specs on top; one has two lines and the other has five lines + Image of two avatar groups with specs on top; one has two lines and the other has five lines ## Best practices @@ -96,7 +117,10 @@ break to more lines, it is still anchored at the top. Do not change the shape of the avatar thumbnail. - Image of a square avatar thumbnail which is incorrect usage + Image of a square avatar thumbnail which is incorrect usage ### Light theme thumbnail @@ -104,7 +128,10 @@ Do not change the shape of the avatar thumbnail. Do not use a light theme avatar thumbnail in the dark theme. - Image of a light theme avatar thumbnail placed on a black background which is incorrect usage + Image of a light theme avatar thumbnail placed on a black background which is incorrect usage ### Icon vs. avatar thumbnail @@ -112,7 +139,9 @@ Do not use a light theme avatar thumbnail in the dark theme. Do not use an avatar thumbnail when an icon is more suitable. - Image of an icon and avatar thumbnail right next to each other which is incorrect usage + Image of an icon and avatar thumbnail right next to each other which is incorrect usage - diff --git a/elements/rh-back-to-top/docs/00-overview.md b/elements/rh-back-to-top/docs/00-overview.md index 183c179ab3..8d288a1b20 100644 --- a/elements/rh-back-to-top/docs/00-overview.md +++ b/elements/rh-back-to-top/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Example of a back to top button + Example of a back to top button diff --git a/elements/rh-back-to-top/docs/10-style.md b/elements/rh-back-to-top/docs/10-style.md index cc45a71884..896f48338f 100644 --- a/elements/rh-back-to-top/docs/10-style.md +++ b/elements/rh-back-to-top/docs/10-style.md @@ -1,17 +1,3 @@ - - ## Style A back to top is a pill-shaped button that is anchored to the bottom right corner of a page. @@ -21,7 +7,10 @@ A back to top is a pill-shaped button that is anchored to the bottom right corne
    - Back to top button with numerical annotations + Back to top button with numerical annotations
      @@ -37,14 +26,20 @@ A back to top is a pill-shaped button that is anchored to the bottom right corne The back to top button looks the same in light and dark themes. -
      +
      - Back to top button with a blue background and white text against a white surface color + Back to top button with a blue background and white text against a white surface color - Back to top buttons that have a blue background and white text against a black surface color + Back to top buttons that have a blue background and white text against a black surface color
      @@ -55,7 +50,10 @@ The back to top button looks the same in light and dark themes. A back to top button has 4px of padding on the left and right, 8px of padding on the top and bottom, and a 4px gap between text and icon. The amount of space remains the same on all breakpoints. - Back to top button with block padding of 4px, inline padding of 8px, and a 4px gap between text and icon + Back to top button with block padding of 4px, inline padding of 8px, and a 4px gap between text and icon @@ -69,7 +67,10 @@ Interaction states are visual representations used to communicate the status of The background color of the button turns to a darker blue on hover. It also has a white border adjacent to the button and a dark blue outline adjacent to the border. This ensures contrast against all surface colors. - Back to top button with a dark blue background when a cursor hovers over it + Back to top button with a dark blue background when a cursor hovers over it @@ -81,7 +82,10 @@ The background color of the button turns to a darker blue on hover. It also has - A back to top button with a dark blue background and a blue focus ring around it + A back to top button with a dark blue background and a blue focus ring around it @@ -93,6 +97,9 @@ The background color of the button turns to a darker blue on hover. It also has - A back to top button with a dark blue background and a blue focus ring around it + A back to top button with a dark blue background and a blue focus ring around it> diff --git a/elements/rh-back-to-top/docs/20-guidelines.md b/elements/rh-back-to-top/docs/20-guidelines.md index 0393a3698d..53f80bd3d4 100644 --- a/elements/rh-back-to-top/docs/20-guidelines.md +++ b/elements/rh-back-to-top/docs/20-guidelines.md @@ -1,19 +1,3 @@ - - - - ## Usage A back to top button helps users get back to the top of the page quickly. It should be used on pages where a user would have to scroll through two screens worth of content on medium and large screens and four screens worth of content on small screens. If a page is very short and doesn’t require scrolling, a back to top button doesn’t have to be added. @@ -27,12 +11,17 @@ Users expect to see the back to top button in the bottom right corner. It will o On mobile, the element should be positioned 24px from the bottom and from the right of the screen. On screens wider than 768px, it should appear 48px from the bottom and from the right. - Back to top buttons in the bottom right corner of a desktop-sized screen + Back to top buttons in the bottom right corner of a desktop-sized screen - - Back to top buttons in the bottom right corner of a phone-sized screen + Back to top buttons in the bottom right corner of a phone-sized screen ## Behavior @@ -47,16 +36,22 @@ Once the user clicks the back to top button, they will be taken to the top of th Having only one persistent back to top button ensures that users are able to scroll up to the top easily. Having “Back to top” buttons at the bottom of multiple sections adds to visual clutter and may lead to users ignoring the button. -
      +
      - Image of wireframe with one back to top button + Image of wireframe with one back to top button

      Have one back to top button in the bottom right corner of the page.

       - Image of wireframe with back to top buttons below each content section + Image of wireframe with back to top buttons below each content section>

      Do not use multiple back to top buttons.

       @@ -66,16 +61,22 @@ Having only one persistent back to top button ensures that users are able to scr We recommend retaining the “Back to top” text to ensure that users understand the button’s purpose. -
      +
      - Image of back to top button with “back to top” text and icon + Image of back to top button with “back to top” text and icon

      Keep the descriptive “Back to top” text in the button.

       - Image of back to top button with icon only + Image of back to top button with icon only

      Do  not use only an up arrow icon.

       @@ -85,16 +86,22 @@ We recommend retaining the “Back to top” text to ensure that users understan Ensure that there is enough space between the button and the edges of the page for users to click it easily at any screen size. In addition to making it easier for users to click, this will also prevent the scrollbars from overlapping the button. -
      +
      - Image of back to top button enough spacing from scroll bars + Image of back to top button enough spacing from scroll bars

      Add ample space between the right and bottom edges.

       - Image of back to top button with very little spacing next to scrollbars + Image of back to top button with very little spacing next to scrollbars

      Do not place the button too close to the edges of the screen.

       diff --git a/elements/rh-back-to-top/docs/40-accessibility.md b/elements/rh-back-to-top/docs/40-accessibility.md index ab265f0889..6e2a4a3382 100644 --- a/elements/rh-back-to-top/docs/40-accessibility.md +++ b/elements/rh-back-to-top/docs/40-accessibility.md @@ -3,7 +3,10 @@ Users should have the ability to navigate to and interact with the back to top button using their keyboard. - Example of a page with footer links and a back to top button that has keyboard interaction annotations + Example of a page with footer links and a back to top button that has keyboard interaction annotations diff --git a/elements/rh-badge/docs/00-overview.md b/elements/rh-badge/docs/00-overview.md index e39eeb297f..d08d8d9e28 100644 --- a/elements/rh-badge/docs/00-overview.md +++ b/elements/rh-badge/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number. + Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number. {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-badge/docs/10-style.md b/elements/rh-badge/docs/10-style.md index cbf339d447..ff8a05e6cc 100644 --- a/elements/rh-badge/docs/10-style.md +++ b/elements/rh-badge/docs/10-style.md @@ -5,7 +5,10 @@ A badge is number text on a pill background used to reflect the count of somethi
      - Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number + Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number
        @@ -22,13 +25,19 @@ A badge is available in light and dark theme. ### Light theme - Light theme badges + Light theme badges ### Dark theme - Dark theme badges + Dark theme badges ## Configuration @@ -36,14 +45,20 @@ A badge is available in light and dark theme. All badges have the same height and border radius. - How a badge is constructed showing border radius and height details + How a badge is constructed showing border radius and height details ## Space and width - Badge spacing and minimum width + Badge spacing and minimum width diff --git a/elements/rh-badge/docs/20-guidelines.md b/elements/rh-badge/docs/20-guidelines.md index d48ef99ddc..130ad45eb1 100644 --- a/elements/rh-badge/docs/20-guidelines.md +++ b/elements/rh-badge/docs/20-guidelines.md @@ -70,7 +70,10 @@ than the threshold will display a + at the end. For example, if `999` is the threshold, using `1,000` or larger will display `999+`. - Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+ + Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+ @@ -81,7 +84,10 @@ A badge is often found in filter toggles to indicate the number of selections that are made in a toolbar filter or select list. - A badge used in a filter dropdown and counting three selected checkboxes within a menu + A badge used in a filter dropdown and counting three selected checkboxes within a menu ## Best practices @@ -91,7 +97,10 @@ that are made in a toolbar filter or select list. Do not allow a badge to display a count over 999. - A badge counting to 1,00,000 which is incorrect usage + A badge counting to 1,00,000 which is incorrect usage ### Two badges @@ -101,6 +110,9 @@ might make it difficult to differentiate unread or actionable items associated with the badges. - Two badges with different background colors and no other unique visual cues which is incorrect usage + Two badges with different background colors and no other unique visual cues which is incorrect usage diff --git a/elements/rh-blockquote/docs/00-overview.md b/elements/rh-blockquote/docs/00-overview.md index f5ff0f8f37..b3f8678d56 100644 --- a/elements/rh-blockquote/docs/00-overview.md +++ b/elements/rh-blockquote/docs/00-overview.md @@ -8,7 +8,10 @@ A blockquote is a styled quotation and citation offset from other text styles on ## Sample element - Image of a blockquote including a quote icon, quotation text, and citation text + Image of a blockquote including a quote icon, quotation text, and citation text diff --git a/elements/rh-blockquote/docs/10-style.md b/elements/rh-blockquote/docs/10-style.md index 3bf3860d16..1e1e0e1af0 100644 --- a/elements/rh-blockquote/docs/10-style.md +++ b/elements/rh-blockquote/docs/10-style.md @@ -12,7 +12,10 @@ also include the following optional elements:
        - Anatomy image of a blockquote with numbered annotations + Anatomy image of a blockquote with numbered annotations
          @@ -28,7 +31,10 @@ also include the following optional elements: ## Sizes - Image of two blockquotes, default size on the left and large size on the right + Image of two blockquotes, default size on the left and large size on the right @@ -77,7 +83,10 @@ A blockquote is available in both light and dark themes. ### Light theme - Image of a light theme blockquote, red quote icon, black quotation text, and dark gray citation text + Image of a light theme blockquote, red quote icon, black quotation text, and dark gray citation text @@ -108,7 +117,10 @@ A blockquote is available in both light and dark themes. ### Dark theme - Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text + Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text @@ -139,11 +151,17 @@ A blockquote is available in both light and dark themes. ### Emphasis border - Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right + Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right - Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right + Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right @@ -173,11 +191,17 @@ A blockquote is available in both light and dark themes. ### Title and heading text - Image of two blockquotes, both with red title text and black header text + Image of two blockquotes, both with red title text and black header text - Image of two blockquotes, both with red title text and white header text + Image of two blockquotes, both with red title text and white header text @@ -209,7 +233,10 @@ A blockquote is available in both light and dark themes. The base elements in both sizes are stacked and left aligned by default, but they can be vertically centered if necessary. - Image of four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall + Image of four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall ### Order @@ -218,7 +245,10 @@ A blockquote was designed to be read from top to bottom. If certain optional ele
          - Image of a blockquote with numbers 1 - 4 on the right side going from top to bottom + Image of a blockquote with numbers 1 - 4 on the right side going from top to bottom
            @@ -235,7 +265,10 @@ A blockquote was designed to be read from top to bottom. If certain optional ele Citation text has specific styles applied to it. - Image of three citation text examples + Image of three citation text examples @@ -272,7 +305,10 @@ Citation text has specific styles applied to it. Space values are the same in both sizes and on all breakpoints. - Image of four blockquotes with spacing values in between + Image of four blockquotes with spacing values in between diff --git a/elements/rh-blockquote/docs/20-guidelines.md b/elements/rh-blockquote/docs/20-guidelines.md index 6eb0f135c3..c76d9235f5 100644 --- a/elements/rh-blockquote/docs/20-guidelines.md +++ b/elements/rh-blockquote/docs/20-guidelines.md @@ -7,7 +7,10 @@ Use a blockquote to highlight quotation and citation text so users can identify Use the Default size for larger amounts of text and the Large size for smaller amounts of text. - Image of two blockquotes, default size on the left and large size on the right with green check icons below + Image of two blockquotes, default size on the left and large size on the right with green check icons below ## Alignment @@ -19,7 +22,10 @@ Both blockquote sizes can be left or center aligned. - Image of two blockquotes, default and large sizes both vertically centered + Image of two blockquotes, default and large sizes both vertically centered ## Variations @@ -28,21 +34,33 @@ A variety of extras including an emphasis border, logo, and text styles may be a ### Light theme - Image of a light theme blockquote with red emphasis border + Image of a light theme blockquote with red emphasis border - Image of two light theme blockquotes, left example is default size with logo and right example is default size with title text and heading text + Image of two light theme blockquotes, left example is default size with logo and right example is default size with title text and heading text ### Dark theme - Image of a dark theme blockquote with red emphasis border + Image of a dark theme blockquote with red emphasis border - Image of two dark theme blockquotes, left example is default size with logo and right example is default size with title text and heading text + Image of two dark theme blockquotes, left example is default size with logo and right example is default size with title text and heading text @@ -51,11 +69,17 @@ A variety of extras including an emphasis border, logo, and text styles may be a Other elements including a video or card may also be added to a blockquote. They are aligned to the top of the quote icon if included. - Image of blockquote with video to the right + Image of blockquote with video to the right - Image of blockquote with card to the right + Image of blockquote with card to the right @@ -66,11 +90,17 @@ Other elements including a video or card may also be added to a blockquote. They A minimum width is hard to determine because a blockquote can be placed in a variety of layouts. However, a thin blockquote has readability issues, so use your best judgment when considering how wide a blockquote should be. A reasonable minimum width for a blockquote in a page layout is 450px. If a blockquote is used in a card, the minimum width will be smaller. - Image of default size blockquote left aligned with a minimum width of 450px + Image of default size blockquote left aligned with a minimum width of 450px - Image of large size blockquote vertically centered with a minimum width of 450px + Image of large size blockquote vertically centered with a minimum width of 450px @@ -79,11 +109,17 @@ A minimum width is hard to determine because a blockquote can be placed in a var The maximum width of a blockquote anywhere is 750px to avoid reader fatigue. - Image of default size blockquote left aligned with a maximum width of 750px + Image of default size blockquote left aligned with a maximum width of 750px - Image of large size blockquote vertically centered with a maximum width of 750px + Image of large size blockquote vertically centered with a maximum width of 750px @@ -105,11 +141,17 @@ When other elements are used with blockquotes, they are placed on the right. Som - Image of blockquote with video to the right and a grid overlaid on top + Image of blockquote with video to the right and a grid overlaid on top - Image of blockquote with card to the right and a grid overlaid on top + Image of blockquote with card to the right and a grid overlaid on top ## Responsive design @@ -118,56 +160,92 @@ As breakpoints get smaller, blockquote text sizes will be reduced based on the m ### Default size - Image of a default size blockquote for desktop + Image of a default size blockquote for desktop - Image of a default size blockquote for tablet + Image of a default size blockquote for tablet - Image of a default size blockquote for large mobile screens + Image of a default size blockquote for large mobile screens - Image of a default size blockquote for small mobile screens + Image of a default size blockquote for small mobile screens ### Large size - Image of a large size blockquote for desktop + Image of a large size blockquote for desktop - Image of a large size blockquote for tablet + Image of a large size blockquote for tablet - Image of a large size blockquote for large mobile screens + Image of a large size blockquote for large mobile screens - Image of a large size blockquote for small mobile screens + Image of a large size blockquote for small mobile screens ### Other elements - Image of a blockquote with video for desktop + Image of a blockquote with video for desktop - Image of a blockquote with video for tablet + Image of a blockquote with video for tablet - Image of a blockquote with video for large mobile screens + Image of a blockquote with video for large mobile screens - Image of a blockquote with video for small mobile screens + Image of a blockquote with video for small mobile screens @@ -178,7 +256,10 @@ As breakpoints get smaller, blockquote text sizes will be reduced based on the m The quote icon and citation text must always be included. - Image of two blockquotes both missing elements which is incorrect usage + Image of two blockquotes both missing elements which is incorrect usage ### Readability issues @@ -186,7 +267,10 @@ The quote icon and citation text must always be included. Blockquotes that are too thin are sometimes hard to read. - Image of two very thin blockquotes which is incorrect usage + Image of two very thin blockquotes which is incorrect usage ### Adding an emphasis border @@ -194,12 +278,18 @@ Blockquotes that are too thin are sometimes hard to read. Do not add an emphasis border to a centered blockquote. - Image of a large size blockquote with an emphasis border on the left which is incorrect usage + Image of a large size blockquote with an emphasis border on the left which is incorrect usage ### Centered blockquotes Do not place any elements near centered blockquotes. - Image of a vertically centered blockquote with a placeholder element next to it which is incorrect usage - + Image of a vertically centered blockquote with a placeholder element next to it which is incorrect usage + diff --git a/elements/rh-breadcrumb/docs/00-overview.md b/elements/rh-breadcrumb/docs/00-overview.md index ca68a2fa94..5870f305ab 100644 --- a/elements/rh-breadcrumb/docs/00-overview.md +++ b/elements/rh-breadcrumb/docs/00-overview.md @@ -5,7 +5,10 @@ {{ tagName | getElementDescription }} - Three placeholder breadcrumb links and a current page breadcrumb + Three placeholder breadcrumb links and a current page breadcrumb {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-breadcrumb/docs/10-style.md b/elements/rh-breadcrumb/docs/10-style.md index d130ec2e5b..5919e59823 100644 --- a/elements/rh-breadcrumb/docs/10-style.md +++ b/elements/rh-breadcrumb/docs/10-style.md @@ -6,7 +6,10 @@ Breadcrumb navigation is composed of links, text, and caret icons as separators.
            - Anatomy of breadcrumbs with numbered annotations pointing to various parts + Anatomy of breadcrumbs with numbered annotations pointing to various parts
              @@ -23,11 +26,17 @@ Breadcrumbs are available in both light and dark themes.
              - Light theme breadcrumb with blue links and black text and separators + Light theme breadcrumb with blue links and black text and separators - Dark theme breadcrumb with light blue links and white text and separators + Dark theme breadcrumb with light blue links and white text and separators
              @@ -36,7 +45,10 @@ Breadcrumbs are available in both light and dark themes. Breadcrumbs typically appear above the title of a page and below primary and/or secondary navigation. - partial view of Red Hat's homepage with primary and secondary navigation above breadcrumb navigation + partial view of Red Hat's homepage with primary and secondary navigation above breadcrumb navigation ## Space @@ -44,7 +56,10 @@ Breadcrumbs typically appear above the title of a page and below primary and/or The space between parent pages or current pages and the separators is 16px. If a row of breadcrumbs has to wrap, the space between the lines is 8px. This remains the same across all breakpoints. - Diagram of spacing for breadcrumbs + Diagram of spacing for breadcrumbs ## Interaction States @@ -57,11 +72,17 @@ A breadcrumb link turns a darker or lighter shade of the default state’s blue
              - Light theme breadcrumbs with dark blue, underlined links on hover and black text and separators + Light theme breadcrumbs with dark blue, underlined links on hover and black text and separators - Dark theme breadcrumbs with light blue, underlined links on hover and white text and separators + Dark theme breadcrumbs with light blue, underlined links on hover and white text and separators
              @@ -71,11 +92,17 @@ The focus state of a breadcrumb link looks similar to the hover state, but it ad
              - Light theme breadcrumbs with one dark blue, underlined link in a focus ring + Light theme breadcrumbs with one dark blue, underlined link in a focus ring - Dark theme breadcrumbs with one light blue, underlined link in a focus ring + Dark theme breadcrumbs with one light blue, underlined link in a focus ring
              @@ -88,11 +115,17 @@ The focus state of a breadcrumb link looks similar to the hover state, but it ad
              - Light theme breadcrumbs with one dark blue, underlined link in a focus ring + Light theme breadcrumbs with one dark blue, underlined link in a focus ring - Dark theme breadcrumbs with one light blue, underlined link in a focus ring + Dark theme breadcrumbs with one light blue, underlined link in a focus ring
              diff --git a/elements/rh-breadcrumb/docs/20-guidelines.md b/elements/rh-breadcrumb/docs/20-guidelines.md index d0263dc96b..56e5ae2082 100644 --- a/elements/rh-breadcrumb/docs/20-guidelines.md +++ b/elements/rh-breadcrumb/docs/20-guidelines.md @@ -10,11 +10,17 @@ The unlinked page titles and separators in the default variant uses the `--rh-co
              - Light theme breadcrumb with blue links and black text and separators + Light theme breadcrumb with blue links and black text and separators - Dark theme breadcrumb with light blue links and white text and separators + Dark theme breadcrumb with light blue links and white text and separators
              @@ -24,11 +30,17 @@ The unlinked page titles and separators in the default variant uses the `--rh-co
              - Light theme breadcrumb with blue links and dark gray text and separators + Light theme breadcrumb with blue links and dark gray text and separators - Dark theme breadcrumb with light blue links and light gray text and separators + Dark theme breadcrumb with light blue links and light gray text and separators
              @@ -39,13 +51,19 @@ Size and spacing remain consistent for breadcrumbs at all screen sizes. The brea ### Large breakpoints - partial view of an article page with breadcrumbs at a screen width of 1000px + partial view of an article page with breadcrumbs at a screen width of 1000px ### Small breakpoints - partial view of an article page with breadcrumbs at a mobile screen width of 360px + partial view of an article page with breadcrumbs at a mobile screen width of 360px ## Best Practices @@ -57,14 +75,20 @@ Breadcrumbs should not be used as the main navigation.
              - breadcrumbs below the primary navigation + breadcrumbs below the primary navigation

              Do use breadcrumbs to supplement the primary or secondary navigation element.

               - breadcrumbs only with placeholder page text + breadcrumbs only with placeholder page text

              Do not use breadcrumb navigation as the main way for users to navigate a website.

               @@ -75,14 +99,20 @@ They should also not be used if there is only one level in the page hierarchy or
              - one linked breadcrumb and one current page breadcrumb + one linked breadcrumb and one current page breadcrumb

              Do use breadcrumbs if there are at least two levels in a page hierarchy.

               - one current page breadcrumb only + one current page breadcrumb only

              Do not use breadcrumbs if the current page is first in the page hierarchy.

               @@ -95,14 +125,20 @@ Breadcrumbs should be placed consistently above the page title and below the pri
              - breadcrumbs placed below mobile navigation + breadcrumbs placed below mobile navigation

              Do place breadcrumbs in a familiar and consistent place for this type of navigation element.

               - breadcrumbs placed above mobile navigation + breadcrumbs placed above mobile navigation

              Do not add breadcrumbs above a primary or secondary navigation element or anywhere else on the page.

               @@ -115,14 +151,20 @@ The page titles used in breadcrumbs should be consistent with what is used in th
              - Page with the title 'What are cloud services?' and current page breadcrumb that says 'What are cloud services?' + Page with the title 'What are cloud services?' and current page breadcrumb that says 'What are cloud services?'

              Do keep the same page title in the heading and in breadcrumb navigation.

               - Page with the title 'What are cloud services?' and current page breadcrumb that says 'Cloud services' + Page with the title 'What are cloud services?' and current page breadcrumb that says 'Cloud services'

              Do not change the title in the breadcrumbs only.

               diff --git a/elements/rh-breadcrumb/docs/40-accessibility.md b/elements/rh-breadcrumb/docs/40-accessibility.md index 328de8d4dd..e629bb6b0f 100644 --- a/elements/rh-breadcrumb/docs/40-accessibility.md +++ b/elements/rh-breadcrumb/docs/40-accessibility.md @@ -32,5 +32,8 @@ Users should have the ability to move focus to a breadcrumb and activate a bread A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. In breadcrumb navigation, the focus order moves from left to right. In languages that are read right to left, the focus order also moves right to left. - breadcrumb navigation with numbers denoting focus order proceeds from left to right + breadcrumb navigation with numbers denoting focus order proceeds from left to right diff --git a/elements/rh-button/docs/00-overview.md b/elements/rh-button/docs/00-overview.md index 592071620d..7433828eb8 100644 --- a/elements/rh-button/docs/00-overview.md +++ b/elements/rh-button/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of Danger, Primary, Secondary, Tertiary, and Link buttons in the first row and Play and Close buttons in the second row + Image of Danger, Primary, Secondary, Tertiary, and Link buttons in the first row and Play and Close buttons in the second row {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-button/docs/10-style.md b/elements/rh-button/docs/10-style.md index a27973e0b6..5f55b51e69 100644 --- a/elements/rh-button/docs/10-style.md +++ b/elements/rh-button/docs/10-style.md @@ -8,7 +8,10 @@ used on its own or grouped with other buttons.
              - Anatomy image of buttons with numbered annotations + Anatomy image of buttons with numbered annotations
                @@ -30,11 +33,17 @@ Buttons are available in both light and dark themes. ### Light and dark themes - Image of light theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons + Image of light theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons - Image of dark theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons + Image of dark theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons @@ -120,7 +129,10 @@ horizontally and vertically centered and stays the same size no matter how big or small the image gets. - Image of buttons and various specs like border radius, height, icon size, width, alignment, placement, and more + Image of buttons and various specs like border radius, height, icon size, width, alignment, placement, and more ## Space @@ -134,7 +146,10 @@ space values when buttons are grouped, go to the [Guidelines](./guidelines) page - Image of Danger, Primary, Secondary, Tertiary, Link, and Close buttons with spacing values in between + Image of Danger, Primary, Secondary, Tertiary, Link, and Close buttons with spacing values in between @@ -154,11 +169,17 @@ an element or pattern. ### Hover - Image of light theme button hover states + Image of light theme button hover states - Image of dark theme button hover states + Image of dark theme button hover states @@ -223,11 +244,17 @@ an element or pattern. - Image of light theme button focus states + Image of light theme button focus states - Image of dark theme button focus states + Image of dark theme button focus states @@ -258,11 +285,17 @@ an element or pattern. - Image of light theme button active states + Image of light theme button active states - Image of dark theme button active states + Image of dark theme button active states diff --git a/elements/rh-button/docs/20-guidelines.md b/elements/rh-button/docs/20-guidelines.md index 12b690e673..d2c7ca7d6a 100644 --- a/elements/rh-button/docs/20-guidelines.md +++ b/elements/rh-button/docs/20-guidelines.md @@ -23,7 +23,10 @@ function to users. Therefore, it is important that each variant is implemented consistently so they communicate the correct actions. - Image of the seven available button variant + Image of the seven available button variant @@ -77,7 +80,10 @@ Use a Play button to indicate that audio or video will play when selected. - Image of play button examples; a video thumbnail on the left and a text layout on the right + Image of play button examples; a video thumbnail on the left and a text layout on the right ### Close button @@ -86,7 +92,10 @@ Use a Close button to indicate that a window will close when selected. Close buttons are mostly found in [dialogs](/elements/dialog/). - Image of a dialog with a close button in the top right corner + Image of a dialog with a close button in the top right corner ### Other icons @@ -101,7 +110,10 @@ completed first, most buttons can become disabled. However, the Play and Close buttons do not include a disabled state. - Image of five disabled buttons not including play and close buttons, underneath is a dropdown with a disabled button + Image of five disabled buttons not including play and close buttons, underneath is a dropdown with a disabled button ## Writing content @@ -128,7 +140,10 @@ When writing link button text labels, use specific and action-focused language that matches what users will see when they arrive at their location. - Image of link button text labels + Image of link button text labels ### Button vs. call to action text labels @@ -137,7 +152,10 @@ Button text labels are written to be short and communicate an action whereas call to action text labels are written to entice users to select a link. - Image of two buttons on the left and two calls to action on the right + Image of two buttons on the left and two calls to action on the right ### Character and word count @@ -182,7 +200,10 @@ consistent across all contexts elements are stacked vertically - Image of buttons used in a dialog and a form + Image of buttons used in a dialog and a form ### Hierarchy @@ -191,7 +212,10 @@ Buttons are ordered by hierarchy from left to right. Do not use multiple Danger, Primary, or Close buttons in the same area. - Image of buttons grouped by hierarchy from left to right + Image of buttons grouped by hierarchy from left to right ### Grouping @@ -200,7 +224,10 @@ Grouping buttons is a useful way of aligning buttons that have a relationship. Group buttons logically into sets based on hierarchy and usage. - Image of button groups and their hierarchy from left to right + Image of button groups and their hierarchy from left to right ### Space in groups @@ -210,7 +237,10 @@ buttons. If buttons are stacked, the spacing between each button should be `8px`. - Image of button groups and their horizontal and vertical spacing in between each button + Image of button groups and their horizontal and vertical spacing in between each button ## Best practices @@ -220,7 +250,10 @@ buttons. If buttons are stacked, the spacing between each button should be Buttons should never have more than one line of text. - Image of a button with two lines of text which is incorrect usage + Image of a button with two lines of text which is incorrect usage ### Multiple buttons @@ -228,7 +261,10 @@ Buttons should never have more than one line of text. Do not use multiple Danger or Primary buttons in the same area. - Image of two danger and two primary button groups which is incorrect usage + Image of two danger and two primary button groups which is incorrect usage ### Text labels @@ -236,7 +272,10 @@ Do not use multiple Danger or Primary buttons in the same area. Do not write button text labels that are expressive or ambiguous. - Image of two buttons; one has expressive language and the other has ambiguous language which is incorrect usage + Image of two buttons; one has expressive language and the other has ambiguous language which is incorrect usage ### Danger button @@ -244,7 +283,10 @@ Do not write button text labels that are expressive or ambiguous. Do not use a Danger button for non-destructive purposes. - Image of a search bar using a danger button which is incorrect usage + Image of a search bar using a danger button which is incorrect usage ### Button as a call to action @@ -253,5 +295,8 @@ Do not use buttons as links or change the Primary button styling, use a link or call to action instead. - Image of text styles with a button underneath that resembles a call to action which is incorrect usage + Image of text styles with a button underneath that resembles a call to action which is incorrect usage diff --git a/elements/rh-button/docs/40-accessibility.md b/elements/rh-button/docs/40-accessibility.md index 32249dddf4..947360e6be 100644 --- a/elements/rh-button/docs/40-accessibility.md +++ b/elements/rh-button/docs/40-accessibility.md @@ -13,7 +13,10 @@ link Users should have the ability to navigate to and interact with buttons using their keyboard. - Image of a button group showing focus indicators and tab key labels + Image of a button group showing focus indicators and tab key labels @@ -46,14 +49,20 @@ Users should have the ability to navigate to and interact with buttons using the {% include 'partials/accessibility/focusorder.md' %} For buttons in groups, the focus order is from left to right and top to bottom when stacked. Disabled buttons are not included in the focus order unless they include the `aria-disabled=“true”` attribute and display a [tooltip](/elements/tooltip) when focused. - Image of rows of button groups with numbers; one row has focus indicators only and the other has focus indicators and a tooltip + Image of rows of button groups with numbers; one row has focus indicators only and the other has focus indicators and a tooltip ## Touch targets Buttons in groups are adequately spaced for optimal touch targets. - Image of button group with touch targets on top of each button + Image of button group with touch targets on top of each button ## Screen reader guidelines diff --git a/elements/rh-card/docs/00-overview.md b/elements/rh-card/docs/00-overview.md index 9f4cd7e7ac..26b075c605 100644 --- a/elements/rh-card/docs/00-overview.md +++ b/elements/rh-card/docs/00-overview.md @@ -8,7 +8,10 @@ ## Sample element - Image of a card element + Image of a card element {% repoStatusChecklist repoStatus=repoStatus %} diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 36529d3c06..4ba56533a7 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -23,7 +23,10 @@ Cards can be used in light and dark themes. They act as a blank canvas where elements and styles can be placed inside. - A breakdown of the parts of a card + A breakdown of the parts of a card ## Theme @@ -32,13 +35,19 @@ All card variants are available in light and dark theme. ### Light theme - Card in light theme + Card in light theme ### Dark theme - Card in dark theme + Card in dark theme ### Color @@ -103,11 +112,17 @@ tall.
                - Example of a card layout + Example of a card layout - Anatomy of a card layout + Anatomy of a card layout
                @@ -137,13 +152,19 @@ Cards will get thinner or move below each other on smaller screens. ### Large screens - Card layout on desktop + Card layout on desktop ### Small screens - Card layout on mobile + Card layout on mobile ## Spacing @@ -165,12 +186,18 @@ become thinner, the container padding decreases. ### Desktop - Card spacing on desktop + Card spacing on desktop ### Mobile - Card spacing on mobile + Card spacing on mobile diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md index 31502a5c1f..0ae758a390 100644 --- a/elements/rh-card/docs/20-guidelines.md +++ b/elements/rh-card/docs/20-guidelines.md @@ -1,11 +1,4 @@ - ## Usage @@ -45,7 +26,7 @@ Default calls to action may be used. There are several card variants that can be used for a variety of use cases. -
                +

                Basic

                @@ -213,7 +194,10 @@ content. For example, grouping a basic card with a pricing card will look bad because they’re not very similar. - Grouping of a card + Grouping of a card These cards can be grouped together because they have similar styles and @@ -233,7 +217,10 @@ Cards can include complex components if necessary. For example, the place any other complex components in card layouts. - Alternative card usage + Alternative card usage ## Best practices @@ -242,21 +229,30 @@ The minimum width of a card in any layout is four columns and the maximum number of cards that can be used in a row is three. - Too many cards + Too many cards Don’t use a primary call to action in any card unless the primary action of a page is positioned inside of that card. - Card width error + Card width error Don’t use multiple calls to action in one card. Instead, distribute them to other cards. - Multiple calls to action + Multiple calls to action ## Behavior @@ -269,7 +265,10 @@ determined by the tallest card. Don’t place inconsistent amounts of content in cards, as this will impact how scannable the group will appear to users. - Card height behavior + Card height behavior ### Interactivity @@ -279,7 +278,10 @@ elements inside should all be interactive. Otherwise, each interactive element should continue to be interactive, but not the card container. - Card interaction + Card interaction ## Interaction states diff --git a/elements/rh-code-block/docs/10-overview.md b/elements/rh-code-block/docs/00-overview.md similarity index 80% rename from elements/rh-code-block/docs/10-overview.md rename to elements/rh-code-block/docs/00-overview.md index 45dfd685e0..c7f12f896b 100644 --- a/elements/rh-code-block/docs/10-overview.md +++ b/elements/rh-code-block/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of a code block with black code text within a light gray container + Image of a code block with black code text within a light gray container {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-code-block/docs/20-style.md b/elements/rh-code-block/docs/10-style.md similarity index 58% rename from elements/rh-code-block/docs/20-style.md rename to elements/rh-code-block/docs/10-style.md index 3eaa16bbdd..11c6552204 100644 --- a/elements/rh-code-block/docs/20-style.md +++ b/elements/rh-code-block/docs/10-style.md @@ -7,7 +7,10 @@ container.

                - Image of code block anatomy showing two annotations + Image of code block anatomy showing two annotations
                  @@ -24,14 +27,20 @@ A code block is available in both light and dark themes. ### Light theme - Image of light theme code block + Image of light theme code block ### Dark theme - Image of dark theme code block + Image of dark theme code block ### Configuration @@ -39,7 +48,10 @@ A code block is available in both light and dark themes. Code block text is always horizontally and vertically centered. - Image of a code block showing alignment and border radius specs + Image of a code block showing alignment and border radius specs ## Space @@ -47,7 +59,10 @@ Code block text is always horizontally and vertically centered. Container spacing reduces as breakpoints get smaller. - Image of a code block spacing for all breakpoints + Image of a code block spacing for all breakpoints diff --git a/elements/rh-code-block/docs/30-guidelines.md b/elements/rh-code-block/docs/20-guidelines.md similarity index 52% rename from elements/rh-code-block/docs/30-guidelines.md rename to elements/rh-code-block/docs/20-guidelines.md index 4355a9a7ac..a1f0a66a33 100644 --- a/elements/rh-code-block/docs/30-guidelines.md +++ b/elements/rh-code-block/docs/20-guidelines.md @@ -13,7 +13,10 @@ A code block container can adhere to the width of content within or be fixed width. - Image of fluid width and fixed width code block sizes with text labels below + Image of fluid width and fixed width code block sizes with text labels below ## Content @@ -22,7 +25,10 @@ The length of code text and the number of lines can change the width and height of a code block. - Image of two code blocks; one code block is fluid width showing only one line and the other code block is fixed width showing 10 lines + Image of two code blocks; one code block is fluid width showing only one line and the other code block is fixed width showing 10 lines @@ -31,7 +37,10 @@ of a code block. ### Large breakpoints - Image of code blocks on desktop and tablet breakpoints + Image of code blocks on desktop and tablet breakpoints ### Small breakpoints @@ -39,7 +48,10 @@ of a code block. Container spacing and code text size reduces as breakpoints get smaller. - Image of code blocks on large and small mobile breakpoints + Image of code blocks on large and small mobile breakpoints @@ -50,7 +62,10 @@ Container spacing and code text size reduces as breakpoints get smaller. Do not use a different font than `--rh-font-family-code`. - Image of a code block showing the Red Hat Text font used for code text which is incorrect usage + Image of a code block showing the Red Hat Text font used for code text which is incorrect usage ### Different styling @@ -58,5 +73,8 @@ Do not use a different font than `--rh-font-family-code`. Do not change any of the code block styling. - Image of a code block showing different styles which is incorrect usage + Image of a code block showing different styles which is incorrect usage diff --git a/elements/rh-code-block/docs/40-code.md b/elements/rh-code-block/docs/30-code.md similarity index 100% rename from elements/rh-code-block/docs/40-code.md rename to elements/rh-code-block/docs/30-code.md diff --git a/elements/rh-code-block/docs/50-accessibility.md b/elements/rh-code-block/docs/40-accessibility.md similarity index 100% rename from elements/rh-code-block/docs/50-accessibility.md rename to elements/rh-code-block/docs/40-accessibility.md diff --git a/elements/rh-cta/docs/00-overview.md b/elements/rh-cta/docs/00-overview.md index e4ff1af54a..b1f82846fd 100644 --- a/elements/rh-cta/docs/00-overview.md +++ b/elements/rh-cta/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of variants including Primary (red background and white text), Secondary (black border and black text), Brick (light gray border and blue text), and Default (blue text and blue icon) + Image of variants including Primary (red background and white text), Secondary (black border and black text), Brick (light gray border and blue text), and Default (blue text and blue icon) {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-cta/docs/10-style.md b/elements/rh-cta/docs/10-style.md index 32de4b0cb3..22d5469c38 100644 --- a/elements/rh-cta/docs/10-style.md +++ b/elements/rh-cta/docs/10-style.md @@ -6,7 +6,10 @@ A call to action is text in a container or paired with an icon that directs user
                  - Anatomy image showing calls to action with various annotation numbers + Anatomy image showing calls to action with various annotation numbers
                    @@ -25,11 +28,17 @@ Calls to action are available in both light and dark themes. ### Light and dark themes - Image of light theme Primary, Secondary, Brick, Default, and Default video variants + Image of light theme Primary, Secondary, Brick, Default, and Default video variants - Image of dark theme Primary, Secondary, Brick, Default, and Default video variants + Image of dark theme Primary, Secondary, Brick, Default, and Default video variants @@ -106,11 +115,17 @@ Calls to action are available in both light and dark themes. The Brick variant includes a slot for an icon as well as an extra orientation. - Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text + Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text - Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text + Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text @@ -137,7 +152,10 @@ The Brick variant includes a slot for an icon as well as an extra orientation. Primary, Secondary, and Default variants include a slot for a video icon. The video icon is the same color as the text label. - Image of Primary, Secondary, and Default variants with video icons to the right of text + Image of Primary, Secondary, and Default variants with video icons to the right of text ### White variants @@ -145,7 +163,10 @@ Primary, Secondary, and Default variants include a slot for a video icon. The vi Dark theme includes white variants if other variants are duplicative or if they violate accessibility guidelines. - Image of Primary and Primary video variants with a white background and black text and Default and Default video variants with white text + Image of Primary and Primary video variants with a white background and black text and Default and Default video variants with white text @@ -182,7 +203,10 @@ Dark theme includes white variants if other variants are duplicative or if they All calls to action with a container have the same border radius, but the height and width vary based on the presence of icons and the amount of content. Calls to action in a row are horizontally centered. - Image of all variants with various specs like border radius, height, width, alignment, and more + Image of all variants with various specs like border radius, height, width, alignment, and more ## Space @@ -190,7 +214,10 @@ All calls to action with a container have the same border radius, but the height Space values are the same on all breakpoints for calls to action. To see space values when calls to action are grouped, go to the [Guidelines](/elements/call-to-action/guidelines/) page. - Image of Primary, Secondary, two Brick variants, and two Default variants with spacing values in between + Image of Primary, Secondary, two Brick variants, and two Default variants with spacing values in between @@ -208,15 +235,24 @@ Interaction states are visual representations used to communicate the status of ### Hover - Image of light theme hover states + Image of light theme hover states - Image of dark theme hover states + Image of dark theme hover states - Image of dark theme white variant hover states + Image of dark theme white variant hover states @@ -291,15 +327,24 @@ Interaction states are visual representations used to communicate the status of - Image of light theme focus states + Image of light theme focus states - Image of dark theme focus states + Image of dark theme focus states - Image of dark theme white variant focus states + Image of dark theme white variant focus states @@ -329,15 +374,24 @@ Interaction states are visual representations used to communicate the status of - Image of light theme active states + Image of light theme active states - Image of dark theme active states + Image of dark theme active states - Image of dark theme white variant active states + Image of dark theme white variant active states diff --git a/elements/rh-cta/docs/20-guidelines.md b/elements/rh-cta/docs/20-guidelines.md index ff9cda288a..ebbbf108c8 100644 --- a/elements/rh-cta/docs/20-guidelines.md +++ b/elements/rh-cta/docs/20-guidelines.md @@ -28,8 +28,11 @@ signals that function to users. Therefore, it is important that each variant is implemented consistently so they communicate the correct actions. - Image of the Primary, - Secondary, Brick, and Default variants with descriptive text labels below + Image of the Primary, + Secondary, Brick, and Default variants with descriptive text labels below @@ -77,8 +80,11 @@ To indicate that a link is currently unavailable, calls to action can become disabled. - Image of disabled Primary, - Secondary, Brick, and Default variants + Image of disabled Primary, + Secondary, Brick, and Default variants @@ -89,8 +95,11 @@ communicate various topics, but the icons must be the same color, height, style, etc. - Image of Brick variants - with an icon on the left of text and on top of text + Image of Brick variants + with an icon on the left of text and on top of text ## Writing content @@ -111,8 +120,11 @@ announce text to users - Do not use any other icons except for the ones that are included - Image of Default variants - showing how to incorrectly and correctly write text labels + Image of Default variants + showing how to incorrectly and correctly write text labels ### Clarity of language @@ -121,8 +133,11 @@ Text labels can be inviting as well as to the point, vague messaging does not help our users make informed decisions. - Image of how to - incorrectly and correctly use clear and straightforward language + Image of how to + incorrectly and correctly use clear and straightforward language ### Long text labels @@ -131,8 +146,11 @@ Users do not want to spend more time reading than necessary, so write text labels with as few words as possible. - Image of comparing - very long and shortened text labels + Image of comparing + very long and shortened text labels Long text labels will break to two lines on small breakpoints or when translated @@ -145,9 +163,12 @@ to certain languages. This can be avoided by writing less text. - Image of Primary, + <img src= + label breaking to two lines" + width="360" + height="342"> @@ -157,9 +178,11 @@ Call to action text labels are written to entice users to select a link whereas button text labels are written to be short and communicate an action. - Image of comparing text labels in calls to action versus text labels in - buttons + Image of comparing text labels in calls to action versus text labels in + buttons @@ -205,8 +228,11 @@ important. Variants that are lower in hierarchy can be used more than one time per page. - Image of calls to - action hierarchy and usage guidance + Image of calls to + action hierarchy and usage guidance @@ -217,13 +243,19 @@ lists, and more. It is commonly used as the last element in a group so users can read about something first and then proceed further if they are interested. - Image of calls - to action used in context including under a text block and within a card + Image of calls + to action used in context including under a text block and within a card - Image of calls - to action used in context including within a grid and in a list + Image of calls + to action used in context including within a grid and in a list ### Grouping @@ -233,8 +265,11 @@ Variants that are lower in hierarchy can be grouped with Primary as well as used more than once per page. - Image of call to - action groups and their hierarchy from left to right + Image of call to + action groups and their hierarchy from left to right ### Bricks @@ -248,8 +283,11 @@ Brick variants are flexible and can stretch to fit different column widths. - Image of Brick variants - stretched to fit a variety of grid formations + Image of Brick variants + stretched to fit a variety of grid formations ### Space in groups @@ -264,23 +302,32 @@ Horizontal and vertical spacing between Primary and Secondary variants is - Image of - 24px spacers in between Primary and Secondary variants + Image of + 24px spacers in between Primary and Secondary variants Horizontal and vertical spacing between the Default variant is `24px`. - Image of - 24px spacers in between Default variants + Image of + 24px spacers in between Default variants Horizontal and vertical spacing between Brick variants should be the same as grid gutters. - Image of a - variety of space values in between Brick variants + Image of a + variety of space values in between Brick variants ## Behavior @@ -292,9 +339,12 @@ A Brick variant can hide and reveal a panel of content when selected like an selected at a time like [tabs](/elements/tabs/). - Image of Brick + <img src= + formations" + width="1000" + height="1016"> @@ -306,15 +356,21 @@ labels, a second row appears. -Image of calls to - action in a layout on a large breakpoint showing them all in one row +Image of calls to + action in a layout on a large breakpoint showing them all in one row -Image of calls to +<img src= + one variant in a second row" + width="576" + height="390"> @@ -325,8 +381,11 @@ alignment="left"> Do not change the styles of any variant. - Image of several - variants with brand new styles which is incorrect usage + Image of several + variants with brand new styles which is incorrect usage ### Primary variants @@ -334,8 +393,11 @@ Do not change the styles of any variant. Do not use more than one Primary variant on any page. - Image of two Primary - variants in one row which is incorrect usage + Image of two Primary + variants in one row which is incorrect usage ### Brick variants @@ -343,8 +405,11 @@ Do not use more than one Primary variant on any page. Do not group different Brick variants together, use one variant per grid. - Image of Brick - variants in one row with and without icons which is incorrect usage + Image of Brick + variants in one row with and without icons which is incorrect usage @@ -353,8 +418,11 @@ Do not group different Brick variants together, use one variant per grid. Do not group more than two different variants together. - Image of Primary, - Secondary, and Default variants in one row which is incorrect usage + Image of Primary, + Secondary, and Default variants in one row which is incorrect usage @@ -369,8 +437,11 @@ first on the left. - Image of the Primary - variant last in a row which is incorrect usage + Image of the Primary + variant last in a row which is incorrect usage ### Too many options @@ -379,8 +450,11 @@ Do not group more than three variants together otherwise the risk of [choice paralysis][paralysis]{target="_blank"} greatly increases. - Image of two rows of - calls to action with four variants in each row which is incorrect usage + Image of two rows of + calls to action with four variants in each row which is incorrect usage ### Stretching @@ -388,8 +462,11 @@ paralysis][paralysis]{target="_blank"} greatly increases. Do not add extra spacing or stretch the width of any variant except for Bricks. - Image of Primary and - Secondary variants stretched which is incorrect usage + Image of Primary and + Secondary variants stretched which is incorrect usage [paralysis]: https://www.shopify.com/partners/blog/choice-paralysis diff --git a/elements/rh-cta/docs/40-accessibility.md b/elements/rh-cta/docs/40-accessibility.md index 30a18cb151..88422dec6e 100644 --- a/elements/rh-cta/docs/40-accessibility.md +++ b/elements/rh-cta/docs/40-accessibility.md @@ -2,8 +2,11 @@ Users should have the ability to navigate to and interact with calls to action using their keyboard. - - Image of three groups with different variants showing focus indicators and tab key labels + + Image of three groups with different variants showing focus indicators and tab key labels @@ -40,8 +43,11 @@ Users should have the ability to navigate to and interact with calls to action u A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. For grouped calls to action, the focus order is from left to right and top to bottom. - - Image of groups of three variants with numbers one through three moving from left to right and top to bottom + + Image of groups of three variants with numbers one through three moving from left to right and top to bottom ## Touch targets @@ -49,7 +55,10 @@ A logical focus order helps keyboard users operate our websites. Elements need t Grouped calls to action are adequately spaced for optimal touch targets. - Image of groups of variants with touch targets on top of each + Image of groups of variants with touch targets on top of each ## Screen reader guidelines diff --git a/elements/rh-dialog/docs/00-overview.md b/elements/rh-dialog/docs/00-overview.md index 779e35c5da..3a254afc16 100644 --- a/elements/rh-dialog/docs/00-overview.md +++ b/elements/rh-dialog/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - A dialog container with a black headline, black body text, two blue buttons, and a dark gray close button all on a white background on top of a slightly transparent black background + A dialog container with a black headline, black body text, two blue buttons, and a dark gray close button all on a white background on top of a slightly transparent black background {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-dialog/docs/10-style.md b/elements/rh-dialog/docs/10-style.md index 19cc714bd4..db6ca37505 100644 --- a/elements/rh-dialog/docs/10-style.md +++ b/elements/rh-dialog/docs/10-style.md @@ -8,7 +8,10 @@ helps users focus on the dialog content.
                    - Anatomy of a dialog with lots of annotations pointing to various parts + Anatomy of a dialog with lots of annotations pointing to various parts
                      @@ -28,7 +31,10 @@ helps users focus on the dialog content. A dialog is available in the light theme only. - Light theme dialog + Light theme dialog ## Configuration @@ -37,7 +43,10 @@ The dialog container does not have a maximum height, but too much content in the body text section will cause scrolling. - How a dialog container is constructed showing border radius, region, and scrolling details + How a dialog container is constructed showing border radius, region, and scrolling details ## Space @@ -47,13 +56,19 @@ The amount of space in a dialog reduces as breakpoints get smaller. ### Large breakpoints - A dialog container on a large breakpoint with spacing between all elements + A dialog container on a large breakpoint with spacing between all elements ### Small breakpoints - A dialog container on a small breakpoint with spacing between all elements + A dialog container on a small breakpoint with spacing between all elements @@ -75,7 +90,10 @@ Control and inactive page number buttons have the same hover state. Truncation is not interactive so it has no hover state. - Light theme dialog hover state example + Light theme dialog hover state example @@ -99,7 +117,10 @@ is not interactive so it has no hover state. ### Focus - Light theme dialog focus state example + Light theme dialog focus state example @@ -126,7 +147,10 @@ is not interactive so it has no hover state. ### Active - Light theme dialog active state example + Light theme dialog active state example diff --git a/elements/rh-dialog/docs/20-guidelines.md b/elements/rh-dialog/docs/20-guidelines.md index 28b2b814e1..ef65fab16f 100644 --- a/elements/rh-dialog/docs/20-guidelines.md +++ b/elements/rh-dialog/docs/20-guidelines.md @@ -30,7 +30,10 @@ The fixed-width dialog container works well for environments with a fixed grid, like marketing pages. - A dialog container spanning a 12-column grid that is fixed in the center of the page + A dialog container spanning a 12-column grid that is fixed in the center of the page @@ -40,7 +43,10 @@ The full-width dialog container works well for environments with a more fluid grid like apps or dashboards. - A dialog container spanning a 6-column fluid grid that takes up the whole screen + A dialog container spanning a 6-column fluid grid that takes up the whole screen @@ -59,7 +65,10 @@ actions. When confirming a non-destructive action, do the following: - Be specific about what will happen when an action is confirmed - Non-destructive confirmation dialog example with a blue primary button + Non-destructive confirmation dialog example with a blue primary button @@ -69,7 +78,10 @@ When confirming a destructive action, do the following. a [danger button](https://ux.redhat.com/elements/button/) instead - Destructive confirmation dialog example with a red primary button + Destructive confirmation dialog example with a red primary button @@ -80,7 +92,10 @@ expected behavior. Briefly contextualize the problem, explain why it happened, and then provide actionable steps toward a solution. - Error dialog example with a blue primary button + Error dialog example with a blue primary button ### Passive @@ -97,7 +112,10 @@ using a passive dialog, consider the following: alert](https://ux.redhat.com/elements/alert/) instead - Passive dialog example with a blue primary button + Passive dialog example with a blue primary button @@ -107,7 +125,10 @@ A video can replace a fixed-width dialog container, it should have the same width and include a close button. - A dialog video player spanning a 12-column grid with a white close button + A dialog video player spanning a 12-column grid with a white close button @@ -180,7 +201,10 @@ indicate there is additional content out of view. Dialog content should never scroll horizontally. - Dialog with a long amount of content showing visible gradient at the bottom of the body text section + Dialog with a long amount of content showing visible gradient at the bottom of the body text section @@ -192,14 +216,20 @@ By default, a dialog container is horizontally and vertically centered on top of the backdrop and viewport. - Dialog with container horizontally and vertically centered + Dialog with container horizontally and vertically centered By default, a dialog container is horizontally and vertically centered on top of the backdrop and viewport. - Dialog with container horizontally centered, but positioned at the top of the page + Dialog with container horizontally centered, but positioned at the top of the page @@ -211,7 +241,10 @@ Both the fixed-width and full-width dialog containers can be used on large breakpoints. - A dialog container on a large breakpoint + A dialog container on a large breakpoint ### Small breakpoints @@ -220,7 +253,10 @@ As breakpoints get smaller, the fixed-width dialog container will change to full-width and become taller. - Two dialog containers on small breakpoints, one tablet size and one mobile size + Two dialog containers on small breakpoints, one tablet size and one mobile size @@ -233,7 +269,10 @@ them to the main page instead. A dialog is disruptive, so it is important to bring users back to their original workflow as quickly as possible. - A dialog container with a three-panel accordion which is incorrect usage + A dialog container with a three-panel accordion which is incorrect usage @@ -243,7 +282,10 @@ Make sure to write clearly about what will happen when users confirm a specific action. - A dialog container with vague text which is incorrect usage + A dialog container with vague text which is incorrect usage @@ -253,5 +295,8 @@ Do not use more than two buttons in a dialog and do not add or change button variants. - A dialog container with three buttons which is incorrect usage + A dialog container with three buttons which is incorrect usage diff --git a/elements/rh-dialog/docs/40-accessibility.md b/elements/rh-dialog/docs/40-accessibility.md index 8a019cab2a..5b023d234e 100644 --- a/elements/rh-dialog/docs/40-accessibility.md +++ b/elements/rh-dialog/docs/40-accessibility.md @@ -3,7 +3,10 @@ A dialog can be opened by pressing `Enter` when the dialog trigger has focus. When a dialog is open, moving focus using a keyboard is constrained or trapped within the dialog container. Keyboard navigation by pressing `Tab` will cycle focus through the interactive elements until the dialog is closed. - Flowchart of a dialog container outlining several keyboard interactions + Flowchart of a dialog container outlining several keyboard interactions @@ -51,7 +54,10 @@ When a dialog opens, the element that should receive focus depends on the conten Only the close button and any interactive elements are selectable. - A dialog container with three touch targets; one on the close button and one on each button + A dialog container with three touch targets; one on the close button and one on each button diff --git a/elements/rh-footer/docs/10-style.md b/elements/rh-footer/docs/10-style.md index ceeb8adba3..a89551dcc1 100644 --- a/elements/rh-footer/docs/10-style.md +++ b/elements/rh-footer/docs/10-style.md @@ -11,7 +11,10 @@ websites.
                      - Image of a footer showing lots of annotation numbers next to various styles and other elements + Image of a footer showing lots of annotation numbers next to various styles and other elements
                        @@ -37,7 +40,10 @@ universal footer background color. This variant creates separation and helps distinguish both footers from each other. - Image of a footer with no elements except for backgrounds; the top background is dark gray and the bottom is black + Image of a footer with no elements except for backgrounds; the top background is dark gray and the bottom is black @@ -47,7 +53,10 @@ A footer only has one theme, but visually it could be considered in the dark theme. - Image of a large footer + Image of a large footer @@ -134,7 +143,10 @@ theme. ### Language selector - Image of a footer with the language selector menu open + Image of a footer with the language selector menu open @@ -174,26 +186,41 @@ Within these regions, position and alignment are somewhat rigid in order to maintain consistency. - Image of how a footer is architected showing lots of alignment examples + Image of how a footer is architected showing lots of alignment examples ## Space - Image of a desktop footer showing space values in between elements + Image of a desktop footer showing space values in between elements - Image of a tablet footer showing space values in between elements + Image of a tablet footer showing space values in between elements - Image of a mobile footer showing space values in between elements + Image of a mobile footer showing space values in between elements - Image of a footer showing space values in the language selector menu + Image of a footer showing space values in the language selector menu @@ -210,7 +237,10 @@ maintain consistency. ### Hover - Hover state examples within a footer + Hover state examples within a footer @@ -250,7 +280,10 @@ maintain consistency. ### Hover - language selector - Hover state example within the language selector menu + Hover state example within the language selector menu @@ -279,7 +312,10 @@ maintain consistency. - Focus state examples within a footer + Focus state examples within a footer @@ -307,7 +343,10 @@ maintain consistency. - Focus state example within the language selector menu + Focus state example within the language selector menu @@ -336,7 +375,10 @@ maintain consistency. - Active state examples within a footer + Active state examples within a footer @@ -364,7 +406,10 @@ maintain consistency. - Active state example within the language selector menu + Active state example within the language selector menu diff --git a/elements/rh-footer/docs/20-guidelines.md b/elements/rh-footer/docs/20-guidelines.md index d51659eda6..3b136da220 100644 --- a/elements/rh-footer/docs/20-guidelines.md +++ b/elements/rh-footer/docs/20-guidelines.md @@ -15,7 +15,10 @@ A footer is divided into two parts, the **Website-specific** footer and the Most of the content in the website-specific footer can be customized. - Image of the website-specific footer showing regions that can and cannot be customized + Image of the website-specific footer showing regions that can and cannot be customized @@ -73,7 +76,10 @@ Most of the content in the website-specific footer can be customized. Content in the universal footer is always the same across all websites. - Image of the universal footer showing only one region that cannot be customized + Image of the universal footer showing only one region that cannot be customized @@ -102,7 +108,10 @@ Content in the universal footer is always the same across all websites. A footer spans the entire width of the browser window at all breakpoints. - Image of a footer in a layout spanning the width of the browser window + Image of a footer in a layout spanning the width of the browser window @@ -118,7 +127,10 @@ Red Hat fedora always links to redhat.com. - Image of the universal footer by itself + Image of the universal footer by itself ### Other web properties @@ -131,15 +143,24 @@ is flexible enough to accommodate grids, elements, text, and more. - Image of a footer on a Customer Portal website + Image of a footer on a Customer Portal website - Image of a footer on a Developer website + Image of a footer on a Developer website - Image of a footer on a Partner Connect website + Image of a footer on a Partner Connect website @@ -151,14 +172,20 @@ If the website-specific footer includes a lot of content, columns can be added below the first row of columns. - Image of a footer with four columns of links in one row and two columns in the second row + Image of a footer with four columns of links in one row and two columns in the second row If the website-specific footer includes less content, columns will stretch to fill the empty space. - Image of a footer with only two columns of links in one row + Image of a footer with only two columns of links in one row @@ -166,7 +193,10 @@ If the number of columns changes, social media links will shift position to remain aligned to the left edge of the last column. - Image of a footer with three columns of links showing an example of social media icons shifting + Image of a footer with three columns of links showing an example of social media icons shifting ## Responsive design @@ -174,7 +204,10 @@ remain aligned to the left edge of the last column. ### Large breakpoints - Image of a large breakpoint footer + Image of a large breakpoint footer @@ -189,11 +222,17 @@ content will also get rearranged. - Image of a tablet breakpoint footer + Image of a tablet breakpoint footer - Image of a mobile breakpoint footer + Image of a mobile breakpoint footer @@ -253,7 +292,10 @@ Do not reverse the order of footers, the website-specific footer should always be on top. - Image of the global footer on top of the website-specific footer which is incorrect usage + Image of the global footer on top of the website-specific footer which is incorrect usage @@ -262,7 +304,10 @@ be on top. Do not replace columns with an accordion if there is still adequate space. - Image of a desktop footer with an accordion replacing four columns of links which is incorrect usage + Image of a desktop footer with an accordion replacing four columns of links which is incorrect usage @@ -271,7 +316,10 @@ Do not replace columns with an accordion if there is still adequate space. Do not use the website-specific footer without the universal footer. - Image of a footer missing the universal footer which is incorrect usage + Image of a footer missing the universal footer which is incorrect usage @@ -281,5 +329,8 @@ Do not create your own custom universal footer by changing, deleting, or rearranging any elements. - Image of a universal footer with a new design which is incorrect usage + Image of a universal footer with a new design which is incorrect usage diff --git a/elements/rh-footer/docs/40-accessibility.md b/elements/rh-footer/docs/40-accessibility.md index 6e74b204a5..ceff038aed 100644 --- a/elements/rh-footer/docs/40-accessibility.md +++ b/elements/rh-footer/docs/40-accessibility.md @@ -41,7 +41,10 @@ A logical focus order helps keyboard users operate our websites. Elements need t - Image of a footer showing groups of focus indicators in different regions with annotation numbers + Image of a footer showing groups of focus indicators in different regions with annotation numbers @@ -49,13 +52,19 @@ A logical focus order helps keyboard users operate our websites. Elements need t Users can open the language selector menu by pressing `Enter` if the trigger has focus. If they do, they can press `Tab` to move focus to the first language. Each language can receive focus from left to right and top to bottom. - Image of a footer with the language selector menu open showing the focus order of languages + Image of a footer with the language selector menu open showing the focus order of languages When the focus is moved outside of the menu, the menu closes. - Image of a footer with the language selector menu open showing the menu closing when focus is moved + Image of a footer with the language selector menu open showing the menu closing when focus is moved diff --git a/elements/rh-health-index/docs/00-overview.md b/elements/rh-health-index/docs/00-overview.md index 5da351bb1b..5f92841a3c 100644 --- a/elements/rh-health-index/docs/00-overview.md +++ b/elements/rh-health-index/docs/00-overview.md @@ -2,8 +2,11 @@ {{ tagName | getElementDescription }} - - Four health index components. One is green with letter grade A, one is yellow with letter grade C, one is orange with letter grade D, and one is red with letter grade F. + + Four health index components. One is green with letter grade A, one is yellow with letter grade C, one is orange with letter grade D, and one is red with letter grade F. diff --git a/elements/rh-health-index/docs/10-style.md b/elements/rh-health-index/docs/10-style.md index ad00b34ae7..20b9a2c19e 100644 --- a/elements/rh-health-index/docs/10-style.md +++ b/elements/rh-health-index/docs/10-style.md @@ -1,4 +1,4 @@ - - ## Style A popover should include text and interactive elements like a close button and links. - Popover component blueprint + Popover component blueprint @@ -33,14 +21,17 @@ on the content and color of the background.

                        A heading does not need to be included, but if links are not included either, use a Tooltip component instead.

                        -
                        +

                        Black

                        Use on light background.

                        - Popover component, black variant + Popover component, black variant
                        @@ -49,14 +40,20 @@ on the content and color of the background.

                        Use on dark background.

                      - Popover component, white variant + Popover component, white variant

                      With heading

                      Use for messages that require a heading.

                      - Popover component, with heading variant + Popover component, with heading variant
                      @@ -65,7 +62,10 @@ on the content and color of the background.

                      Use for messages that do not require a heading.

                    - Popover component, without heading variant + Popover component, without heading variant
                    @@ -74,7 +74,10 @@ on the content and color of the background.

                    A drop shadow gives a popover subtle elevation above light backgrounds.

                  - Popover component, with drop shadow variant + Popover component, with drop shadow variant
                  @@ -83,7 +86,10 @@ on the content and color of the background.

                  A drop shadow cannot be seen on dark backgrounds, so it is not included.

                - Popover component, without drop shadow variant + Popover component, without drop shadow variant
                @@ -99,14 +105,20 @@ should be used on dark backgrounds. ### Black (light backgrounds) - Popover component, light theme + Popover component, light theme ### White (dark backgrounds) - Popover component, dark theme + Popover component, dark theme @@ -118,14 +130,20 @@ screens. ### Large screens - Popover component responsive design, large screens + Popover component responsive design, large screens ### Small screens - Popover component responsive design, small screens + Popover component responsive design, small screens @@ -134,7 +152,10 @@ screens. Each popover orientation contains the same amount of spacing in between the component and icon. - Popover component spacing + Popover component spacing diff --git a/elements/rh-popover/docs/20-guidelines.md b/elements/rh-popover/docs/20-guidelines.md index 2b7236806a..3ad8336df7 100644 --- a/elements/rh-popover/docs/20-guidelines.md +++ b/elements/rh-popover/docs/20-guidelines.md @@ -1,18 +1,3 @@ - - ## Usage Use a popover to answer a question, explain something, or provide a user with @@ -43,7 +28,10 @@ well. - Popover component usage, content + Popover component usage, content @@ -96,7 +84,10 @@ content or is cut off by the edge of the screen when triggered, change the orientation. - Popover component usage, orientation + Popover component usage, orientation @@ -106,7 +97,10 @@ Avoid using a black popover on dark backgrounds, it will completely disappear into the background. - Popover component usage, black on black + Popover component usage, black on black @@ -116,7 +110,10 @@ Avoid using a white popover on light backgrounds, there is not enough contrast even with the subtle drop shadow. - Popover component usage, white on white + Popover component usage, white on white @@ -130,7 +127,10 @@ a popover, a user must select the close button, make a selection outside of the popover, or press the **Escape (esc)** key. - Popover component behavior, trigger + Popover component behavior, trigger @@ -141,7 +141,10 @@ trigger. However, an icon is not the only visual element that can trigger a popover. - Popover component behavior, form + Popover component behavior, form @@ -151,7 +154,10 @@ A popover and tooltip are triggered the same way on mobile, by a tap, but still have different use cases (see **Usage**). - Popover component behavior, mobile + Popover component behavior, mobile @@ -159,17 +165,23 @@ still have different use cases (see **Usage**). Both popover variants have interaction states. -
                +

                Default/Focus (black)

                - Popover component interaction state, default and focus + Popover component interaction state, default and focus

                Default/Focus (white)

                - Popover component interaction state, default and focus + Popover component interaction state, default and focus
                @@ -218,13 +230,19 @@ Both popover variants have interaction states.

                Hover/Active (black)

                - Popover component interaction state, hover and active + Popover component interaction state, hover and active

                Hover/Active (white)

                - Popover component interaction state, hover and active + Popover component interaction state, hover and active
                @@ -276,7 +294,10 @@ the close button must have focus in order for a user to have control over the popover and be able to interact with the links or close it. - Popover component accessibility + Popover component accessibility @@ -316,7 +337,10 @@ popover and be able to interact with the links or close it. Do not embed a popover or tooltip within another popover. - Popover component best practice 1 + Popover component best practice 1 @@ -325,7 +349,10 @@ Do not embed a popover or tooltip within another popover. Do not overload a popover with too much content. - Popover component best practice 2 + Popover component best practice 2 @@ -334,5 +361,8 @@ Do not overload a popover with too much content. Do not remove the close button from a popover. - Popover component best practice 3 + Popover component best practice 3 diff --git a/elements/rh-progress-steps/docs/00-overview.md b/elements/rh-progress-steps/docs/00-overview.md index c63035cd14..6a6f8fb5f4 100644 --- a/elements/rh-progress-steps/docs/00-overview.md +++ b/elements/rh-progress-steps/docs/00-overview.md @@ -12,7 +12,10 @@ toward the completion of a linear process. ## Sample element - Progress steps component sample + Progress steps component sample {% repoStatusChecklist repoStatus=repoStatus %} \ No newline at end of file diff --git a/elements/rh-progress-steps/docs/10-style.md b/elements/rh-progress-steps/docs/10-style.md index ac9705f50d..c81914f0ab 100644 --- a/elements/rh-progress-steps/docs/10-style.md +++ b/elements/rh-progress-steps/docs/10-style.md @@ -5,7 +5,10 @@ on a thin horizontal or vertical line and organized sequentially from left to right or top to bottom. - Progress steps component blueprint + Progress steps component blueprint @@ -27,7 +30,10 @@ through each step of the task. indicates how much progress a user has made. - Progress steps component visual elements + Progress steps component visual elements @@ -45,7 +51,10 @@ them in **Sentence case** only. - Progress steps component text labels + Progress steps component text labels @@ -64,7 +73,10 @@ steps with short text labels. - Progress steps component horizontal orientation + Progress steps component horizontal orientation @@ -82,7 +94,10 @@ with more words. - Progress steps component vertical orientation + Progress steps component vertical orientation @@ -95,28 +110,40 @@ orientation. ### Desktop - Progress steps component responsive design, desktop + Progress steps component responsive design, desktop ### Tablet - Progress steps component responsive design, tablet + Progress steps component responsive design, tablet ### Mobile - Progress steps component responsive design, mobile + Progress steps component responsive design, mobile ## Spacing - Progress steps component spacing + Progress steps component spacing diff --git a/elements/rh-progress-steps/docs/20-guidelines.md b/elements/rh-progress-steps/docs/20-guidelines.md index 3ac63f1bd2..40fa579019 100644 --- a/elements/rh-progress-steps/docs/20-guidelines.md +++ b/elements/rh-progress-steps/docs/20-guidelines.md @@ -16,7 +16,10 @@ labels, the vertical orientation should be used instead. - Progress steps component mobile usage + Progress steps component mobile usage @@ -34,11 +37,17 @@ before finishing and submitting. - Progress steps component progression, part 1 + Progress steps component progression, part 1 - Progress steps component progression, part 2 + Progress steps component progression, part 2 @@ -51,7 +60,10 @@ alert](https://ux.redhat.com/elements/alert/){target="_blank"} is displayed to inform them of what they should do. - Progress steps component validation + Progress steps component validation @@ -68,7 +80,10 @@ user **is not able** to go back to review or change anything. - Progress steps component completion + Progress steps component completion @@ -106,7 +121,10 @@ user is in the process will make them feel in control and encourage them to finish the task. - Progress steps component behavior + Progress steps component behavior @@ -117,28 +135,40 @@ The interaction states within both orientations are the same. ### Link - Progress steps component interaction state, link + Progress steps component interaction state, link ### Hover - Progress steps component interaction state, hover + Progress steps component interaction state, hover ### Focus - Progress steps component interaction state, focus + Progress steps component interaction state, focus ### Active - Progress steps component interaction state, active + Progress steps component interaction state, active @@ -149,7 +179,10 @@ and text label in order, from left to right in the horizontal component or from top to bottom in the vertical component. - Progress steps component tab order + Progress steps component tab order @@ -205,7 +238,10 @@ Do not use too many or too few steps, there should be between three and five steps visible. - Progress steps component best practice 1 + Progress steps component best practice 1 @@ -216,7 +252,10 @@ present or if text labels are too long, switch to the vertical orientation instead. - Progress steps component best practice 2 + Progress steps component best practice 2 @@ -227,7 +266,10 @@ proceed to the next step without resolving any errors first nor can they go back to resolve any errors and then continue. - Progress steps component best practice 3 + Progress steps component best practice 3 @@ -238,7 +280,10 @@ used to represent step position or validation if a user is colorblind or uses assistive technologies like a screen reader. - Progress steps component best practice 4 + Progress steps component best practice 4 @@ -248,7 +293,10 @@ Do not use Progress steps as an image carousel without including text labels and other types of content. - Progress steps component best practice 5 + Progress steps component best practice 5 @@ -258,5 +306,8 @@ Do not use Progress steps as Tabs. Progress steps are used for guiding a user through a task by displaying sequential steps and instructional content. - Progress steps component best practice 6 + Progress steps component best practice 6 diff --git a/elements/rh-site-status/docs/00-overview.md b/elements/rh-site-status/docs/00-overview.md index 2f72502931..45a34f9a7e 100644 --- a/elements/rh-site-status/docs/00-overview.md +++ b/elements/rh-site-status/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of a site status element with a green checkmark and the text 'All systems operational' + Image of a site status element with a green checkmark and the text 'All systems operational' diff --git a/elements/rh-site-status/docs/10-style.md b/elements/rh-site-status/docs/10-style.md index b0ac1b456c..e481c137a1 100644 --- a/elements/rh-site-status/docs/10-style.md +++ b/elements/rh-site-status/docs/10-style.md @@ -1,4 +1,4 @@ - @@ -47,7 +35,10 @@ Website status is a combination of an icon and link within a very small card. It
                - Image of a site status element with a green checkmark and the text 'All systems operational' + Image of a site status element with a green checkmark and the text 'All systems operational'
                  @@ -64,13 +55,19 @@ Website status is a combination of an icon and link within a very small card. It Currently, Website status is only available in the dark theme. You may use Website status in the light theme if necessary. If you need a separate light version designed instead, [contact us](https://github.com/RedHat-UX/red-hat-design-system/discussions). -
                  +
                  - Image of a site status element with a green checkmark and the text 'All systems operational on a dark background' + Image of a site status element with a green checkmark and the text 'All systems operational on a dark background' - Image of a site status element with a green checkmark and the text 'All systems operational on a light background' + Image of a site status element with a green checkmark and the text 'All systems operational on a light background'
                  @@ -80,7 +77,10 @@ Currently, Website status is only available in the dark theme. You may use Websi Website status has a fixed height and its width changes depending on the amount of link text. The icon and link are horizontally aligned to the card as well. - Image of a site status element with a green checkmark and the text 'All systems operational' with fixed height, width and horizontal alignment indicators. + Image of a site status element with a green checkmark and the text 'All systems operational' with fixed height, width and horizontal alignment indicators. @@ -89,7 +89,10 @@ Website status has a fixed height and its width changes depending on the amount Website status includes three icons that also indicate the severity of the status. - Three images of site status elements, one with a green checkmark and the text 'All systems operational', the second with a yellow exclamation point and the text 'Partial system outage', and the third with a red exclamation point and the text 'Major system outage'. + Three images of site status elements, one with a green checkmark and the text 'All systems operational', the second with a yellow exclamation point and the text 'Partial system outage', and the third with a red exclamation point and the text 'Major system outage'. @@ -98,15 +101,24 @@ Website status includes three icons that also indicate the severity of the statu Space values remain the same at all viewport sizes. - Image of a site status element with a green checkmark and the text 'All systems operational' with space indicators. + Image of a site status element with a green checkmark and the text 'All systems operational' with space indicators. - Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators. + Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators. - Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators at a small viewport size. + Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with space indicators at a small viewport size. @@ -124,5 +136,8 @@ Space values remain the same at all viewport sizes. Only the link is selectable and it should be underlined in all interaction states. - Three images of a site status element with a green checkmark and the text 'All systems operational' first one displaying the mouse hover state, the second the keyboard state, the third a combination of hover and focus. + Three images of a site status element with a green checkmark and the text 'All systems operational' first one displaying the mouse hover state, the second the keyboard state, the third a combination of hover and focus. diff --git a/elements/rh-site-status/docs/20-guidelines.md b/elements/rh-site-status/docs/20-guidelines.md index 3fdc8a44a9..87f10c6997 100644 --- a/elements/rh-site-status/docs/20-guidelines.md +++ b/elements/rh-site-status/docs/20-guidelines.md @@ -1,22 +1,16 @@ - + - @@ -77,7 +65,10 @@ Website status can be placed higher or lower on a page, it just depends on the t Website status is usually placed in the [Footer](../../footer/) component, but it may be placed somewhere else if it makes sense to do so. - Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element. + Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element. @@ -90,7 +81,10 @@ To avoid confusion, write link text with the same severity as the status icon.
                  - Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'. + Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

                  Do

                  Write link text with the same severity as the status icon and vice versa.

                  @@ -98,7 +92,10 @@ To avoid confusion, write link text with the same severity as the status icon.
                  - Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'. + Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

                  Don't

                  Do not make it confusing to understand what the status or severity is.

                  @@ -109,17 +106,23 @@ To avoid confusion, write link text with the same severity as the status icon. Always include a status icon, it helps communicate severity visually. -
                  +
                  - Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'. + Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

                  Include an icon to make it easier for users to understand.

                   - Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'. + Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

                  Do not remove the status icon.

                   @@ -129,10 +132,13 @@ Always include a status icon, it helps communicate severity visually. Do not write link text that is too long, it will take users longer to read and make the component wider. -
                  +
                  - Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'. + Image of a site status element with a correct usage of a green checkmark icon and the text 'All systems operational'.

                  Do

                  Write link text using as few words as possible.

                  @@ -140,7 +146,10 @@ Do not write link text that is too long, it will take users longer to read and m
                  - Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'. + Image of a site status element with an incorrect usage of an orange red exclamation point icon and the text 'All systems operational'.

                  Don't

                  Do not include unnecessary words or punctuation.

                  diff --git a/elements/rh-site-status/docs/40-accessibility.md b/elements/rh-site-status/docs/40-accessibility.md index 1f6dbf05ae..178e98f9f4 100644 --- a/elements/rh-site-status/docs/40-accessibility.md +++ b/elements/rh-site-status/docs/40-accessibility.md @@ -3,7 +3,10 @@ Users should have the ability to move focus to the Website status link if it is used in the Footer component or anywhere else. - Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with focus indicators. + Image of a site status element with a green checkmark and the text 'All systems operational' in a footer element with focus indicators. diff --git a/elements/rh-skip-link/docs/00-overview.md b/elements/rh-skip-link/docs/00-overview.md index e19530d290..26abc37570 100644 --- a/elements/rh-skip-link/docs/00-overview.md +++ b/elements/rh-skip-link/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of a skip link + Image of a skip link diff --git a/elements/rh-skip-link/docs/10-style.md b/elements/rh-skip-link/docs/10-style.md index 661b219f46..40b781f7e5 100644 --- a/elements/rh-skip-link/docs/10-style.md +++ b/elements/rh-skip-link/docs/10-style.md @@ -1,17 +1,3 @@ - - ## Style A skip link is designed to be easily seen once a user navigates to it. @@ -21,7 +7,10 @@ A skip link is designed to be easily seen once a user navigates to it.
                  - Anatomy image showing calls to action with various annotation numbers + Anatomy image showing calls to action with various annotation numbers
                    @@ -37,13 +26,19 @@ A skip link is designed to be easily seen once a user navigates to it. A skip link appears the same in both light and dark themes. -
                    +
                    - Image of a skip link in a light theme section + Image of a skip link in a light theme section - Image of a skip link in a dark theme section + Image of a skip link in a dark theme section
                    @@ -58,14 +53,20 @@ A skip link’s bottom corners have a border radius of 4px, which matches the bo A skip link should be centered and aligned with the top edge at all viewport sizes. It also overlaps items at the top of the page. - A skip link element at the top overlays the navigation header of redhat.com + A skip link element at the top overlays the navigation header of redhat.com ## Space - A skip link element at the top overlays the navigation header of redhat.com + A skip link element at the top overlays the navigation header of redhat.com @@ -87,14 +88,20 @@ Interaction states are visual representations used to communicate the status of Because a skip link is in focus once it appears on the screen, the default and focus states are the same. The blue, 2px-wide border mimics the focus ring for other elements. - A skip link with blue text and a blue border around three sides + A skip link with blue text and a blue border around three sides ### Hover - A skip link's text is underlined on hover + A skip link's text is underlined on hover @@ -106,5 +113,8 @@ Because a skip link is in focus once it appears on the screen, the default and f - A skip link's text is underlined when it's active + A skip link's text is underlined when it's active - Wireframe of a webpage with one skip link at the top + Wireframe of a webpage with one skip link at the top

                    Use a skip link to help users avoid tabbing through multiple navigation items.

                     - Wireframe of a webpage with skip links at the top of the page and at the top of every tile + Wireframe of a webpage with skip links at the top of the page and at the top of every tile

                    Do not use more than one skip link per page, unless it’s necessary for a very complex page with many repeated elements.

                     @@ -63,14 +69,20 @@ The vast majority of pages will need only one skip link, unless it is a very com
                    - Wireframe of a webpage with arrow pointing from skip link to the first interactive element on the page + Wireframe of a webpage with arrow pointing from skip link to the first interactive element on the page

                    Ensure that users skip only the navigation, or adjust the text of the skip link to give a more accurate description.

                     - Wireframe of a webpage with arrow pointing from skip link to the second interactive element on the page + Wireframe of a webpage with arrow pointing from skip link to the second interactive element on the page

                    Do not allow the skip link to skip content without mentioning it in the skip link.

                     @@ -83,14 +95,20 @@ To prevent the skip link from being visually distracting, hide a skip link until
                    - Wireframe of webpage that has a tile in focus and no visible skip link + Wireframe of webpage that has a tile in focus and no visible skip link

                    Hide the skip link by default, until the user navigates to it.

                     - Wireframe of a webpage that has a tile in focus and a visible skip link + Wireframe of a webpage that has a tile in focus and a visible skip link

                    Do not keep the skip link visible if the user hasn’t navigated to it or if the user has already moved to the main content.

                     diff --git a/elements/rh-skip-link/docs/40-accessibility.md b/elements/rh-skip-link/docs/40-accessibility.md index ecfaed5c41..6d06e73640 100644 --- a/elements/rh-skip-link/docs/40-accessibility.md +++ b/elements/rh-skip-link/docs/40-accessibility.md @@ -3,7 +3,10 @@ Users will interact with the skip link using a keyboard primarily. - Screenshots of navigation with and without skip link showing and keyboard navigation text + Screenshots of navigation with and without skip link showing and keyboard navigation text @@ -38,7 +41,10 @@ Users will interact with the skip link using a keyboard primarily. The skip link should be the first item on a page to receive focus. After the skip link is activated, the first interactive element in the main content area will receive focus next. - Screenshot of navigation and hero of redhat.com with a skip link and arrows showing focus order + Screenshot of navigation and hero of redhat.com with a skip link and arrows showing focus order diff --git a/elements/rh-spinner/docs/00-overview.md b/elements/rh-spinner/docs/00-overview.md index b5eaf666d8..3325617e42 100644 --- a/elements/rh-spinner/docs/00-overview.md +++ b/elements/rh-spinner/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Example of a spinner + Example of a spinner {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-spinner/docs/10-style.md b/elements/rh-spinner/docs/10-style.md index 00fb322767..597d6c2c74 100644 --- a/elements/rh-spinner/docs/10-style.md +++ b/elements/rh-spinner/docs/10-style.md @@ -7,7 +7,10 @@ optional text label.
                    - Anatomy of a spinner with annotations; number 1 is pointing to the track, number 2 is pointing to the indicator, and number 3 is pointing to the optional text label + Anatomy of a spinner with annotations; number 1 is pointing to the track, number 2 is pointing to the indicator, and number 3 is pointing to the optional text label
                      @@ -25,7 +28,10 @@ A spinner comes in large, medium, and small sizes. Each size includes an optional text label on the bottom. - Small size, medium size, and large size spinners with their text labels below + Small size, medium size, and large size spinners with their text labels below @@ -67,14 +73,20 @@ A spinner is available in both light and dark themes. ### Light theme - Light theme spinner + Light theme spinner ### Dark theme - Dark theme spinner + Dark theme spinner @@ -87,7 +99,10 @@ viewport by default. This demonstrates that the whole container is loading rather than one specific area. - Diagram of how a spinner should be horizontally and vertically centered within a container no matter its size or if a text label is included or not + Diagram of how a spinner should be horizontally and vertically centered within a container no matter its size or if a text label is included or not @@ -97,14 +112,20 @@ If a small size spinner is used within a button, it can be positioned to the left of the text as if it were an icon. - Button with a small size spinner icon to the left as if it were an icon + Button with a small size spinner icon to the left as if it were an icon ## Space - Spacing between all spinner sizes and their text labels + Spacing between all spinner sizes and their text labels diff --git a/elements/rh-spinner/docs/20-guidelines.md b/elements/rh-spinner/docs/20-guidelines.md index 79d661f08d..ca9665a26b 100644 --- a/elements/rh-spinner/docs/20-guidelines.md +++ b/elements/rh-spinner/docs/20-guidelines.md @@ -18,7 +18,10 @@ The text label should be as brief and general as possible in order to give users enough time to read it. - Two spinners; one with a short text label, which is acceptable, and one with a very long text label which is not acceptable + Two spinners; one with a short text label, which is acceptable, and one with a very long text label which is not acceptable @@ -50,8 +53,11 @@ occupies, use a spinner size that matches. - If you use the small size without a text label, it should only be used in buttons or other containers of equal size - Spinner usage examples; from top to bottom, an app, a dialog, a card, and a -button showing spinners of various sizes with and without text labels + Spinner usage examples; from top to bottom, an app, a dialog, a card, and a +button showing spinners of various sizes with and without text labels @@ -60,7 +66,10 @@ button showing spinners of various sizes with and without text labels"> A spinner is always oriented above the optional text label, if visible. - Two spinners; one showing the correct orientation and the other showing an incorrect orientation + Two spinners; one showing the correct orientation and the other showing an incorrect orientation @@ -78,7 +87,10 @@ centered helps users understand that the whole area is loading instead of one specific part. - A spinner not horizontally or vertically centered in a container which is incorrect usage + A spinner not horizontally or vertically centered in a container which is incorrect usage @@ -88,7 +100,10 @@ A tooltip should not be cut off by the browser window. Change the orientation if it does. - A small spinner used in a large container which is incorrect usage + A small spinner used in a large container which is incorrect usage @@ -98,5 +113,8 @@ Do not change the orientation, the spinner is always positioned on top of the text label. - Two spinners with different orientations which is incorrect usage + Two spinners with different orientations which is incorrect usage diff --git a/elements/rh-stat/docs/00-overview.md b/elements/rh-stat/docs/00-overview.md index 4b3f7623ea..97775ecb25 100644 --- a/elements/rh-stat/docs/00-overview.md +++ b/elements/rh-stat/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - A vertically aligned stack of elements; includes a small red icon, large red data text showing 80% percent, and two lines of black body text + A vertically aligned stack of elements; includes a small red icon, large red data text showing 80% percent, and two lines of black body text {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-stat/docs/10-style.md b/elements/rh-stat/docs/10-style.md index 30b2e524b4..38efea65ba 100644 --- a/elements/rh-stat/docs/10-style.md +++ b/elements/rh-stat/docs/10-style.md @@ -10,7 +10,10 @@ additional emphasis or context.
                      - Anatomy of a statistic with annotations; number 1 is pointing to an optional icon, number 2 is pointing to optional title text, number 3 is pointing to data text, number 4 is pointing to body text, and number 5 is pointing to an optional call to action + Anatomy of a statistic with annotations; number 1 is pointing to an optional icon, number 2 is pointing to optional title text, number 3 is pointing to data text, number 4 is pointing to body text, and number 5 is pointing to an optional call to action
                        @@ -29,7 +32,10 @@ There are two available sizes and the only difference is the size of some elements. - Default size and Large size statistics both with icons and body text; text under the default size says ‘Default size’ and text under the large size says ‘Large size’ + Default size and Large size statistics both with icons and body text; text under the default size says ‘Default size’ and text under the large size says ‘Large size’ @@ -68,14 +74,20 @@ requirements. ### Light theme - Light theme statistic with a red icon, red data text, and black body text + Light theme statistic with a red icon, red data text, and black body text ### Dark theme - Dark theme statistic with a white icon and white text styles to meet accessibility contrast requirements + Dark theme statistic with a white icon and white text styles to meet accessibility contrast requirements @@ -89,7 +101,10 @@ the left, for example if grouped statistics are used in several rows or if surrounding content is all left aligned. - Statistic with a dotted vertical line through it + Statistic with a dotted vertical line through it @@ -99,7 +114,10 @@ elements are included, the order will change.
                        - Statistic with boxes around each element slot, there are also numbers next to each box arranged 1 to 4 from top to bottom + Statistic with boxes around each element slot, there are also numbers next to each box arranged 1 to 4 from top to bottom
                          @@ -119,7 +137,10 @@ breakpoints. To see space values when statistics are used in a layout, go to the [Guidelines](../guidelines) page. - Default and Large size spacing between all elements + Default and Large size spacing between all elements diff --git a/elements/rh-stat/docs/20-guidelines.md b/elements/rh-stat/docs/20-guidelines.md index 6eb965b96d..36d959df87 100644 --- a/elements/rh-stat/docs/20-guidelines.md +++ b/elements/rh-stat/docs/20-guidelines.md @@ -14,7 +14,10 @@ external source. Doing this increases the credibility of the statistic and better integrates the data with the rest of the page content. - A statistic with a small text footnote underneath + A statistic with a small text footnote underneath @@ -24,7 +27,10 @@ Use an icon to add visual context and emphasis while helping to explain a statistic further. - Two statistics with icons; the left statistic has a fighter jet icon on top whereas the right has a wrench + Two statistics with icons; the left statistic has a fighter jet icon on top whereas the right has a wrench @@ -36,7 +42,10 @@ content strategist to write short data text and body text or use another element instead. - Three statistics with large icons and body text + Three statistics with large icons and body text @@ -103,7 +112,10 @@ sense. - Two statistics, one with title text above the data text and the other with title text below data text + Two statistics, one with title text above the data text and the other with title text below data text @@ -112,7 +124,10 @@ sense. Data text is the number or percent that represents data. - Two statistics with different data text percents + Two statistics with different data text percents @@ -122,7 +137,10 @@ Body text explains data text. A percent or number means nothing without something that explains the rest of the statistic. - Two statistics with different body text examples + Two statistics with different body text examples @@ -133,7 +151,10 @@ If statistics are grouped, it is not mandatory for each statistic to include a call to action. - Statistic with a call to action + Statistic with a call to action @@ -146,11 +167,17 @@ be arranged closer to each other therefore reducing any comfortable spacing around them. - Two statistics with English on top and German on the bottom; the English statistic has two lines of body text whereas the German has three + Two statistics with English on top and German on the bottom; the English statistic has two lines of body text whereas the German has three - Two statistics with English on top and Chinese on the bottom; the English statistic body text is wider whereas the Chinese is thinner + Two statistics with English on top and Chinese on the bottom; the English statistic body text is wider whereas the Chinese is thinner @@ -162,7 +189,10 @@ The minimum number of statistics per row is one and the maximum is four regardless if they are in a container or not. - Four statistics arranged evenly-spaced on a 12-column grid + Four statistics arranged evenly-spaced on a 12-column grid @@ -172,7 +202,10 @@ A statistic can be placed in a card if the body text or other text styles are short enough. Otherwise, keep them on the page to avoid readability issues. - Four statistics placed in cards and arranged evenly-spaced on a 12-column grid + Four statistics placed in cards and arranged evenly-spaced on a 12-column grid @@ -182,7 +215,10 @@ By default, a statistic is always center aligned. However, a statistic may be left aligned if grouped and if the surrounding content is also left aligned. - Three statistics left aligned with vertical dashed lines on the left side of each + Three statistics left aligned with vertical dashed lines on the left side of each @@ -193,7 +229,10 @@ content, but in most situations, it is 32px on large breakpoints. On small breakpoints, the padding is 48px for better vertical rhythm. - Two groups of statistics; one group has 32px of padding with text underneath that says ‘Large breakpoints’, the other group has 48px of padding with text underneath that says ‘Small breakpoints’ + Two groups of statistics; one group has 32px of padding with text underneath that says ‘Large breakpoints’, the other group has 48px of padding with text underneath that says ‘Small breakpoints’ @@ -204,7 +243,10 @@ breakpoints, the padding is 48px for better vertical rhythm. If only one statistic is used, it can span a maximum of six columns. - Statistic spanning less than six columns with a box around the body copy spanning six columns + Statistic spanning less than six columns with a box around the body copy spanning six columns @@ -215,7 +257,10 @@ breakpoints. Text sizes will also be reduced based on the [mobile typography scale](https://ux.redhat.com/foundations/typography/). - Three statistics spanning the width of one column on mobile + Three statistics spanning the width of one column on mobile @@ -226,7 +271,10 @@ typography scale](https://ux.redhat.com/foundations/typography/). Do not duplicate or rearrange any element to create a custom statistic. - Statistic with some elements arranged horizontally and some vertically which is incorrect usage + Statistic with some elements arranged horizontally and some vertically which is incorrect usage @@ -235,7 +283,10 @@ Do not duplicate or rearrange any element to create a custom statistic. Do not use an icon that is unrelated to the rest of the statistic content. - Statistic with a crab icon on top of text which is incorrect usage + Statistic with a crab icon on top of text which is incorrect usage @@ -246,7 +297,10 @@ icon and the others do not, either remove the icon or ensure they all have an icon. - Three statistics with different element combinations with is incorrect usage + Three statistics with different element combinations with is incorrect usage @@ -255,5 +309,8 @@ Do not include too much body text, a statistic should clarify a single data point quickly and with impact, not tell a long story. - Statistic with data text and long lines of body text which is incorrect usage + Statistic with data text and long lines of body text which is incorrect usage diff --git a/elements/rh-stat/docs/40-accessibility.md b/elements/rh-stat/docs/40-accessibility.md index b934691dc0..220621d7aa 100644 --- a/elements/rh-stat/docs/40-accessibility.md +++ b/elements/rh-stat/docs/40-accessibility.md @@ -3,7 +3,10 @@ Only the call to action can receive focus if included. - Statistic keyboard interactions; pressing Tab will focus the call to action if included and pressing Tab again will move focus to the next interactive element + Statistic keyboard interactions; pressing Tab will focus the call to action if included and pressing Tab again will move focus to the next interactive element @@ -33,7 +36,10 @@ Only the call to action can receive focus if included. Only the call to action is selectable if included. - Statistic showing touch target size for call to action if included + Statistic showing touch target size for call to action if included {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-subnav/docs/00-overview.md b/elements/rh-subnav/docs/00-overview.md index c8ea949fe1..f4e87b5ca7 100644 --- a/elements/rh-subnav/docs/00-overview.md +++ b/elements/rh-subnav/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of a subnavigation; a horizontal row of links placed on a light gray bar + Image of a subnavigation; a horizontal row of links placed on a light gray bar diff --git a/elements/rh-subnav/docs/10-style.md b/elements/rh-subnav/docs/10-style.md index 4fb6be2513..0e4c90e409 100644 --- a/elements/rh-subnav/docs/10-style.md +++ b/elements/rh-subnav/docs/10-style.md @@ -8,7 +8,10 @@ except for the active page accent.
                          - Anatomy image showing a subnavigation with various annotation numbers + Anatomy image showing a subnavigation with various annotation numbers
                            @@ -28,7 +31,10 @@ except for the active page accent. A subnavigation is available in the light theme only right now. - Image of light theme desktop and mobile subnavigations + Image of light theme desktop and mobile subnavigations @@ -37,7 +43,10 @@ A subnavigation is available in the light theme only right now. Each link container is the same height as the bar. - Image of desktop and mobile subnavigations with various specs like height, width, and more + Image of desktop and mobile subnavigations with various specs like height, width, and more @@ -49,7 +58,10 @@ Each link container is the same height as the bar. - Image of desktop and mobile subnavigations with spacing values in between + Image of desktop and mobile subnavigations with spacing values in between @@ -71,7 +83,10 @@ Interactive elements include inactive links and overflow buttons. Inactive links and overflow buttons have the same hover state. - Image of light theme hover states + Image of light theme hover states @@ -83,7 +98,10 @@ Inactive links and overflow buttons have the same hover state. - Image of light theme focus states + Image of light theme focus states @@ -95,5 +113,8 @@ Inactive links and overflow buttons have the same hover state. - Image of light theme active states + Image of light theme active states diff --git a/elements/rh-subnav/docs/20-guidelines.md b/elements/rh-subnav/docs/20-guidelines.md index 4638bfe986..cdd8794e47 100644 --- a/elements/rh-subnav/docs/20-guidelines.md +++ b/elements/rh-subnav/docs/20-guidelines.md @@ -25,7 +25,10 @@ links. If your content requires a structure with more levels, use another navigation. - Image of the primary navigation, secondary navigation, and subnavigation being compared + Image of the primary navigation, secondary navigation, and subnavigation being compared @@ -35,7 +38,10 @@ To reduce cognitive load and a cluttered user interface, avoid using more than four or five links. - Image of a subnavigation with five short link text labels + Image of a subnavigation with five short link text labels @@ -45,7 +51,10 @@ An inset is used to ensure consistent alignment and padding between headings, text labels, and overflow buttons. - Image of three desktop and one mobile subnavigations with various inset values + Image of three desktop and one mobile subnavigations with various inset values @@ -58,7 +67,10 @@ exceed more than two or three short words. If they do, work with a content strategist to shorten them. - Image of two subnavigations; one with short text labels and one with long text labels + Image of two subnavigations; one with short text labels and one with long text labels @@ -91,7 +103,10 @@ A subnavigation should have four or five links maximum. Text labels should be sh A subnavigation can be placed below the primary navigation or a heading. - Image of subnavigations positioned below the primary navigation and a heading + Image of subnavigations positioned below the primary navigation and a heading @@ -103,7 +118,10 @@ When a user is viewing a page, a red bottom border is visible. It will move as a user moves from page to page. - Image of a desktip and mobile subnavigation showing with the current page indicator visible + Image of a desktip and mobile subnavigation showing with the current page indicator visible @@ -118,14 +136,20 @@ positioned under the primary navigation or heading again. ### With primary navigation - Image of a subnavigation and how it behaves when scrolling under the primary navigation + Image of a subnavigation and how it behaves when scrolling under the primary navigation ### With heading - Image of a subnavigation and how it behaves when scrolling under a heading + Image of a subnavigation and how it behaves when scrolling under a heading @@ -136,7 +160,10 @@ buttons with chevron icons are added to each side so users can horizontally scroll to reveal hidden links. - Image of a desktop subnavigation with no overflow buttons and two mobile subnavigations with overflow buttons visible + Image of a desktop subnavigation with no overflow buttons and two mobile subnavigations with overflow buttons visible @@ -148,7 +175,10 @@ cut off is selected, the list of links shifts so the selected link is in full view. - Image of selecting a cut off link and the list of links shifting to reveal the selected link in full view + Image of selecting a cut off link and the list of links shifting to reveal the selected link in full view @@ -162,13 +192,19 @@ labels. ### Large breakpoints - Image of subnavigations on large breakpoints + Image of subnavigations on large breakpoints ### Small breakpoints - Image of subnavigations on small breakpoints + Image of subnavigations on small breakpoints @@ -179,7 +215,10 @@ labels. Do not position the subnavigation above the primary navigation. - Image of a subnavigation above the primary navigation, which is incorrect usage + Image of a subnavigation above the primary navigation, which is incorrect usage @@ -188,7 +227,10 @@ Do not position the subnavigation above the primary navigation. There should be at least two links minimum. - Image of a subnavigation with only one link, which is incorrect usage + Image of a subnavigation with only one link, which is incorrect usage @@ -198,7 +240,10 @@ Be careful about displaying too many links, some of them will become hidden even at large breakpoints. - Image of a subnavigation with seven links and overflow buttons, which is incorrect usage + Image of a subnavigation with seven links and overflow buttons, which is incorrect usage @@ -207,7 +252,10 @@ at large breakpoints. Do not add extra spacing or stretch the width of links. - Image of a subnavigation with stretched links, which is incorrect usage + Image of a subnavigation with stretched links, which is incorrect usage @@ -216,5 +264,8 @@ Do not add extra spacing or stretch the width of links. Overflow buttons should not be visible if all links are visible. - Image of a subnavigation with only two links and overflow buttons, which is incorrect usage + Image of a subnavigation with only two links and overflow buttons, which is incorrect usage diff --git a/elements/rh-subnav/docs/40-accessibility.md b/elements/rh-subnav/docs/40-accessibility.md index 0eb920bc2f..c889b89b6e 100644 --- a/elements/rh-subnav/docs/40-accessibility.md +++ b/elements/rh-subnav/docs/40-accessibility.md @@ -9,7 +9,10 @@ focus will directed users to a new page. - Image of desktop and mobile subnavigations with diagrams of what happens when Tab keys are pressed + Image of desktop and mobile subnavigations with diagrams of what happens when Tab keys are pressed @@ -47,7 +50,10 @@ move horizontally within the list of links or be moved to another interactive element. - Image of desktop and mobile subnavigations showing the focus order from left to right + Image of desktop and mobile subnavigations showing the focus order from left to right @@ -56,7 +62,10 @@ element. Links are adequately spaced for optimal touch targets. - Image of desktop and mobile subnavigations showing adequate touch target spacing + Image of desktop and mobile subnavigations showing adequate touch target spacing {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-surface/docs/00-overview.md b/elements/rh-surface/docs/00-overview.md index d51f907844..7a4b69947d 100644 --- a/elements/rh-surface/docs/00-overview.md +++ b/elements/rh-surface/docs/00-overview.md @@ -1,29 +1,15 @@ - - ## Overview {{ tagName | getElementDescription }} - - -
                            + +

                            Surface is used to provide a theme to children

                             @@ -35,7 +21,6 @@ rh-surface {
                            - - - ## Guidelines @@ -31,7 +11,7 @@ Surface elements are used only when another container like card or blockquote wo Avoid using surface inside of other containers. Use the appropriate `color-palette` on the container instead -
                            +

                            ⚠️ Avoid

                            diff --git a/elements/rh-switch/docs/00-overview.md b/elements/rh-switch/docs/00-overview.md index f70aae6cbe..a4af591cf4 100644 --- a/elements/rh-switch/docs/00-overview.md +++ b/elements/rh-switch/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - example of switch that's on + example of switch that's on {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-switch/docs/10-style.md b/elements/rh-switch/docs/10-style.md index 467e299cbb..7ce82a0348 100644 --- a/elements/rh-switch/docs/10-style.md +++ b/elements/rh-switch/docs/10-style.md @@ -7,7 +7,10 @@ A Switch resembles a slider and includes a status message. When activated, the t
                            - with numbers labeling the track, handle, and status message + with numbers labeling the track, handle, and status message
                              @@ -25,11 +28,17 @@ A Switch is available in both light and dark themes.
                              - Light theme switch with blue track, white handle, and black text + Light theme switch with blue track, white handle, and black text - Dark theme switch with light blue track, black handle, and white text + Dark theme switch with light blue track, black handle, and white text
                              @@ -39,11 +48,17 @@ A Switch is the same height as the status message and both are horizontally alig
                              - Switch and status message are 24px tall. Switch is 40px wide. + Switch and status message are 24px tall. Switch is 40px wide. - Horizontally aligned switch and status message + Horizontally aligned switch and status message
                              @@ -53,7 +68,10 @@ A Switch is the same height as the status message and both are horizontally alig A status message can be positioned to the right or left of a Switch. - One switch with status message on the left and another with status message on the right + One switch with status message on the left and another with status message on the right @@ -62,11 +80,17 @@ A status message can be positioned to the right or left of a Switch. Space values remain the same at all viewport sizes. - 16px spacer between the switch and status message + 16px spacer between the switch and status message - 24px spacer between stacked switches with status messages + 24px spacer between stacked switches with status messages @@ -81,7 +105,10 @@ A Switch and the status message cx count as the same selectable object.
                              - Switches that are on, off, disabled, hovered, active, and in focus + Switches that are on, off, disabled, hovered, active, and in focus
                                diff --git a/elements/rh-switch/docs/20-guidelines.md b/elements/rh-switch/docs/20-guidelines.md index c122d57a9c..a232604196 100644 --- a/elements/rh-switch/docs/20-guidelines.md +++ b/elements/rh-switch/docs/20-guidelines.md @@ -69,7 +69,10 @@ A Switch displays a state through different methods and locations. - The Switch status message is used with a check icon to add clarity if necessary - four variants of switch + four variants of switch @@ -127,14 +130,20 @@ The status message and form label should be short and direct, not neutral or amb
                                - Magenta button, brand red default call to action, green tooltip, and dark orange switch + Magenta button, brand red default call to action, green tooltip, and dark orange switch

                                Ensure the message is clear when a Switch is toggled to the On or Off position and that the form label explains the switch's purpose.

                                 - Magenta button, brand red default call to action, green tooltip, and dark orange switch + Magenta button, brand red default call to action, green tooltip, and dark orange switch

                                Do not use a status message that does not make the switch state clear, especially if the form label is hidden.

                                 @@ -174,7 +183,10 @@ The recommended maximum character count is listed below and includes spaces. Use a stack of Switches for situations where multiple independent options need to be turned on or off. - four switches, half of which are on, stacked in a column + four switches, half of which are on, stacked in a column @@ -183,7 +195,10 @@ Use a stack of Switches for situations where multiple independent options need t A Switch is successfully toggled when the handle slides to the other side of the track and the status message changes. When a user toggles a Switch, the effects should start immediately without needing to save. If immediate results are not achievable, another element should be used instead (see table above in Usage section). - One switch that is on, next to one that is off + One switch that is on, next to one that is off @@ -196,14 +211,20 @@ To avoid confusion as to what a Switch will do, always include some kind of stat
                                - Switches with Bluetooth as a form label and/or a status message + Switches with Bluetooth as a form label and/or a status message

                                Ensure the message is clear when a Switch is toggled to the On or Off position and that the form label explains the switch's purpose.

                                 - Two switches without a form label or status message + Two switches without a form label or status message

                                Do not make it unknown to users what a Switch will do when toggled.

                                 @@ -238,15 +259,21 @@ Switches can be used in a list to toggle multiple independent options.
                                - - Four switches stacked vertically with half of them turned on + + Four switches stacked vertically with half of them turned on

                                Use Switches in a list only if the effects from toggling each Switch are immediate.

                                 - - Four switches stacked vertically with a save button below them + + Four switches stacked vertically with a save button below them

                                Do not use Switches in a list if a user has to save to see the effects

                                 diff --git a/elements/rh-switch/docs/40-accessibility.md b/elements/rh-switch/docs/40-accessibility.md index 15510dd442..cd39b57c51 100644 --- a/elements/rh-switch/docs/40-accessibility.md +++ b/elements/rh-switch/docs/40-accessibility.md @@ -3,7 +3,10 @@ Users should have the ability to move focus to a Switch and toggle it on or off using their keyboard. - Diagram of switch with text and arrows that show what can be controlled by keyboard + Diagram of switch with text and arrows that show what can be controlled by keyboard @@ -32,7 +35,10 @@ Users should have the ability to move focus to a Switch and toggle it on or off A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. If Switches are stacked, focus lands on each as it moves from top to bottom. Each Switch should have the ability to be toggled. - Diagram with four switches and numbers 1 to 4 indicating focus order + Diagram with four switches and numbers 1 to 4 indicating focus order ## Touch targets @@ -40,7 +46,10 @@ A logical focus order helps keyboard users operate our websites. Elements need t Grouped Switches are adequately spaced for optimal touch targets. - group of four switches and red circles with low opacity over each switch + group of four switches and red circles with low opacity over each switch ## Using form labels diff --git a/elements/rh-table/docs/00-overview.md b/elements/rh-table/docs/00-overview.md index 09dac524e5..733a2db4de 100644 --- a/elements/rh-table/docs/00-overview.md +++ b/elements/rh-table/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of table with four columns and three row + Image of table with four columns and three row diff --git a/elements/rh-table/docs/10-style.md b/elements/rh-table/docs/10-style.md index 39b950a539..88039cd336 100644 --- a/elements/rh-table/docs/10-style.md +++ b/elements/rh-table/docs/10-style.md @@ -4,7 +4,10 @@ Use a table to organize and display data efficiently in a grid with columns and
                                - Image of table with numbers next to various parts + Image of table with numbers next to various parts
                                  @@ -25,7 +28,10 @@ Use a table to organize and display data efficiently in a grid with columns and Column and row titles should be a few words that describe the data in that column or row. - Image of various tables with no titles, column titles, row titles, and both + Image of various tables with no titles, column titles, row titles, and both @@ -35,7 +41,10 @@ The table title should make it clear to a user what the data is and what purpose - Image of table with a title on top and a caption underneath + Image of table with a title on top and a caption underneath @@ -46,14 +55,20 @@ A table is available in both light and dark themes. ### Light theme - Light theme table with black text on white surface + Light theme table with black text on white surface ### Dark theme - Dark theme table with white text on black surface + Dark theme table with white text on black surface @@ -62,7 +77,10 @@ A table is available in both light and dark themes. A scrollbar is visible if content exceeds the width or height of a table. Content can scroll horizontally, vertically, or both. - Image of various tables with a scrollbar on the right, on the bottom, and both + Image of various tables with a scrollbar on the right, on the bottom, and both @@ -71,7 +89,10 @@ A scrollbar is visible if content exceeds the width or height of a table. Conten A table has equal spacing within columns, rows, and in between divider lines. The same spacing is also maintained across large and small viewport sizes. - Image of table with spacers in between elements + Image of table with spacers in between elements @@ -93,19 +114,28 @@ On hover, cell rows and columns are highlighted with a semitransparent backgroun In light theme, a row is highlighted in light gray on white surface colors and white on light gray surface colors. The column highlight remains light blue. - Light theme tables with hover effects on a white surface + Light theme tables with hover effects on a white surface - Light theme tables with hover effects on a light gray surface + Light theme tables with hover effects on a light gray surface On all dark theme surface colors, the row highlight is white, and the column highlight uses a dark blue. - Dark theme tables with hover effects on a black surface + Dark theme tables with hover effects on a black surface @@ -117,9 +147,15 @@ On all dark theme surface colors, the row highlight is white, and the column hig - Light theme table cell in focus state + Light theme table cell in focus state - Dark theme table cell in focus state + Dark theme table cell in focus state diff --git a/elements/rh-table/docs/20-guidelines.md b/elements/rh-table/docs/20-guidelines.md index 6f9faf6007..65a56a6ade 100644 --- a/elements/rh-table/docs/20-guidelines.md +++ b/elements/rh-table/docs/20-guidelines.md @@ -7,7 +7,10 @@ A table is a set of data that can be easily scanned and compared. Each row in a There is no maximum number of columns or rows. To reduce cognitive load and a cluttered user interface, set a `max-width` or `max-height` after five or six of each. - Image of table with a section of columns and rows highlighted + Image of table with a section of columns and rows highlighted @@ -16,7 +19,10 @@ There is no maximum number of columns or rows. To reduce cognitive load and a cl In some edge cases, table rows can have double padding if there are more element types than just text. - Image of two tables, one with default vertical padding and the other one with double vertical padding + Image of two tables, one with default vertical padding and the other one with double vertical padding @@ -27,7 +33,10 @@ In some edge cases, table rows can have double padding if there are more element Titles should be concise, scannable, and descriptive of content in the column or row. Header labels should have two or three words maximum. If more words are included, the label might break to a second line. - Image of two tables with examples of short and long column and row titles + Image of two tables with examples of short and long column and row titles @@ -71,8 +80,11 @@ In general, header labels should be as short as possible. However, if columns ha A table should be the same width as nearby blocks of content on the page. - - Image of examples of placeholder content and a table having the same width, one is wide and one is narrow + + Image of examples of placeholder content and a table having the same width, one is wide and one is narrow ### Scrolling @@ -80,7 +92,10 @@ A table should be the same width as nearby blocks of content on the page. A table will scroll horizontally or vertically if content exceeds the max-width or max-height. - Image of two tables, one with no scrolling and the other with scrolling columns and rows + Image of two tables, one with no scrolling and the other with scrolling columns and rows @@ -89,7 +104,10 @@ A table will scroll horizontally or vertically if content exceeds the max-width Logos can be used in cells along with text if necessary. - Image of table with logos and links among text + Image of table with logos and links among text @@ -104,7 +122,10 @@ Columns can be sorted in ascending or descending order. Sorting controls are loc - Sorted down (arrow pointing down) - Image of tables with various sorting options + Image of tables with various sorting options @@ -113,14 +134,20 @@ Columns can be sorted in ascending or descending order. Sorting controls are loc ### Large viewport sizes - Image of table on large viewport sizes + Image of table on large viewport sizes ### Small viewport sizes - Image of table on small viewport sizes + Image of table on small viewport sizes @@ -131,7 +158,10 @@ Columns can be sorted in ascending or descending order. Sorting controls are loc A table should display at least two columns. - Image of table with one column which is incorrect usage + Image of table with one column which is incorrect usage @@ -140,7 +170,10 @@ A table should display at least two columns. In some edge cases, a table can have large cell height if there are more element types than just text. - Image of table with lots of vertical padding which is incorrect usage + Image of table with lots of vertical padding which is incorrect usage @@ -149,5 +182,8 @@ In some edge cases, a table can have large cell height if there are more element Do not use the small viewport size table on large viewports. - Image of small viewport table used on a large viewport which is incorrect usage + Image of small viewport table used on a large viewport which is incorrect usage diff --git a/elements/rh-table/docs/40-accessibility.md b/elements/rh-table/docs/40-accessibility.md index bcc95c336e..b25ae06140 100644 --- a/elements/rh-table/docs/40-accessibility.md +++ b/elements/rh-table/docs/40-accessibility.md @@ -65,7 +65,10 @@ Since tables are inherently complex HTML structures, they can create barriers fo If a table is in a container that can receive keyboard focus (e.g., with a `tabindex="0"` attribute), then a user can place focus on the container and scroll the table horizontally or vertically using the arrow keys. - Image of table with scrollbars and purple buttons showing keyboard navigation + Image of table with scrollbars and purple buttons showing keyboard navigation @@ -117,7 +120,10 @@ If a table is in a container that can receive keyboard focus (e.g., with a `tabi A logical focus order helps keyboard users operate our websites and apps. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. Focus within a table moves from top to bottom and left to right. - Image of table with links, focus indicators, and numbers showing the focus order + Image of table with links, focus indicators, and numbers showing the focus order @@ -126,7 +132,10 @@ A logical focus order helps keyboard users operate our websites and apps. Elemen Each cell includes enough spacing for selecting interactive elements. - Image of table with links and focus indicators showing touch target size + Image of table with links and focus indicators showing touch target size diff --git a/elements/rh-tabs/docs/00-overview.md b/elements/rh-tabs/docs/00-overview.md index ae6a105d64..16831fc9ed 100644 --- a/elements/rh-tabs/docs/00-overview.md +++ b/elements/rh-tabs/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Image of open tabs, box tabs, and tabs with overflow buttons + Image of open tabs, box tabs, and tabs with overflow buttons diff --git a/elements/rh-tabs/docs/10-style.md b/elements/rh-tabs/docs/10-style.md index 82b070d73e..ecdd991c58 100644 --- a/elements/rh-tabs/docs/10-style.md +++ b/elements/rh-tabs/docs/10-style.md @@ -7,7 +7,10 @@ Tabs are used to group related content allowing users to navigate a view without
                                  - Image of tabs anatomy showing horizontal and vertical open tabs and box tabs with lots of annotations + Image of tabs anatomy showing horizontal and vertical open tabs and box tabs with lots of annotations
                                    @@ -28,7 +31,7 @@ Tabs are used to group related content allowing users to navigate a view without There are two available variants. Open tabs has a more understated style whereas Box tabs has a more traditional style. - Image of open tabs on top and box tabs below + Image of open tabs on top and box tabs below @@ -37,7 +40,10 @@ There are two available variants. Open tabs has a more understated style whereas There are two available orientations and the only difference is padding. - Image of horizontal, vertical, and tabs with overflow buttons showing padding spacers + Image of horizontal, vertical, and tabs with overflow buttons showing padding spacers @@ -49,7 +55,10 @@ Both variants and orientations are available in both light and dark themes. ### Light theme - Image of light theme tabs + Image of light theme tabs @@ -109,7 +118,10 @@ Both variants and orientations are available in both light and dark themes. ### Dark theme - Image of dark theme tabs + Image of dark theme tabs @@ -171,7 +183,10 @@ Both variants and orientations are available in both light and dark themes. The panel for both orientations of tabs does not have a maximum height and should not scroll. - Image of horizontal and vertical tabs construction; several examples showing details like alignment, height, width, and more + Image of horizontal and vertical tabs construction; several examples showing details like alignment, height, width, and more @@ -180,7 +195,10 @@ The panel for both orientations of tabs does not have a maximum height and shoul Overflow buttons are containers with chevron icons that are added to tabs on small breakpoints. - Image of horizontal and vertical tabs with overflow buttons showing padding spacers + Image of horizontal and vertical tabs with overflow buttons showing padding spacers @@ -189,11 +207,17 @@ Overflow buttons are containers with chevron icons that are added to tabs on sma Box tabs are separated by a 1px divider. - Image of open tabs spacing for all sizes and orientations + Image of open tabs spacing for all sizes and orientations - Image of box tabs spacing for all sizes and orientations + Image of box tabs spacing for all sizes and orientations @@ -211,22 +235,34 @@ Interactive elements include inactive tabs and overflow buttons. Inactive tabs and overflow buttons have the same hover state. - Image of light theme open tabs hover states + Image of light theme open tabs hover states - Image of dark theme open tabs hover states + Image of dark theme open tabs hover states ### Hover - Box tabs - Image of light theme box tabs hover states + Image of light theme box tabs hover states - Image of dark theme box tabs hover states + Image of dark theme box tabs hover states @@ -262,11 +298,17 @@ Inactive tabs and overflow buttons have the same hover state. - Image of light theme open tabs focus states + Image of light theme open tabs focus states - Image of dark theme open tabs focus states + Image of dark theme open tabs focus states @@ -278,11 +320,17 @@ Inactive tabs and overflow buttons have the same hover state. - Image of light theme box tabs focus states + Image of light theme box tabs focus states - Image of dark theme box tabs focus states + Image of dark theme box tabs focus states @@ -312,11 +360,17 @@ Inactive tabs and overflow buttons have the same hover state. - Image of light theme open tabs active states + Image of light theme open tabs active states - Image of dark theme open tabs active states + Image of dark theme open tabs active states @@ -328,11 +382,17 @@ Inactive tabs and overflow buttons have the same hover state. - Image of light theme box tabs active states + Image of light theme box tabs active states - Image of dark theme box tabs active states + Image of dark theme box tabs active states diff --git a/elements/rh-tabs/docs/20-guidelines.md b/elements/rh-tabs/docs/20-guidelines.md index 641bd2be78..574caf27d1 100644 --- a/elements/rh-tabs/docs/20-guidelines.md +++ b/elements/rh-tabs/docs/20-guidelines.md @@ -13,7 +13,10 @@ Use tabs to organize lots of information into logical sections. Consider using a Tabs allow users to click through content one section at a time whereas an accordion allows users to view multiple sections of content simultaneously. - Image of tabs on top and an accordion below with two panels expanded + Image of tabs on top and an accordion below with two panels expanded @@ -22,7 +25,10 @@ Tabs allow users to click through content one section at a time whereas an accor To reduce cognitive load and a cluttered user interface, avoid using more than three or four tabs. - Image of open tabs with three tabs on top and box tabs with three tabs below + Image of open tabs with three tabs on top and box tabs with three tabs below @@ -33,7 +39,10 @@ When choosing one variation over the other, consider where it is being used. If Box tabs - use if your design includes a lot of boxes or you want to maintain the classic tabs look and feel - Image of open tabs on top and box tabs below + Image of open tabs on top and box tabs below @@ -44,7 +53,10 @@ When choosing one orientation over the other, consider the content in the panel, - Vertical tabs are placed on the left side of a container and offer users a left-to-right reading experience - Image of horizontal tabs on top and vertical tabs below + Image of horizontal tabs on top and vertical tabs below @@ -53,7 +65,10 @@ When choosing one orientation over the other, consider the content in the panel, If using horizontal tabs, the default orientation is left aligned, but center aligned is also an option. - Image of open tabs with left and center alignment and box tabs with left and center alignment + Image of open tabs with left and center alignment and box tabs with left and center alignment @@ -67,15 +82,24 @@ An inset is used to ensure consistent alignment and padding between text labels, - Image of open tabs showing detailed inset specs + Image of open tabs showing detailed inset specs - Image of box tabs showing detailed inset specs + Image of box tabs showing detailed inset specs - Image of vertical tabs showing detailed inset specs + Image of vertical tabs showing detailed inset specs Certain content layouts may require removing the inset. While this is not a default style, it is possible with custom CSS. @@ -84,8 +108,11 @@ Certain content layouts may require removing the inset. While this is not a defa In certain edge cases, logos can be used instead of text labels. - - Image of open tabs with small logos in place of text labels + + Image of open tabs with small logos in place of text labels @@ -99,15 +126,24 @@ The panel is below or to the right of tabs. Use this area to place other element - Image of open tabs with a text block and a card + Image of open tabs with a text block and a card - Image of open tabs with a title and a wide card + Image of open tabs with a title and a wide card - Image of open tabs with a text block and a blockquote + Image of open tabs with a text block and a blockquote @@ -118,7 +154,10 @@ The panel is below or to the right of tabs. Use this area to place other element Text labels should be concise, scannable, and descriptive of content in the panel. They should not exceed more than two or three short words. If they do, work with a content strategist to shorten them. - Image of open tabs with examples of adequate and long text labels + Image of open tabs with examples of adequate and long text labels @@ -153,7 +192,10 @@ Text labels should be short but descriptive. The divider line can be set to any width or be the same width as the list of tabs. - Image of open tabs with a stretched divider line on top and box tabs with a divider line constrained to the width of text labels below + Image of open tabs with a stretched divider line on top and box tabs with a divider line constrained to the width of text labels below @@ -162,7 +204,10 @@ The divider line can be set to any width or be the same width as the list of tab The divider line will become taller if the height of content in the panel exceeds the height of vertical tabs. - Image of vertical tabs with a short amount of content in the panel on top and vertical tabs with a long amount of content in the panel below + Image of vertical tabs with a short amount of content in the panel on top and vertical tabs with a long amount of content in the panel below @@ -171,7 +216,10 @@ The divider line will become taller if the height of content in the panel exceed Tabs can be used in a card if the layout is wide enough and there are fewer tabs. - Image of open tabs in a card with only two tabs + Image of open tabs in a card with only two tabs @@ -187,7 +235,10 @@ If the number of tabs exceeds the container width or breakpoint, overflow button - Image of open tabs at various widths showing overflow buttons on top and box tabs at various widths showing overflow buttons below + Image of open tabs at various widths showing overflow buttons on top and box tabs at various widths showing overflow buttons below @@ -196,7 +247,10 @@ If the number of tabs exceeds the container width or breakpoint, overflow button When the first tab is active, the left overflow button is disabled. When the last tab is active, the right overflow button is disabled. When a tab that is cut off is selected, the list of tabs shifts so the selected tab is in full view. - Image of selecting a cut off tab and the list of tabs shifting to reveal the selected tab in full view + Image of selecting a cut off tab and the list of tabs shifting to reveal the selected tab in full view @@ -205,7 +259,10 @@ When the first tab is active, the left overflow button is disabled. When the las ### Large breakpoints - Image of horizontal and vertical tabs on desktop and tablet breakpoints + Image of horizontal and vertical tabs on desktop and tablet breakpoints @@ -214,7 +271,10 @@ When the first tab is active, the left overflow button is disabled. When the las Vertical tabs switch to horizontal tabs with overflow buttons on small breakpoints. - Image of tabs with overflow buttons on small breakpoints + Image of tabs with overflow buttons on small breakpoints @@ -225,7 +285,10 @@ Vertical tabs switch to horizontal tabs with overflow buttons on small breakpoin There should be at least two tabs minimum. - Image of horizontal open and box tabs with one tab each which is incorrect usage + Image of horizontal open and box tabs with one tab each which is incorrect usage @@ -234,7 +297,10 @@ There should be at least two tabs minimum. Be careful about displaying too many tabs, some of them will become hidden even at large breakpoints. - Image of horizontal tabs with five tabs and overflow buttons which is incorrect usage + Image of horizontal tabs with five tabs and overflow buttons which is incorrect usage @@ -243,7 +309,10 @@ Be careful about displaying too many tabs, some of them will become hidden even Do not add extra spacing or stretch the width of tabs. - Image of horizontal tabs with three tabs that are stretched which is incorrect usage + Image of horizontal tabs with three tabs that are stretched which is incorrect usage @@ -252,5 +321,8 @@ Do not add extra spacing or stretch the width of tabs. Overflow buttons should not be visible if all tabs are visible. - Image of horizontal tabs with three visible tabs and overflow buttons which is incorrect usage + Image of horizontal tabs with three visible tabs and overflow buttons which is incorrect usage diff --git a/elements/rh-tabs/docs/40-accessibility.md b/elements/rh-tabs/docs/40-accessibility.md index 39ffe08494..1e83f6660b 100644 --- a/elements/rh-tabs/docs/40-accessibility.md +++ b/elements/rh-tabs/docs/40-accessibility.md @@ -8,7 +8,10 @@ Each tab is a focus stop. Pressing the Arrow keys moves the focus a - Image of horizontal tabs with diagrams of what happens when Arrow or Tab keys are pressed + Image of horizontal tabs with diagrams of what happens when Arrow or Tab keys are pressed @@ -54,7 +57,10 @@ Each tab is a focus stop. Pressing the Arrow keys moves the focus a A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. For both sizes and orientations, the focus order is from left to right and top to bottom. Disabled buttons are not included in the focus order. - Image of horizontal, vertical, and tabs with overflow buttons showing the focus order from left to right and top to bottom + Image of horizontal, vertical, and tabs with overflow buttons showing the focus order from left to right and top to bottom @@ -63,7 +69,10 @@ A logical focus order helps keyboard users operate our websites. Elements need t Tabs are adequately spaced for optimal touch targets. - Image of open, box, and tabs with overflow buttons showing adequate touch target spacing + Image of open, box, and tabs with overflow buttons showing adequate touch target spacing diff --git a/elements/rh-tag/docs/00-overview.md b/elements/rh-tag/docs/00-overview.md index 74b1dc9738..14d75e045d 100644 --- a/elements/rh-tag/docs/00-overview.md +++ b/elements/rh-tag/docs/00-overview.md @@ -4,7 +4,9 @@ A row of tags, a tag with the content: Warning that has a filled yellow background and a brighter yellow border and a triangle warning sign icon, a tag with the content: Signed, with a white background and green border, a tag with the content: Red Hat Openshift with a blue background and brighter blue border, and a tag with the content: Critical Error with a white background and redborder and exclamation mark icon. + alt="A row of tags, a tag with the content: Warning that has a filled yellow background and a brighter yellow border and a triangle warning sign icon, a tag with the content: Signed, with a white background and green border, a tag with the content: Red Hat Openshift with a blue background and brighter blue border, and a tag with the content: Critical Error with a white background and redborder and exclamation mark icon. " + width="420" + height="29"> {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-tag/docs/10-style.md b/elements/rh-tag/docs/10-style.md index 8e1c8133db..5c9f6e7e1b 100644 --- a/elements/rh-tag/docs/10-style.md +++ b/elements/rh-tag/docs/10-style.md @@ -9,7 +9,9 @@ icon.
                                    Image of 4 tags, 3 of which are annotated with anatomy features; annotation number 1 is pointing to the Text, annotation number 2 is pointing to the Decorative icon, and annotation number 3 is pointing to the Linked text of a Linked Tag + alt="Image of 4 tags, 3 of which are annotated with anatomy features; annotation number 1 is pointing to the Text, annotation number 2 is pointing to the Decorative icon, and annotation number 3 is pointing to the Linked text of a Linked Tag" + width="311" + height="59">
                                      @@ -28,7 +30,9 @@ There are three available tag styles: `Filled`, `Outlined`, and `Desaturated`. Image of 3 tags, a filled variant with a red background and red border, an outlined variant with a white background and red border, and a desaturated variant with a white background and dark grey border + alt="Image of 3 tags, a filled variant with a red background and red border, an outlined variant with a white background and red border, and a desaturated variant with a white background and dark grey border" + width="231" + height="29"> ### Color @@ -38,7 +42,9 @@ for both the border and text. Image of a collection of all the variations of tag, 9 filled, 9 outlined, and 9 desaturated + alt="Image of a collection of all the variations of tag, 9 filled, 9 outlined, and 9 desaturated" + width="558" + height="151"> ### Size @@ -48,7 +54,9 @@ There are two available tag sizes. Each style and color has `Default` and Image of a collection of all the variations of tag, 2 filled one normal sized and one compact, 2 outlined one normal sized and one compact and 2 desaturated one normal sized and one compact + alt="Image of a collection of all the variations of tag, 2 filled one normal sized and one compact, 2 outlined one normal sized and one compact and 2 desaturated one normal sized and one compact" + width="539" + height="29"> @@ -71,7 +79,9 @@ Each tag style, color, and size includes an optional decorative icon. Image of a collection of the variations of tag, 2 filled one normal sized and one compact with a check mark icon, 2 outlined one normal sized and one compact with a check mark icon, and 2 desaturated one normal sized and one compact with a check mark icon + alt="Image of a collection of the variations of tag, 2 filled one normal sized and one compact with a check mark icon, 2 outlined one normal sized and one compact with a check mark icon, and 2 desaturated one normal sized and one compact with a check mark icon" + width="614" + height="29"> ### Interactivity @@ -80,7 +90,9 @@ Each tag style, color, and size can be text only or linked. Image of a collection tags, 3 rows of 4 pairs of icons each pair contains a tag that is normal size and compact. 2nd and 4th column contains a padlock icon. 3rd and 4th column contain links. First row are all filled, second row is outlined variants, and third row is desaturated. + alt="Image of a collection tags, 3 rows of 4 pairs of icons each pair contains a tag that is normal size and compact. 2nd and 4th column contains a padlock icon. 3rd and 4th column contain links. First row are all filled, second row is outlined variants, and third row is desaturated." + width="760" + height="151"> ## Theme @@ -91,14 +103,18 @@ Each tag style, color, and size is available in both light and dark themes. Image of a collection light theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size. + alt="Image of a collection light theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size." + width="738" + height="253"> ### Dark theme Image of a collection dark theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size. + alt="Image of a collection dark theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size." + width="738" + height="253"> @@ -108,7 +124,9 @@ Tags have 8px of space in between each other in a row or when stacked. Image of the tags with spacer blocks displayed as annotations + alt="Image of the tags with spacer blocks displayed as annotations" + width="663" + height="214"> @@ -129,7 +147,9 @@ The tag border changes to `--rh-border-width-md` or `2px` on hover. Image of a collection of tags, 4 rows, odd rows normal sized, even rows compact, all tags contain links showing hover state with with bigger border. First column of tag are filled, second are outlined and third are desaturated. Last two rows also contain timer icons. + alt="Image of a collection of tags, 4 rows, odd rows normal sized, even rows compact, all tags contain links showing hover state with with bigger border. First column of tag are filled, second are outlined and third are desaturated. Last two rows also contain timer icons." + width="555" + height="264"> ### Focus and Active @@ -138,5 +158,7 @@ A focus ring wraps text or the icon and text in both focus and active states. Th Image of a collection of tags, 4 rows, odd rows are normal sized, even rows are compact, all tags contain links. Each tag is displaying focus style with a focus outline and the bigger border included in the hover state. First column of tags are filled, second are outlined and third are desaturated. Last two rows also contain timer icons. + alt="Image of a collection of tags, 4 rows, odd rows are normal sized, even rows are compact, all tags contain links. Each tag is displaying focus style with a focus outline and the bigger border included in the hover state. First column of tags are filled, second are outlined and third are desaturated. Last two rows also contain timer icons." + width="555" + height="240"> diff --git a/elements/rh-tag/docs/20-guidelines.md b/elements/rh-tag/docs/20-guidelines.md index 22ed73bde0..f25a354597 100644 --- a/elements/rh-tag/docs/20-guidelines.md +++ b/elements/rh-tag/docs/20-guidelines.md @@ -38,7 +38,9 @@ theme or visual style. Image of a representation of a desaturated tag on a black background with two columns. The first column contains a card pattern with the title of Red Hat enterprise Linux UI and above it is a tag that says start. In the second column is another card parttern with the title Red Hat OpenShift AI and a tag above it that says scale. + alt="Image of a representation of a desaturated tag on a black background with two columns. The first column contains a card pattern with the title of Red Hat enterprise Linux UI and above it is a tag that says start. In the second column is another card parttern with the title Red Hat OpenShift AI and a tag above it that says scale." + width="1140" + height="422"> ### Default vs. Compact sizes @@ -77,7 +79,9 @@ something. An image of two rows of tags each representing representing a state:, Failure, Error, Caution, Warning, Success, General, Informative, Helpful, Neutral. The tags in the first row are filled and in the second outline variants. + alt="An image of two rows of tags each representing representing a state:, Failure, Error, Caution, Warning, Success, General, Informative, Helpful, Neutral. The tags in the first row are filled and in the second outline variants." + width="652" + height="90"> ### Text @@ -87,14 +91,18 @@ red orange, those colors are reserved for failure or error states. An image a row of tags each with the following text, Important, Documentation, Job template, Managed Service, Red Hat OpenShift, Security, Certified. Each tag is aligned with proper state colors. + alt="An image a row of tags each with the following text, Important, Documentation, Job template, Managed Service, Red Hat OpenShift, Security, Certified. Each tag is aligned with proper state colors." + width="738" + height="29"> If text communicates a status, choose a color that corresponds with that status. An image a row of tags each with the following text, Trial has expired in red, Deprecated in orange-red, Trial expiring soon in yellow, Trial has started in green. + alt="An image a row of tags each with the following text, Trial has expired in red, Deprecated in orange-red, Trial expiring soon in yellow, Trial has started in green." + width="476" + height="29"> ### Icon @@ -105,7 +113,9 @@ sense when paired with text and color. An image a row of tags, The first has the text Success paired with a checkmark icon, the second has the text secure with a padlock icon, the third with the text critical and a exclamation point icon, and the fourth with the text In progress with a timer icon. + alt="An image a row of tags, The first has the text Success paired with a checkmark icon, the second has the text secure with a padlock icon, the third with the text critical and a exclamation point icon, and the fourth with the text In progress with a timer icon." + width="377" + height="29"> ## Writing content @@ -116,7 +126,9 @@ instead. An image of two rows of tags, representing short usage of words, The first row is incorrect examples which include trial started successfully, this process is secure, 147 critical tickets, your course is in progress. The second row includes correct examples include: success, secure, critical, In progress + alt="An image of two rows of tags, representing short usage of words, The first row is incorrect examples which include trial started successfully, this process is secure, 147 critical tickets, your course is in progress. The second row includes correct examples include: success, secure, critical, In progress" + width="724" + height="202"> ### Character count @@ -135,7 +147,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image displaying the correct collapsing of a collection of tags on different width viewports. + alt="An image displaying the correct collapsing of a collection of tags on different width viewports." + width="1140" + height="616"> @@ -147,7 +161,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image showing 3 rows of tags. Each row has a different variant, first row is filled, second row is outlined, and 3rd row is desaturated. + alt="An image showing 3 rows of tags. Each row has a different variant, first row is filled, second row is outlined, and 3rd row is desaturated." + width="418" + height="151">

                                      Use any variant, but in different parts of the UI

                                       @@ -155,7 +171,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image showing a row of tags. First tag is a filled, second is a outlined, and third is a desaturated. + alt="An image showing a row of tags. First tag is a filled, second is a outlined, and third is a desaturated." + width="418" + height="151">

                                      Do not mix variants in the same element or area

                                       @@ -167,7 +185,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image of two rows of tags the first row is normal size, the second row is compact size. + alt="An image of two rows of tags the first row is normal size, the second row is compact size." + width="418" + height="79">

                                      Use any size, but in different parts of the UI

                                       @@ -175,7 +195,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image of a row of tags, the first tag is compact, the second is normal size and the third is compact. + alt="An image of a row of tags, the first tag is compact, the second is normal size and the third is compact." + width="418" + height="79">

                                      Do not mix sizes in the same element or area

                                       @@ -187,7 +209,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image with a row of 3 tags, the first tag has the text trial expired with a circle with a slash icon. The second has the text deprecated and has an exclamation icon. The third has the text trial expiring soon with a triangle shaped icon with an exclamation point. + alt="An image with a row of 3 tags, the first tag has the text trial expired with a circle with a slash icon. The second has the text deprecated and has an exclamation icon. The third has the text trial expiring soon with a triangle shaped icon with an exclamation point." + width="418" + height="29">

                                      Use icons and their colors consistently

                                       @@ -195,7 +219,9 @@ Tags in one row will break to two or more rows as viewport sizes get smaller. An image of a row of 3 tags, the first tag has the text trial expired on a red background. The second tag has an icon that has been colored teal, the icon is a circle with an exclamation and the text of the tag reads deprecated, on a red backgroudn. The third tag has the text trial expired on a yellow background. + alt="An image of a row of 3 tags, the first tag has the text trial expired on a red background. The second tag has an icon that has been colored teal, the icon is a circle with an exclamation and the text of the tag reads deprecated, on a red backgroudn. The third tag has the text trial expired on a yellow background." + width="418" + height="29">

                                      Do not hide icons or change their color

                                       diff --git a/elements/rh-tag/docs/40-accessibility.md b/elements/rh-tag/docs/40-accessibility.md index 147ab3dd25..356d645337 100644 --- a/elements/rh-tag/docs/40-accessibility.md +++ b/elements/rh-tag/docs/40-accessibility.md @@ -28,14 +28,18 @@ color alone.
                                      An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Tag 1. The second tag is outline variant with white background and red colored text which reads Tag 2. The third tag is an outline variant with white background and green colored text which reads Tag 3. + alt="An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Tag 1. The second tag is outline variant with white background and red colored text which reads Tag 2. The third tag is an outline variant with white background and green colored text which reads Tag 3." + width="418" + height="29">

                                      Figure 1

                                      An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Secure server and has a blue padlock icon. The second tag is outline variant with white background and red colored text which reads critical error and has a red circle with an exclamation point icon The third tag is an outline variant with white background and green colored text which reads signed successfully and has a green circle icon with a check mark. + alt="An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Secure server and has a blue padlock icon. The second tag is outline variant with white background and red colored text which reads critical error and has a red circle with an exclamation point icon The third tag is an outline variant with white background and green colored text which reads signed successfully and has a green circle icon with a check mark." + width="418" + height="29">

                                      Figure 2

                                      diff --git a/elements/rh-tile/docs/00-overview.md b/elements/rh-tile/docs/00-overview.md index 9b51155cf5..a0046f71cb 100644 --- a/elements/rh-tile/docs/00-overview.md +++ b/elements/rh-tile/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - Example of a default link tile and a selectable tile + Example of a default link tile and a selectable tile diff --git a/elements/rh-tile/docs/10-style.md b/elements/rh-tile/docs/10-style.md index 1ee2efce37..3e7f301701 100644 --- a/elements/rh-tile/docs/10-style.md +++ b/elements/rh-tile/docs/10-style.md @@ -7,7 +7,10 @@ A tile is available as a Link tile or Selectable tile - Default link tile with numbers pointing to locations of an image, an icon, text, and a footer + Default link tile with numbers pointing to locations of an image, an icon, text, and a footer
                                        @@ -23,7 +26,10 @@ A tile is available as a Link tile or Selectable tile - Selectable tiles with numbers pointing to locations of text, a checkbox or radio button, and a footer + Selectable tiles with numbers pointing to locations of text, a checkbox or radio button, and a footer
                                          @@ -41,7 +47,10 @@ A tile is available as a Link tile or Selectable tile - Examples of a link tile, compact tile, and selectable tile to show size differences + Examples of a link tile, compact tile, and selectable tile to show size differences @@ -50,11 +59,17 @@ A link tile is available in Default and Compact sizes. A selectable tile has onl Both the link tile and the selectable tile are available in dark and light themes. - Light theme tiles use a white background, blue or black heading, black text, and a blue arrow icon + Light theme tiles use a white background, blue or black heading, black text, and a blue arrow icon - Dark theme tiles use a dark gray background, blue or white heading, white text, and a light blue arrow icon + Dark theme tiles use a dark gray background, blue or white heading, white text, and a light blue arrow icon @@ -63,11 +78,17 @@ Both the link tile and the selectable tile are available in dark and light theme A link tile has a blue heading by default, but a desaturated variant exists for both light and dark themes. The desaturated heading uses either a black or white heading. A selectable tile has a desaturated heading only and does not have the option for a blue heading. - Examples of a light theme link tile with a blue heading, link tile with a black heading, and selectable tile with a black heading + Examples of a light theme link tile with a blue heading, link tile with a black heading, and selectable tile with a black heading - Examples of a dark theme link tile with a light blue heading, link tile with a white heading, and selectable tile with a white heading + Examples of a dark theme link tile with a light blue heading, link tile with a white heading, and selectable tile with a white heading @@ -79,21 +100,30 @@ Space values remain the same at all breakpoints. ### Link tile without image - Default link tile and compact link tile with spacers showing padding and margins + Default link tile and compact link tile with spacers showing padding and margins ### Link tile with an image - Link tiles that have full-width and default image sizes with spacers showing padding and margins + Link tiles that have full-width and default image sizes with spacers showing padding and margins ### Selectable tile - Selectable tile with spacers showing padding and margins + Selectable tile with spacers showing padding and margins @@ -106,11 +136,17 @@ Interaction states are visual representations used to communicate the status of The hover state of a link tile also includes the arrow icon moving 3px to the right. - On hover, light theme tiles have a light gray background, an underlined (and sometimes darker blue) heading, a darker blue arrow icon + On hover, light theme tiles have a light gray background, an underlined (and sometimes darker blue) heading, a darker blue arrow icon - On hover, dark theme tiles have a lighter gray background, an underlined (and sometimes lighter blue) heading, a lighter blue arrow icon + On hover, dark theme tiles have a lighter gray background, an underlined (and sometimes lighter blue) heading, a lighter blue arrow icon @@ -122,11 +158,17 @@ The hover state of a link tile also includes the arrow icon moving 3px to the ri - Focused light theme tiles have a blue focus ring and use hover state styling + Focused light theme tiles have a blue focus ring and use hover state styling - Focused dark theme tiles have a light blue focus ring and use hover state styling + Focused dark theme tiles have a light blue focus ring and use hover state styling @@ -140,11 +182,17 @@ Only link tiles have an active state. Selectable tiles have a selected state ins - Active light theme link tiles use the focus state styles + Active light theme link tiles use the focus state styles - Active dark theme link tiles use the focus state styles + Active dark theme link tiles use the focus state styles @@ -153,20 +201,32 @@ Only link tiles have an active state. Selectable tiles have a selected state ins Only a selectable tile has a selected state. A link tile has an active state instead. - When selected, the form input of light theme selectable tiles appears blue and filled or checked + When selected, the form input of light theme selectable tiles appears blue and filled or checked - When selected, the form input of dark theme selectable tiles appears light blue and filled or checked + When selected, the form input of dark theme selectable tiles appears light blue and filled or checked ### Disabled - Disabled light theme tiles have a light gray background and lighter gray text. Disabled link tiles have a ban icon + Disabled light theme tiles have a light gray background and lighter gray text. Disabled link tiles have a ban icon - Disabled dark theme tiles have a lighter gray background and light gray text. Disabled link tiles have a ban icon + Disabled dark theme tiles have a lighter gray background and light gray text. Disabled link tiles have a ban icon diff --git a/elements/rh-tile/docs/20-guidelines.md b/elements/rh-tile/docs/20-guidelines.md index cde01c5f62..d0415973a3 100644 --- a/elements/rh-tile/docs/20-guidelines.md +++ b/elements/rh-tile/docs/20-guidelines.md @@ -31,7 +31,10 @@ The desaturated heading variant is best used for pages with many link tiles. For For a link tile, there are two image sizes available. The Default size has spacing around the entire image. The Full-width image size bleeds to the top, left, and right edges. The default image size is recommended for logos, while illustrations or photos would work well as a full-width image. - Examples of a logo in a tile with the default image size and a photo in a tile with the full-width image size + Examples of a logo in a tile with the default image size and a photo in a tile with the full-width image size @@ -122,13 +125,19 @@ The recommended character counts below include spaces. Line counts are based on Like a card, the default tile should have a minimum width of four grid columns, so there is a maximum of three default link tiles in one row. - Three default link tiles in a row + Three default link tiles in a row The compact link tiles or selectable tiles can condense to a minimum width of three grid columns or a max of four compact tiles in a row. - Four compact link tiles in a row + Four compact link tiles in a row @@ -139,7 +148,10 @@ The compact link tiles or selectable tiles can condense to a minimum width of th The vertical height of a tile will increase as more content is added. The vertical height of multiple tiles in one row matches the height of the tallest tile. - Three link tiles with different amounts of content have the same height + Three link tiles with different amounts of content have the same height @@ -150,14 +162,20 @@ The vertical height of a tile will increase as more content is added. The vertic Do not use a link tile if it needs to link to more than one destination. - Example of an incorrectly used link tile with a call to action in the body + Example of an incorrectly used link tile with a call to action in the body A link tile should not be used as a button. A link tile is akin to a call to action and should navigate a user somewhere else. - Example of an incorrectly used link tile with “submit” as a heading and no other text + Example of an incorrectly used link tile with “submit” as a heading and no other text @@ -166,19 +184,28 @@ A link tile should not be used as a button. A link tile is akin to a call to act Do not use different variants of a tile in one tile group. - Example of an incorrectly styled tile group with a default link tile and a compact link tile + Example of an incorrectly styled tile group with a default link tile and a compact link tile When grouped, use the same number of content slots to make them easy to scan. - Example of an incorrectly styled tile group with one tile that has only text and a second tile that includes a logo and a title + Example of an incorrectly styled tile group with one tile that has only text and a second tile that includes a logo and a title If tiles have images, the images should have the same height. This will help the headings of each tile align vertically which also helps users scan more easily. - Example of an incorrectly styled tile group with two tiles using different image heights + Example of an incorrectly styled tile group with two tiles using different image heights @@ -187,5 +214,8 @@ If tiles have images, the images should have the same height. This will help the The footer of a link tile or selectable tile should not include calls to action, links, or buttons, but it can include non-interactive elements, like tags or badges. Ideally, footer content should be able to fit on one line, but it can wrap to two when necessary. - Example of incorrectly adding a link in the footer of a link tile + Example of incorrectly adding a link in the footer of a link tile diff --git a/elements/rh-tile/docs/40-accessibility.md b/elements/rh-tile/docs/40-accessibility.md index 909a63edd2..c07b0efc26 100644 --- a/elements/rh-tile/docs/40-accessibility.md +++ b/elements/rh-tile/docs/40-accessibility.md @@ -4,7 +4,10 @@ A user should have the ability to use the Tab key to navigate to a tile or into - Tile groups with labels showing which key to use for navigating + Tile groups with labels showing which key to use for navigating @@ -55,7 +58,10 @@ A user should have the ability to use the Tab key to navigate to a tile or into A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. In tile groups, focus moves from left to right and top to bottom. - Tile groups with numbers showing the focus order + Tile groups with numbers showing the focus order diff --git a/elements/rh-timestamp/docs/10-style.md b/elements/rh-timestamp/docs/10-style.md index 97182702b2..7f41b87200 100644 --- a/elements/rh-timestamp/docs/10-style.md +++ b/elements/rh-timestamp/docs/10-style.md @@ -5,7 +5,10 @@ A timestamp is a simple line of text that displays date and time values.
                                          - Anatomy of a timestamp which is a simple line of text showing the date first and then the time after + Anatomy of a timestamp which is a simple line of text showing the date first and then the time after
                                            @@ -20,7 +23,10 @@ A timestamp is a simple line of text that displays date and time values. The size of a timestamp is determined by the text size it is applied to. - Two lines of text of various sizes with timestamps applied, one is 18px and the other is 24px + Two lines of text of various sizes with timestamps applied, one is 18px and the other is 24px @@ -28,7 +34,10 @@ The size of a timestamp is determined by the text size it is applied to. Two lines of text with timestamps applied, one is showing no styling and the other is showing a dashed underline. - Light theme badge + Light theme badge diff --git a/elements/rh-timestamp/docs/20-guidelines.md b/elements/rh-timestamp/docs/20-guidelines.md index 378716f629..057019d621 100644 --- a/elements/rh-timestamp/docs/20-guidelines.md +++ b/elements/rh-timestamp/docs/20-guidelines.md @@ -1,4 +1,4 @@ - ## Usage @@ -50,7 +36,7 @@ The format of the displayed content can be customized by setting the `date-forma You can also set the `display-suffix` attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format. -
                                            +
                                            @@ -116,7 +102,10 @@ The format of the displayed content can be further customized by setting the cus To add a tooltip that displays the timestamp content as a UTC time, you can wrap `rh-timestamp` with `rh-tooltip` and set the `UTC` attribute on an additional `rh-timestamp`. - Timestamp with a tooltip on top showing the time with the UTC acronym at the end + Timestamp with a tooltip on top showing the time with the UTC acronym at the end @@ -128,7 +117,10 @@ To add a tooltip that displays the timestamp content as a UTC time, you can wrap - Timestamp with a tooltip on top showing the time and the words Coordinated Universal Time at the end + Timestamp with a tooltip on top showing the time and the words Coordinated Universal Time at the end @@ -144,7 +136,7 @@ To add a tooltip that displays the timestamp content as a UTC time, you can wrap To display relative time, set the `relative` attribute on `rh-timestamp`. -
                                            +
                                            @@ -169,7 +161,10 @@ To display relative time, set the `relative` attribute on `rh-timestamp`. To display relative time, set the `relative` attribute on `rh-timestamp`. - Timestamp with a tooltip on top showing what the date and time would be 11 months previous + Timestamp with a tooltip on top showing what the date and time would be 11 months previous @@ -181,7 +176,10 @@ To display relative time, set the `relative` attribute on `rh-timestamp`. - Timestamp with a tooltip on top showing what the date and time would be in one year + Timestamp with a tooltip on top showing what the date and time would be in one year @@ -197,7 +195,7 @@ To display relative time, set the `relative` attribute on `rh-timestamp`. The default locale is inferred by the browser. To set the locale to something else, set the `locale` attribute. -
                                            +
                                            @@ -239,14 +237,20 @@ Just like text, a timestamp will break to two lines as breakpoints get smaller. ### Large breakpoints - Timestamp text on desktop and tablet breakpoints + Timestamp text on desktop and tablet breakpoints ### Small breakpoints - Timestamp text on large and small mobile breakpoints with the smallest mobile example breaking to two lines + Timestamp text on large and small mobile breakpoints with the smallest mobile example breaking to two lines diff --git a/elements/rh-tooltip/docs/00-overview.md b/elements/rh-tooltip/docs/00-overview.md index ea1392f980..cf18f36b05 100644 --- a/elements/rh-tooltip/docs/00-overview.md +++ b/elements/rh-tooltip/docs/00-overview.md @@ -3,7 +3,10 @@ {{ tagName | getElementDescription }} - A black tooltip on top of a gray disabled button + A black tooltip on top of a gray disabled button {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-tooltip/docs/10-style.md b/elements/rh-tooltip/docs/10-style.md index 36ff06c836..80e920562b 100644 --- a/elements/rh-tooltip/docs/10-style.md +++ b/elements/rh-tooltip/docs/10-style.md @@ -6,7 +6,10 @@ A tooltip is a container with text that includes an arrow and sometimes a drop s ### Anatomy
                                            - Anatomy of a tooltip with annotations; number 1 is pointing to the container, number 2 is pointing to the text, number 3 is pointing to the arrow, and number 4 is pointing to the trigger + Anatomy of a tooltip with annotations; number 1 is pointing to the container, number 2 is pointing to the text, number 3 is pointing to the arrow, and number 4 is pointing to the trigger
                                              @@ -27,14 +30,20 @@ A tooltip is available in both light and dark themes. The dark theme tooltip con ### Light theme - Light theme tooltip which is black + Light theme tooltip which is black ### Dark theme - Dark theme tooltip which is white + Dark theme tooltip which is white @@ -43,14 +52,20 @@ A tooltip is available in both light and dark themes. The dark theme tooltip con All badges have the same height and border radius. - How a tooltip is constructed showing alignment, border radius, and arrow details + How a tooltip is constructed showing alignment, border radius, and arrow details ## Space - Tooltip spacing both within the element and in between the element and trigger + Tooltip spacing both within the element and in between the element and trigger @@ -73,5 +88,8 @@ A tooltip has a `300ms` entry delay on hover by default, but this can be customi A tooltip appears near an icon or element on hover, focus, or when tapped. A tooltip contains only text and is not interactive. - Tooltip trigger interaction states + Tooltip trigger interaction states diff --git a/elements/rh-tooltip/docs/20-guidelines.md b/elements/rh-tooltip/docs/20-guidelines.md index caa37b78d1..1193e15a77 100644 --- a/elements/rh-tooltip/docs/20-guidelines.md +++ b/elements/rh-tooltip/docs/20-guidelines.md @@ -17,7 +17,10 @@ A tooltip and [Popover](/elements/popover) provide more information in context f Content in a tooltip is limited to text only. Consider the following when writing tooltip content. - Various text examples; from left to right, the text length starts very short, but gets longer and longer + Various text examples; from left to right, the text length starts very short, but gets longer and longer @@ -48,7 +51,10 @@ A tooltip's body text should be short and descriptive. The correct orientation of a tooltip depends on the amount of content and browser window. If a tooltip covers up important information or gets cut off, choose a different orientation. - Various orientation examples; from left to right and top to bottom, top, right, bottom, and left + Various orientation examples; from left to right and top to bottom, top, right, bottom, and left @@ -57,7 +63,10 @@ The correct orientation of a tooltip depends on the amount of content and browse When a cursor or focus is moved, the tooltip disappears. On mobile devices, users must tap to trigger a tooltip and then tap again to make it disappear. - Various behavior examples; from top to bottom, how a tooltip behaves when the trigger is hovered, focused, and tapped + Various behavior examples; from top to bottom, how a tooltip behaves when the trigger is hovered, focused, and tapped @@ -66,7 +75,10 @@ When a cursor or focus is moved, the tooltip disappears. On mobile devices, user A tooltip can generally be used on both large and small breakpoints if the content is not too long. - Examples of a tooltip used on large and small breakpoints + Examples of a tooltip used on large and small breakpoints @@ -77,7 +89,10 @@ A tooltip can generally be used on both large and small breakpoints if the conte Do not use a dark theme tooltip in light theme environments. - A dark theme or white tooltip used on a white background is incorrect usage + A dark theme or white tooltip used on a white background is incorrect usage @@ -86,7 +101,10 @@ Do not use a dark theme tooltip in light theme environments. A tooltip should not be cut off by the browser window. Change the orientation if it does. - If using the top orientation will cause the tooltip to get cut off, that is incorrect usage + If using the top orientation will cause the tooltip to get cut off, that is incorrect usage @@ -95,5 +113,8 @@ A tooltip should not be cut off by the browser window. Change the orientation if Do not add a tooltip to interface elements or actions that do not require further explanation. - Pairing a tooltip with an element that already has adequate descriptive text is incorrect usage + Pairing a tooltip with an element that already has adequate descriptive text is incorrect usage diff --git a/elements/rh-tooltip/docs/40-accessibility.md b/elements/rh-tooltip/docs/40-accessibility.md index 97a355a292..fdc57c0f6b 100644 --- a/elements/rh-tooltip/docs/40-accessibility.md +++ b/elements/rh-tooltip/docs/40-accessibility.md @@ -3,7 +3,10 @@ A tooltip will appear when the trigger receives focus and disappear when moving focus away from the trigger. - Tooltip keyboard interactions; pressing tab to focus the trigger will show the tooltip, but pressing tab again will hide the tooltip + Tooltip keyboard interactions; pressing tab to focus the trigger will show the tooltip, but pressing tab again will hide the tooltip diff --git a/elements/rh-video-embed/docs/00-overview.md b/elements/rh-video-embed/docs/00-overview.md index a384a7e5dd..9d4e31463c 100644 --- a/elements/rh-video-embed/docs/00-overview.md +++ b/elements/rh-video-embed/docs/00-overview.md @@ -5,7 +5,10 @@ A video embed element is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing. - Red Hat Logo on a gray background + Red Hat Logo on a gray background {% repoStatusList repoStatus=repoStatus %} diff --git a/elements/rh-video-embed/docs/10-style.md b/elements/rh-video-embed/docs/10-style.md index e43324fa6c..3940a96ae8 100644 --- a/elements/rh-video-embed/docs/10-style.md +++ b/elements/rh-video-embed/docs/10-style.md @@ -6,7 +6,10 @@ The video embed element consists of a semitransparent play button with a video t
                                              - Anatomy of a video component with numbered annotations. + Anatomy of a video component with numbered annotations.
                                                @@ -23,11 +26,17 @@ The video embed element is available in both light and dark themes. It can inclu
                                                - Light theme video with the Red Hat logo and a play button on a light gray background + Light theme video with the Red Hat logo and a play button on a light gray background - Dark theme video with the Red Hat logo and a play button on a black background + Dark theme video with the Red Hat logo and a play button on a black background
                                                @@ -39,15 +48,24 @@ The caption can be left-, right-, or center-aligned, depending on how the video
                                                - Video with caption, below, left aligned + Video with caption, below, left aligned - Video with caption, below, center aligned + Video with caption, below, center aligned - Video with caption, below, right aligned + Video with caption, below, right aligned
                                                @@ -57,7 +75,10 @@ The caption can be left-, right-, or center-aligned, depending on how the video Space values remain the same at all viewport sizes. - Diagram of spacing for video + Diagram of spacing for video @@ -71,11 +92,17 @@ The play button’s opacity increases upon hover.
                                                - Light theme video on a gray background with a darker play button on hover + Light theme video on a gray background with a darker play button on hover - Dark theme video on a black background with a lighter play button on hover + Dark theme video on a black background with a lighter play button on hover
                                                @@ -85,11 +112,17 @@ On focus, the entire video embed element is outlined by a focus ring, and the pl
                                                - Light theme video with a focus ring outlining the video and a darker play button + Light theme video with a focus ring outlining the video and a darker play button - Dark theme video with a focus ring outlining the video and a lighter play button + Dark theme video with a focus ring outlining the video and a lighter play button
                                                @@ -99,10 +132,16 @@ The active state is the same as the focus state.
                                                - Light theme video with a focus ring outlining the video and a darker play button + Light theme video with a focus ring outlining the video and a darker play button - Dark theme video with a focus ring outlining the video and a lighter play button + Dark theme video with a focus ring outlining the video and a lighter play button
                                                diff --git a/elements/rh-video-embed/docs/20-guidelines.md b/elements/rh-video-embed/docs/20-guidelines.md index ab605c091b..41bd403051 100644 --- a/elements/rh-video-embed/docs/20-guidelines.md +++ b/elements/rh-video-embed/docs/20-guidelines.md @@ -9,7 +9,10 @@ For users that do not have advertising cookies enabled, the video embed element Check the [Code subpage](/elements/video-embed/code/) for information about [attributes](/elements/video-embed/code/#rh-video-embed) and [events](/elements/video-embed/code/#rh-video-embed) that will help you implement the cookie consent thumbnail and integrate it with the preferred cookie consent manager. View the [Require Consent demo](/elements/video-embed/demo/require-consent/) to see a standalone implementation of this functionality. - Video displaying the cookie consent which says, 'View this video by opting into Advertising Cookies.' It also has an 'Update Preferences button'. + Video displaying the cookie consent which says, 'View this video by opting into Advertising Cookies.' It also has an 'Update Preferences button'. ## Writing Content @@ -41,11 +44,17 @@ The video’s width will dynamically adjust with its parent container. The video ### Large Viewport Sizes -Video embed with a semitransparent grid in the background. The video embed only spans half the columns. +Video embed with a semitransparent grid in the background. The video embed only spans half the columns. ### Small Viewport sizes -Video embed with a semitransparent grid background on mobile. The video embed spans all columns on small viewports. +Video embed with a semitransparent grid background on mobile. The video embed spans all columns on small viewports. ## Best Practices @@ -56,14 +65,20 @@ Display the play button in a consistent, predictable spot for all videos.
                                                - Video with vertically and horizontally centered play button + Video with vertically and horizontally centered play button

                                                Keep the play button centered horizontally and vertically.

                                                 - Video with play button in the bottom right + Video with play button in the bottom right

                                                Do not move the play button to another area of the video element.

                                                 @@ -77,14 +92,20 @@ A video embed element and should have the same aspect ratio as the video it’s
                                                - Video embed with a correct, 16:9 aspect ratio + Video embed with a correct, 16:9 aspect ratio

                                                The video embed element should display a video using its original aspect ratio.

                                                 - Video embed with a very narrow aspect ratio + Video embed with a very narrow aspect ratio

                                                Do not change the aspect ratio of the video within the video embed element.

                                                 diff --git a/elements/rh-video-embed/docs/40-accessibility.md b/elements/rh-video-embed/docs/40-accessibility.md index cf73b55f35..1b9863fa67 100644 --- a/elements/rh-video-embed/docs/40-accessibility.md +++ b/elements/rh-video-embed/docs/40-accessibility.md @@ -3,7 +3,10 @@ Users should have the ability to move focus to a video embed element and play the video using the keyboard. - Screenshots of a video embed showing a darkened play button on focus + Screenshots of a video embed showing a darkened play button on focus