patternfly-elements icon indicating copy to clipboard operation
patternfly-elements copied to clipboard

feat(label-group): create pf-label-group element

Open saraDahanCode opened this issue 2 months ago • 4 comments

Partially addresses #2935

What I did

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

Testing Instructions

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

Notes to Reviewers

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

saraDahanCode avatar Oct 27 '25 09:10 saraDahanCode

🦋 Changeset detected

Latest commit: cffdff2ebd99bb0cd444695265b7360211519927

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

changeset-bot[bot] avatar Oct 27 '25 09:10 changeset-bot[bot]

@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.

saraDahanCode avatar Nov 03 '25 14:11 saraDahanCode

@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

mguetta1 avatar Nov 04 '25 10:11 mguetta1

Deploy Preview for patternfly-elements ready!

Name Link
Latest commit 16212eef99ed5f6bfac92bfcf47e73f5ec602ac4
Latest deploy log https://app.netlify.com/projects/patternfly-elements/deploys/690b3428a6d17c0008a814a7
Deploy Preview https://deploy-preview-2949--patternfly-elements.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.

netlify[bot] avatar Nov 05 '25 13:11 netlify[bot]