KTextbox: Support a "clearable" prop to show a clear button

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#591]
+  - **Description:** Added a clearable prop to KTextbox
+  - **Products impact:** -
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/584
+  - **Components:** `KTextbox`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#591]: https://github.com/learningequality/kolibri-design-system/pull/591
+
 - [#582]
   - **Description:** Upgrade popper.js from 1.14.6 to 1.16.1
   - **Products impact:** -

docs/pages/playground.vue

@@ -24,9 +24,6 @@
 
     <!-- Play around with your component here: -->
 
-
-
-
   </div>
 
 </template>

lib/KTextbox/__tests__/KTextbox.spec.js

@@ -155,4 +155,60 @@ describe('KTextbox component', () => {
       expect(wrapper.emitted().input).toBeTruthy();
     });
   });
+  describe('KTextbox with clearable', () => {
+    it('should have the clear button when clearable is true and there is text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      const clearButton = wrapper.find('[data-test="clearIcon"]');
+      expect(clearButton.exists()).toBeTruthy();
+    });
+    it('should not show the clear button when clearable is true and there is no text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+
+      const input = wrapper.find('input');
+      input.element.value = '';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test="clearIcon"]').exists()).toBeFalsy();
+    });
+
+    it('should not show the clear button when clearable is false and there is text in the input', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: false,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-test="clearIcon"]').exists()).toBeFalsy();
+    });
+    it('should clear the input when clear button is clicked', async () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          clearable: true,
+        },
+      });
+      const input = wrapper.find('input');
+      input.element.value = 'test';
+      input.trigger('input');
+      await wrapper.vm.$nextTick();
+      const clearButton = wrapper.find('[data-test="clearIcon"]');
+      clearButton.trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('input').element.value).toBe('');
+    });
+  });
 });

lib/KTextbox/index.vue

@@ -7,6 +7,8 @@
       class="textbox"
       :label="label"
       :disabled="disabled"
+      :clearAriaLabel="clearAriaLabel"
+      :clearable="clearable"
       :invalid="showInvalidMessage"
       :error="invalidText"
       :autofocus="autofocus"
@@ -50,6 +52,10 @@
         type: String,
         required: true,
       },
+      /**
+       * Value of the aria-label for clear button
+       */
+      clearAriaLabel: { type: String, default: 'Clear' },
       /**
        * Value of the text field
        */
@@ -142,6 +148,13 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * When set to `true`, the component displays a clear button inside the input field.
+       */
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
       /**
        * @ignore
        * Whether or not to display as a floating label.