ability to hide expand symbol

Author: nielslyngsoe

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -103,6 +103,15 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Removes the expand symbol.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: false, attribute: 'hide-expand-symbol' })
+  hideExpandSymbol = false;
+
   /**
    * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
    * @type {boolean}
@@ -337,9 +346,11 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
       @keydown=${this.#onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
       ${this.#renderClearButton()}
-      <div id="expand-symbol-wrapper" slot="append">
-        <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-      </div>
+      ${this.hideExpandSymbol
+        ? nothing
+        : html`<div id="expand-symbol-wrapper" slot="append">
+            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+          </div>`}
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
   };
@@ -348,18 +359,18 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
     if (this.disabled) return nothing;
     if (this.readonly) return nothing;
 
-    return this.value || this.search
-      ? html`<uui-button
-          id="clear-button"
-          @click=${this.#onClear}
-          @keydown=${this.#onClear}
-          label="clear"
-          slot="append"
-          compact
-          style="height: 100%;">
-          <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
-        </uui-button>`
-      : '';
+    return html`<uui-button
+      id="clear-button"
+      @click=${this.#onClear}
+      @keydown=${this.#onClear}
+      label="clear"
+      slot="append"
+      compact
+      style="height: 100%;"
+      tab-index=${this.value || this.search ? '' : '-1'}
+      class=${this.value || this.search ? 'visible' : ''}>
+      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+    </uui-button>`;
   };
 
   #renderDropdown = () => {
@@ -418,6 +429,17 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
         justify-content: center;
       }
 
+      #clear-button {
+        opacity: 0;
+        transition: opacity 80ms;
+      }
+
+      :host(:not([disabled]):not([readonly]):focus-within)
+        #clear-button.visible,
+      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {
+        opacity: 1;
+      }
+
       #dropdown {
         overflow: hidden;
         z-index: -1;