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

.changeset/yummy-eagles-itch.md

@@ -0,0 +1,27 @@
+---
+"@patternfly/elements": minor
+---
+
+Introduced `<pf-label-group>` with add-label functionality.
+
+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.
+
+This release adds support for **adding new labels** dynamically through different modes:
+
+- `none`: No add-label UI.
+- `autoNoEdit`: Automatically adds a new label without user input.
+- `fromList`: Shows a dropdown list of predefined labels to choose from.
+- `customForm`: Opens a custom form for entering a new label's text, color, icon, and dismissable option.
+
+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,14 @@
+<pf-label-group closeable add-label-mode="autoNoEdit">
+  <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-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';
+</script>

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

@@ -0,0 +1,14 @@
+<pf-label-group add-label-mode="customForm">
+  <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-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';
+</script>

elements/pf-label-group/demo/label-group-add-label-from-list.html

@@ -0,0 +1,14 @@
+<pf-label-group add-label-mode="fromList">
+  <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-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';
+</script>

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

@@ -0,0 +1,14 @@
+<pf-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-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';
+</script>

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

@@ -0,0 +1,14 @@
+<pf-label-group orientation="vertical">
+  <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-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';
+</script>

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

@@ -0,0 +1,12 @@
+<pf-label-group>
+  <h2 slot="category">label group with a very long name</h2>
+  <pf-label color="yellow" icon="info-circle" removable>label-1</pf-label>
+  <pf-label color="red" icon="info-circle" removable>label-2</pf-label>
+  <pf-label color="blue" icon="info-circle" removable>label-3</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-with-overflow-labels.html

@@ -0,0 +1,15 @@
+<pf-label-group num-labels="3">
+  <h2 slot="category">group name</h2>
+  <pf-label color="orange" icon="info-circle" removable>label-1</pf-label>
+  <pf-label color="purple" icon="info-circle" removable>label-2</pf-label>
+  <pf-label color="blue" icon="info-circle" removable>label-3</pf-label>
+  <pf-label color="red" icon="info-circle" removable>label-4</pf-label>
+  <pf-label color="blue" icon="info-circle" removable>label-5</pf-label>
+  <pf-label color="green" icon="info-circle" removable>label-6</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/docs/pf-label-group.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-label-group></pf-label-group>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}

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

@@ -0,0 +1,156 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 0.5rem;
+}
+
+pf-button {
+  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  margin: var(--pf-c-label__c-button--MarginTop, -0.5rem)
+          var(--pf-c-label__c-button--MarginRight, -0.5rem)
+          var(--pf-c-label__c-button--MarginBottom, -0.5rem)
+          var(--pf-c-label__c-button--MarginLeft, 0.25rem);
+}
+
+#outer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  background-color: #fff;
+}
+
+:host([orientation="horizontal"]) #outer {
+  flex-direction: row;
+}
+
+:host([orientation="vertical"]) #outer {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+::slotted([slot="category"]) {
+  display: inline-block;
+  max-width: 16ch; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.add-label {
+  cursor: pointer;
+  align-items: center;
+  gap: 4px;
+  transition: border 0.2s ease;
+  border-radius: 0.99rem;
+}
+
+.add-label:hover {
+  box-shadow: 0 0 0 1px #ccc;
+}
+
+pf-modal#custom-label-modal {
+  --pf-c-modal--BoxShadow: 0 0 15px rgba(0,0,0,0.2);
+  --pf-c-modal-box--BorderRadius: 8px;
+  --pf-c-modal-box--Padding: 1rem;
+  width: 200px; 
+  font-size: 0.875rem;
+}
+
+pf-modal#custom-label-modal h2[slot="header"] {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+#add-label-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+#add-label-form input{
+  padding: 0.25rem 0.25rem;
+  font-size: 1rem;
+  border: 1px solid #d2d2d2;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+#add-label-form .radio-group {
+  display: flex;
+  flex-direction: column; 
+  align-items: flex-start; 
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+#add-label-form .radio-group > label {
+  display: inline-flex;     
+  flex-direction: row;      
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  width: auto;              
+}
+
+#add-label-form .radio-group > label input[type="radio"] {
+  margin: 0;
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  appearance: auto;
+}
+
+#add-label-form .radio-group > label input[type="radio"] {
+  accent-color: var(--pf-global--primary-color--100, #0066cc);
+}
+
+#add-label-form .radio-group > label .radio-text {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+pf-modal#custom-label-modal [slot="footer"] {
+  display: flex;
+  justify-content: flex-end; 
+  gap: 0.5rem;               
+  margin-top: 1rem;           
+  position: static; 
+}
+
+pf-modal#custom-label-modal pf-button {
+  font-size: 0.85rem;
+  padding: 0.25rem 0.5rem;
+}
+
+#add-label-form label {
+  font-weight: bold;
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.05rem; 
+  margin-top: 0.15rem; 
+}
+
+#add-label-form pf-select {
+  display: inline-block;
+  width: fit-content;      
+}
+
+#color-select {
+  min-width: 7rem; 
+}
+
+#icon-select {
+  min-width: 9rem; 
+}