chore: code cleanup

ArathyKumar · ArathyKumar · commit 4e69215f2785 · 2025-03-25T00:02:35.000+05:30
diff --git a/elements/pf-search-input/demo/pf-search-input-autocomplete.html b/elements/pf-search-input/demo/pf-search-input-autocomplete.html
@@ -1,5 +1,5 @@
 <pf-search-input variant="typeahead"
-             placeholder="Select a state">
+             placeholder="Search">
     <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
     <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
     <pf-search-input-option value="New York"> New York </pf-search-input-option>
diff --git a/elements/pf-search-input/pf-search-input.css b/elements/pf-search-input/pf-search-input.css
@@ -265,6 +265,7 @@
 #toggle-input {
   justify-content: space-between;
   padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
+	padding-left: 40px;
 }
 
 .disabled #toggle-input {
@@ -377,3 +378,12 @@ pf-badge {
   background-color: var(--pf-c-divider--after--BackgroundColor);
   flex: 1 0 100%;
 }
+
+div.search-icon{
+	position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+}
diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts
@@ -5,10 +5,8 @@ import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
-import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
@@ -20,6 +18,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 import { PfSearchInputOption } from './pf-search-input-option.js';
 import styles from './pf-search-input.css';
+import type { PfButton } from '../pf-button/pf-button.js';
 
 export class PfSelectChangeEvent extends Event {
   constructor() {
@@ -42,16 +41,10 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
-  /** Variant of rendered Select */
-  @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
 
   /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
-  /** Accessible label for chip group used to describe chips */
-  @property({
-    attribute: 'accessible-current-selections-label',
-  }) accessibleCurrentSelectionsLabel = 'Current selections';
 
   /** Multi listbox button text */
   @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
@@ -80,17 +73,10 @@ export class PfSearchInput extends LitElement {
    */
   @property({ reflect: true }) position: Placement = 'bottom';
 
-  /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
-  @property({
-    attribute: 'checkbox-selection-badge-hidden',
-    type: Boolean,
-  }) checkboxSelectionBadgeHidden = false;
-
-  //@query('pf-chip-group') private _chipGroup?: PfChipGroup;
 
   @query('#toggle-input') private _toggleInput?: HTMLInputElement;
 
-  @query('#toggle-button') private _toggleButton?: HTMLButtonElement;
+  @query('#toggle-button') private _toggleButton?: PfButton;
 
   @query('#listbox') private _listbox?: HTMLElement;
 
@@ -107,7 +93,6 @@ export class PfSearchInput extends LitElement {
   #slots = new SlotController(this, null, 'placeholder');
 
   #combobox = ComboboxController.of(this, {
-    multi: this.variant === 'typeaheadmulti' || this.variant === 'checkbox',
     getItems: () => this.options,
     getFallbackLabel: () => this.accessibleLabel
                          || this.#internals.computedLabelText
@@ -151,75 +136,42 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /** Whether select has badge for number of selected items */
-  get #hasBadge() {
-    // NOTE: revisit this in v5
-    return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;
-  }
-
   get #buttonLabel(): string {
     const { selected } = this.#combobox;
-    switch (this.variant) {
-      case 'typeaheadmulti':
-        return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
-      case 'checkbox':
-        return this.#computePlaceholderText()
-          || 'Options';
-      default:
-        return (selected ? this.value : '')
-          || this.#computePlaceholderText()
-          || 'Select a value';
-    }
+    return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
   }
 
   override render(): TemplateResult<1> {
-    const { disabled, expanded, variant, placeholder } = this;
+    const { disabled, expanded, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const hasBadge = this.#hasBadge;
-    const selectedOptions = this.#combobox.selected ?? [];
-    const typeahead = variant.startsWith('typeahead');
-    const checkboxes = variant === 'checkbox';
-    const badge = hasBadge && 'badge';
-    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
-    const hideLightDomItems = typeahead && !ComboboxController.supportsCrossRootActiveDescendant;
-    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
+    const hideLightDomItems =  !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
       <div id="outer"
            style="${styleMap(styles)}"
-           class="${classMap({ disabled, typeahead, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
         <div id="toggle">
-          ${!typeahead ? '' : html`
-          <pf-button disabled plain label="Search">
-        <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
-          <path d="M256.233,5.756c-71.07,15.793-141.44,
-          87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
-          27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
-          22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
-          8.596,30.987,0L192.26,383.796c43.282,
-          27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
-          159.632-155.934C540.212,104.314,407.968-27.93,256.233,
-          5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
-          S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
-          76.426S435.857,135.501,435.857,208.37z">
-          </path>
-        </svg>
-      </pf-button>
+          <div class="search-icon">
+            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
+              <path d="M256.233,5.756c-71.07,15.793-141.44,
+              87.863-155.834,159.233c-11.495,57.076,0.3,111.153,
+              27.688,154.335L6.339,441.172c-8.596,8.596-8.596,
+              22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,
+              8.596,30.987,0L192.26,383.796c43.282,
+              27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,
+              159.632-155.934C540.212,104.314,407.968-27.93,256.233,
+              5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
+              S171.969,281.239,171.969,208.37S231.043,76.426,303.913,
+              76.426S435.857,135.501,435.857,208.37z">
+              </path>
+            </svg>
+          </div>
           <input id="toggle-input"
-                 ?hidden="${!typeahead}"
                  ?disabled="${disabled}"
-                 placeholder="${placeholder || this.#buttonLabel}">`}
-          <button id="toggle-button">
-            <span id="button-text" style="display: contents;">
-              <span id="toggle-text"
-                    class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`
-              <span id="toggle-badge">
-                <pf-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-badge>
-              </span>`}
-            </span>
-          </button>
-            <pf-button disabled plain label="Close">
+                 placeholder="${placeholder || this.#buttonLabel}">
+          
+            <pf-button id="toggle-button" plain label="Close">
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
               <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
               0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
@@ -238,13 +190,8 @@ export class PfSearchInput extends LitElement {
                marginTop: `${height || 0}px`,
                width: width ? `${width}px` : 'auto',
              })}">
-          <div id="listbox" class="${classMap({ checkboxes })}">
-            <pf-search-input-option id="placeholder"
-                       disabled
-                       ?inert="${placeholderIsInert}"
-                       aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
-                       ?hidden="${!placeholder && this.#slots.isEmpty('placeholder')}"
-            ><slot name="placeholder">${placeholder ?? ''}</slot></pf-search-input-option>
+          <div id="listbox">
+            
             ${this.#combobox.renderItemsToShadowRoot()}
             <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
@@ -273,48 +220,16 @@ export class PfSearchInput extends LitElement {
   private async selectedChanged(_: PfSearchInputOption[], selected: PfSearchInputOption[]) {
     this.value = selected.map(x => x.value).join();
     await this.updateComplete;
-    switch (this.variant) {
-      case 'single':
-        this.hide();
-        this._toggleButton?.focus();
-        break;
-      case 'typeahead':
-        this._toggleInput!.value = this.value;
-    }
+    this._toggleInput!.value = this.value;
   }
 
-  @observes('variant')
-  private async variantChanged() {
-    this.#combobox.hostDisconnected();
-    this.#combobox.multi = this.variant === 'typeaheadmulti' || this.variant === 'checkbox';
-    this.#combobox.hostConnected();
-    if (this.variant === 'checkbox') {
-      import('@patternfly/elements/pf-badge/pf-badge.js');
-    }
-  }
 
   @observes('value')
   private valueChanged() {
     this.#internals.setFormValue(this.value ?? '');
     this.dispatchEvent(new PfSelectChangeEvent());
   }
 
-  @observes('variant')
-  @observes('value')
-  private focusChips(): void {
-    // whether select has removable chips for selected items
-    // NOTE: revisit this in v5
-    // reset input if chip has been added
-    // const hasChips = this.variant === 'typeaheadmulti';
-    // if (hasChips && this._toggleInput?.value) {
-    //   // const chip =
-    //   //   this.shadowRoot?.querySelector(`pf-chip#chip-${this._toggleInput?.value}`) as PfChip;
-    //   // if (chip && this._chipGroup) {
-    //   //   this._chipGroup.focusOnChip(chip);
-    //   //   this._toggleInput.value = '';
-    //   // }
-    // }
-  }
 
   async #doExpand() {
     try {
@@ -334,18 +249,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /**
-   * handles chip's remove button clicking
-   * @param event remove event
-   * @param opt pf-option
-   */
-  // #onChipRemove(opt: PfOption, event: Event) {
-  //   if (event instanceof PfChipRemoveEvent) {
-  //     opt.selected = false;
-  //     this._toggleInput?.focus();
-  //   }
-  // }
-
   #computePlaceholderText() {
     return this.placeholder
       || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
