From 8bbdbafe7c0b0fbba988bffafb58f690116595a4 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 4 Oct 2024 13:30:27 -0400 Subject: [PATCH 1/5] docs: adding height width attrs and fixing data-helmet --- docs/about/index.md | 20 +- docs/about/roadmap.md | 4 +- docs/accessibility/accessibility-tools.md | 20 +- docs/accessibility/content.md | 10 +- docs/accessibility/design.md | 22 +- docs/accessibility/manual-testing.md | 2 +- docs/accessibility/screen-readers.md | 2 +- .../developers/web-components-1.svg | 28 +++ .../developers/web-components-2.svg | 17 ++ .../developers/web-components-3.svg | 22 ++ docs/design-code-status/index.md | 2 +- docs/elements/demos.html | 2 +- docs/foundations/color/accessibility.md | 4 +- docs/foundations/color/index.md | 17 +- docs/foundations/color/usage.md | 69 +++++-- docs/foundations/grid.md | 72 +++++-- docs/foundations/index.md | 22 +- docs/foundations/personalization.md | 52 ++++- docs/foundations/spacing.md | 117 ++++++++--- docs/foundations/typography/index.md | 7 +- docs/foundations/typography/scale.md | 4 +- docs/foundations/typography/usage.md | 62 ++++-- docs/get-started/designers.md | 4 +- docs/get-started/developers/contributing.md | 2 +- docs/get-started/developers/index.md | 110 +++------- docs/get-started/index.md | 4 +- docs/patterns/announcement/index.md | 64 ++++-- docs/patterns/card/guidelines.md | 6 +- docs/patterns/disclosure/index.md | 99 ++++++--- docs/patterns/filter/index.md | 100 +++++++-- docs/patterns/form/index.md | 195 ++++++++++++++---- docs/patterns/link-with-icon/index.md | 50 ++++- docs/patterns/link/index.md | 152 +++++++++++--- docs/patterns/logo-wall/guidelines.md | 42 +++- docs/patterns/logo-wall/index.md | 31 ++- docs/patterns/logo-wall/style.md | 66 ++++-- docs/patterns/search-bar/index.md | 159 ++++++++++---- docs/patterns/skip-navigation/index.md | 42 +++- docs/patterns/sticky-banner/index.md | 108 +++++++--- docs/patterns/sticky-card/index.md | 97 ++++++--- docs/patterns/tabs/examples.md | 0 docs/patterns/video-thumbnail/index.md | 97 +++++++-- 42 files changed, 1485 insertions(+), 520 deletions(-) create mode 100644 docs/assets/get-started/developers/web-components-1.svg create mode 100644 docs/assets/get-started/developers/web-components-2.svg create mode 100644 docs/assets/get-started/developers/web-components-3.svg delete mode 100644 docs/patterns/tabs/examples.md diff --git a/docs/about/index.md b/docs/about/index.md index a5499b9a17..c9defa5107 100644 --- a/docs/about/index.md +++ b/docs/about/index.md @@ -85,7 +85,10 @@ and adapts to meet new challenges. Learn about the Red Hat brand - the words 'brand standards' framed by elements and shapes in ReEd Hat colors + the words 'brand standards' framed by elements and shapes in ReEd Hat colors ### Design tokens @@ -98,7 +101,10 @@ help us assign consistent meanings that correspond with foundational guidelines. Learn about our tokens - Flow showing how a color like brand red becomes a token, how it is named, and how it is applied to a call to action + Flow showing how a color like brand red becomes a token, how it is named, and how it is applied to a call to action ## We build Web Components @@ -111,7 +117,10 @@ framework or platform. Learn about the benefits of Web Components - Example of a card next to the Web Component's code + Example of a card next to the Web Component's code ## We look for opportunities to align @@ -141,7 +150,10 @@ upgraded easily, allowing for consistency, scalability, and flexibility. Visit PatternFly Elements - A back-to-top element that looks the same in RHDS, PatternFly, and PatternFly Elements + A back-to-top element that looks the same in RHDS, PatternFly, and PatternFly Elements ## We provide support diff --git a/docs/about/roadmap.md b/docs/about/roadmap.md index 8081de118c..046f480dfd 100644 --- a/docs/about/roadmap.md +++ b/docs/about/roadmap.md @@ -9,9 +9,9 @@ importElements: - rh-tile --- - + - ## Introduction @@ -81,7 +74,10 @@ When colors are used together, they form relationships that communicate brand, hierarchy, state, and more. - Variants of several elements + Variants of several elements @@ -98,7 +94,10 @@ To learn more about our color design tokens, go to the [Tokens](/tokens) section Our design system includes multiple sets of colors known as **"crayon" colors**. Crayon colors reference hard-coded values, but offer no information about usage. **Semantic** colors reference crayon colors and define how a color is used. Semantic naming is essential not just for color, but for all foundational styles. - Example of how crayon color tokens are aliased to semantic tokens, which are used to style a button + Example of how crayon color tokens are aliased to semantic tokens, which are used to style a button ## Color tokens diff --git a/docs/foundations/color/usage.md b/docs/foundations/color/usage.md index 2153e9622d..ff7f75ca53 100644 --- a/docs/foundations/color/usage.md +++ b/docs/foundations/color/usage.md @@ -45,8 +45,11 @@ it meets WCAG 2.1 AA requirements.

- - spectrum of brand red shades with examples of brand red being used + + spectrum of brand red shades with examples of brand red being used ### Canvas @@ -58,8 +61,11 @@ other colors as long as contrast is maintained throughout the entire design. If a custom canvas color is lighter or darker than the defaults, white or black may be used as surface colors. - - swatches of the default canvas colors for dark and light theme and examples of custom canvas colors + + swatches of the default canvas colors for dark and light theme and examples of custom canvas colors ### Surface @@ -70,7 +76,10 @@ sections. For example, a card (white surface) can be placed in a section (light gray surface) on a canvas (white). - swatches of the default surface colors for dark and light theme and examples of a card in a section with a card + swatches of the default surface colors for dark and light theme and examples of a card in a section with a card ### Layering Beta @@ -88,7 +97,10 @@ as well as how they stack to create depth and separate content. In the light theme, white and gray values alternate when stacked. - A light gray card in a larger, white card, which sits in a light gray section + A light gray card in a larger, white card, which sits in a light gray section @@ -97,7 +109,10 @@ In the light theme, white and gray values alternate when stacked. In the dark theme, gray values should get one step lighter when stacked. - A dark gray card in a larger, darker gray card, which sits in an even dark gray section + A dark gray card in a larger, darker gray card, which sits in an even dark gray section @@ -126,7 +141,10 @@ represented. - Dark and light theme examples of the seven types of semantic colors used by text + Dark and light theme examples of the seven types of semantic colors used by text ### Icons @@ -143,7 +161,10 @@ To learn more about icons, go to the [Brand standards](https://www.redhat.com/en/about/brand/standards) website. - Examples of the three icon categories + Examples of the three icon categories ### Interactivity @@ -159,7 +180,10 @@ Certain colors are used to indicate that something is interactive. 5. **Red** - use sparingly for Primary calls to action only - Examples of elements using the five colors that denote interactivity + Examples of elements using the five colors that denote interactivity ### Status @@ -191,7 +215,10 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge), - Alerts, a form field, and tags that use status colors + Alerts, a form field, and tags that use status colors ## Best practices @@ -211,14 +238,20 @@ the [Design system](https://github.com/RedHat-UX/red-hat-design-system/discussio
- Blue submit button, blue default call to action, black tooltip, and blue switch + Blue submit button, blue default call to action, black tooltip, and blue switch

Use the color variants already available for elements and patterns.

 - 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 create your own colors, design tokens, or change the colors of existing elements and patterns.

 @@ -235,13 +268,19 @@ using elements and patterns from the desaturated theme instead.
- Examples of a blue button against a light gray background and a red CTA against a black background + Examples of a blue button against a light gray background and a red CTA against a black background

Use a surface color token for background to ensure accessibility, or use a tool to check proper contrast.

 - Examples of a blue button against a red background and a red CTA against a blue background + Examples of a blue button against a red background and a red CTA against a blue background

Do not use a background color that has a similar hue, saturation, or lightness to foreground elements.

 diff --git a/docs/foundations/grid.md b/docs/foundations/grid.md index f96cd1765c..e57732640a 100644 --- a/docs/foundations/grid.md +++ b/docs/foundations/grid.md @@ -9,7 +9,7 @@ importElements: - rh-table --- - +
@@ -20,7 +20,10 @@ importElements: ### Sample component - Grid + Grid ### Grid availability @@ -32,7 +35,10 @@ importElements: ### Style - Grid specs + Grid specs
@@ -50,14 +56,20 @@ importElements:
- Grid columns on desktop + Grid columns on desktop
A grid on large screens contains 12 columns
- Grid columns on mobile + Grid columns on mobile
A grid on small screens contains one column
 @@ -68,10 +80,16 @@ importElements:
- Grid gutters on desktop + Grid gutters on desktop - Grid gutters on mobile + Grid gutters on mobile
@@ -84,7 +102,10 @@ importElements: The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller. - Grid margins on desktop + Grid margins on desktop ### Small screens @@ -92,7 +113,10 @@ importElements: The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns. - Grid margins on mobile + Grid margins on mobile @@ -106,13 +130,19 @@ importElements:
- Grid content outside of grid + Grid content outside of grid
18px or larger text shouldn't exceed eight columns to maintain optimal readability.
 - Grid alignment issues + Grid alignment issues @@ -130,11 +160,17 @@ importElements: The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller. - Example of responsive grid on large screen + Example of responsive grid on large screen - Example of responsive grid on smaller screen + Example of responsive grid on smaller screen ### Small screens @@ -142,11 +178,17 @@ importElements: The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns. - Example of responsive grid on large screen + Example of responsive grid on large screen - Example of responsive grid on smaller screen + Example of responsive grid on smaller screen diff --git a/docs/foundations/index.md b/docs/foundations/index.md index 13063a53c5..8f93325fad 100644 --- a/docs/foundations/index.md +++ b/docs/foundations/index.md @@ -9,7 +9,7 @@ importElements: - rh-tile --- - +
@@ -20,28 +20,40 @@ importElements:
- Color + Color

Color

Unifies our brand while bringing accessibility and consistency to our digital experiences

 - Grid + Grid

Grid

Provides guidance and structure when positioning elements and components in a layout

 - Spacing + Spacing

Spacing

Defines fixed amounts of space between elements and makes it easy to maintain consistency

 - Typography + Typography

Typography

A system of fonts that creates hierarchies and helps guide a user through an experience

diff --git a/docs/foundations/personalization.md b/docs/foundations/personalization.md index d899af1ed1..f7e9fc76c6 100644 --- a/docs/foundations/personalization.md +++ b/docs/foundations/personalization.md @@ -9,7 +9,7 @@ importElements: - rh-tile --- - +
@@ -30,19 +30,28 @@ importElements: - Sticky banner + Sticky banner

Sticky banner

 - Sticky card + Sticky card

Sticky card

 - Announcement + Announcement

Announcement

 @@ -106,7 +115,10 @@ importElements: A dialog can be used both on desktop and mobile. - Dialog + Dialog ### How to use { id="dialog-how-to-use"} @@ -149,7 +161,10 @@ importElements: - Sticky banner + Sticky banner ### How to use { id="sticky-banner-how-to-use"} @@ -200,7 +215,10 @@ importElements: - Sticky card + Sticky card ### How to use { id="sticky-card-how-to-use"} @@ -231,7 +249,10 @@ importElements: An announcement can be used to display an important message at the top of a website, but is not limited to one page at a time. An announcement can either have a themed background image or solid color background. For colored backgrounds, we suggest using alert styles. - Announcement + Announcement ### How to use { id="announcement-how-to-use"} @@ -277,7 +298,10 @@ importElements: - Card + Card ### How to use { id="in-page-card-how-to-use" } @@ -307,7 +331,10 @@ importElements: Active tab uses the existing tab component design and only customizes the active tab within the tab set (no custom design work is needed). - Tabs + Tabs ### How to use { id="active-tab-how-to-use" } @@ -342,7 +369,10 @@ importElements:

An inline-alert only includes text, but no images. It can also include a single or two links that direct a user to other pages.

- Alert + Alert If a user closes an inline alert, consider if or when it should be displayed again for the same user. It could be suppressed for a week, month, or forever depending on the goal of the project. The alert component in Adobe XD has two styles, normal and alternate, and either can be used. diff --git a/docs/foundations/spacing.md b/docs/foundations/spacing.md index 15d4a5aee2..d992def561 100644 --- a/docs/foundations/spacing.md +++ b/docs/foundations/spacing.md @@ -75,7 +75,10 @@ spacerTokens: layout or spacing between sections. - How to apply spacing + How to apply spacing
@@ -88,7 +91,10 @@ spacerTokens: vertical rhythm and readability. - How to apply spacing to typography + How to apply spacing to typography ### Spacing between text styles @@ -99,7 +105,10 @@ spacerTokens: won’t appear as if the styles are related to each other. - Spacing between text styles + Spacing between text styles ### Titles and headlines @@ -116,8 +125,11 @@ spacerTokens: - The spacing between a *Card title* and body copy is 16px on desktop, tablet, and mobile - - Headlines and body copy spacing guidelines + + Headlines and body copy spacing guidelines ### Desktop scale @@ -173,7 +185,10 @@ spacerTokens: desktop and tablet, and 24px on mobile - How to apply spacing to headlines and calls to action + How to apply spacing to headlines and calls to action ### Scale @@ -212,7 +227,10 @@ spacerTokens: desktop, tablet, and mobile - How to apply spacing to headlines and buttons + How to apply spacing to headlines and buttons #### Scale @@ -237,7 +255,10 @@ spacerTokens: ### Other examples - Spacing on lists + Spacing on lists ### Other use cases @@ -264,7 +285,10 @@ spacerTokens: estate. - Spacing in search layout + Spacing in search layout ### Calls to action @@ -277,20 +301,29 @@ spacerTokens: 16px. - Spacing within calls to action + Spacing within calls to action The Brick style has a fixed top and bottom spacing of 16px, but the left and right spacing can stretch to fit a certain amount of grid columns. - Spacing within brick CTAs + Spacing within brick CTAs The Default style needs 8px of spacing between the text and the arrow or icon. - Spacing within default CTAs + Spacing within default CTAs ### Accordion @@ -299,7 +332,10 @@ spacerTokens: comfortable balance between text, horizontal rules, icons, and backgrounds. - Spacing within accordions + Spacing within accordions ### Tabs @@ -311,7 +347,10 @@ spacerTokens: large spacer. - Spacing within tabs + Spacing within tabs ### Cards @@ -321,11 +360,17 @@ spacerTokens: inside or outside. - Spacing within cards + Spacing within cards - Spacing within 4 column cards + Spacing within 4 column cards ### Scale @@ -347,7 +392,10 @@ spacerTokens: Here’s how spacing is used in other components and patterns. - Spacing within other components + Spacing within other components ### Other use cases @@ -375,7 +423,10 @@ spacerTokens: because there's a content area layout inside. - Spacing within layouts + Spacing within layouts ### Responsive design @@ -387,32 +438,47 @@ spacerTokens: apart from each other. - Spacing within the grid + Spacing within the grid In the *tablet, landscape* breakpoint, the gutters in the grid are spaced 24px apart from each other. - Spacing within a landscape tablet layout + Spacing within a landscape tablet layout In the *tablet, portrait* breakpoint, the gutters in the grid are spaced 18px apart from each other. - Spacing within a portrait tablet layout + Spacing within a portrait tablet layout In the *mobile* breakpoint, the gutters in the grid are spaced 16px apart from each other. - Spacing within a mobile landscape layout + Spacing within a mobile landscape layout - Spacing within a mobile portrait layout + Spacing within a mobile portrait layout ### Other use cases @@ -431,7 +497,10 @@ spacerTokens: new spacers. - Use existing spacers + Use existing spacers
diff --git a/docs/foundations/typography/index.md b/docs/foundations/typography/index.md index 6d5dde1582..b62c17477e 100644 --- a/docs/foundations/typography/index.md +++ b/docs/foundations/typography/index.md @@ -16,7 +16,7 @@ importElements: permalink: /foundations/typography/index.html --- - + ## Get started @@ -27,7 +27,10 @@ To download the font files, go to [Google Fonts](https://fonts.google.com/?query The words we choose are an important part of our brand voice and so is the way those words look. The way our words look is established by the fonts we use and the way we use them, also known as typography. The Red Hat font family was designed by type designer Jeremy Mickel in collaboration with the Brand team. To learn more our fonts and typography, go to the [Brand standards](https://www.redhat.com/en/about/brand/standards) website. - 3 examples of the Red Hat font family: Display, Text, and Mono. Each example shows a capital letter R and lowercase letter H with overlays pointing out unique design characteristics. + 3 examples of the Red Hat font family: Display, Text, and Mono. Each example shows a capital letter R and lowercase letter H with overlays pointing out unique design characteristics. ### Red Hat Display diff --git a/docs/foundations/typography/scale.md b/docs/foundations/typography/scale.md index d89ed09b5d..e21f735752 100644 --- a/docs/foundations/typography/scale.md +++ b/docs/foundations/typography/scale.md @@ -14,9 +14,9 @@ importElements: permalink: /foundations/typography/scale.html --- - + - +
- ## Overview +## Overview - Foundations are the visual and structural elements of our design system. Foundations were created as the building blocks of all user interface elements. Foundations should be used as blueprints that all components and layouts are created from. +Foundations are the visual and structural elements of our design system. Foundations were created as the building blocks of all user interface elements. Foundations should be used as blueprints that all components and layouts are created from.
- - Color - + width="500" + height="150">

Color

Unifies our brand while bringing accessibility and consistency to our digital experiences

 - - Grid - + width="500" + height="150">

Grid

Provides guidance and structure when positioning elements and components in a layout

 - - Spacing - + width="500" + height="150">

Spacing

Defines fixed amounts of space between elements and makes it easy to maintain consistency

 - - Typography - + width="500" + height="150">

Typography

A system of fonts that creates hierarchies and helps guide a user through an experience

 diff --git a/docs/index.njk b/docs/index.njk index 3fafed5b87..75f0c601f7 100644 --- a/docs/index.njk +++ b/docs/index.njk @@ -15,7 +15,11 @@ title: Home

Red Hat design system

Open source meets open design

- Element examples + Element examples @@ -35,25 +39,37 @@ title: Home
- Foundations + Foundations

Foundations

Design principles to help you create engaging layouts

 - Elements + Elements

Elements

Guidance to help you create interactive user interfaces

 - Code status + Code status

Code status

Track the status of our components and patterns

 - Release notes + Release notes

Release notes

Track the updates we're making to the design system

 diff --git a/docs/patterns/logo-wall/index.md b/docs/patterns/logo-wall/index.md index 2cd9ded721..4a116072b9 100644 --- a/docs/patterns/logo-wall/index.md +++ b/docs/patterns/logo-wall/index.md @@ -28,18 +28,18 @@ A logo wall is a visual arrangement of logos representing various brands, compan

Bordered

An example of a bordered logo wall with 6 logos each inside of a bordered container. + alt="An example of a bordered logo wall with 6 logos each inside of a bordered container." + width="1010" + height="99">

Borderless

An example of a borderless logo wall with 6 logos. + alt="An example of a borderless logo wall with 6 logos." + width="1010" + height="100">
From 5c6abe1fd9a148c4ca67193b87341962f9da123c Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 8 Oct 2024 10:40:22 -0400 Subject: [PATCH 3/5] docs: add margin to toc on small viewport widths --- docs/styles/pages/backpage.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/styles/pages/backpage.css b/docs/styles/pages/backpage.css index ca050376e6..eb4236545f 100644 --- a/docs/styles/pages/backpage.css +++ b/docs/styles/pages/backpage.css @@ -120,6 +120,10 @@ } uxdot-toc { + @container main (width < 576px) { + margin-inline: var(--rh-space-lg); + } + @container main (width >= 576px) { padding-inline: var(--rh-space-2xl); } From cbb84d0e6f2809f0e908817b73375feefdc02787 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 8 Oct 2024 13:42:34 -0400 Subject: [PATCH 4/5] docs: correct image sizes on accessibility page --- docs/accessibility/accessibility-tools.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/accessibility/accessibility-tools.md b/docs/accessibility/accessibility-tools.md index 17a639e1b7..5caacb1345 100644 --- a/docs/accessibility/accessibility-tools.md +++ b/docs/accessibility/accessibility-tools.md @@ -60,8 +60,8 @@ Google's Chrome and Microsoft's Edge browsers have several accessibility tools b Screenshot of a Lighthouse autdit with a score of 100%. + width="900" + height="251"> @@ -79,8 +79,8 @@ Chrome and Edge also have an "Accessibility Pane" that lets users see informatio Screenshot of the accessibility pane on a ux.redhat.com page with three numbers identifying key features. + width="893" + height="498">
To view the Accessibility Pane, open DevTools then click: @@ -98,8 +98,8 @@ Users can optionally check "Enable full-page accessibility tree" to change what' Screenshot showing the rendered page content in the browser on the left and the same content in the accessibility tree view on the right in DevTools + width="1167" + height="535">
Inspecting the Alert (left) with the full-page accessibility tree enabled reveals its accessible properties (right). @@ -120,8 +120,8 @@ One neat feature included within Firefox's accessibility inspector is the abilit Screenshot of a page with 'Show Tabbing Order' checked. Each tab stop shows its tab stop number inside a pip. + width="994" + height="505">
A page in Firefox with visually numbered tab stops via the Firefox feature, "Show Tabbing order". From 019fdd50c56e72806a3fb4bb05c300726dbf0b02 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 8 Oct 2024 14:50:18 -0400 Subject: [PATCH 5/5] docs: fix typo in alt --- docs/about/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/about/index.md b/docs/about/index.md index c9defa5107..f80eda10b4 100644 --- a/docs/about/index.md +++ b/docs/about/index.md @@ -86,7 +86,7 @@ and adapts to meet new challenges. the words 'brand standards' framed by elements and shapes in ReEd Hat colors