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

.changeset/yummy-eagles-itch.md

@@ -0,0 +1,9 @@
+---
+"@patternfly/elements": minor
+---
+
+Introduce `<pf-label-group>` element with:
+- Removable labels and option to remove entire group
+- Overflow handling for labels and title
+- Horizontal and vertical layout support
+

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,23 @@
+# Label Group
+# <pf-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.
+
+---
+##  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.
+
+---
+
+

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

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

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

@@ -0,0 +1,13 @@
+
+<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,17 @@
+
+<pf-label-group closeable  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/demo/label-group.html

@@ -0,0 +1,13 @@
+<pf-label-group open num-labels="5">
+  <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 color="red">Red 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/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,78 @@
+
+:host {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 0.5rem;
+  border: 0;
+}
+
+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);
+}
+
+.compact {
+  --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
+  --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
+  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+  --pf-global--icon--FontSize--sm: 12px;
+}
+
+.add-label-btn {
+  background-color: #fff;
+  color: #0066cc;
+  border: 1px solid #d2d2d2;
+  border-radius: 9999px;
+  padding: 0px 2px;
+  font-size: 9px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.add-label-btn:hover {
+  background-color: #f5f5f5;
+}
+
+#outer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  background-color: #fff;
+
+  align-items: center;
+}
+
+
+: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;
+  cursor: default;
+}
+
+::slotted([slot="category"][title]):hover {
+}