Summary
Create a <pf-v6-about-modal> web component implementing the PatternFly v6 About modal component.
Branded full-screen modal for displaying application version, copyright, and system information.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Notes
- Likely a wrapper/extension of
pf-v6-modal with additional styles; explore that route before duplicating modal code
- Do not recreate TextContent/Text components - slot standard HTML tags instead
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core AboutModal
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- Built on native
<dialog> / pf-v6-modal via showModal()
isOpen prop, onClose event
- Named slots:
brand (logo image), content (version/info rows), default
brandImageSrc / brandImageAlt props or brand slot
productName prop or header slot
backgroundImageSrc for decorative bg image (CSS custom property preferred)
- Close button with
aria-label
role="dialog", aria-labelledby pointing to product name heading
- Trap focus inside while open (native
<dialog> handles this)
- Close on Escape (native
<dialog> handles this)
- Content area: version rows as
<dl> / <dt>/<dd> pairs recommended
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-about-modal>web component implementing the PatternFly v6 About modal component.Branded full-screen modal for displaying application version, copyright, and system information.
Prior Art
Notes
pf-v6-modalwith additional styles; explore that route before duplicating modal codeRequirements
@patternfly/react-coreAboutModalElement-specific considerations
<dialog>/pf-v6-modalviashowModal()isOpenprop,onCloseeventbrand(logo image),content(version/info rows), defaultbrandImageSrc/brandImageAltprops orbrandslotproductNameprop orheaderslotbackgroundImageSrcfor decorative bg image (CSS custom property preferred)aria-labelrole="dialog",aria-labelledbypointing to product name heading<dialog>handles this)<dialog>handles this)<dl>/<dt>/<dd>pairs recommendedChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)