chore: small fixes after review

Author: Sara Dahan

.changeset/yummy-eagles-itch.md

@@ -2,7 +2,7 @@
 "@patternfly/elements": minor
 ---
 
-Introduce <pf-label-group> element with:
+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/pf-label-group/README.md

@@ -1,11 +1,23 @@
 # Label Group
-Add a description of the component here.
+# <pf-label-group>
 
-## Usage
-Describe how best to use this web component along with best practices.
+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.
 
-```html
-<pf-label-group>
+---
+##  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

@@ -1,9 +1,8 @@
-
-<pf-label-group closeable >
+<pf-label-group closeable>
   <h2 slot="category-name">group name</h2>
-  <pf-label color="red" icon="info-circle"  removable>label-3</pf-label>
-  <pf-label color="green" icon="info-circle" removable>label-4</pf-label>
-  <pf-label color="blue" icon="info-circle" removable>label-5</pf-label>
+  <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">

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

@@ -7,6 +7,7 @@ import '@patternfly/elements/pf-button/pf-button.js';
 
 import styles from './pf-label-group.css';
 
+import { state } from 'lit/decorators/state.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
@@ -35,12 +36,12 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
  *
  * @fires expand - Fired when label group is expanded to show all labels
  *
- * @slot category-name - Category name text for label group category. If supplied, label group will have category styling applied
+ * @slot category - Category name text for label group category. If supplied, label group will have category styling applied
  * @slot - Default slot for `<pf-label>` elements
  *
  * @example
  * <pf-label-group num-labels="2 ">
- *   <span slot="category-name">Fruit Types</span>
+ *   <span slot="category">Fruit Types</span>
  *   <pf-label>Apple</pf-label>
  *   <pf-label>Banana</pf-label>
  *   <pf-label>Orange</pf-label>
@@ -57,7 +58,6 @@ export class PfLabelGroup extends LitElement {
 
   /**
    * Orientation of the label group.
-   * @default 'horizontal'
    */
   @property() orientation: 'horizontal' | 'vertical' = 'horizontal';
 
@@ -103,12 +103,12 @@ export class PfLabelGroup extends LitElement {
    */
   @property({ reflect: true, type: Boolean }) closeable = false;
 
-  @property() private _overflowText = '';
+  @state() private _overflowText = '';
 
   @query('#close-button') private _button?: HTMLButtonElement;
 
   @queryAssignedNodes({
-    slot: 'category-name',
+    slot: 'category',
     flatten: true,
   })
   private _categorySlotted?: HTMLElement[];
@@ -134,7 +134,7 @@ export class PfLabelGroup extends LitElement {
 
     return html`
       <div id="outer" class="${classMap({ 'has-category': hasCategory, empty })}" role="toolbar">
-        <slot id="category" name="category-name" @slotchange="${this.#onCategorySlotChange}">
+        <slot id="category" name="category" @slotchange="${this.#onCategorySlotChange}">
           <span class="visually-hidden label-text" ?hidden="${!this.accessibleLabel}">
             ${this.accessibleLabel ?? ''}
           </span>
@@ -143,18 +143,18 @@ export class PfLabelGroup extends LitElement {
         <slot id="labels" @slotchange="${this.#onSlotchange}"></slot>
 
         ${this._overflowText ?
-          html`<pf-label
+        html`<pf-label
               id="overflow"
               aria-controls="labels"
               overflow-label
               @click="${this.#onMoreClick}"
             >
               ${this._overflowText}
             </pf-label>`
-          : ''}
+        : ''}
 
         ${this.closeable ?
-          html`<pf-button
+        html`<pf-button
               id="close-button"
               plain
               icon="times-circle"
@@ -163,7 +163,7 @@ export class PfLabelGroup extends LitElement {
               aria-describedby="category"
               @click="${this.#onCloseClick}"
             ></pf-button>`
-          : ''}
+        : ''}
       </div>
     `;
   }
@@ -239,8 +239,8 @@ export class PfLabelGroup extends LitElement {
     this._overflowText = rem < 1 ?
       ''
       : this.open ?
-      this.expandedText
-      : this.collapsedText.replace(REMAINING_RE, rem.toString());
+        this.expandedText
+        : this.collapsedText.replace(REMAINING_RE, rem.toString());
 
     if (rem < 1 && this.open) {
       this.open = false;

package-lock.json

@@ -326,8 +326,5 @@
     "./core/*",
     "./elements",
     "./tools/*"
-  ],
-  "dependencies": {
-    "@patternfly/icons": "^1.0.3"
-  }
+  ]
 }