use expand symbol

umbraco · Dec 5, 2023 · 46cf090 · 46cf090
1 parent 3d39184
commit 46cf090
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts
@@ -147,6 +147,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     demandCustomElement(this, 'uui-combobox-list');
     demandCustomElement(this, 'uui-scroll-container');
     demandCustomElement(this, 'uui-popover-container');
+    demandCustomElement(this, 'uui-symbol-expand');
   }
 
   disconnectedCallback(): void {
@@ -286,17 +287,14 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
       @input=${this.#onInput}
       @keydown=${this.#onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this.disabled ? '' : this.#renderClearButton()} ${this.#renderCaret()}
+      ${this.disabled ? '' : this.#renderClearButton()}
+      <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>`;
   };
 
-  #renderCaret = () => {
-    return html`<svg id="caret" slot="append" viewBox="0 0 512 512">
-      <path d="M 255.125 400.35 L 88.193 188.765 H 422.055 Z"></path>
-    </svg>`;
-  };
-
   #renderClearButton = () => {
     return this.value || this.search
       ? html`<uui-button
@@ -361,6 +359,12 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         width: 100%;
         max-height: var(--uui-combobox-popover-max-height, 500px);
       }
+      #expand-symbol-wrapper {
+        height: 100%;
+        padding-right: var(--uui-size-space-3);
+        display: flex;
+        justify-content: center;
+      }
 
       #dropdown {
         overflow: hidden;
@@ -377,14 +381,6 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         box-shadow: var(--uui-shadow-depth-3);
       }
 
-      #caret {
-        margin-right: var(--uui-size-3, 9px);
-        display: flex;
-        width: 1.15em;
-        flex-shrink: 0;
-        margin-top: -1px;
-      }
-
       :host([disabled]) #caret {
         fill: var(--uui-color-disabled-contrast);
       }

diff --git a/packages/uui-combobox/lib/uui-combobox.story.ts b/packages/uui-combobox/lib/uui-combobox.story.ts
@@ -3,6 +3,7 @@ import '@umbraco-ui/uui-icon/lib';
 import '@umbraco-ui/uui-input/lib';
 import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-popover-container/lib';
+import '@umbraco-ui/uui-symbol-expand';
 
 import '.';
 import './uui-combobox-async-example';

diff --git a/packages/uui-combobox/package.json b/packages/uui-combobox/package.json
@@ -35,7 +35,8 @@
     "@umbraco-ui/uui-combobox-list": "1.6.0-rc.1",
     "@umbraco-ui/uui-icon": "1.6.0-rc.1",
     "@umbraco-ui/uui-scroll-container": "1.6.0-rc.1",
-    "@umbraco-ui/uui-popover-container": "1.6.0-rc.1"
+    "@umbraco-ui/uui-popover-container": "1.6.0-rc.1",
+    "@umbraco-ui/uui-symbol-expand": "1.6.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",