fomantic-ui 2.9.1-beta.27 → 2.9.1-beta.29

package/examples/fixed.html

@@ -75,7 +75,7 @@
   </div>
 
   <div class="ui main text container">
-    <h1 class="ui header">Semantic UI Fixed Template</h1>
+    <h1 class="ui header">Fomantic UI Fixed Template</h1>
     <p>This is a basic fixed menu template using fixed size containers.</p>
     <p>A text container is used for the main container, which is useful for single column layouts</p>
     <img class="wireframe" src="assets/images/wireframe/media-paragraph.png">

package/examples/grid.html

@@ -197,7 +197,7 @@
       </div>
 
       <h3>Floating Rows</h3>
-      <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
+      <p>Since Fomantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
 
       <div class="ui grid">
         <div class="left floated six wide column">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.1-beta.27+2ec6af4",
+  "version": "2.9.1-beta.29+70adac5",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -34,7 +34,7 @@
     "@octokit/core": "^3.6.0",
     "@octokit/rest": "^16.16.0",
     "better-console": "^1.0.1",
-    "browserslist": "^4.19.1",
+    "browserslist": "^4.21.4",
     "del": "^6.1.1",
     "extend": "^3.0.2",
     "gulp": "^4.0.0",

package/src/definitions/behaviors/api.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isWindow(obj) {
@@ -977,7 +977,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/behaviors/form.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -1426,7 +1426,7 @@
                         if ($allModules.length > 1) {
                             title += ' (' + $allModules.length + ')';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/behaviors/state.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -492,7 +492,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/behaviors/visibility.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -59,14 +59,6 @@
 
                 instance        = $module.data(moduleNamespace),
 
-                requestAnimationFrame = window.requestAnimationFrame
-                    || window.mozRequestAnimationFrame
-                    || window.webkitRequestAnimationFrame
-                    || window.msRequestAnimationFrame
-                    || function (callback) {
-                        setTimeout(callback, 0);
-                    },
-
                 element         = this,
                 disabled        = false,
 
@@ -1100,7 +1092,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/collections/table.less

@@ -641,6 +641,8 @@
         font-weight: @definitionHeaderFontWeight;
         color: @definitionHeaderColor;
         box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+        // https://github.com/fomantic/Fomantic-UI/pull/884
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: scale(1);
     }
 
@@ -654,6 +656,8 @@
         font-weight: @definitionFooterFontWeight;
         color: @definitionFooterColor;
         box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
+        // https://github.com/fomantic/Fomantic-UI/pull/884
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: scale(1);
     }
 

package/src/definitions/elements/button.less

@@ -256,7 +256,9 @@
         /* Vertical */
         .ui.vertical.animated.button .visible.content,
         .ui.vertical.animated.button .hidden.content {
-            transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+            transition:
+                top @animationDuration @animationEasing,
+                transform @animationDuration @animationEasing;
         }
         .ui.vertical.animated.button .visible.content {
             transform: translateY(0);
@@ -282,7 +284,9 @@
         /* Fade */
         .ui.fade.animated.button .visible.content,
         .ui.fade.animated.button .hidden.content {
-            transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+            transition:
+                opacity @animationDuration @animationEasing,
+                transform @animationDuration @animationEasing;
         }
         .ui.fade.animated.button .visible.content {
             left: auto;
@@ -897,6 +901,7 @@
     .ui.tertiary.button {
         transition: color @defaultDuration @defaultEasing !important;
         border-radius: 0;
+        // prettier-ignore
         margin:
             (@verticalPadding - @tertiaryVerticalPadding)
             (@horizontalMargin)

package/src/definitions/elements/icon.less

@@ -443,8 +443,7 @@ i.icons {
     }
 }
 
-& when ((@variationIconGroups) or (@variationIconCorner))
-and ((@variationIconBordered) or (@variationIconCircular)) {
+& when ((@variationIconGroups) or (@variationIconCorner)) and ((@variationIconBordered) or (@variationIconCircular)) {
     /*************************************************
        Bordered/circular with corner or group icons
     *************************************************/
@@ -513,32 +512,25 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 }
 
-.generateIcons(@map, @fontFamily) {
+.generateIcons(@map, @fontFamily: false, @pseudo: before) {
     each(@map, {
         @escapedKey: replace(@key, "^([0-9])", "\3$1 ");
-        @normalizedKey: replace(@escapedKey, "_", ".", "g");
-        i.icon.@{normalizedKey}::before {
+        @normalizedKey: replace(@escapedKey, "_", @iconClassSeparator, "g");
+        @unorderedKey: e(%(".%s::%s",@normalizedKey, @pseudo));
+        @orderedKey: e(%('[%s*="%s"]::%s', @iconForcedAttribute, @normalizedKey, @pseudo));
+        @selectorKey: if(@iconForcedOrder or @iconClassSeparator = " ", @orderedKey, @unorderedKey);
+        i.icon@{selectorKey} {
             content: "@{value}";
             & when not (@fontFamily = false) {
                 font-family: @fontFamily;
             }
         }
     });
-};
-
-.generateSecondaryIcons(@map) {
-    each(@map, {
-        @escapedKey: replace(@key, "^([0-9])", "\3$1 ");
-        @normalizedKey: replace(@escapedKey, "_", ".", "g");
-        i.icon.@{normalizedKey}::after {
-            content: "@{value}";
-        }
-    });
-};
+}
 
 & when (@variationIconDeprecated) {
     /* Deprecated *In/Out Naming Conflict) */
-    .generateIcons(@icon-deprecated-map, false);
+    .generateIcons(@icon-deprecated-map);
 }
 
 & when (@variationIconSolid) {
@@ -547,10 +539,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     *******************************/
 
     /* Icons */
-    .generateIcons(@icon-map, false);
+    .generateIcons(@icon-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-aliases-map, false);
+        .generateIcons(@icon-aliases-map);
     }
 }
 
@@ -564,10 +556,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 
     /* Icons */
-    .generateIcons(@icon-outline-map, false);
+    .generateIcons(@icon-outline-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-outline-aliases-map, false);
+        .generateIcons(@icon-outline-aliases-map);
     }
 }
 
@@ -580,10 +572,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     i.icon.thin {
         font-family: @thinFontName;
     }
-    .generateIcons(@icon-thin-map, false);
+    .generateIcons(@icon-thin-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-thin-aliases-map, false);
+        .generateIcons(@icon-thin-aliases-map);
     }
 }
 
@@ -630,13 +622,13 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
         opacity: @duotoneSecondaryOpacity;
     }
 
-    .generateIcons(@icon-duotone-map, false);
-    .generateSecondaryIcons(@icon-duotone-secondary-map);
+    .generateIcons(@icon-duotone-map);
+    .generateIcons(@icon-duotone-secondary-map, false, after);
 
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-duotone-aliases-map, false);
-        .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
+        .generateIcons(@icon-duotone-aliases-map);
+        .generateIcons(@icon-duotone-secondary-aliases-map, false, after);
     }
 
     /*

package/src/definitions/elements/image.less

@@ -161,8 +161,6 @@ img.ui.image {
     .ui.circular.image,
     .ui.circular.images .image > *,
     .ui.circular.image > * {
-        -webkit-border-radius: @circularRadius;
-        -moz-border-radius: @circularRadius;
         border-radius: @circularRadius;
     }
 }
@@ -199,8 +197,6 @@ img.ui.image {
         display: inline-block;
         width: @avatarSize;
         height: @avatarSize;
-        -webkit-border-radius: @circularRadius;
-        -moz-border-radius: @circularRadius;
         border-radius: @circularRadius;
     }
 }

package/src/definitions/elements/loader.less

@@ -328,6 +328,8 @@
     .ui.elastic.loading.loading.loading > i.icon::before,
     .ui.elastic.loader.loader::before {
         animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
+        // https://github.com/fomantic/Fomantic-UI/pull/363
+        // stylelint-disable-next-line property-no-vendor-prefix
         -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         border-right-color: transparent;
     }

package/src/definitions/elements/segment.less

@@ -455,7 +455,9 @@
         .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
             flex: 1 1 auto;
             & when (@supportIE) {
-                -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+                // https://github.com/Semantic-Org/Semantic-UI/issues/2550
+                // stylelint-disable-next-line property-no-vendor-prefix
+                -ms-flex: 1 1 0;
             }
         }
         .ui.horizontal.segments > .segment {

package/src/definitions/globals/site.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -60,45 +60,16 @@
             },
 
             normalize: function () {
-                module.fix.console();
-                module.fix.requestAnimationFrame();
+                // keep the function for backward compatibility
+                // eslint-disable-next-line no-useless-return
+                return;
             },
 
             fix: {
-                console: function () {
-                    module.debug('Normalizing window.console');
-                    if (console === undefined || console.log === undefined) {
-                        module.verbose('Console not available, normalizing events');
-                        module.disable.console();
-                    }
-                    if (console.group === undefined || console.groupEnd === undefined || console.groupCollapsed === undefined) {
-                        module.verbose('Console group not available, normalizing events');
-                        window.console.group = function () {};
-                        window.console.groupEnd = function () {};
-                        window.console.groupCollapsed = function () {};
-                    }
-                    if (console.markTimeline === undefined) {
-                        module.verbose('Mark timeline not available, normalizing events');
-                        window.console.markTimeline = function () {};
-                    }
-                },
                 consoleClear: function () {
                     module.debug('Disabling programmatic console clearing');
                     window.console.clear = function () {};
                 },
-                requestAnimationFrame: function () {
-                    module.debug('Normalizing requestAnimationFrame');
-                    if (window.requestAnimationFrame === undefined) {
-                        module.debug('RequestAnimationFrame not available, normalizing event');
-                        window.requestAnimationFrame = window.requestAnimationFrame
-                            || window.mozRequestAnimationFrame
-                            || window.webkitRequestAnimationFrame
-                            || window.msRequestAnimationFrame
-                            || function (callback) {
-                                setTimeout(callback, 0);
-                            };
-                    }
-                },
             },
 
             moduleExists: function (name) {
@@ -244,7 +215,7 @@
                         groupEnd: function () {},
                         info: function () {},
                         log: function () {},
-                        markTimeline: function () {},
+                        table: function () {},
                         warn: function () {},
                     };
                 }
@@ -334,7 +305,7 @@
                         totalTime += data['Execution Time'];
                     });
                     title += ' ' + totalTime + 'ms';
-                    if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                    if (performance.length > 0) {
                         console.groupCollapsed(title);
                         if (console.table) {
                             console.table(performance);
@@ -441,21 +412,23 @@
             'dimmer',
             'dropdown',
             'embed',
+            'flyout',
             'form',
             'modal',
             'nag',
             'popup',
-            'slider',
+            'progress',
             'rating',
+            'search',
             'shape',
             'sidebar',
+            'slider',
             'state',
             'sticky',
             'tab',
             'toast',
             'transition',
             'visibility',
-            'visit',
         ],
 
         siteNamespace: 'site',

package/src/definitions/modules/accordion.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -455,7 +455,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/modules/calendar.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -1497,7 +1497,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/modules/checkbox.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -740,7 +740,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/modules/dimmer.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -548,7 +548,7 @@
                         if ($allModules.length > 1) {
                             title += ' (' + $allModules.length + ')';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);

package/src/definitions/modules/dimmer.less

@@ -155,6 +155,8 @@
         perspective: @perspective;
         transform-origin: center center;
         &.modals {
+            // https://github.com/fomantic/Fomantic-UI/pull/1491
+            // stylelint-disable-next-line property-no-vendor-prefix
             -moz-perspective: none;
         }
     }
@@ -302,7 +304,6 @@ body.dimmable > .dimmer {
     .ui[class*="center dimmer"] {
         top: 50%;
         transform: translateY(-50%);
-        -webkit-transform: translateY(calc(-50% - 0.5px));
     }
 
     .ui.segment > .ui.ui[class*="top dimmer"] {
@@ -336,48 +337,40 @@ body.dimmable > .dimmer {
         0% {
             opacity: 0;
             transform: translateY(-40%);
-            -webkit-transform: translateY(calc(-40% - 0.5px));
         }
         100% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
     }
     @keyframes fadeInDownCenter {
         0% {
             opacity: 0;
             transform: translateY(-60%);
-            -webkit-transform: translateY(calc(-60% - 0.5px));
         }
         100% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
     }
     @keyframes fadeOutUpCenter {
         0% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         100% {
             opacity: 0;
             transform: translateY(-45%);
-            -webkit-transform: translateY(calc(-45% - 0.5px));
         }
     }
     @keyframes fadeOutDownCenter {
         0% {
             opacity: 1;
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         100% {
             opacity: 0;
             transform: translateY(-55%);
-            -webkit-transform: translateY(calc(-55% - 0.5px));
         }
     }
     @keyframes bounceCenter {
@@ -387,7 +380,6 @@ body.dimmable > .dimmer {
         80%,
         100% {
             transform: translateY(-50%);
-            -webkit-transform: translateY(calc(-50% - 0.5px));
         }
         40% {
             transform: translateY(calc(-50% - 30px));

package/src/definitions/modules/dropdown.js

@@ -8,7 +8,7 @@
  *
  */
 
-(function ($, window, document, undefined) {
+(function ($, window, document) {
     'use strict';
 
     function isFunction(obj) {
@@ -3582,6 +3582,14 @@
                     useAPI: function () {
                         return $.fn.api !== undefined;
                     },
+                    useElement: function (element) {
+                        if ($.fn[element] !== undefined) {
+                            return true;
+                        }
+                        module.error(error.noElement.replace('{element}', element));
+
+                        return false;
+                    },
                 },
 
                 animate: {
@@ -3613,7 +3621,7 @@
                                     displayType: module.get.displayType(),
                                 }).transition('show');
                                 callback.call(element);
-                            } else if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            } else if (module.can.useElement('transition') && $module.transition('is supported')) {
                                 $currentMenu
                                     .transition({
                                         animation: transition + ' in',
@@ -3629,8 +3637,6 @@
                                         },
                                     })
                                 ;
-                            } else {
-                                module.error(error.noTransition, transition);
                             }
                         }
                     },
@@ -3845,7 +3851,7 @@
                         if (moduleSelector) {
                             title += ' \'' + moduleSelector + '\'';
                         }
-                        if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+                        if (performance.length > 0) {
                             console.groupCollapsed(title);
                             if (console.table) {
                                 console.table(performance);
@@ -4048,7 +4054,7 @@
             method: 'The method you called is not defined.',
             noAPI: 'The API module is required to load resources remotely',
             noStorage: 'Saving remote data requires session storage',
-            noTransition: 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>',
+            noElement: 'This module requires ui {element}',
             noNormalize: '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including <https://cdn.jsdelivr.net/npm/unorm@1.4.1/lib/unorm.min.js> as a polyfill.',
         },
 

package/src/definitions/modules/dropdown.less

@@ -434,7 +434,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
         border-top-width: 0 !important;
         width: auto;
         outline: none;
@@ -634,7 +633,7 @@ select.ui.dropdown {
     }
     & when (@variationDropdownScrollhint) {
         /* CSS specific to iOS devices or firefox mobile only */
-        @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance: none) {
+        @supports (-webkit-touch-callout: none) or (-moz-appearance: none) {
             @media (-moz-touch-enabled), (pointer: coarse) {
                 .ui.dropdown .scrollhint.menu:not(.hidden)::before {
                     animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
@@ -751,7 +750,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
     }
     @media only screen and (max-width: @largestMobileScreen) {
         .ui.search.dropdown .menu {
@@ -1295,7 +1293,6 @@ select.ui.dropdown {
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        -webkit-overflow-scrolling: touch;
         min-width: 100% !important;
         width: auto !important;
     }