feat: 🐛 add disabled property to uui-combobox

Author: julczka

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

@@ -67,6 +67,10 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         margin-top: -1px;
       }
 
+      :host([disabled]) #caret {
+        fill: var(--uui-color-disabled-contrast);
+      }
+
       #phone-wrapper {
         position: fixed;
         inset: 0;
@@ -142,6 +146,15 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
   @property({ type: String })
   public closeLabel = 'Close';
 
+  /**
+   * Disables the uui-combobox.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
   @query('#combobox-input')
   private _input!: HTMLInputElement;
 
@@ -315,11 +328,12 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
       type="text"
       .value=${this._displayValue}
       autocomplete="off"
+      .disabled=${this.disabled}
       @click=${this._open}
       @input=${this._onInput}
       @keydown=${this._onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
-      ${this._renderClearButton()} ${this._renderCaret()}
+      ${this.disabled ? '' : this._renderClearButton()} ${this._renderCaret()}
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
   };

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

@@ -14,6 +14,8 @@ export default {
   component: 'uui-combobox',
   args: {
     search: '',
+    disabled: false,
+    readonly: false,
   },
   parameters: {
     docs: {
@@ -99,6 +101,8 @@ const Template: Story = props => {
     displayValueMod,
     valueMod,
     renderMod,
+    disabled,
+    value,
   } = props;
 
   const handleSearch = (e: any) => {
@@ -114,7 +118,9 @@ const Template: Story = props => {
   return html`<uui-combobox
       @change=${handleSelect}
       @search=${handleSearch}
-      style="width: 250px">
+      style="width: 250px"
+      .disabled=${disabled}
+      .value=${value}>
       <uui-combobox-list>
         ${repeat(filter(options, search), (option: any, index: number) =>
           renderMod
@@ -163,6 +169,36 @@ AAAOverview.parameters = {
   },
 };
 
+export const Disabled: Story = Template.bind({});
+Disabled.args = {
+  options: fruits,
+  filter: basicFilter,
+  disabled: true,
+  value: 'banana',
+};
+Disabled.parameters = {
+  docs: {
+    source: {
+      code: `
+<uui-combobox style="width: 250px" disabled>
+  <uui-combobox-list>
+    <uui-combobox-list-option style="padding: 8px">
+      apple
+    </uui-combobox-list-option>
+    <uui-combobox-list-option style="padding: 8px">
+      orange
+    </uui-combobox-list-option>
+    <uui-combobox-list-option style="padding: 8px">
+      lemon
+    </uui-combobox-list-option>
+    ...
+  </uui-combobox-list>
+</uui-combobox>
+  `,
+    },
+  },
+};
+
 export const CustomValue: Story = Template.bind({});
 CustomValue.args = {
   options: fruits,

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

@@ -62,6 +62,9 @@ describe('UUIComboboxElement', () => {
     it('has a value property', () => {
       expect(element).to.have.property('value');
     });
+    it('has a disabled property', () => {
+      expect(element).to.have.property('disabled');
+    });
   });
 
   describe('template', () => {

packages/uui/tsconfig.json

@@ -71,10 +71,10 @@
       "path": "../uui-color-slider"
     },
     {
-      "path": "../uui-color-swatches"
+      "path": "../uui-color-swatch"
     },
     {
-      "path": "../uui-color-swatch"
+      "path": "../uui-color-swatches"
     },
     {
       "path": "../uui-combobox"