feat(search): support remove icon

src/definitions/modules/search.js

@@ -126,6 +126,7 @@
                             .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
                             .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
                             .on('click' + eventNamespace, selector.result, module.event.result.click)
+                            .on('click' + eventNamespace, selector.remove, module.event.remove.click)
                         ;
                     },
                 },
@@ -201,6 +202,12 @@
                             callback();
                         }
                     },
+                    remove: {
+                        click: function () {
+                            module.clear.value();
+                            $prompt.trigger('focus');
+                        },
+                    },
                     result: {
                         mousedown: function () {
                             module.resultsClicked = true;
@@ -837,6 +844,9 @@
                             $module.data(metadata.cache, cache);
                         }
                     },
+                    value: function () {
+                        module.set.value('');
+                    },
                 },
 
                 read: {
@@ -1456,6 +1466,7 @@
 
         selector: {
             prompt: '.prompt',
+            remove: '> .icon.input > .remove.icon',
             searchButton: '.search.button',
             results: '.results',
             message: '.results > .message',

src/definitions/modules/search.less

@@ -271,37 +271,46 @@
            Types
 *******************************/
 
-& when (@variationSearchSelection) {
+& when (@variationSearchClear) {
     /* --------------
-        Selection
+        Clear Icon
     --------------- */
 
-    .ui.search.selection .prompt {
-        border-radius: @selectionPromptBorderRadius;
+    .ui.search > .icon.input > .remove.icon {
+        pointer-events: all;
+        transition: @clearableIconTransition;
+        cursor: pointer;
+        opacity: @clearableIconOpacity;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
     }
-
-    /* Remove input */
-    .ui.search.selection > .icon.input > .remove.icon {
-        pointer-events: none;
-        position: absolute;
-        left: auto;
-        opacity: 0;
-        color: @selectionCloseIconColor;
-        top: @selectionCloseTop;
-        right: @selectionCloseRight;
-        transition: @selectionCloseTransition;
+    .ui.search > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
+        right: @clearableIconInputRight;
     }
-    .ui.search.selection > .icon.input > .active.remove.icon {
+    .ui.search input[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
         cursor: pointer;
-        opacity: @selectionCloseIconOpacity;
-        pointer-events: auto;
+        transition: @clearableIconTransition;
+        opacity: @clearableIconOpacity;
+        background: @clearableIconBackground;
+        height: @clearableIconHeight;
+        width: @clearableIconWidth;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
+    }
+    & when (@variationSearchLoading) {
+        .ui.loading.search input[type="search"]::-webkit-search-cancel-button {
+            display: none;
+        }
     }
-    .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
-        right: @selectionCloseIconInputRight;
+    .ui.search > .icon.input > input:placeholder-shown ~ .remove.icon,
+    .ui.search.loading > .icon.input > .remove.icon {
+        display: none;
     }
-    .ui.search.selection > .icon.input > .remove.icon:hover {
-        opacity: @selectionCloseIconHoverOpacity;
-        color: @selectionCloseIconHoverColor;
+    .ui.search > .icon.input > input:-ms-input-placeholder ~ .remove.icon when (@supportIE) {
+        display: none;
     }
 }
 

src/themes/default/globals/variation.variables

@@ -681,7 +681,7 @@
 
 /* Search */
 @variationSearchDisabled: true;
-@variationSearchSelection: true;
+@variationSearchClear: true;
 @variationSearchCategory: true;
 @variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;

src/themes/default/modules/search.variables

@@ -126,20 +126,20 @@
             Types
 *******************************/
 
-/* Selection */
-@selectionPromptBorderRadius: @defaultBorderRadius;
-
-@selectionCloseTop: 0;
-@selectionCloseTransition:
-    color @defaultDuration @defaultEasing,
-    opacity @defaultDuration @defaultEasing;
-@selectionCloseRight: 0;
-@selectionCloseIconOpacity: 0.8;
-@selectionCloseIconColor: "";
-@selectionCloseIconHoverOpacity: 1;
-@selectionCloseIconHoverColor: @red;
-
-@selectionCloseIconInputRight: 1.85714em;
+/* Clearable */
+@clearableIconTransition: opacity @defaultDuration @defaultEasing;
+@clearableIconOpacity: 0.6;
+@clearableIconHoverOpacity: 1;
+@clearableIconWidth: 1em;
+@clearableIconHeight: @clearableIconWidth;
+
+@clearableIconInputRight: 1.85714em;
+
+/*
+ * Times icon taken from Font Awesome Free 5.15.4 by @fontawesome [https://fontawesome.com]
+ * License - https://fontawesome.com/license/free
+ */
+@clearableIconBackground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E") no-repeat;
 
 /* Category */
 @categoryBackground: @darkWhite;