feat(label-group): create pf-label-group element #2949
Conversation
🦋 Changeset detectedLatest commit: cffdff2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
saraDahanCode
changed the title
…verflow, and basic label groups
|
@bennypowers 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' It seems related to multiple @types/koa versions being used in the project. |
|
@markcaron @bennypowers @zeroedin Hi, |
saraDahanCode
changed the title
saraDahanCode
changed the title
saraDahanCode
changed the title
saraDahanCode
force-pushed
the
create-pf-lable-group
branch
from
420bb96 to
bc5f6c9
Compare
elements/pf-label-group/demo/label-group-with-a-very-long-name.html
Outdated
Show resolved
Hide resolved
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
feat(label-group): change demo
|
|
||
| /** | ||
| * Accessible label for the label group when no category name is provided. | ||
| * @default '' |
There was a problem hiding this comment.
| * @default '' |
There was a problem hiding this comment.
same for all the others. we don't need @default, our analyzer will pick it up from the initializer
| if (filledYes) filledYes.checked = true; | ||
| } | ||
|
|
||
| function openModal() { |
There was a problem hiding this comment.
it's not clear what this function is doing.
add a trigger button for the modal, and use modal events to handle close, as in line 128
| console.log('modal is created'); | ||
|
|
||
| modal.innerHTML = ` | ||
| <h2 slot="header">Add label</h2> |
There was a problem hiding this comment.
This modal content is static, so put it in the HTML rather than in javascript, and call showModal() on it when you need to
4 participants
Partially addresses #2935
What I did
<pf-label-group>element.<pf-label>elements with support for removable and overflow states.overflowbehavior that collapses extra labels into a "+N more" indicator.LabelGroupCloseEventwhen the whole group is closed./demo/pf-label-group/showing various configurations (horizontal, vertical, removable, overflow, and closable examples)..changesetfile with typeminorto trigger a release.Testing Instructions
npm startand openhttp://localhost:8000/elements/pf-label-group/demo/.LabelCloseEventis fired.npm run lintandnpm testto ensure all checks pass successfully.Notes to Reviewers
.changesetfile is set to minor, since this PR introduces a new element.