fix(combo-box): fix arrow icon not show in Solar when disabled

packages/elemental-theme/src/custom-elements/ef-combo-box.less

@@ -49,6 +49,10 @@
     flex-shrink: 0;
   }
 
+  &[disabled] [part~=selection-badge] {
+    opacity: 0.4;
+  }
+
   .ie-scrollbars();
   .mozilla-scrollbars();
 

packages/elements/src/combo-box/__test__/combo-box.template.test.js

@@ -62,4 +62,23 @@ describe('combo-box/Template', () => {
       expect(styles.minWidth).to.equal('0px', 'min width is not reset');
     });
   });
+  describe('readonly and disabled attributes test', () => {
+    it('Input should be disabled when disabled attribute is set', async () => {
+      const el = await fixture('<ef-combo-box disabled></ef-combo-box>');
+      const input = el.shadowRoot.querySelector('[part=input]');
+
+      await elementUpdated(el);
+
+      expect(input.disabled).to.be.equal(true)
+    });
+
+    it('Input should be readonly when readonly attribute is set', async () => {
+        const el = await fixture('<ef-combo-box readonly></ef-combo-box>');
+        const input = el.shadowRoot.querySelector('[part=input]');
+
+        await elementUpdated(el);
+
+        expect(input.readonly).to.be.equal(true)
+    });
+  })
 });

packages/elements/src/combo-box/index.ts

@@ -1250,6 +1250,7 @@ export class ComboBox<T extends DataItem = ItemData> extends ControlElement {
         transparent
         .placeholder="${this.placeholder}"
         .readonly="${this.readonly}"
+        .disabled="${this.disabled}"
         .value="${inputValue}"
         @value-changed="${this.onInputValueChanged}"></ef-text-field>
       ${this.selectionBadgeTemplate}

packages/solar-theme/src/custom-elements/ef-combo-box.less

@@ -23,4 +23,16 @@
     min-width: @size;
     margin-top: 0;
   }
+  &[disabled] {
+    [part~=icon] {
+      opacity: 0.4;
+      color: @button-disabled-text-color;
+    }
+
+    [part~=button-toggle] {
+      & when (@variant = pearl) {
+      border-color: @input-disabled-border-color;
+      }
+    }
+  }
 }