fomantic-ui 2.9.4-beta.92 → 2.9.4-beta.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.92+84fc179",
+  "version": "2.9.4-beta.93+22d2d0d",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/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',

package/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;
     }
 }
 

package/src/themes/default/globals/variation.variables

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

package/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;

package/tasks/config/project/release.js

@@ -7,7 +7,10 @@ const requireDotFile = require('require-dot-file');
 let
     config,
     npmPackage,
-    version
+    version,
+    revision,
+    versionInFileName,
+    includeVersionInFileName
 ;
 
 /*******************************
@@ -31,6 +34,20 @@ version = npmPackage && npmPackage.version !== undefined && npmPackage.name ===
     ? npmPackage.version
     : config.version;
 
+// looks for revision in config.
+revision = config.revision === undefined ? '' : config.revision;
+
+includeVersionInFileName = config.includeVersionInFileName === undefined ? false : config.includeVersionInFileName;
+
+versionInFileName = '';
+
+if (includeVersionInFileName) {
+    versionInFileName = '-' + version;
+    if (revision !== '') {
+        versionInFileName += '-' + revision;
+    }
+}
+
 /*******************************
              Export
 *******************************/
@@ -54,5 +71,6 @@ module.exports = {
         + ' */\n',
 
     version: version,
+    versionInFileName: versionInFileName,
 
 };

package/tasks/config/tasks.js

@@ -40,12 +40,12 @@ module.exports = {
     },
 
     filenames: {
-        concatenatedCSS: 'semantic.css',
-        concatenatedJS: 'semantic.js',
-        concatenatedMinifiedCSS: 'semantic.min.css',
-        concatenatedMinifiedJS: 'semantic.min.js',
-        concatenatedRTLCSS: 'semantic.rtl.css',
-        concatenatedMinifiedRTLCSS: 'semantic.rtl.min.css',
+        concatenatedCSS: 'semantic' + release.versionInFileName + '.css',
+        concatenatedJS: 'semantic' + release.versionInFileName + '.js',
+        concatenatedMinifiedCSS: 'semantic' + release.versionInFileName + '.min.css',
+        concatenatedMinifiedJS: 'semantic' + release.versionInFileName + '.min.js',
+        concatenatedRTLCSS: 'semantic' + release.versionInFileName + '.rtl.css',
+        concatenatedMinifiedRTLCSS: 'semantic' + release.versionInFileName + '.rtl.min.css',
     },
 
     regExp: {