fix!: rename elements (#2319)

* fix!: rename elements

chore: remove elements changelogs

docs: rename tags

fix: accordion

chore: commitlint

style: whitespace

docs: rename tags

fix: rename tags

fix: rename tags

fix: rename helpers

fix: typo

fix: tools config

fix: start script

* chore: remove references to component version property

* test: import specifiers

* chore: changeset

* fix(spinner): css

* fix(timestamp): tests

* fix: updating prefix to pf from pfe

* fix: revert pfe-assets change, updating icon in main.mjs, badge docs element tag fix

* docs(clipboard-copy): demo heading

* docs(code-block): update readme

* docs(code-block): update demo

* test(code-block): update tests

* docs: icon url

* fix: various typos

* fix(tools): 11ty passthrough copy

* fix(tools): passthrough element copy

* docs(icon): custom demo

* docs: fix snippet rendering

* docs: update zero-md use

* chore: bust cache for analyze script

* fix(icon): make base size property abstract

* chore: run docs script in preview build

* docs: fix brand icon

* fix(tools): 11ty passthrough

* fix(tools)!: move pfe-assets 11ty plugin out of pfe-tools

* docs: brand icon

* fix(tools): dev server bundle

* docs: icon import path

* docs: fix landing page styles

* docs: add generator meta tag

* docs: landing hero

* fix(card): always place footer at end of card

* docs: update landing page

* docs: fix passthrough copy

* chore: incremental 11ty builds

* chore: debug 11ty build in ci

* docs: fix netlify html shenanigans

* style: lint

* docs(icon): styling icons

* fix(tools): redirect demo subresources

* docs: link special demo subresources from their dirs

* fix(tools): rewrite demo subresources in 11ty

* style: lint

* docs: data-demo container for 11ty demos

* fix(card): removing position absolute on header part, adding display flex to article in basecard

* docs: demo page styles 11ty

* fix(tools): actually render 11ty pages

* fix(card): footer layout when card is in a grid container

* fix(avatar): hardcode default avatars

* chore: remove last vestiges of pfe

* feat(avatar): load event

* docs: wip version selector fix

* docs: fix temporary version select

---------

Co-authored-by: Steven Spriggs <[email protected]>
Co-authored-by: Brian Ferry <[email protected]>

.changeset/eighty-ways-exercise.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": major
+---
+
+Moved `pfe-assets` 11ty plugin to local docs folder

.changeset/heavy-dots-reply.md

@@ -0,0 +1,16 @@
+---
+"@patternfly/create-element": patch
+"@patternfly/pfe-tools": patch
+"@patternfly/pfe-core": patch
+"@patternfly/elements": major
+---
+
+Renamed all element prefixes from `pfe-` to `pf-`.
+
+```html
+<!-- BEFORE: -->
+<pfe-button>Cancel</pfe-button>
+
+<!-- AFTER: -->
+<pf-button>Ok</pf-button>
+```

.changeset/nervous-files-repair.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": minor
+---
+
+`<pf-timestamp>`: Added `time` and `isoString` readonly properties.

.changeset/two-dogs-unite.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-icon>`: make the `size` property abstract in `BaseIcon`

.commitlintrc.cjs

@@ -1,7 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 const normalizeWorkspace = x =>
-  fs.readdirSync(path.join(__dirname, x)).map(x => x.replace('pfe-', ''));
+  fs.readdirSync(path.join(__dirname, x)).map(x => x.replace('pf-', ''));
 
 module.exports = {
   extends: ['@commitlint/config-conventional'],
@@ -16,6 +16,9 @@ module.exports = {
       'deps',
       'docs',
       'scripts',
+      'elements',
+      'core',
+      'tools',
       ...normalizeWorkspace('elements'),
       ...normalizeWorkspace('core'),
       ...normalizeWorkspace('tools'),

.github/workflows/preview.yml

@@ -17,7 +17,8 @@ jobs:
           cache: npm
 
       - run: npm ci --prefer-offline
-      - run: npm run build
+      - run: npm run docs
+      - run: cat _site/components/icon/demo/custom-icon-sets/index.html
 
       - name: Publish to Netlify
         env:

.gitignore

@@ -63,7 +63,7 @@ tools/*/test/**/*.png
 !core/*/demo/*
 !tools/*/demo/*
 
-!elements/pfe-icon/demo/icons/**/*.js
+!elements/pf-icon/demo/icons/**/*.js
 
 !scripts/**/*.js
 

DISCOVERY.md

@@ -1,5 +1,6 @@
 # Project name
-_NOTE:_ Please convert this file to WHY.md and save it in the folder for the elements it references (i.e., `elements/pfe-cta/WHY.md`).
+_NOTE:_ Please convert this file to WHY.md and save it in the folder for the 
+elements it references (i.e., `elements/pf-cta/WHY.md`).
 
 |  |  |
 | --- | --- |
@@ -37,4 +38,4 @@ As a search-engine, this component should...
 If there is time, these features are nice-to-haves.
 
 ## Out-of-scope // @TODO later
-These are some things we would like to add later to enhance this component.
+These are some things we would like to add later to enhance this component.

README.md

@@ -7,7 +7,7 @@
 3. [Creating components][creating]
 4. [Theming components][theming]
 
-[PatternFly Elements][pfe-home] is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components. PatternFly Elements are:
+[PatternFly Elements][home] is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components. PatternFly Elements are:
 
 - **Lightweight**: small file size, minimal boilerplate, no "framework-like" features.
 - **Universal**: write once, use everywhere. PatternFly Elements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
@@ -58,10 +58,10 @@ npm start
 npm run test:watch
 
 # Run a single test in watch mode.
-npm run test:watch -- --files elements/pfe-accordion/test/pfe-accordion.spec.ts
+npm run test:watch -- --files elements/pf-accordion/test/pf-accordion.spec.ts
 
 # Or multiple:
-npm run test:watch -- --files 'elements/pfe-{select,card}/test/*.spec.ts'
+npm run test:watch -- --files 'elements/pf-{select,card}/test/*.spec.ts'
 
 # Run all tests excluding react and vue tests.
 npm run test:watch
@@ -108,15 +108,15 @@ You can also participate in discussions on [patternfly.slack.com](https://patter
 
 ---
 
-[home][pfe-home] |
+[home][home] |
 [start][getting-started] |
 [develop][creating] |
 [theming][theming] |
 [catalog] |
 [web components][wc-org]
 
 
-[pfe-home]: https://patternflyelements.org
+[home]: https://patternflyelements.org
 [getting-started]: https://patternflyelements.org/get-started
 [catalog]: https://patternflyelements.org/components
 [creating]: https://patternflyelements.org/docs/develop/create/

brand/styles.css

@@ -17,13 +17,13 @@ h1 {
     height: 36px;
 }
 
-pfe-card .img-link {
+pf-card .img-link {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-pfe-card h2 {
+pf-card h2 {
     margin-bottom: 0;
     padding-bottom: .5rem;
     margin-top: 0;
@@ -44,17 +44,17 @@ pfe-card h2 {
     margin-bottom: 0;
 }
 
-pfe-card h2,
-pfe-card h3 {
+pf-card h2,
+pf-card h3 {
     margin-top: 8px;
 }
 
-pfe-card h3 {
+pf-card h3 {
     font-weight: 700;
     margin-bottom: 16px;
 }
 
-pfe-card .cta {
+pf-card .cta {
     min-width: 100%;
 }
 

core/pfe-core/README.md

@@ -19,8 +19,8 @@ Utilities for building PatternFly elements.
 - `@cascades` - cascades the decorated property to configured light and shadow child elements
 - `@initializer` - executes a decorated method when the element upgrades and on DOM mutations (opt-out)
 - `@observed` - runs a callback when the decorated property changes
-- `@pfelement` - enabled body auto-reveal as well as colour context and other PFE features
-- `@time` - tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
+- `@time` - tracks the time a method takes to complete using the [performance 
+  API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
 - `@trace` - debug decorator which logs the name and result of a class method whenever it runs
 
 ## Directives

core/pfe-core/controllers/perf-controller.ts

@@ -13,8 +13,8 @@ export class PerfController implements ReactiveController {
     // Set up the mark ID based on existing ID on component if it exists
     if (!host.id) {
       this.markId = getRandomId(host.localName);
-    } else if (host.id.startsWith('pfe-') && !host.id.startsWith(host.localName)) {
-      this.markId = host.id.replace('pfe', host.localName);
+    } else if (host.id.startsWith('pf-') && !host.id.startsWith(host.localName)) {
+      this.markId = host.id.replace('pf', host.localName);
     } else {
       this.markId = `${host.localName}-${host.id}`;
     }

core/pfe-core/controllers/slot-controller.ts

@@ -20,12 +20,12 @@ export interface SlotsConfig {
   slots: (string|null)[];
   /**
    * Object mapping new slot name keys to deprecated slot name values
-   * @example `pfe-modal--header` is deprecated in favour of `header`
+   * @example `pf-modal--header` is deprecated in favour of `header`
    * ```js
    * new SlotController(this, {
    *   slots: ['header'],
    *   deprecations: {
-   *     'header': 'pfe-modal--header'
+   *     'header': 'pf-modal--header'
    *   }
    * })
    * ```

core/pfe-core/core.ts

@@ -73,13 +73,13 @@ const bodyNoAutoReveal = document.body.hasAttribute('no-auto-reveal');
 
 /** Global patternfly elements config */
 window.PfeConfig = Object.assign(window.PfeConfig ?? {}, {
-  trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pfe-track-performance') === 'true',
+  trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pf-track-performance') === 'true',
   // if the body tag has `no-auto-reveal` attribute, reveal immediately
-  // if `<meta name="pfe-auto-reveal">` exists, and it's `content` is 'true',
+  // if `<meta name="pf-auto-reveal">` exists, and it's `content` is 'true',
   // then auto-reveal the body
   autoReveal: window.PfeConfig?.autoReveal ?? (
       bodyNoAutoReveal ? !bodyNoAutoReveal
-    : getMeta('pfe-auto-reveal') === 'true'
+    : getMeta('pf-auto-reveal') === 'true'
   ),
   get log() {
     return !!localStorage.pfeLog;

core/pfe-core/package.json

@@ -33,7 +33,6 @@
     "./decorators/deprecation.js": "./decorators/deprecation.js",
     "./decorators/initializer.js": "./decorators/initializer.js",
     "./decorators/observed.js": "./decorators/observed.js",
-    "./decorators/pfelement.js": "./decorators/pfelement.js",
     "./decorators/time.js": "./decorators/time.js",
     "./decorators/trace.js": "./decorators/trace.js",
     "./functions/debounce.js": "./functions/debounce.js",

docs/_data/importMap.cjs

@@ -82,11 +82,11 @@ module.exports = async function() {
   ]);
 
   const map = generator.getMap();
+  map.imports['/docs/zero-md.js'] = '/zero-md.js';
   map.imports['@patternfly/elements'] = '/pfe.min.js';
-  fs.readdirSync(path.join(__dirname, '..', '..', 'elements')).flatMap(component => {
-    const base = component.replace('pfe-', '');
-    map.imports[`@patternfly/elements/${component}/${component}.js`] = `/pfe.min.js`;
-  });
+  for (const tagName of fs.readdirSync(path.join(__dirname, '..', '..', 'elements'))) {
+    map.imports[`@patternfly/elements/${tagName}/${tagName}.js`] = `/pfe.min.js`;
+  }
   map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js';
 
   return map;

docs/_includes/_head.njk

@@ -2,8 +2,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <meta name="theme-color" content="#004080">
+  <meta name="generator" content="Eleventy">
   <meta name="description" content="{{ title }} - PatternFly Elements">
-  <meta name="pfe-auto-reveal" content="true">
+  <meta name="pf-auto-reveal" content="true">
   <title>{{ element.title or title }} - PatternFly Elements</title>
   <link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}" rel="shortcut icon">
 
@@ -13,7 +14,7 @@
     rel="stylesheet">
 
   <noscript>
-    <link rel="stylesheet" href="{{ '../../core/styles/pfe--noscript.min.css' | url }}">
+    <link rel="stylesheet" href="{{ '../../core/styles/pf--noscript.min.css' | url }}">
   </noscript>
 
   <link rel="stylesheet" href="{{ '/prism.css' | url }}">

docs/_includes/_nav.njk

@@ -4,21 +4,36 @@
       <img src="{{ '/brand/logo/svg/pfe-icon-white-shaded.svg' | url }}" alt="PatternFly Elements - Home">
       PatternFly Elements
     </a>
-    <pfe-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
+    {# TODO: implement pf-dropdown
+    <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
       {% for version in versions %}
       {%- if version.current -%}
         {%- set prefix = '' -%}
       {%- else -%}
         {%- set prefix = '/' + version.slug -%}
       {%- endif %}
-      <pfe-dropdown-item
+      <pf-dropdown-item
           item-type="link"
           data-version="{{ version.slug }}"
           data-label="{{ version.label }}">
         <a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
-      </pfe-dropdown-item>
+      </pf-dropdown-item>
       {% endfor %}
-    </pfe-dropdown>
+    </pf-dropdown>
+    #}
+    <select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
+      {% for version in versions %}
+      {%- if version.current -%}
+        {%- set prefix = '' -%}
+      {%- else -%}
+        {%- set prefix = '/' + version.slug -%}
+      {%- endif %}
+      <option
+          value="{{ prefix }}{{ page.url }}"
+          data-version="{{ version.slug }}"
+          data-label="{{ version.label }}">{{ version.label }}</option>
+      {% endfor %}
+    </select>
     <script type="module">
       const dropdown = document.getElementById('docs-versions-dropdown');
       const items = dropdown.querySelectorAll('[data-version]');

docs/_includes/layout-blog-index.njk

@@ -10,14 +10,14 @@ layout: layout-base.njk
   </header>
   <section class="band">{% if content.trim().length %}
     <div id="content">{{ content | safe }}</div>{% endif %}{% for post in collections.blog %}
-    <pfe-card>
+    <pf-card>
       <h2 slot="header">{{ post.data.title }}</h2>{% if post.data.tagline %}
         <p class="tagline">{{ post.data.tagline }}</p>{% endif %}
       {% if post.data.description %}
         {{ post.data.description }}
       {% endif %}
       <a class="cta" slot="footer" href="{{ post.data.page.url }}">Read Post</a>
-    </pfe-card>{% endfor %}
+    </pf-card>{% endfor %}
   </section>
 </main>