feat(label-group): create pf-label-group element
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
overflowbehavior 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
LabelGroupCloseEventwhen 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
.changesetfile with typeminorto trigger a release.
Testing Instructions
- Run
npm startand openhttp://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
LabelCloseEventis fired. - Run
npm run lintandnpm testto 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
.changesetfile 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 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
@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
It seems related to multiple @types/koa versions being used in the project.
@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
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...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.