[feat]: Create `<pf-v6-page>` element
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Feature
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- css, typescript
- Bereich
- accessibility, design, frontend
Rechercherichtung
Start with the PatternFly v6 Page reference and .claude/ADVICE.md, then review the listed Page, PageSidebar, and PageSection APIs and slot requirements. Done means the web components provide the requested responsive layout and API, with demos, public API and a11ySnapshot tests, review checks, a changeset, and a PR targeting staging/pfv6.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Summary
Create a <pf-v6-page> web component implementing the PatternFly v6 Page component.
Top-level application layout providing masthead, sidebar, and main content areas with responsive behavior.
Prior Art
| Source | Element | Status |
|---|---|---|
| PFE v4 | -- | -- |
| cem | <pf-v6-page> |
Exists |
| cockpit | <pf-v6-page> |
Exists |
| chickadee | -- | -- |
Sub-components
<pf-v6-page-sidebar>- Collapsible sidebar container<pf-v6-page-section>- Content section within the main area
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-corePage - 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
isManagedSidebarprop: page controls sidebar open/close stateisNavOpen/defaultNavOpenfor sidebar visibilitymainContainerIdfor skip-to-content link target (coordinate withpf-v6-skip-to-content)- Named slots:
masthead,sidebar,breadcrumb,notification-drawer, default (main content) PageSection:variant(default/light/dark/darker),padding,isFilled,isWidthLimitedPageSidebar:isSidebarOpen,theme(light/dark)- Breadcrumb and notification drawer slot integration
- Main area
<main>element should haveidmatchingmainContainerId
Checklist
Implementation
- API per
.claude/ADVICE.md - CSS uses v6 tokens, logical properties, nesting
-
@summaryand JSDoc on element class
Demos
- Demos match patternfly.org naming/structure
- CSS custom properties match computed styles from patternfly.org (Chrome MCP)
- Visual parity verified via Chrome MCP
Tests
- Public API covered (attributes, properties, events, slots)
-
a11ySnapshotassertions
Reviews
-
/review-apipasses -
/review-demospasses -
/review-a11ypasses -
eslintandstylelintpass
Ship
- Add changeset
- PR targets
staging/pfv6(NOTmain)
- Vorherrschende Sprache
- TypeScript
- Sterne
- 394
- Forks
- 107
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus patternfly/patternfly-elements
-
bug
patternfly/patternfly-elements#3158 · 1 zugewiesene Person ·
-
patternfly/patternfly-elements#3136 · 1 Kommentar · 1 zugewiesene Person ·
-
docs
patternfly/patternfly-elements#3131 · 1 zugewiesene Person ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100
patternfly/patternfly-elements#3122 ·
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 38/100
patternfly/patternfly-elements#3118 ·
Alle Issues in patternfly/patternfly-elements
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
diegosouzapw/OmniRoute#14869 ·
-
enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 94/100
-
status: waiting triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
freeCodeCamp/freeCodeCamp#70412 ·
-
Mend: dependency security vulnerability untriaged
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 88/100