chore(label-group): transferring the insertion logic from TS to Demos

Author: Sara Dahan

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

@@ -118,7 +118,10 @@ <h2 slot="header">Add label</h2>
     resetForm(form);
 
     function cleanup() {
-      try { modal.remove(); } catch (e) {}
+      try { modal.remove(); } 
+      catch (e) {
+        console.error('Error removing modal:', e);
+      }
       requestAnimationFrame(() => addButton.focus());
     }
 

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

@@ -53,7 +53,10 @@ <h2 slot="category">group name</h2>
     if (firstLabel) group.insertBefore(newLabel, firstLabel);
     else group.appendChild(newLabel);
     // close the dropdown if it exposes an API
-    try { dropdown.hide?.(); } catch (e) {}
+    try { dropdown.hide?.(); }
+    catch (e) {
+      console.error('Error hiding dropdown:', e);
+    }
   });
 </script>
 
@@ -95,6 +98,4 @@ <h2 slot="category">group name</h2>
     line-height: normal !important;
     box-sizing: border-box !important;
   }
-
-</style>
-
+</style>

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

@@ -11,7 +11,6 @@ import type { PfLabel } from '@patternfly/elements/pf-label/pf-label.js';
 import styles from './pf-label-group.css';
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-label/pf-label.js';
-import '@patternfly/elements/pf-select/pf-select.js';
 
 /**
  * Event fired when the label group is expanded to show all labels.
@@ -106,53 +105,6 @@ export class PfLabelGroup extends LitElement {
    */
   @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
-   */
-  @property({ type: String, reflect: true, attribute: 'add-label-mode' })
-  addLabelMode: 'none' | 'autoNoEdit' | 'fromList' | 'customForm' = 'none';
-
-  /**
-   * Controls visibility of the label dropdown for `fromList` mode.
-   */
-  @state() showDropdown = false;
-
-  /**
-   * Controls visibility of the custom label form for `customForm` mode.
-   */
-  @state() showCustomForm = false;
-
-  /**
-   * Text value for a new custom label.
-   */
-  @state() newLabelText = 'Text box';
-
-  /**
-   * Color value for a new custom label.
-   */
-  @state() newLabelColor = 'grey';
-
-  /**
- * Icon value for a new custom label.
- */
-  @state() newLabelIcon = '';
-
-  /**
- * Variant of the new label. Can be 'filled' or 'outline'.
- */
-  @state() newLabelVariant = 'filled';
-
-  /**
- * Whether the new custom label is dismissable.
- */
-  @state() newLabelDismissable = false;
-
   /**
  * Current text shown in the overflow label (e.g., "3 more" or "show less").
  * Managed internally.
@@ -164,17 +116,6 @@ export class PfLabelGroup extends LitElement {
  */
   @query('#close-button') private _button?: HTMLButtonElement;
 
-  /**
- * Reference to the add button element in the shadow DOM.
- */
-  @query('#add-button') private _addButton?: HTMLButtonElement;
-
-  /**
- * Reference to the custom label modal element.
- */
-  @query('#custom-label-modal')
-  private _customModal!: HTMLElement & { show: () => void; close: () => void };
-
   /**
  * Retrieves all elements assigned to the `category` slot.
  */
@@ -214,7 +155,6 @@ export class PfLabelGroup extends LitElement {
         this.open ? this.#labels.length : Math.min(this.#labels.length, this.numLabels)
       ),
       this._button,
-      this._addButton,
     ].filter(x => !!x),
   });
 
@@ -243,36 +183,6 @@ export class PfLabelGroup extends LitElement {
             </pf-label>`
         : ''}
 
-        ${this.addLabelMode !== 'none' ?
-        html`
-            <div style="position: relative; display: inline-block;">
-              <pf-label
-                  id="add-button"
-                  color="blue"
-                  variant="outline"
-                  dismissible="false"
-                  class="add-label"
-                  @click="${this.#onAddClick}"
-                >
-                  Add label
-                </pf-label>
-
-                ${this.showDropdown ?
-            html`
-                    <div style="position: absolute; top: 100%; left: 0; z-index: 100%; background: white; border: 1px solid #ccc; box-shadow: 0 2px 6px rgba(0,0,0,0.15);">
-                      ${this._defaultLabelList.map(
-              label => html`
-                          <pf-dropdown-item
-                            @click="${() => this.#addLabelFromList(label)}"
-                          >
-                            ${label.name}
-                          </pf-dropdown-item>`
-            )}
-                    </div>`
-            : ''}
-            </div>`
-        : ''}
-
         ${this.closeable ?
         html`<pf-button
               id="close-button"
@@ -286,56 +196,7 @@ export class PfLabelGroup extends LitElement {
         : ''}
       </div>
 
-      ${this.showCustomForm ?
-        html`
-        <section>
-          <pf-modal id="custom-label-modal" aria-describedby="custom-label-modal-description" variant="small" @close=${this.#closeCustomForm}>
-            <h2 slot="header">Add label</h2>
-            <div id="add-label-form">
-              <label>
-                Label text
-                <input class="pf-c-form-control" .value=${this.newLabelText} @input=${(e: Event) => (this.newLabelText = (e.target as HTMLInputElement).value)} />
-              </label>
-              <label>Color</label>
-              <pf-select id="color-select" @change=${this.#onSelectColor} style="display:inline-block; --pf-c-button--PaddingLeft:0.5rem; --pf-c-button--PaddingRight:0.5rem; --pf-c-button--MinWidth:0;">
-                <pf-option value="Grey">Grey</pf-option>
-                <pf-option value="Blue">Blue</pf-option>
-                <pf-option value="Green">Green</pf-option>
-                <pf-option value="Cyan">Cyan</pf-option>
-                <pf-option value="Gold">Gold</pf-option>
-                <pf-option value="Red">Red</pf-option>
-                <pf-option value="Orange">Orange</pf-option>
-                <pf-option value="Purple">Purple</pf-option>
-              </pf-select>
-
-              <label>Icon</label>
-              <pf-select id="icon-select" @change=${this.#onSelectIcon} style="display:inline-block; --pf-c-button--PaddingLeft:0.5rem; --pf-c-button--PaddingRight:0.5rem; --pf-c-button--MinWidth:0;">
-                <pf-option value="No icon">No icon</pf-option>
-                <pf-option value="Info">Info</pf-option>
-                <pf-option value="Check">Check</pf-option>
-                <pf-option value="Exclamation">Exclamation</pf-option>
-              </pf-select>
-
-              <label>Label type</label>
-              <div class="radio-group" id="label-type-group">
-                <label><input type="radio" name="labelType" value="filled" .checked=${this.newLabelVariant === 'filled'} @change=${() => (this.newLabelVariant = 'filled')} />Filled</label>
-                <label><input type="radio" name="labelType" value="outline" .checked=${this.newLabelVariant === 'outline'} @change=${() => (this.newLabelVariant = 'outline')} />Outline</label>
-              </div>
-
-              <label>Dismissable</label>
-              <div class="radio-group" id="dismissable-group">
-                <label><input type="radio" name="dismissable" value="true" .checked=${this.newLabelDismissable === true} @change=${() => (this.newLabelDismissable = true)} />Yes</label>
-                <label><input type="radio" name="dismissable" value="false" .checked=${this.newLabelDismissable === false} @change=${() => (this.newLabelDismissable = false)} />No</label>
-              </div>
-            </div>
-
-            <div slot="footer" style="display:flex; justify-content:flex-end; gap:0.5rem;">
-              <pf-button variant="primary" @click=${this.#addCustomLabel}>Save</pf-button>
-              <pf-button variant="secondary" @click=${this.#closeCustomForm}>Cancel</pf-button>
-            </div>
-          </pf-modal>
-        </section>`
-        : ''}
+   
     `;
   }
 
@@ -394,120 +255,6 @@ export class PfLabelGroup extends LitElement {
     }
   }
 
-  /**
- * Handles click on the add label button according to `addLabelMode`.
- */
-  #onAddClick() {
-    switch (this.addLabelMode) {
-      case 'none': break;
-      case 'autoNoEdit': this.#addDefaultLabel(); break;
-      case 'fromList': this.#showLabelDropdown(); break;
-      case 'customForm': this.#openCustomForm(); break;
-    }
-  }
-
-  /**
- * Adds a default label programmatically in `autoNoEdit` mode.
- */
-  #addDefaultLabel() {
-    const newLabel = document.createElement('pf-label');
-    newLabel.textContent = 'New label';
-    (newLabel as any).removable = true;
-    this.insertBefore(newLabel, this.firstElementChild);
-    this.requestUpdate();
-    this.labelsChanged();
-  }
-
-  /**
- * Shows or hides the label dropdown for `fromList` mode.
- */
-  #showLabelDropdown() {
-    this.showDropdown = !this.showDropdown;
-  }
-
-  /**
- * Adds a label from the predefined list.
- * @param label - Label object with `name`, optional `color` and `icon`
- */
-  #addLabelFromList(label: { name: string; color?: string; icon?: string }) {
-    const newLabel = document.createElement('pf-label');
-    newLabel.textContent = label.name;
-    if (label.color) {
-      (newLabel as any).color = label.color;
-    }
-    if (label.icon) {
-      (newLabel as any).icon = label.icon;
-    }
-    this.insertBefore(newLabel, this.firstElementChild);
-    this.labelsChanged();
-    this.showDropdown = false;
-  }
-
-  /**
- * Opens the custom label form modal in `customForm` mode.
- */
-  #openCustomForm() {
-    this.showCustomForm = true;
-    this.updateComplete.then(() => this._customModal?.show());
-  }
-
-  /**
- * Closes the custom label form modal.
- */
-  #closeCustomForm() {
-    if (this._customModal) {
-      this.showCustomForm = false;
-    }
-  }
-
-  /**
- * Adds a custom label from form input values.
- */
-  #addCustomLabel() {
-    const newLabel = document.createElement('pf-label');
-    newLabel.textContent = this.newLabelText;
-    newLabel.setAttribute('color', this.newLabelColor);
-    newLabel.setAttribute('variant', this.newLabelVariant);
-    if (this.newLabelIcon) {
-      newLabel.setAttribute('icon', this.newLabelIcon);
-    }
-    if (this.newLabelDismissable) {
-      newLabel.setAttribute('removable', '');
-    }
-    this.insertBefore(newLabel, this.firstElementChild);
-
-    this.newLabelText = 'Text box';
-    this.newLabelColor = 'grey';
-    this.newLabelIcon = '';
-    this.newLabelVariant = 'filled';
-    this.newLabelDismissable = false;
-    this.showCustomForm = false;
-
-    this.requestUpdate();
-    this.labelsChanged();
-  }
-
-  /**
- * Updates the new label's color from the color select dropdown.
- * @param e - Change event from select element
- */
-  #onSelectColor(e: Event) {
-    const select = e.target as HTMLSelectElement;
-    const selectedValue = select.value;
-    this.newLabelColor = selectedValue.toLowerCase();
-  }
-
-  /**
- * Updates the new label's icon from the icon select dropdown.
- * @param e - Change event from select element
- */
-  #onSelectIcon(e: Event) {
-    const select = e.target as HTMLSelectElement;
-    const selectedValue = select.value;
-    this.newLabelIcon = selectedValue === 'No icon' ? ''
-      : selectedValue.toLowerCase().concat('-circle');
-  }
-
   /**
    * Updates which labels are hidden based on `numLabels` and `open`.
    */
@@ -540,13 +287,6 @@ export class PfLabelGroup extends LitElement {
       }
     }
   }
-
-  private _defaultLabelList: { name: string; color?: string; icon?: string }[] = [
-    { name: 'Label 1', color: 'blue' },
-    { name: 'Label 2', color: 'green', icon: 'check-circle' },
-    { name: 'Label 3' },
-    { name: 'Label 4', color: 'red' },
-  ];
 }
 
 declare global {