Merge branch 'main' into docs/cta-best-practices

RedHat-UX · Jan 9, 2025 · 076f585 · 076f585
2 parents 6e346bd + a37b594
commit 076f585
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 41 deletions.
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/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/elements/rh-code-block/demo/prerendered-prism-highlighting.html b/elements/rh-code-block/demo/prerendered-prism-highlighting.html
@@ -1,5 +1,9 @@
 <rh-context-demo>
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
@@ -24,7 +28,11 @@
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-css"><code class="language-css"><span class="token selector">rh-card.avatar-card</span> <span class="token punctuation">{</span>
   <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
   <span class="token selector">&amp;::part(body)</span> <span class="token punctuation">{</span>
@@ -44,7 +52,11 @@
 <span class="token punctuation">}</span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prerendered">
+  <rh-code-block highlighting="prerendered" actions="copy wrap">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
     <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">extends</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> stylelint<span class="token punctuation">-</span>config<span class="token punctuation">-</span>standard
   <span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-config'</span>

diff --git a/elements/rh-code-block/prism.css.ts b/elements/rh-code-block/prism.css.ts
@@ -1,20 +1,6 @@
 import { css } from 'lit';
 
 const styles = css`
-  & code[class*="language-"],
-  & pre[class*="language-"] {
-    color: var(--_code-color);
-    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: var(--rh-line-height-code, 1.5);
-    tab-size: 4;
-    hyphens: none;
-    background: transparent;
-  }
 
   & pre[class*="language-"]::selection,
   & pre[class*="language-"] ::selection,

diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
@@ -127,6 +127,28 @@
   color: inherit;
 }
 
+#content::slotted(:is(code[class*='language-'], pre[class*='language-'])) {
+  color: var(--_code-color);
+  font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: var(--rh-line-height-code, 1.5);
+  tab-size: 4;
+  hyphens: none;
+  background: transparent;
+}
+
+:host([highlighting='prerendered']) {
+  .wrap {
+    #content::slotted(pre[class*='language-']) {
+      white-space: pre-wrap;
+    }
+  }
+}
+
 #content::slotted(rh-tag) {
   width: var(--rh-size-icon-06, 64px);
 }

diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
@@ -382,11 +382,17 @@ export class RhCodeBlock extends LitElement {
   }
 
   async #copy() {
-    await navigator.clipboard.writeText(
-      Array.from(
+    let content: string;
+    if (this.highlighting === 'prerendered') {
+      content = this.querySelector('pre')?.textContent ?? '';
+    } else {
+      content = Array.from(
         this.querySelectorAll('script'),
         x => x.textContent,
-      ).join('')
+      ).join('');
+    }
+    await navigator.clipboard.writeText(
+      content
     );
     // TODO: handle slotted fabs
     const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="action-label-copy"]');

diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
@@ -1,6 +1,7 @@
-import { LitElement, html, isServer, noChange } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -13,7 +14,6 @@ import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/c
 import type { IconNameFor, IconSetName } from '@rhds/icons';
 
 import style from './rh-cta.css';
-import { state } from 'lit/decorators/state.js';
 
 function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement {
   return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement;
@@ -106,19 +106,13 @@ export class RhCta extends LitElement {
   /** when `href` is set, the link's `target` attribute */
   @property() target?: string;
 
-  /**
-   * Icon name
-   */
+  /** Icon name */
   @property({ reflect: true }) icon?: IconNameFor<IconSetName>;
 
-  /**
-   * Icon set
-   */
+  /** Icon set */
   @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui';
 
-  /**
-   * Sets color theme based on parent context
-   */
+  /** Sets color theme based on parent context */
   @colorContextConsumer() @state() private on?: ColorTheme;
 
   protected override async getUpdateComplete(): Promise<boolean> {
@@ -142,17 +136,12 @@ export class RhCta extends LitElement {
     const rtl = this.#dir.dir === 'rtl';
     const isDefault = !variant;
     const svg = isDefault;
-    const iconOrSvg = isDefault || !!icon;
     const follower =
-      (variant !== 'brick' && icon) ?
-        html`<rh-icon .icon=${icon} .set=${iconSet ?? 'ui'}></rh-icon>`
-        : (variant === undefined) ?
-          html`<rh-icon set="ui" icon="arrow-right"></rh-icon>`
-          : html``;
+        (variant !== 'brick' && icon) ? html`<rh-icon icon=${icon} set=${iconSet ?? 'ui'}></rh-icon>`
+      : (variant === undefined) ? html`<rh-icon icon="arrow-right" set="ui"></rh-icon>`
+      : '';
     const iconContent =
-          (variant === 'brick' && icon) ?
-            html`<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`
-            : html``;
+      !(variant === 'brick' && icon) ? '' : html`<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`;
     const linkContent =
         !href ? html`<slot></slot>${follower}`
       : html`<a href=${href}
@@ -168,10 +157,16 @@ export class RhCta extends LitElement {
   }
 
   override firstUpdated() {
-    const { href, variant } = this;
+    // workaround for lit-ssr bugs
     if (!isServer) {
       this.removeAttribute('defer-hydration');
+      const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? [];
+      for (const dupe of duplicateContainers) {
+        dupe.remove();
+      }
     }
+    // TODO: remove in next major version, recommend static HTML audits instead
+    const { href, variant } = this;
     const cta =
          this.shadowRoot?.querySelector('a')
       ?? this.shadowRoot?.querySelector('slot')?.assignedElements().find(isSupportedContent)

diff --git a/elements/rh-icon/rh-icon.ts b/elements/rh-icon/rh-icon.ts
@@ -120,6 +120,14 @@ export class RhIcon extends LitElement {
     `;
   }
 
+  updated() {
+    // this is a workaround for an apparent webkit / lit-ssr bug
+    const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? [];
+    for (const dupe of duplicateContainers) {
+      dupe.remove();
+    }
+  }
+
   #getContent() {
     if (isServer) {
       const { set = 'standard', icon } = this;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -301,6 +301,8 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
+    "@lit-labs/ssr": "^3.2.2",
+    "@lit-labs/ssr-client": "^1.1.7",
     "@lit/reactive-element": "^2.0.4",
     "@lit/ts-transformers": "^2.0.1",
     "@parse5/tools": "^0.5.0",