Skip to content

chore: adopt cem - #2455

Merged
bennypowers merged 32 commits into
mainfrom
docs/cem-tool-update
Jul 20, 2025
Merged

chore: adopt cem#2455
bennypowers merged 32 commits into
mainfrom
docs/cem-tool-update

Conversation

@bennypowers

@bennypowers bennypowers commented Jun 17, 2025

Copy link
Copy Markdown
Member

What I did

  1. replace @custom-elements-manifest/analyzer with @pwrs/cem
  2. move part and slot docs into templates let's do this separately
  3. move css prop docs into css files let's do this separately

@changeset-bot

changeset-bot Bot commented Jun 17, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: dbb896c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify

netlify Bot commented Jun 17, 2025

Copy link
Copy Markdown

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit d731efc
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/687c8a212ac11b000891ac78
😎 Deploy Preview https://deploy-preview-2455--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@bennypowers

Copy link
Copy Markdown
Member Author

there's an irreconcileable conflict between the old analyzer and the new one.

so this is blocked on patternfly/patternfly-elements#2912

@bennypowers
bennypowers marked this pull request as ready for review July 16, 2025 11:39
@github-actions

github-actions Bot commented Jul 16, 2025

Copy link
Copy Markdown
Contributor

Size Change: +236 B (+0.1%)

Total Size: 235 kB

Filename Size Change
./elements.js 538 B -5 B (-0.92%)
./elements/rh-accordion/rh-accordion-header.js 2.67 kB -3 B (-0.11%)
./elements/rh-accordion/rh-accordion-panel.js 1.27 kB +1 B (+0.08%)
./elements/rh-accordion/rh-accordion.js 3.34 kB +14 B (+0.42%)
./elements/rh-alert/rh-alert.js 5.05 kB +7 B (+0.14%)
./elements/rh-announcement/rh-announcement.js 2.14 kB +13 B (+0.61%)
./elements/rh-audio-player/rh-audio-player.js 12.6 kB +12 B (+0.1%)
./elements/rh-avatar/rh-avatar.js 2.69 kB +11 B (+0.41%)
./elements/rh-back-to-top/rh-back-to-top.js 1.97 kB +8 B (+0.41%)
./elements/rh-badge/rh-badge.js 1.63 kB +6 B (+0.37%)
./elements/rh-blockquote/rh-blockquote.js 1.38 kB +8 B (+0.58%)
./elements/rh-breadcrumb/rh-breadcrumb.js 1.03 kB +10 B (+0.98%)
./elements/rh-button/rh-button.js 3.29 kB +8 B (+0.24%)
./elements/rh-card/rh-card.js 3.44 kB +9 B (+0.26%)
./elements/rh-chip/rh-chip.js 2.07 kB +10 B (+0.49%)
./elements/rh-code-block/rh-code-block.js 7.67 kB +12 B (+0.16%)
./elements/rh-cta/rh-cta.js 3.92 kB +9 B (+0.23%)
./elements/rh-dialog/rh-dialog.js 4.82 kB +9 B (+0.19%)
./elements/rh-disclosure/rh-disclosure.js 2.26 kB +9 B (+0.4%)
./elements/rh-footer/rh-footer.js 4.85 kB +9 B (+0.19%)
./elements/rh-health-index/rh-health-index.js 2.41 kB +8 B (+0.33%)
./elements/rh-icon/rh-icon.js 2.51 kB +9 B (+0.36%)
./elements/rh-jump-links/rh-jump-links.js 2.36 kB +10 B (+0.42%)
./elements/rh-menu/rh-menu.js 1.22 kB +8 B (+0.66%)
./elements/rh-navigation-primary/rh-navigation-primary.js 7.16 kB +13 B (+0.18%)
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.27 kB +14 B (+0.27%)
./elements/rh-pagination/rh-pagination.js 5.58 kB +11 B (+0.2%)
./elements/rh-site-status/rh-site-status.js 2.39 kB +11 B (+0.46%)
./elements/rh-skip-link/rh-skip-link.js 1.2 kB +7 B (+0.59%)
./elements/rh-spinner/rh-spinner.js 1.3 kB +10 B (+0.77%)
./elements/rh-stat/rh-stat.js 2.08 kB +7 B (+0.34%)
./elements/rh-subnav/rh-subnav.js 2.43 kB +9 B (+0.37%)
./elements/rh-surface/rh-surface.js 901 B +8 B (+0.9%)
./elements/rh-switch/rh-switch.js 2.9 kB +10 B (+0.35%)
./elements/rh-table/rh-table.js 2.9 kB +8 B (+0.28%)
./elements/rh-tabs/rh-tabs.js 3.62 kB +9 B (+0.25%)
./elements/rh-tag/rh-tag.js 2.69 kB +10 B (+0.37%)
./elements/rh-tile/rh-tile.js 4.9 kB +8 B (+0.16%)
./elements/rh-timestamp/rh-timestamp.js 991 B +8 B (+0.81%)
./elements/rh-tooltip/rh-tooltip.js 3.13 kB +8 B (+0.26%)
./elements/rh-video-embed/rh-video-embed.js 4.61 kB +9 B (+0.2%)
./react/rh-accordion/rh-accordion.js 202 B -13 B (-6.05%)
./react/rh-audio-player/rh-audio-player-rate-stepper.js 199 B -14 B (-6.57%)
./react/rh-audio-player/rh-transcript.js 187 B -20 B (-9.66%) 👏
./react/rh-icon/rh-icon.js 195 B -7 B (-3.47%)
./react/rh-jump-links/rh-jump-link.js 183 B -13 B (-6.63%)
./react/rh-navigation-primary/rh-navigation-primary-item.js 198 B -12 B (-5.71%)
./react/rh-switch/rh-switch.js 174 B -11 B (-5.95%)
./react/rh-table/rh-sort-button.js 200 B -13 B (-6.1%)
./react/rh-tile/rh-tile.js 181 B -13 B (-6.7%)
ℹ️ View Unchanged
Filename Size
./elements/rh-accordion/context.js 162 B
./elements/rh-audio-player/rh-audio-player-about.js 1.81 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.4 kB
./elements/rh-audio-player/rh-cue.js 1.95 kB
./elements/rh-audio-player/rh-transcript.js 2.68 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-chip/context.js 165 B
./elements/rh-chip/rh-chip-group.js 1.58 kB
./elements/rh-code-block/prism.css.js 667 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 714 B
./elements/rh-footer/rh-footer-copyright.js 357 B
./elements/rh-footer/rh-footer-links.js 1.19 kB
./elements/rh-footer/rh-footer-social-link.js 1.15 kB
./elements/rh-footer/rh-footer-universal.js 3.96 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-jump-links/context.js 179 B
./elements/rh-jump-links/rh-jump-link.js 1.55 kB
./elements/rh-jump-links/rh-jump-links-list.js 1.17 kB
./elements/rh-navigation-primary/context.js 176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js 3.48 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js 534 B
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 562 B
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-table/rh-sort-button.js 1.4 kB
./elements/rh-tabs/context.js 226 B
./elements/rh-tabs/rh-tab-panel.js 1 kB
./elements/rh-tabs/rh-tab.js 2.98 kB
./elements/rh-tile/rh-tile-group.js 1.78 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 593 B
./lib/context/headings/provider.js 1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js 1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.18 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.37 kB
./lib/ScreenSizeController.js 876 B
./lib/ssr-controller.js 201 B
./lib/themable.js 549 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-announcement/rh-announcement.js 189 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-chip/rh-chip-group.js 182 B
./react/rh-chip/rh-chip.js 187 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-disclosure/rh-disclosure.js 192 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-jump-links/rh-jump-links-list.js 189 B
./react/rh-jump-links/rh-jump-links.js 195 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js 205 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js 199 B
./react/rh-navigation-primary/rh-navigation-primary.js 189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/ssr-failure-recoverable.js 581 B
./uxdot/uxdot-best-practice.js 812 B
./uxdot/uxdot-color-scheme-picker.js 1.56 kB
./uxdot/uxdot-copy-button.js 1.24 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-demo.js 2.74 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 837 B
./uxdot/uxdot-header.js 1.02 kB
./uxdot/uxdot-knob-attribute.js 3.53 kB
./uxdot/uxdot-masthead.js 1.36 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 615 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.72 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.23 kB
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-sidenav.js 2.68 kB
./uxdot/uxdot-spacer-tokens-table.js 2.46 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

@bennypowers
bennypowers enabled auto-merge (squash) July 16, 2025 12:22
@adamjohnson
adamjohnson self-requested a review July 16, 2025 14:26

@adamjohnson adamjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Getting return is not defined after running npm run dev and loading localhost:8000. 8000 doesn't load / is a white page in the browser.

Here's my terminal output: https://app.warp.dev/block/DD60n1cKaVvHaLzC8MOwnR

@bennypowers

Copy link
Copy Markdown
Member Author

I think the test failures result from the upgraded playwright version

@bennypowers

Copy link
Copy Markdown
Member Author

Ok this is ready for review. Things to watch out for:

  • element paths in docs and demos are correct, especially for aliased elements (e.g. rh-cta -> call to action)
  • primary demos show up in docs overview
  • other demos show up in /demos/

@bennypowers
bennypowers force-pushed the docs/cem-tool-update branch from 7a2ac0e to f155c48 Compare July 18, 2025 14:24
@bennypowers bennypowers mentioned this pull request Jul 18, 2025
@adamjohnson

adamjohnson commented Jul 18, 2025

Copy link
Copy Markdown
Collaborator
Screenshot of the Demos page in the DP showing main demos 404ing

If you go to any component's Demos page and look for the main demo (eg rh-accordion.html, rh-pagination.html, etc), each one shows a 404 in the <uxdot-demo> preview.

Looks like the path /elements/accordion/demo/ 404's too.

Still reviewing, but I thought I would surface this.

@adamjohnson adamjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some more things I found:

  • On each components Overview page in the docs, the knobs demo takes the first demo listed under the Demos page. This seems to never be the default rh-{component}.html demo—rather, some variant. The Overview knobs demo should show each component's default demo.
  • On the Demos page (eg: /elements/accordion/demos/), the default demo is never first. It should appear first in the list.
  • If I clone this PR and run it locally on the dev server, clicking the image for each demo does not include the trailing / for the base demo's permalink. 👇
Red boxes outlining the photos on localhost 8000
  • Running this locally and hitting the correct base demo URL (eg: localhost:8000/elements/accordion/demo/) does not show the accordion demo, but the All elements overview (same view as localhost:8000).
    • Hitting the other variants of a component does work
  • When hitting localhost:8000, there is a link ("Accordion") in the first <pf-card> and, instead of having the header say "Accordion", it says "Expanded Index".
Red arrow pointing to the first link of accordion demos on localhost 8000
  • When hitting localhost:8000, Jump Links and Tabs have duplicate links to their various demos.
  • When hitting localhost:8000, not all Footer demos are listed under the Footer component.

Comment thread elements/rh-accordion/rh-accordion-header.ts
Comment thread elements/rh-navigation-primary/rh-navigation-primary.ts
Comment thread elements/rh-navigation-secondary/rh-navigation-secondary.ts
@bennypowers

Copy link
Copy Markdown
Member Author

ok @adamjohnson i think i addressed everything. we don't need to repeat overview demo on demos page

@bennypowers bennypowers changed the title chore: replace old analyzer with new generator chore: adopt cem Jul 20, 2025
@bennypowers
bennypowers dismissed adamjohnson’s stale review July 20, 2025 06:23

thanks for the review, i addressed all points, and am merging now to unblock other PRs. any remaining issues we'll take up elsewhere

@bennypowers
bennypowers disabled auto-merge July 20, 2025 06:23
@bennypowers
bennypowers merged commit 63dcc2a into main Jul 20, 2025
8 checks passed
@bennypowers
bennypowers deleted the docs/cem-tool-update branch July 20, 2025 06:23
@github-project-automation github-project-automation Bot moved this from Review 🔍 to Done ☑️ in Red Hat Design System Jul 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done ☑️

Development

Successfully merging this pull request may close these issues.

2 participants