diff --git a/docs/_includes/layouts/pages/elements.njk b/docs/_includes/layouts/pages/elements.njk index a729c7defe..2c9532cbb4 100644 --- a/docs/_includes/layouts/pages/elements.njk +++ b/docs/_includes/layouts/pages/elements.njk @@ -18,6 +18,9 @@ eleventyComputed: {%- if hasToc %} {%- endif %} +{% if doc.pageTitle == 'Code' %} + +{% endif %} {%- if slug == 'audio-player' %} @@ -54,8 +57,10 @@ eleventyComputed:
0 %}class="has-toc"{% endif %}>

{{ doc.alias or (slug | deslugify) }}

- {% for tab in doc.tabs %}{% if loop.last %} - {%- set demosUrl = ("/elements/" + slug + "/demos/") -%} + {%- set manifest = doc.docsPage.manifest -%} + {%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%} + {%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%} + {% for tab in doc.tabs %}{% if loop.last and demos.length %} Demos{% endif %} {{- tab.pageTitle | capitalize -}} diff --git a/docs/_plugins/shortcodes/repoStatus.cjs b/docs/_plugins/shortcodes/repoStatus.cjs index 9ded0972ff..b4233bfe65 100644 --- a/docs/_plugins/shortcodes/repoStatus.cjs +++ b/docs/_plugins/shortcodes/repoStatus.cjs @@ -164,11 +164,9 @@ function repoStatusTable() { ${elementsList.map(listItem => html` - - ${listItem.name} + ${listItem.name} ${listItem.overallStatus !== 'Available' ? - `${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}` : ''} - + `${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}` : ''} ${listItem.libraries.map(lib => html` diff --git a/docs/design-code-status/index.md b/docs/design-code-status/index.md index 0266fae180..16c0edc930 100644 --- a/docs/design-code-status/index.md +++ b/docs/design-code-status/index.md @@ -2,7 +2,7 @@ layout: layouts/pages/basic.njk title: Design/code status hasToc: true -importElements: +importElements: - rh-table - rh-tag --- @@ -11,9 +11,9 @@ importElements:
- ## Overview - - A detailed synopsis of our web components and their implementation status. +## Overview + +A detailed synopsis of our web components and their implementation status. @@ -33,7 +33,7 @@ importElements: Planned - + @@ -56,7 +56,7 @@ importElements: In progress - + @@ -73,7 +73,7 @@ importElements: Ready - + @@ -87,7 +87,7 @@ importElements: Deprecated - + @@ -102,7 +102,7 @@ importElements: N/A - + @@ -121,11 +121,11 @@ importElements:
- ## Web component status +## Web component status - {% repoStatusTable %} +{% repoStatusTable %} -
+

Release notes

diff --git a/docs/elements/demos.html b/docs/elements/demos.html index c9211b26c0..c6f90af587 100644 --- a/docs/elements/demos.html +++ b/docs/elements/demos.html @@ -78,6 +78,14 @@ }} } + {%- else -%} + {%- endif -%} {% for filename, config in playground.files %} {%- if not config.label -%} @@ -102,7 +110,7 @@ {% set extension = filename.split('.').pop() %} {% set demoSlug = filename.split('.').shift().replace('demo/', '').replaceAll('/', '-') %} {% set projectId %}playground-{{ element.tagName }}-{{ demoSlug }}{% endset %} - {% set demoPageUrl %}/elements/{{ slug }}/demo/{{ config.label | slugify }}/{% endset %} + {% set demoPageUrl %}/elements/{{ slug }}/demo/{%- if demoSlug !== 'index' -%}{{ config.label | slugify }}/{%- endif -%}{% endset %} {% set githubSourcePrefix %}https://github.com/RedHat-UX/red-hat-design-system/tree/main/elements{% endset %} {% set githubSourceUrl %}{{ githubSourcePrefix }}/{{ element.tagName }}/demo/{{ filename | replace('demo/', '') diff --git a/docs/foundations/typography.md b/docs/foundations/typography.md index 269d4e15dc..4fa04eec54 100644 --- a/docs/foundations/typography.md +++ b/docs/foundations/typography.md @@ -9,6 +9,7 @@ importElements: - rh-blockquote - rh-table --- + {# see XD for reference: https://xd.adobe.com/view/c3387de7-c738-43be-aed2-d631e283dde4-966b #} @@ -68,31 +69,30 @@ importElements: -
## Overview - Typography organizes content and creates hierarchies. It brings consistency to experiences and extends the brand presence across web properties. +Typography organizes content and creates hierarchies. It brings consistency to experiences and extends the brand presence across web properties.
- ## Get started +## Get started - To get started using our fonts, visit our GitHub repo. +To get started using our fonts, visit our GitHub repo.
- ## Style - - The Red Hat typeface is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. These two font families can be used together seamlessly and are available to download here. +## Style + +The Red Hat typeface is a fresh take on the geometric sans genre, taking inspiration from a range of American sans serifs including Tempo and Highway Gothic. These two font families can be used together seamlessly and are available to download here. - + artwork demonstrating Red Hat Display and Red Hat Text at different font weights
@@ -113,20 +113,20 @@ importElements:
- ## Text options +## Text options - ### Headline +### Headline - Headlines create various levels of content hierarchies. +Headlines create various levels of content hierarchies.

Red Hat Enterprise Linux

Conquer complexity with Red Hat Enterprise Linux 8

 - ### Blockquote +### Blockquote - Blockquotes are emphasized blocks of text that include a quote icon and attribution. +Blockquotes are emphasized blocks of text that include a quote icon and attribution. @@ -134,11 +134,11 @@ importElements: John Smith Senior Director, Dev Ops, Acme Corporation - + - ### Title +### Title - Titles disclose extra information above headlines or other content. +Titles disclose extra information above headlines or other content.
@@ -147,9 +147,9 @@ importElements:
- ### Body copy +### Body copy - Body copy is a block of text that can include links or lists. +Body copy is a block of text that can include links or lists.
@@ -157,9 +157,9 @@ importElements:
- ### Code +### Code - Code is text that features a monospace font that can be used for coding purposes. +Code is text that features a monospace font that can be used for coding purposes. 
@@ -171,19 +171,19 @@ for (i = (numElementsReturned - 1); i >= 0; i--) {
- ### Line length - - Headline and body copy line lengths aren’t measured by the number of characters. Instead, all text styles have a minimum width of three grid columns and a maximum width of eight grid columns on all screen sizes. +### Line length + +Headline and body copy line lengths aren’t measured by the number of characters. Instead, all text styles have a minimum width of three grid columns and a maximum width of eight grid columns on all screen sizes.
- ## Scale - - The type scale features a range of text sizes and weights created to support the needs of various kinds of content. There’s a type scale for desktop and mobile breakpoints. +## Scale + +The type scale features a range of text sizes and weights created to support the needs of various kinds of content. There’s a type scale for desktop and mobile breakpoints. - ### Desktop scale +### Desktop scale
@@ -279,9 +279,9 @@ for (i = (numElementsReturned - 1); i >= 0; i--) {
- ### Mobile scale +### Mobile scale - When larger text styles are used on smaller screens, they automatically decrease in size to fit smaller layouts better. The mobile type scale is applied when the Tablet, portrait breakpoint is reached or when a screen becomes less than 768px wide. +When larger text styles are used on smaller screens, they automatically decrease in size to fit smaller layouts better. The mobile type scale is applied when the Tablet, portrait breakpoint is reached or when a screen becomes less than 768px wide. @@ -378,12 +378,11 @@ for (i = (numElementsReturned - 1); i >= 0; i--) { -
- ## Usage +## Usage - Each text style has its own unique hierarchy and application. Text styles can be used in layouts and in components to communicate messages or entice users to take an action. +Each text style has its own unique hierarchy and application. Text styles can be used in layouts and in components to communicate messages or entice users to take an action.
@@ -456,15 +455,15 @@ for (i = (numElementsReturned - 1); i >= 0; i--) {
- ## Best practices - - Don't use Red Hat Text for headlines. +## Best practices + +Don't use Red Hat Text for headlines.

Red Hat and open source

 - Don't use Red Hat Display for body copy. +Don't use Red Hat Display for body copy.
@@ -472,14 +471,14 @@ for (i = (numElementsReturned - 1); i >= 0; i--) {
- Don't space text styles too closely together. +Don't space text styles too closely together.

Linux platforms

Red Hat Enterprise Linux

 - Don't stack lots of text styles too closely together. +Don't stack lots of text styles too closely together.

Headline, xl

@@ -492,19 +491,19 @@ for (i = (numElementsReturned - 1); i >= 0; i--) {
- ## Behavior - - ### Responsive design - - Text styles decrease in size when screens become smaller. This shift helps users consume content better without additional scrolling. +## Behavior - ### Desktop +### Responsive design + +Text styles decrease in size when screens become smaller. This shift helps users consume content better without additional scrolling. + +### Desktop Card typography scale on desktop - ### Mobile +### Mobile Card typography scale on mobile @@ -515,8 +514,8 @@ for (i = (numElementsReturned - 1); i >= 0; i--) { ## Interaction states - Since typography can be used in a variety of components, refer to the specific interaction states that are assigned to each component for more information - +Since typography can be used in a variety of components, refer to the specific interaction states that are assigned to each component for more information +
diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index 9a70a601fc..b72cd1fb33 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -71,10 +71,11 @@ importElements: --rh-color-text-primary-on-dark: #e8e4f5; } + ## Overview -A card formats content in a small, contained space. It can be used to display a -preview of information or provide secondary content in relation to the content +A card formats content in a small, contained space. It can be used to display a +preview of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information. ## Sample pattern @@ -148,7 +149,7 @@ it's near. Several cards can be used together to group related information. ## Image title bar - + adorable kitten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

@@ -187,7 +188,7 @@ A card can be used in light and dark themes. ### Custom Theming -To customize a card the design tokens must be altered. These design tokens are different depending on the context for the card (light or dark theme). +To customize a card the design tokens must be altered. These design tokens are different depending on the context for the card (light or dark theme). Examples include: @@ -197,7 +198,6 @@ Examples include: For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties). - #### Custom Light Theme @@ -225,6 +225,7 @@ For more information, please see the [card css custom properties](/elements/card ## Usage ### Character count + The recommended maximum character count for the elements of a card are listed below and include spaces. @@ -256,5 +257,4 @@ The recommended maximum character count for the elements of a card are listed be
- {% include 'partials/component/feedback.html' %} diff --git a/docs/styles/dev-server/styles.css b/docs/styles/dev-server/styles.css index 083be14d72..c053473ff3 100644 --- a/docs/styles/dev-server/styles.css +++ b/docs/styles/dev-server/styles.css @@ -45,7 +45,8 @@ /* offset the padding on the demo container from above */ rh-context-demo { - height: calc(100% + 2 * var(--rh-space-xl, 24px)); + min-height: calc(100% + 2 * var(--rh-space-xl, 24px)); + height: auto; margin: calc(-1 * var(--rh-space-xl, 24px)); } } diff --git a/docs/styles/pages/code.css b/docs/styles/pages/code.css new file mode 100644 index 0000000000..c697c3940f --- /dev/null +++ b/docs/styles/pages/code.css @@ -0,0 +1,26 @@ +/** + * Elements > Code > Accordion Panel & Table customizations + * Only loaded on the {Element} > Code pages + **/ +rh-accordion-panel[expanded]::part(container) { + background-color: var(--rh-color-surface-lighter, #f2f2f2); +} + +rh-accordion-panel[expanded] rh-table { + --rh-table-row-background-hover-color: #f8f8f8; + + background-color: var(--rh-color-surface-lightest, #ffffff); + margin: 0; +} + +rh-accordion-panel[expanded] rh-table tbody tr:last-child { + border-block-end: 0 !important; +} + +rh-accordion-panel[expanded] rh-table th { + font-size: var(--rh-font-size-body-text-sm, 0.875rem); +} + +rh-accordion-panel[expanded] rh-table :is(th, td) p { + margin-block: 0; +} diff --git a/docs/styles/styles.css b/docs/styles/styles.css index 429a571bf7..8520c7f97e 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -316,7 +316,7 @@ /* TODO: Document this bug table overflows vertically causing a scrollbar when it shouldn't */ rh-table { - overflow: unset; + overflow-y: unset; } /* Compact tile + Uxdot Example reduce overall spacing */ diff --git a/elements/rh-accordion/demo/accents-bottom.html b/elements/rh-accordion/demo/accents-bottom.html new file mode 100644 index 0000000000..4efeffa919 --- /dev/null +++ b/elements/rh-accordion/demo/accents-bottom.html @@ -0,0 +1,31 @@ + + +

Item One

+ Green + Red + Orange + Purple + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + +

Item Two

+ Green + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + +

Item Three

+ Red + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + + + diff --git a/elements/rh-accordion/demo/accents.html b/elements/rh-accordion/demo/accents.html index 09ef6081e0..db15d636a9 100644 --- a/elements/rh-accordion/demo/accents.html +++ b/elements/rh-accordion/demo/accents.html @@ -1,71 +1,31 @@ -
-

Inline

- - -

Item One

- Green - Red - Orange - Purple - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -

Item Two

- Green - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -

Item Three

- Red - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -
- - -
-

Bottom

- - -

Item One

- Green - Red - Orange - Purple - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -

Item Two

- Green - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -

Item Three

- Red - - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -
- - + + +

Item One

+ Green + Red + Orange + Purple + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + +

Item Two

+ Green + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + +

Item Three

+ Red + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + \ No newline at end of file + import '@rhds/elements/rh-accordion/rh-accordion.js'; + import '@rhds/elements/rh-tag/rh-tag.js'; + diff --git a/elements/rh-alert/demo/alternate.html b/elements/rh-alert/demo/alternate.html index 0f37abdb0b..1e151db611 100644 --- a/elements/rh-alert/demo/alternate.html +++ b/elements/rh-alert/demo/alternate.html @@ -40,11 +40,6 @@

Danger

- - + + diff --git a/elements/rh-alert/demo/inline.html b/elements/rh-alert/demo/inline.html index 162f56bd51..b8a0169d3f 100644 --- a/elements/rh-alert/demo/inline.html +++ b/elements/rh-alert/demo/inline.html @@ -40,11 +40,6 @@

Danger

- - + + diff --git a/elements/rh-alert/demo/states.html b/elements/rh-alert/demo/states.html index 4584af3019..45f88b9813 100644 --- a/elements/rh-alert/demo/states.html +++ b/elements/rh-alert/demo/states.html @@ -48,11 +48,6 @@

Danger

- - + + diff --git a/elements/rh-alert/demo/toast.html b/elements/rh-alert/demo/toast.html index 50dd456a9c..2fecacae0e 100644 --- a/elements/rh-alert/demo/toast.html +++ b/elements/rh-alert/demo/toast.html @@ -40,11 +40,6 @@

Danger

- - + + diff --git a/elements/rh-back-to-top/demo/color-context.html b/elements/rh-back-to-top/demo/color-context.html index aab2e13a3e..e5f05d464f 100644 --- a/elements/rh-back-to-top/demo/color-context.html +++ b/elements/rh-back-to-top/demo/color-context.html @@ -51,10 +51,6 @@ bottom: 0; } - rh-context-demo { - height: auto; - } - @media (prefers-reduced-motion: reduce) { main { scroll-behavior: auto; diff --git a/elements/rh-card/demo/rh-card.html b/elements/rh-card/demo/rh-card.html index 20330c6542..f63e69c6cc 100644 --- a/elements/rh-card/demo/rh-card.html +++ b/elements/rh-card/demo/rh-card.html @@ -9,11 +9,14 @@

Card

+ + - diff --git a/elements/rh-popover/docs/00-overview.md b/elements/rh-popover/docs/00-overview.md index 2bfe98abf6..96cffb5a3c 100644 --- a/elements/rh-popover/docs/00-overview.md +++ b/elements/rh-popover/docs/00-overview.md @@ -1,7 +1,11 @@ +## Coming soon! + +This element is currently in progress and not yet available for use. + ## Overview -A Popover displays content in a non-modal dialog and adds contextual -information or provides resources via text and links. +A Popover displays content in a non-modal dialog and adds contextual +information or provides resources via text and links. ## Sample element diff --git a/elements/rh-progress-steps/docs/00-overview.md b/elements/rh-progress-steps/docs/00-overview.md index 1464d8cbd0..730b7991d8 100644 --- a/elements/rh-progress-steps/docs/00-overview.md +++ b/elements/rh-progress-steps/docs/00-overview.md @@ -1,3 +1,7 @@ +## Coming soon! + +This element is currently in progress and not yet available for use. + ## Overview Progress steps guide a user through a task with multiple sequential steps diff --git a/elements/rh-site-status/demo/loading.html b/elements/rh-site-status/demo/loading.html index ec77d5a602..d2f7a03dfb 100644 --- a/elements/rh-site-status/demo/loading.html +++ b/elements/rh-site-status/demo/loading.html @@ -1,54 +1,30 @@ - - -

Example of translated loading text

- - - Chargement - - - - + diff --git a/elements/rh-site-status/demo/localization.html b/elements/rh-site-status/demo/localization.html new file mode 100644 index 0000000000..2281a69c98 --- /dev/null +++ b/elements/rh-site-status/demo/localization.html @@ -0,0 +1,32 @@ + + Chargement + + + + + diff --git a/elements/rh-tile/docs/10-style.md b/elements/rh-tile/docs/10-style.md index 3711a72aab..f729338297 100644 --- a/elements/rh-tile/docs/10-style.md +++ b/elements/rh-tile/docs/10-style.md @@ -153,7 +153,7 @@ 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 diff --git a/elements/rh-tile/docs/tile-states-selected-light-theme.svg b/elements/rh-tile/docs/tile-states-selected-light-theme.svg new file mode 100644 index 0000000000..77ae38d0fe --- /dev/null +++ b/elements/rh-tile/docs/tile-states-selected-light-theme.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/eleventy.config.cjs b/eleventy.config.cjs index 4eda07b237..7e3b78127d 100644 --- a/eleventy.config.cjs +++ b/eleventy.config.cjs @@ -102,6 +102,7 @@ module.exports = function(eleventyConfig) { '@rhds/tokens/media.js', '@rhds/tokens/meta.js', '@patternfly/elements', + '@patternfly/icons/', '@patternfly/icons/far/', '@patternfly/icons/fas/', '@patternfly/icons/fab/', diff --git a/lib/elements/rh-context-demo/rh-context-demo.css b/lib/elements/rh-context-demo/rh-context-demo.css index 0f32bc2634..afd290d92f 100644 --- a/lib/elements/rh-context-demo/rh-context-demo.css +++ b/lib/elements/rh-context-demo/rh-context-demo.css @@ -1,6 +1,8 @@ :host { display: block; - height: 100%; + min-height: 100%; + height: auto; + position: relative; } .light { color: var(--rh-color-text-primary-on-light, #151515); } @@ -15,5 +17,6 @@ #provider { padding: var(--rh-context-demo-padding, var(--rh-space-xl, 24px)); - height: calc(100% - 2 * var(--rh-context-demo-padding, var(--rh-space-xl, 24px))); + position: absolute; + inset: 0; } diff --git a/netlify.toml b/netlify.toml index fc2c11f5fb..137d7761f6 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,6 +1,9 @@ [build] command = "npm run docs" +[[redirects]] + from = '/components/get-started/*' + to = '/get-started/' [[redirects]] from = '/components/accordion/*' to = '/elements/accordion/:splat' diff --git a/scripts/playgrounds.ts b/scripts/playgrounds.ts index 18a1489f9a..a3bd8484cc 100644 --- a/scripts/playgrounds.ts +++ b/scripts/playgrounds.ts @@ -294,6 +294,7 @@ class PlaygroundDemo { const dir = demoSlug === 'index.html' ? '.' : '..'; const resourcePrefix = `${primaryElementName}-${demoSlug.replace('.html', '')}-inline`; let count = 0; + // TODO: add an empty stylesheet if none exists for (const node of Tools.queryAll(this.fragment, Tools.isElementNode)) { if (isInlineModule(node)) { const moduleName = `${resourcePrefix}-${count++}.js`;