Merge branch 'main' into fix/tile/collapse-empty-footer

RedHat-UX · Feb 9, 2025 · 8a5700b · 8a5700b
2 parents 718559a + 7ab9dc5
commit 8a5700b
Show file tree

Hide file tree

Showing 167 changed files with 2,349 additions and 828 deletions.
diff --git a/.changeset/brown-fans-poke.md b/.changeset/brown-fans-poke.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tooltip>`: make tooltip content available to assistive technology
diff --git a/.changeset/fifty-news-knock.md b/.changeset/fifty-news-knock.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-cta>`: workaround for Safari which sometimes double-renders icons
diff --git a/.changeset/fresh-lions-fly.md b/.changeset/fresh-lions-fly.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-code-block>`: enables copy and word wrap action for prerendered content
diff --git a/.changeset/rotten-peas-burn.md b/.changeset/rotten-peas-burn.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Use non-localized font stacks (see [`@rhds/tokens` v2.1.1 release notes](https://github.com/RedHat-UX/red-hat-design-tokens/releases/tag/v2.1.1))
diff --git a/.changeset/rude-jeans-fix.md b/.changeset/rude-jeans-fix.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-icon>`: workaround for Safari which sometimes double-renders icons
diff --git a/.changeset/spicy-balloons-attack.md b/.changeset/spicy-balloons-attack.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Bump version of `@rhds/tokens`
diff --git a/.changeset/warm-forks-switch.md b/.changeset/warm-forks-switch.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-avatar>`: corrected small viewport margin for `plain` variant avatars
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -31,7 +31,27 @@
       </style>
     </noscript>
 
-    {% include "../partials/javascript/global.html" %}
+    <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+
+    {# ensure SSR support modules are loaded first #}
+    {% include 'partials/javascript/dsd-init.html' %}
+
+    {# load all components #}
+    {% for tag in importElements %}
+      <script type="module">import '@rhds/elements/{{tag}}/{{tag}}.js';</script>
+    {% endfor %}
+
+    {# only load components that need hydrated (aka interactivity) #}
+    <script type="module">
+      import '@rhds/elements/rh-button/rh-button.js';
+      import '@uxdot/elements/uxdot-copy-permalink.js';
+      import '@uxdot/elements/uxdot-sidenav.js';
+      import '@uxdot/elements/uxdot-example.js';
+    </script>
+
+    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
+
+
   </head>
 
   <body dsd-pending class="{{ extraPageClasses }}">

diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
@@ -89,6 +89,9 @@ export default class ElementsPage extends Renderer<Context> {
       </noscript>
 
       <script type="module" data-helmet>
+        // although we load these ssr support modules elsewhere, we still
+        // need them here to ensure no double-rendering on webkit
+        import '/assets/javascript/ssr-support.js';
         import '@uxdot/elements/uxdot-copy-button.js';
         import '@uxdot/elements/uxdot-copy-permalink.js';
         import '@uxdot/elements/uxdot-best-practice.js';
@@ -961,4 +964,3 @@ export default class ElementsPage extends Renderer<Context> {
     }
   }
 };
-
diff --git a/docs/_includes/layouts/pages/has-toc.njk b/docs/_includes/layouts/pages/has-toc.njk
@@ -12,6 +12,9 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
+  // although we load these ssr support modules elsewhere, we still
+  // need them here to ensure no double-rendering on webkit
+  import '/assets/javascript/ssr-support.js';
   import '@uxdot/elements/uxdot-toc.js';
 </script>
 

diff --git a/docs/_includes/partials/component/edit-this-page.njk b/docs/_includes/partials/component/edit-this-page.njk
@@ -10,5 +10,8 @@
     {% endfor %}
   {% endif %}
   {% set editPath = ('/' + (inputPath or page.inputPath)) | replace(r/^(\.)?\//, '') %}
+  {% if '30-code.md' in editPath or '90-demos.md' in editPath %}
+    {% set editPath = 'docs/_includes/layouts/pages/element.11ty.ts' %}
+  {% endif %}
   <a href="https://github.com/RedHat-UX/red-hat-design-system/blob/main/{{ editPath }}?plain=1">Edit this page on GitHub</a>
 </div>
diff --git a/docs/_includes/partials/javascript/dsd-init.html b/docs/_includes/partials/javascript/dsd-init.html
@@ -0,0 +1,13 @@
+  <script type="module">
+    // although we load these ssr support modules elsewhere, we still
+    // need them here to ensure no double-rendering on webkit
+    import '/assets/javascript/ssr-support.js';
+    // include these, which are often internal to elements,
+    // and are definitely required by context-picker and context-demo
+    // to avoid SSR defer-hydration bugs and SSR double-rendering bugs
+    import '@rhds/elements/rh-icon/rh-icon.js';
+    import '@rhds/elements/rh-surface/rh-surface.js';
+    import '@rhds/elements/rh-button/rh-button.js';
+    import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+    import '@rhds/elements/rh-tag/rh-tag.js';
+  </script>
diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html
diff --git a/docs/about/roadmap.md b/docs/about/roadmap.md
@@ -5,10 +5,12 @@ order: 20
 bodyClasses: page-docs
 tags:
   - about
-importElements:
-  - rh-tile
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
 <style data-helmet>

diff --git a/docs/accessibility/accessibility-tools.md b/docs/accessibility/accessibility-tools.md
@@ -5,10 +5,12 @@ permalink: /accessibility/accessibility-tools/index.html
 tags:
   - accessibility
 order: 10
-importElements:
-  - rh-blockquote
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+</script>
+
 ## Automated Accessibility Tools
 
 Automated tools can help you quickly identify many potential high-impact accessibility issues. Among such tools are free browser extensions like:

diff --git a/docs/accessibility/content.md b/docs/accessibility/content.md
@@ -3,16 +3,18 @@ title: Content
 tags:
   - accessibility
 order: 40
-importElements:
-  - rh-code-block
-  - rh-blockquote
-  - rh-table
 ---
 
 <link data-helmet
       rel="stylesheet"
       href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+  import '@rhds/elements/rh-table/rh-table.js';
+</script>
+
 <style data-helmet>
   rh-blockquote {
     display: block;

diff --git a/docs/accessibility/index.md b/docs/accessibility/index.md
@@ -2,11 +2,13 @@
 title: Fundamentals
 tags:
   - accessibility
-order: 75
-importElements:
-  - rh-blockquote
+order: 1
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+</script>
+
 <style>
   rh-blockquote {
     display: block;

diff --git a/docs/accessibility/screen-readers.md b/docs/accessibility/screen-readers.md
@@ -5,10 +5,12 @@ permalink: /accessibility/screen-readers/index.html
 tags:
   - accessibility
 order: 100
-importElements:
-  - rh-tile
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <link rel="stylesheet"
       data-helmet
       href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">

diff --git a/docs/assets/javascript/ssr-support.js b/docs/assets/javascript/ssr-support.js
@@ -0,0 +1,5 @@
+// dsd polyfill needs to happen before hydration attempts
+// lit-element-hydrate-support needs to be included before lit is loaded
+import '/assets/javascript/dsd-polyfill.js';
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+import 'element-internals-polyfill';
diff --git a/docs/elements/demo.html b/docs/elements/demo.html
@@ -23,15 +23,11 @@
     <link rel="stylesheet" href="/styles/demo/styles.css" media="all">
 
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+
+    {# ensure SSR support modules are loaded first #}
+    {% include 'partials/javascript/dsd-init.html' %}
+
     <script type="module">
-      // dsd polyfill needs to happen before hydration attempts
-      // lit-element-hydrate-support needs to be included before lit is loaded
-      import '/assets/javascript/dsd-polyfill.js';
-      import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
-      import 'element-internals-polyfill';
-      // include these, which are often internal to elements, to avoid SSR defer-hydration bugs
-      import '@rhds/elements/rh-icon/rh-icon.js';
-      import '@rhds/elements/rh-surface/rh-surface.js';
       // load up the demo and picker
       import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
       import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

diff --git a/docs/foundations/typography/index.md b/docs/foundations/typography/index.md
@@ -71,7 +71,7 @@ accommodate mixed-language content. For more technical details, go to the
 <rh-table>
 
 | Language | Font family                  |
-|----------|------------------------------|
+| -------- | ---------------------------- |
 | Chinese  | Noto Sans Simplified Chinese |
 | Japanese | Noto Sans Japanese           |
 | Korean   | Noto Sans Korean             |

diff --git a/docs/get-started/developers/index.md b/docs/get-started/developers/index.md
@@ -11,11 +11,13 @@ subnav:
   collection: sortedDevelopers
   order: 00
 order: 20
-importElements:
-  - rh-card
-  - rh-cta
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
+
 <style data-helmet>
   .grid > rh-card {
     display: grid;

diff --git a/docs/get-started/index.md b/docs/get-started/index.md
@@ -4,20 +4,22 @@ title: Overview
 order: 00
 tags:
   - getstarted
-importElements:
-  - rh-tile
 ---
 
 <link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <style data-helmet>
   #get-started-nav {
-    margin-block-start: var(--rh-space-2xl, 32px);
+    margin-block-start: var(--rh-space-2xl);
   }
 
   #get-started-nav figcaption {
-    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
-    font-size: var(--rh-font-size-heading-sm, 1.5rem);
+    font-family: var(--rh-font-family-heading);
+    font-size: var(--rh-font-size-heading-sm);
   }
 </style>
 

diff --git a/docs/patterns/logo-wall/examples.md b/docs/patterns/logo-wall/examples.md
@@ -9,12 +9,11 @@ tags:
 subnav:
   collection: logowallPatterns
   order: 4
-importElements:
-  - rh-cta
-  - rh-surface
 ---
 
 <script type="module" data-helmet>
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
 </script>