feat(label-group): create pf-label-group element by saraDahanCode · Pull Request #2949 · patternfly/patternfly-elements

saraDahanCode · 2025-10-27T09:55:23Z

Partially addresses #2935

What I did

Created the new <pf-label-group> element.
Implemented functionality for grouping and displaying <pf-label> elements with support for removable and overflow states.
Added overflow behavior that collapses extra labels into a "+N more" indicator.
Added support for closing the entire label group at once.
Implemented title overflow handling to ensure long group titles truncate gracefully with ellipsis.
Integrated the group removal feature to dispatch a LabelGroupCloseEvent when the whole group is closed.
Added a demo page under /demo/pf-label-group/ showing various configurations (horizontal, vertical, removable, overflow, and closable examples).
Added CSS custom properties and shadow parts documentation following the Red Hat Design System style guides.
Added .changeset file with type minor to trigger a release.

Testing Instructions

Run npm start and open http://localhost:8000/elements/pf-label-group/demo/.
Verify that labels render correctly in horizontal and vertical orientations.
Test overflow by resizing the viewport — excess labels should collapse into a "+N more" label.
Check that removable labels can be removed individually, and verify that LabelCloseEvent is fired.
Run npm run lint and npm test to ensure all checks pass successfully.

Notes to Reviewers

Please confirm that all public fields, methods, slots, CSS custom properties, and shadow parts are documented according to the Red Hat style guide.
The .changeset file is set to minor, since this PR introduces a new element.
The commit message follows the Conventional Commits format
Ensure that the demo page provides adequate coverage for visual and accessibility testing.

changeset-bot · 2025-10-27T09:55:27Z

🦋 Changeset detected

Latest commit: e465aa7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/elements	Minor

Not sure what this means? Click here to learn what changesets are.

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

…verflow, and basic label groups

.changeset/config.json

.changeset/yummy-eagles-itch.md

elements/pf-label-group/demo/label-group-closeable.html

elements/pf-label-group/pf-label-group.ts

elements/pf-label-group/README.md

package.json

package-lock.json

saraDahanCode · 2025-11-03T14:27:28Z

@bennypowers
Error running npm run dev (also affects npm run test)

When running the dev server, three TypeScript type errors occur in tools/pfe-tools/dev-server/config.ts:

cors, cacheBusterMiddleware, liveReloadTsChangesMiddleware middlewares fail due to incompatible Koa types.

The errors indicate Property 'back' is missing and type conflicts between different @types/koa versions.

This prevents the dev server from starting and causes the tests to fail.

Example snippet:

127 cors, // TS2322: Type '(ctx: Context, next: Next) => Promise' is not assignable to type 'Middleware'
128 cacheBusterMiddleware,
129 liveReloadTsChangesMiddleware(config),

It seems related to multiple @types/koa versions being used in the project.

mguetta1 · 2025-11-04T10:39:28Z

@markcaron @bennypowers @zeroedin Hi,
I am trying to help to fix the tests in this PR. Can you please advise regarding the error here?
IIUC, the errors are in tools/pfe-tools/dev-server/config.ts which didn't change

.changeset/yummy-eagles-itch.md

elements/pf-label-group/demo/label-group-with-a-very-long-name.html

elements/pf-label-group/pf-label-group.css

elements/pf-label-group/pf-label-group.ts

elements/pf-label-group/README.md

package-lock.json

netlify · 2025-11-05T13:10:41Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`e465aa7`
🔍 Latest deploy log	https://app.netlify.com/projects/patternfly-elements/deploys/69c6984cd28c0200080da592
😎 Deploy Preview	https://deploy-preview-2949--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

…access in SSR

elements/pf-label-group/pf-label-group.ts

…access in SSR

elements/pf-label-group/pf-label-group.ts

.changeset/yummy-eagles-itch.md

elements/pf-label-group/demo/label-group-add-label-auto.html

elements/pf-label-group/test/pf-label-group.spec.ts

elements/pf-label-group/pf-label-group.ts

elements/pf-label-group/demo/label-group-add-label-custom-form.html

…-pf-lable-group

feat(label-group): change demo

elements/pf-label-group/pf-label-group.ts

elements/pf-label-group/demo/label-group-add-label-custom-form.html

- Remove add-label-mode concept; adding labels is external code's job - Remove add-label demos (auto, from-list, custom-form) - Align component with pf-chip-group patterns: - Use `@queryAssignedNodes` instead of manual slot querying - Use `?hidden` binding instead of conditional rendering (SSR-friendly) - Compute overflow text inline in template via `#remaining` getter - Handle removal via event listener pattern (cancelable) - Export proper Event subclasses - Fix CSS: - Replace hardcoded colors with PF global token fallbacks - Use CSS logical properties throughout - Add `::slotted([hidden])` rule (pf-label lacks `:host([hidden])`) - Remove `.add-label` styles - Add CSS custom property declarations on `:host` - Remove superfluous `type: String` from `@property` decorators - Add `@summary` JSDoc tag - Rewrite tests following pf-chip-group patterns: - Use `a11ySnapshot` assertions - Use `function()` instead of arrow functions - Add tests for overflow, closeable, num-labels, category, a11y - Clean up demos with minimal imports - Update changeset and README to match project conventions Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pf-label now dispatches a bubbling `ssr:label` event from connectedCallback during SSR. pf-label-group listens for this event and increments an internal label count, so the overflow template renders correctly on the server without querySelectorAll. Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Sara Dahan added 3 commits September 11, 2025 13:19

feat(label-group): add new label-group-element

d86e8ac

chore(label-group): minor updates

7f82f28

feat(label-group): add new functions and features for label management

9b251d6

saraDahanCode requested a review from bennypowers October 27, 2025 09:56

chore: add changeset for pf-label-group element

8514436

saraDahanCode changed the title ~~feat(label-group): create <pf-label-group> element #2935~~ feat(label-group): create pf-label-group element Oct 27, 2025

docs(label-group): add demos for closeable,overflow,vertical,header o…

8e3236a

…verflow, and basic label groups

bennypowers requested changes Oct 28, 2025

View reviewed changes

Sara Dahan added 4 commits October 28, 2025 12:46

fix: correct config path

751df4c

chore: small fixes after review

5528dd3

chore: push current state for debugging build errors

72c0833

chore(label-group): resolve merge conflicts and update package-lock.json

64688ae

Sara Dahan added 2 commits November 4, 2025 10:45

chore(label-group): fix errors

616b18d

chore(label-group): resolve patch conflict keeping upstream version

12c0d2a

saraDahanCode changed the title ~~feat(label-group): create pf-label-group element~~ feat(label-group): create pf-label-group element Nov 4, 2025

saraDahanCode changed the title ~~feat(label-group): create pf-label-group element~~ feat(label-group) : create pf-label-group element Nov 4, 2025

saraDahanCode changed the title ~~feat(label-group) : create pf-label-group element~~ feat(label-group): create pf-label-group element Nov 4, 2025

chore(label-group): resolve patch conflict keeping upstream version

bc5f6c9

saraDahanCode force-pushed the create-pf-lable-group branch from 420bb96 to bc5f6c9 Compare November 4, 2025 22:35

bennypowers requested changes Nov 5, 2025

View reviewed changes

Sara Dahan added 4 commits November 5, 2025 11:54

docs(label-group): update changeset to follow changelog format

5c721a7

chore(label-group): fix whitespace and formatting in demos

e211096

Revert changes to package-lock.json per PR review

89c762f

fix(label-group): make collapsedText placeholder generic

16212ee

fix(label-group): wrap #labels getter with server check to avoid DOM …

141781e

…access in SSR

bennypowers requested changes Nov 5, 2025

View reviewed changes

elements/pf-label-group/pf-label-group.ts Outdated Show resolved Hide resolved

Sara Dahan added 3 commits November 5, 2025 16:10

fix(label-group): wrap #labels getter with server check to avoid DOM …

9f82c0b

…access in SSR

fix(label-group): guard DOM access for SSR

fb079ed

docs: update README with latest instructions

06ada58

bennypowers requested changes Nov 6, 2025

View reviewed changes

elements/pf-label-group/pf-label-group.ts Outdated Show resolved Hide resolved

chore(label-group): update pf-label-group.ts

7348fd0

saraDahanCode marked this pull request as ready for review November 13, 2025 11:27

feat(label-group): add Functionality

37a1cb6

saraDahanCode requested review from bennypowers and zeroedin November 13, 2025 12:22

bennypowers requested changes Nov 16, 2025

View reviewed changes

Sara Dahan and others added 6 commits November 16, 2025 14:11

chore(label-group): apply the reqeasted changes

0dcec75

feat(label-group): add demo to add label

2eeae64

Merge remote-tracking branch 'sara/create-pf-lable-group' into create…

626f9f2

…-pf-lable-group

feat(label-group): change the demos

8cfa3ef

Merge pull request #1 from Michal7290/create-pf-lable-group

b00fa46

feat(label-group): change demo

chore(label-group): transferring the insertion logic from TS to Demos

cffdff2

saraDahanCode requested review from bennypowers November 20, 2025 13:14

bennypowers requested changes Dec 3, 2025

View reviewed changes

elements/pf-label-group/pf-label-group.ts Outdated Show resolved Hide resolved

elements/pf-label-group/demo/label-group-add-label-custom-form.html Outdated Show resolved Hide resolved

elements/pf-label-group/demo/label-group-add-label-custom-form.html Outdated Show resolved Hide resolved

Sara Dahan and others added 9 commits January 15, 2026 21:35

Merge remote-tracking branch 'upstream/main' into create-pf-lable-group

266be9c

docs(label-group): remove @defult

2d9e0e8

chore(label-group): make the model static

b549e8c

Merge branch 'main' into create-pf-lable-group

642b367

chore(label-group): separate add-label from label-group

c90b4ff

Merge branch 'main' into create-pf-lable-group

fea628a

fix(label-group): guard querySelectorAll for SSR

728389f

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Conversation

saraDahanCode commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saraDahanCode commented Nov 3, 2025

Uh oh!

mguetta1 commented Nov 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

saraDahanCode commented Oct 27, 2025 •

edited

Loading

changeset-bot bot commented Oct 27, 2025 •

edited

Loading

netlify bot commented Nov 5, 2025 •

edited

Loading