fix(code-block)!: remove BaseCodeBlock

.changeset/remove-basecodeblock.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-code-block>`: Removed `BaseCodeBlock` class. Reimplement (recommended) or extend `PfCodeBlock`.

elements/package.json

@@ -31,7 +31,6 @@
     "./pf-chip/pf-chip.js": "./pf-chip/pf-chip.js",
     "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
     "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
-    "./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js",
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
     "./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
     "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.ts",

elements/pf-code-block/pf-code-block.css

@@ -1,10 +1,16 @@
 :host {
+  display: block;
   background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);
   font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);
   font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
 }
 
+[hidden] {
+  display: none !important;
+}
+
 #container {
+  margin: 0;
   padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);
   padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);
   padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);
@@ -15,10 +21,6 @@
   border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
 }
 
-#container {
-  margin: 0;
-}
-
 pre {
   margin: 0;
 }
@@ -46,6 +48,7 @@ button svg {
   color: #151515;
   margin-right: 12px;
   transition: .2s ease-in 0s;
+  vertical-align: -0.125em;
 }
 
 .expanded button svg {

elements/pf-code-block/pf-code-block.ts

@@ -1,13 +1,11 @@
-import { html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { BaseCodeBlock } from './BaseCodeBlock.js';
 import styles from './pf-code-block.css';
 
 /**
  * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
- *
  * @slot code
  *       The slot to put the code in
  * @slot expandable-code
@@ -28,20 +26,33 @@ import styles from './pf-code-block.css';
  * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace`}
  */
 
+function dedent(str: string): string {
+  const stripped = str.replace(/^\n/, '');
+  const match = stripped.match(/^\s+/);
+  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
+}
+
 @customElement('pf-code-block')
-export class PfCodeBlock extends BaseCodeBlock {
-  static readonly styles = [...BaseCodeBlock.styles, styles];
+export class PfCodeBlock extends LitElement {
+  static readonly styles = [styles];
 
+  /** Flag for whether the code block is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  #toggle() {
-    this.expanded = !this.expanded;
-  }
-
   get #expandedContent(): string {
     return this.querySelector('script[data-expand]')?.textContent ?? '';
   }
 
+  get #content() {
+    const script = this.querySelector<HTMLScriptElement>('script[type]');
+    if (script?.type !== 'text/javascript-sample'
+        && !!script?.type.match(/(j(ava)?|ecma|live)script/)) {
+      return '';
+    } else {
+      return dedent(script?.textContent ?? '');
+    }
+  }
+
   override render() {
     const { expanded } = this;
     return html`
@@ -51,18 +62,28 @@ export class PfCodeBlock extends BaseCodeBlock {
         </div>
       </div>
       <div id="container" class="${classMap({ expanded })}">
-        <pre><code id="content">${this.content}</code><code id="code-block-expand"
-          ?hidden="${!expanded}">${this.#expandedContent}</code></pre>
+        <pre><code id="content">${this.#content}</code><code id="code-block-expand"
+            ?hidden="${!expanded}">${this.#expandedContent}</code></pre>
         <button ?hidden="${!this.#expandedContent}"
                 @click=${this.#toggle}
                 aria-expanded=${this.expanded}
                 aria-controls="code-block-expand">
-          <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 256 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
+          <svg fill="currentColor"
+               height="1em"
+               width="1em"
+               viewBox="0 0 256 512"
+               aria-hidden="true"
+               role="img"><path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/></svg>
           ${!this.expanded ? 'Show more' : 'Show less'}
         </button>
       </div>
     `;
   }
+
+  #toggle() {
+    this.expanded = !this.expanded;
+  }
 }
 
 declare global {