AIQ-5472: Make icon hoverable and clickable

docs/SelectMulti.stories.ts

@@ -23,6 +23,7 @@ const Template = (args, { argTypes }) => ({
 			:labelIsVisible="labelIsVisible"
 			:placeholder="placeholder"
 			:disabled="disabled"
+			:iconIsClickable="iconIsClickable"
 			:displayPillsBelowInput="displayPillsBelowInput"
 			:noResultsMessage="noResultsMessage"
 			:uniqueIdField="uniqueIdField"
@@ -37,6 +38,7 @@ Primary.args = {
 	labelField: 'label',
 	labelIsVisible: true,
 	loading: false,
+	iconIsClickable: true,
 	placeholder: 'Select Options',
 	disabled: false,
 	displayPillsBelowInput: false,

specs/SelectMulti.spec.ts

@@ -2,17 +2,19 @@ import { mount, Wrapper } from '@vue/test-utils'
 
 import SelectMulti from '../src/SelectMulti.vue'
 
+const options = [
+	{ label: 'Item One', value: 'one' },
+	{ label: 'Item Two', value: 'two' },
+	{ label: 'Item Three', value: 'three' }
+]
+
 describe('SelectMulti', () => {
 	let wrapper: Wrapper<Vue>
 
 	describe('given simple options', () => {
 		beforeEach(() => {
 			// TODO: Share sample data between spec files & Storybook stories
-			const options = [
-				{ label: 'Item One', value: 'one' },
-				{ label: 'Item Two', value: 'two' },
-				{ label: 'Item Three', value: 'three' }
-			]
+
 
 			wrapper = mount({
 				data() { 
@@ -65,11 +67,6 @@ describe('SelectMulti', () => {
 		})
 		describe('label functionality', () => {
 			it('adds the aria-labelledby attribute to the listbox', () => {
-				const options = [
-					{ label: 'Item One', value: 'one' },
-					{ label: 'Item Two', value: 'two' },
-					{ label: 'Item Three', value: 'three' }
-				]
 				wrapper = mount({
 					data() { 
 						return { selectedOptions: [], options }},
@@ -81,5 +78,41 @@ describe('SelectMulti', () => {
 				expect(Object.keys(input.attributes())).toContain('aria-labelledby')
 			})
 		})
+
+		describe('iconIsClickable works', () => {
+			it('when iconIsClickable false its not clickable and wrapper is a div', () => {
+
+				wrapper = mount({
+					data() { 
+						return { selectedOptions: [], options }},
+					template: '<div><SelectMulti :options="options" v-model="selectedOptions" label="Sample SelectMulti" /></div>',
+					components: { SelectMulti }
+				})
+
+				const selectMulti = wrapper.findComponent(SelectMulti)
+
+				const inputIconBlock = selectMulti.find('.combo-input-icon-block')
+
+				expect(inputIconBlock.element.tagName === 'DIV').toBeTruthy()
+				expect(inputIconBlock.classes('not-clickable')).toBe(true)
+			})
+
+			it('when iconIsClickable true its clickable and wrapper is a button', () => {
+
+				wrapper = mount({
+					data() { 
+						return { selectedOptions: [], options }},
+					template: '<div><SelectMulti :options="options" v-model="selectedOptions" :iconIsClickable="true" label="Sample SelectMulti" /></div>',
+					components: { SelectMulti }
+				})
+
+				const selectMulti = wrapper.findComponent(SelectMulti)
+
+				const inputIconBlock = selectMulti.find('.combo-input-icon-block')
+
+				expect(inputIconBlock.element.tagName === 'BUTTON').toBeTruthy()
+				expect(inputIconBlock.classes('not-clickable')).toBe(false)
+			})
+		})
 	})
 })

src/SelectMulti.vue

@@ -138,6 +138,10 @@
 				type: String,
 				required: false,
 				default: 'value'
+			},
+			iconIsClickable: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -425,7 +429,7 @@
 				</div>
 			</slot>
 			</div>
-			<div class="combo-input-icon-block" :class="{ 'not-clickable': !$slots['input-icon'] }">
+			<component :is="iconIsClickable ? 'button' : 'div'" @click="iconIsClickable ? updateMenuState(iconIsClickable) : false" class="combo-input-icon-block" :class="{ 'not-clickable': !iconIsClickable }">
 				<template v-if="!loading">
 					<slot name="input-icon">
 						<svg class="combo-plus-icon" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
@@ -440,7 +444,7 @@
 						<path d="M10.6353 4.71384C11.3212 7.36481 9.80202 10.0897 7.24202 10.8L7.55253 12C10.7525 11.1121 12.6516 7.70601 11.7941 4.39231L10.6353 4.71384Z" fill="currentColor"/>
 					</svg>
 				</template>
-			</div>
+			</component>
 		</div>
 	</div>
 </template>

src/styles/mixins.scss

@@ -353,6 +353,7 @@ $spacer: 1.875rem; // 30px
 			top: 50%;
 			transform: translate(0, -50%);
 			right: math.div($spacer, 1.5);
+			border: none;
 
 			&.not-clickable {
 				pointer-events: none;