chore(label-group): apply the reqeasted changes

Author: Sara Dahan

.changeset/yummy-eagles-itch.md

@@ -2,19 +2,13 @@
 "@patternfly/elements": minor
 ---
 
-Introduced `<pf-label-group>` with add-label functionality.
+✨ 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.
 
-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.
 
@@ -24,4 +18,4 @@ Avoid using it for single, standalone labels — consider using `<pf-label>` ins
   <pf-label removable>Performance</pf-label>
   <pf-label removable>Networking</pf-label>
 </pf-label-group>
-
+```

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

@@ -9,6 +9,6 @@ <h2 slot="category">group name</h2>
   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-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

@@ -9,6 +9,6 @@ <h2 slot="category">group name</h2>
   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-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

@@ -9,6 +9,6 @@ <h2 slot="category">group name</h2>
   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-modal/pf-modal.js';
   import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
 </script>

elements/pf-label-group/pf-label-group.ts

@@ -22,6 +22,15 @@ export class PfLabelGroupExpandEvent extends Event {
   }
 }
 
+/**
+ * Event fired when the label group is removed/closed.
+ */
+export class PfLabelGroupRemoveEvent extends Event {
+  constructor() {
+    super('remove', { bubbles: true, cancelable: true, composed: true });
+  }
+}
+
 /**
  * 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.
@@ -52,26 +61,25 @@ export class PfLabelGroup extends LitElement {
   };
 
   /**
- * Orientation of the label group.
- */
+   * Orientation of the label group.
+   */
   @property() orientation: 'horizontal' | 'vertical' = 'horizontal';
 
   /**
    * Accessible label for the label group when no category name is provided.
    * @default ''
    */
   @property({ attribute: 'accessible-label', type: String }) accessibleLabel = '';
-
   /**
-  * Accessible label for the close button.
-  * @default 'Close'
-  */
+   * Accessible label for the close button.
+   * @default 'Close'
+   */
   @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';
 
   /**
-  * Text for collapsed overflow label. Use `${remaining}` to indicate number of hidden labels.
-  * @default '${remaining} more'
-  */
+   * Text for collapsed overflow label. Use `${remaining}` to indicate number of hidden labels.
+   * @default '${remaining} more'
+   */
   @property({ attribute: 'collapsed-text', type: String }) collapsedText = '${remaining} more';
 
   /**
@@ -81,53 +89,53 @@ export class PfLabelGroup extends LitElement {
   @property({ attribute: 'expanded-text', type: String }) expandedText = 'show less';
 
   /**
-  * Number of labels to show before creating an overflow label.
-  * @default 3
-  */
+   * Number of labels to show before creating an overflow label.
+   * @default 3
+   */
   @property({ attribute: 'num-labels', type: Number }) numLabels = 3;
 
   /**
- * Whether the overflow labels are visible (expanded state).
- * @default false
- */
+   * Whether the overflow labels are visible (expanded state).
+   * @default false
+   */
   @property({ reflect: true, type: Boolean }) open = false;
 
   /**
- * Whether the label group can be closed.
- * @default true
- */
+   * Whether the label group can be closed.
+   * @default true
+   */
   @property({ reflect: true, type: Boolean }) closeable = false;
 
   /** --- ADD LABEL FUNCTIONALITY --- */
 
   /**
- * Mode controlling how labels can be added.
- * - `none`: No add label functionality
- * - `autoNoEdit`: Adds a default label automatically
- * - `fromList`: Allows choosing a label from a predefined list
- * - `customForm`: Opens a form for custom label creation
- */
+   * Mode controlling how labels can be added.
+   * - `none`: No add label functionality
+   * - `autoNoEdit`: Adds a default label automatically
+   * - `fromList`: Allows choosing a label from a predefined list
+   * - `customForm`: Opens a form for custom label creation
+   */
   @property({ type: String, reflect: true, attribute: 'add-label-mode' })
   addLabelMode: 'none' | 'autoNoEdit' | 'fromList' | 'customForm' = 'none';
 
   /**
- * Controls visibility of the label dropdown for `fromList` mode.
- */
+   * Controls visibility of the label dropdown for `fromList` mode.
+   */
   @state() showDropdown = false;
 
   /**
- * Controls visibility of the custom label form for `customForm` mode.
- */
+   * Controls visibility of the custom label form for `customForm` mode.
+   */
   @state() showCustomForm = false;
 
   /**
- * Text value for a new custom label.
- */
+   * Text value for a new custom label.
+   */
   @state() newLabelText = 'Text box';
 
   /**
- * Color value for a new custom label.
- */
+   * Color value for a new custom label.
+   */
   @state() newLabelColor = 'grey';
 
   /**
@@ -356,8 +364,8 @@ export class PfLabelGroup extends LitElement {
   }
 
   /**
-  * Handles overflow label's click event.
-  * @param {Event} event - Click event
+    * Handles overflow label's click event.
+    * @param {Event} event - Click event
   */
   async #onMoreClick(event: Event) {
     event.stopPropagation();
@@ -376,6 +384,7 @@ export class PfLabelGroup extends LitElement {
  */
   #onCloseClick() {
     if (this.isConnected) {
+      this.dispatchEvent(new PfLabelGroupRemoveEvent());
       this.remove();
     }
   }

elements/pf-label-group/test/pf-label-group.spec.ts

@@ -1,10 +1,12 @@
 import { expect, html } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfLabelGroup } from '@patternfly/elements/pf-label-group/pf-label-group.js';
+import { PfLabel } from '@patternfly/elements/pf-label/pf-label.js';
 
 describe('<pf-label-group>', function() {
+  let element: PfLabelGroup;
+
   describe('simply instantiating', function() {
-    let element: PfLabelGroup;
     it('imperatively instantiates', function() {
       expect(document.createElement('pf-label-group')).to.be.an.instanceof(PfLabelGroup);
     });
@@ -18,4 +20,65 @@ describe('<pf-label-group>', function() {
           .to.be.an.instanceOf(PfLabelGroup);
     });
   });
+
+  describe('basic behavior', function() {
+    beforeEach(async function() {
+      element = await createFixture<PfLabelGroup>(html`
+        <pf-label-group num-labels="2">
+          <pf-label>one</pf-label>
+          <pf-label>two</pf-label>
+          <pf-label>three</pf-label>
+          <pf-label>four</pf-label>
+        </pf-label-group>
+      `);
+      await element.updateComplete;
+    });
+
+    it('renders an overflow label when remaining > 0', async function() {
+      const overflow = element.shadowRoot?.querySelector('#overflow') as HTMLElement;
+      expect(overflow).to.be.ok;
+      expect(overflow.hidden).to.be.false;
+      expect(overflow.textContent?.trim()).to.equal('2 more');
+    });
+
+    it('hides labels beyond num-labels when closed', function() {
+      const labels = Array.from(element.querySelectorAll('pf-label')) as PfLabel[];
+      expect(labels.length).to.equal(4);
+      expect(labels[0].hidden).to.be.false;
+      expect(labels[1].hidden).to.be.false;
+      expect(labels[2].hidden).to.be.true;
+      expect(labels[3].hidden).to.be.true;
+    });
+
+    it('toggles open on overflow click and fires expand event', async function() {
+      const overflow = element.shadowRoot?.querySelector('#overflow') as HTMLElement;
+      let fired = false;
+      element.addEventListener('expand', () => (fired = true));
+
+      overflow.click();
+      await element.updateComplete;
+
+      expect(element.open).to.be.true;
+      expect(fired).to.be.true;
+      expect(overflow.textContent?.trim()).to.equal('show less');
+
+      const labels = Array.from(element.querySelectorAll('pf-label')) as PfLabel[];
+      expect(labels.every(l => l.hidden === false)).to.be.true;
+    });
+
+    it('shows close button and dispatches remove when closeable', async function() {
+      element.closeable = true;
+      await element.updateComplete;
+
+      const btn = element.shadowRoot?.querySelector('#close-button') as HTMLElement;
+      expect(btn).to.be.ok;
+      let removed = false;
+      element.addEventListener('remove', () => (removed = true));
+
+      btn.click();
+      await element.updateComplete;
+
+      expect(removed).to.be.true;
+    });
+  });
 });