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

.changeset/yummy-eagles-itch.md

@@ -0,0 +1,21 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-label-group>`.
+
+
+A label group displays multiple labels together, helping users visualize related categories, filters, or items. 
+Each label can be removed individually, and the entire group can also be cleared at once. 
+The element automatically handles overflow for long lists of labels and supports both horizontal and vertical layouts.
+
+Use this when you need to show multiple tags, filters, or categorized items that users can remove, add, or adjust dynamically. 
+Avoid using it for single, standalone labels — consider using `<pf-label>` instead.
+
+```html
+<pf-label-group label="Filters" add-label-mode="fromList">
+ <pf-label removable>Security</pf-label>
+ <pf-label removable>Performance</pf-label>
+ <pf-label removable>Networking</pf-label>
+</pf-label-group>
+```

elements/package.json

@@ -36,6 +36,7 @@
  "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
  "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
  "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
+ "./pf-label-group/pf-label-group.js": "./pf-label-group/pf-label-group.js",
  "./pf-label/pf-label.js": "./pf-label/pf-label.js",
  "./pf-select/pf-select.js": "./pf-select/pf-select.js",
  "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js",

elements/pf-label-group/README.md

@@ -0,0 +1,62 @@
+# Label Group
+A label group is a collection of labels that can be grouped by category and used to represent one or more values assigned to a single attribute. 
+When the number of labels exceeds `numLabels`, additional labels are hidden under an overflow label.
+
+## Installation
+
+Load `<pf-label-group>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-label-group/pf-label-group.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-label-group/pf-label-group.js'
+```
+
+---
+
+## Usage
+
+```html
+<pf-label-group num-labels="2">
+ <span slot="category">Fruit Types</span>
+ <pf-label>Apple</pf-label>
+ <pf-label>Banana</pf-label>
+ <pf-label>Orange</pf-label>
+</pf-label-group>
+```
+
+Displays a group of labels, showing only the first two and an overflow label like “1 more” that expands on click.
+
+## Adding Labels
+
+`<pf-label-group>` supports adding new labels dynamically through the `addLabelMode` attribute:
+
+- `none` (default): No label addition.
+- `autoNoEdit`: Adds labels automatically without user editing.
+- `fromList`: Allows adding labels from a predefined list.
+- `customForm`: Lets users add custom labels via a form.
+
+Example:
+
+```html
+<pf-label-group add-label-mode="fromList">
+ <span slot="category">Filters</span>
+ <pf-label removable>Security</pf-label>
+ <pf-label removable>Performance</pf-label>
+</pf-label-group>
+
+Use this feature when you want users to dynamically add new tags or filters to the group.
+
+---
+
+

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

@@ -0,0 +1,11 @@
+<pf-label-group open>
+ <pf-label color="blue">Blue Label</pf-label>
+ <pf-label color="green">Green Label</pf-label>
+ <pf-label color="orange">Orange Label</pf-label>
+</pf-label-group>
+
+<script type="module">
+ import '@patternfly/elements/pf-label-group/pf-label-group.js'
+ import '@patternfly/elements/pf-label/pf-label.js'
+ import '@patternfly/elements/pf-button/pf-button.js'
+</script>

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

@@ -0,0 +1,38 @@
+<pf-label-group id="label-group" closeable>
+ <h2 slot="category">group name</h2>
+ <pf-label color="red" icon="info-circle" removable>label-1</pf-label>
+ <pf-label color="green" icon="info-circle" removable>label-2</pf-label>
+ <pf-label color="blue" icon="info-circle" removable>label-3</pf-label>
+
+ <pf-label id="add-button" color="blue" variant="outline" dismissible="false" >
+ Add label </pf-label>
+</pf-label-group>
+
+
+<script type="module">
+ import '@patternfly/elements/pf-label-group/pf-label-group.js'
+ import '@patternfly/elements/pf-label/pf-label.js'
+ import '@patternfly/elements/pf-button/pf-button.js'
+ import '@patternfly/elements/pf-modal/pf-modal.js'
+ import '@patternfly/elements/pf-dropdown/pf-dropdown.js'
+ document.getElementById('add-button').addEventListener('click', () =>{
+ const labelGroup = document.getElementById('label-group');
+ const newLabel = document.createElement('pf-label');
+ newLabel.setAttribute('color', 'grey');
+ newLabel.setAttribute('icon', 'info-circle');
+ newLabel.setAttribute('removable', 'true');
+ newLabel.textContent = `new-label`;
+ const firstLabel = labelGroup.querySelector('pf-label:not([slot])');
+ if (firstLabel) labelGroup.insertBefore(newLabel, firstLabel);
+ else labelGroup.appendChild(newLabel);
+ });
+</script>
+<style>
+ #add-button{
+cursor: pointer;
+ align-items: center;
+ gap: 4px;
+ transition: border 0.2s ease;
+ border-radius: 0.99rem;
+ }
+</style>