fomantic-ui 2.10.0-beta.3 → 2.10.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.10.0-beta.3+f3fff7f",
+  "version": "2.10.0-beta.5+789e0d0",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -42,8 +42,8 @@
     "@octokit/core": "^6.1.4",
     "@octokit/rest": "^21.1.1",
     "browserslist": "^4.21.4",
-    "del": "^6.1.1",
     "extend": "^3.0.2",
+    "fs-extra": "^11.3.0",
     "gulp": "^5.0.0",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-chmod": "^3.0.0",
@@ -65,13 +65,12 @@
     "less": "^3.12.0 || ^4.0.0",
     "map-stream": "^0.1.0",
     "merge-stream": "^2.0.0",
-    "mkdirp": "^1.0.4",
     "normalize-path": "^3.0.0",
     "ordered-read-streams": "^1.0.1",
     "replace-ext": "^1.0.0",
     "require-dot-file": "^0.4.0",
     "wrench-sui": "^0.0.3",
-    "yamljs": "^0.3.0"
+    "js-yaml": "^4.1.0"
   },
   "devDependencies": {
     "@internal/eslint-plugin": "file:.eslint",

package/src/definitions/behaviors/form.js

@@ -1843,11 +1843,6 @@
                 return !(value === undefined || value === '' || (Array.isArray(value) && value.length === 0));
             },
 
-            /* Deprecated */
-            empty: function (value) {
-                return $.fn.form.settings.rules.notEmpty(value);
-            },
-
             // checkbox checked
             checked: function () {
                 return $(this).filter(':checked').length > 0;

package/src/definitions/collections/form.less

@@ -406,9 +406,6 @@
 .ui.form ::placeholder {
     color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder when (@supportIE) {
-    color: @inputPlaceholderColor !important;
-}
 .ui.form ::-moz-placeholder {
     opacity: 1;
 }
@@ -416,9 +413,6 @@
 .ui.form :focus::placeholder {
     color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder when (@supportIE) {
-    color: @inputPlaceholderFocusColor !important;
-}
 
 /* --------------------
         Focus
@@ -675,17 +669,11 @@
         .ui.form .@{state} ::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
-        .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderColor] !important;
-        }
 
         .ui.form .@{state} .ui.dropdown > input:focus ~ .default.text,
         .ui.form .@{state} :focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
-        .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderFocusColor] !important;
-        }
 
         /*------------------
             Dropdown State

package/src/definitions/collections/grid.less

@@ -160,58 +160,6 @@
            Variations
 *******************************/
 
-& when (@variationGridPage) {
-    /* -----------------------
-           Page Grid
-    ------------------------- */
-
-    @media only screen and (max-width: @largestMobileScreen) {
-        .ui.page.grid {
-            width: @mobileWidth;
-            padding-left: @mobileGutter;
-            padding-right: @mobileGutter;
-            margin-left: 0;
-            margin-right: 0;
-        }
-    }
-    @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-        .ui.page.grid {
-            width: @tabletWidth;
-            margin-left: @tabletMargin;
-            margin-right: @tabletMargin;
-            padding-left: @tabletGutter;
-            padding-right: @tabletGutter;
-        }
-    }
-    @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-        .ui.page.grid {
-            width: @computerWidth;
-            margin-left: @computerMargin;
-            margin-right: @computerMargin;
-            padding-left: @computerGutter;
-            padding-right: @computerGutter;
-        }
-    }
-    @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
-        .ui.page.grid {
-            width: @largeMonitorWidth;
-            margin-left: @largeMonitorMargin;
-            margin-right: @largeMonitorMargin;
-            padding-left: @largeMonitorGutter;
-            padding-right: @largeMonitorGutter;
-        }
-    }
-    @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.page.grid {
-            width: @widescreenMonitorWidth;
-            margin-left: @widescreenMargin;
-            margin-right: @widescreenMargin;
-            padding-left: @widescreenMonitorGutter;
-            padding-right: @widescreenMonitorGutter;
-        }
-    }
-}
-
 /* -------------------
      Column Count
 -------------------- */
@@ -338,13 +286,6 @@
     width: @sixteenColumn !important;
 }
 
-& when (@variationGridCelled) and (@variationGridPage) {
-    /* Celled Page */
-    .ui.celled.page.grid {
-        box-shadow: none;
-    }
-}
-
 & when (@variationGridWide) {
     /* -------------------
         Column Width
@@ -1724,8 +1665,7 @@
         }
 
         /* Don't pad inside segment or nested grid */
-        .ui.grid .ui.stackable.grid,
-        .ui.segment@{notVertical} .ui.stackable.page.grid {
+        .ui.grid .ui.stackable.grid {
             margin-left: -(@stackableGutter / 2);
             margin-right: -(@stackableGutter / 2);
         }

package/src/definitions/collections/menu.less

@@ -296,11 +296,6 @@
     }
     .ui.vertical.menu .dropdown.item .menu {
         left: 100%;
-        & when (@supportIE) {
-            /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-            min-width: 0;
-        }
-
         min-width: max-content;
         margin: 0 0 0 @dropdownMenuDistance;
         box-shadow: @dropdownVerticalMenuBoxShadow;
@@ -1598,12 +1593,6 @@ Floated Menu / Item
     }
     & when (@variationMenuVertical) {
         .ui.compact.vertical.menu {
-            & when (@supportIE) {
-                /* IE hack to make dropdown icons appear inline */
-                // stylelint-disable-next-line value-no-vendor-prefix
-                display: -ms-inline-flexbox !important;
-            }
-
             display: inline-block;
         }
     }

package/src/definitions/collections/table.less

@@ -519,32 +519,6 @@
             }
         }
 
-        & when (@supportIE) {
-            /* IE scrollbar color needs hex values */
-            @media all and (-ms-high-contrast: none) {
-                .ui.scrolling.table > thead,
-                .ui.scrolling.table > tfoot {
-                    scrollbar-face-color: currentColor;
-                    scrollbar-shadow-color: currentColor;
-                    scrollbar-track-color: currentColor;
-                    scrollbar-arrow-color: currentColor;
-                }
-                .ui.scrolling.table > thead {
-                    color: @headerBackgroundHex;
-                }
-                .ui.scrolling.table > tfoot {
-                    color: @footerBackgroundHex;
-                }
-                & when (@variationTableInverted) {
-                    .ui.inverted.scrolling.table > thead {
-                        color: @invertedHeaderBackgroundHex;
-                    }
-                    .ui.inverted.scrolling.table > tfoot {
-                        color: @invertedFooterBackgroundHex;
-                    }
-                }
-            }
-        }
         & when (@variationTableInverted) {
             .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
                 background: @trackInvertedBackground;
@@ -558,15 +532,7 @@
             .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
                 background: @thumbInvertedHoverBackground;
             }
-            & when (@supportIE) {
-                .ui.inverted.scrolling.table > tbody {
-                    /* IE11 */
-                    scrollbar-face-color: @thumbInvertedBackgroundHex;
-                    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-                    scrollbar-track-color: @trackInvertedBackgroundHex;
-                    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-                }
-            }
+
             @supports (-moz-appearance: none) {
                 .ui.inverted.scrolling.table > tbody {
                     /* firefox: first color thumb, second track */

package/src/definitions/elements/input.less

@@ -78,9 +78,6 @@
 .ui.input > input::-moz-placeholder {
     opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder when (@supportIE) {
-    color: @placeholderColor;
-}
 
 /*******************************
             States
@@ -166,12 +163,6 @@
 .ui.input > input:focus::placeholder {
     color: @placeholderFocusColor;
 }
-& when (@supportIE) {
-    .ui.input.focus > input:-ms-input-placeholder,
-    .ui.input > input:focus:-ms-input-placeholder {
-        color: @placeholderFocusColor;
-    }
-}
 
 & when not (@variationInputStates = false) {
     /* --------------------
@@ -193,29 +184,17 @@
                 color: @formStates[@@state][color];
                 box-shadow: @formStates[@@state][boxShadow];
             }
-            .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){
-                background-color: @formStates[@@state][background];
-                border-color: @formStates[@@state][borderColor];
-                color: @formStates[@@state][color];
-                box-shadow: @formStates[@@state][boxShadow];
-            }
         }
 
         /* Placeholder */
         .ui.input.@{state} > input::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
-        .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderColor] !important;
-        }
 
         /* Focused Placeholder */
         .ui.input.@{state} > input:focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
-        .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
-            color: @formStates[@@state][inputPlaceholderFocusColor] !important;
-        }
     });
 }
 
@@ -265,9 +244,6 @@
         .ui.transparent.inverted.input > input::placeholder {
             color: @transparentInvertedPlaceholderColor;
         }
-        .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {
-            color: @transparentInvertedPlaceholderColor;
-        }
     }
 }
 
@@ -675,33 +651,6 @@
             color: @fileButtonTextColor;
         }
     }
-    & when (@supportIE) {
-        .ui.action.file.input input[type="file"]::-ms-browse {
-            display: none;
-        }
-        .ui.form .field input[type="file"]::-ms-browse,
-        .ui.file.input input[type="file"]::-ms-browse {
-            border: none;
-            cursor: pointer;
-            padding: @padding;
-            margin: 0;
-            background: @fileButtonBackground;
-            font-weight: @fileButtonFontWeight;
-            color: @fileButtonTextColor;
-            &:hover {
-                background: @fileButtonBackgroundHover;
-                color: @fileButtonTextColor;
-            }
-        }
-
-        /* IE needs additional styling for input field :S */
-        @media all and (-ms-high-contrast: none) {
-            .ui.file.input > input[type="file"],
-            input[type="file"].ui.file.input {
-                padding: 0 !important;
-            }
-        }
-    }
 
     .ui.action.file.input input[type="file"]::file-selector-button {
         display: none;
@@ -776,16 +725,7 @@
                     background: @h;
                 }
             }
-            & when (@supportIE) {
-                input[type="file"].ui.@{color}.file.input::-ms-browse,
-                .ui.@{color}.file.input input[type="file"]::-ms-browse {
-                    background: @c;
-                    color: @white;
-                    &:hover {
-                        background: @h;
-                    }
-                }
-            }
+
             input[type="file"].ui.@{color}.file.input::file-selector-button,
             .ui.@{color}.file.input input[type="file"]::file-selector-button {
                 background: @c;

package/src/definitions/elements/segment.less

@@ -94,7 +94,6 @@
 }
 
 /* Grid */
-.ui.page.grid.segment,
 .ui.grid > .row > .ui.segment.column,
 .ui.grid > .ui.segment.column {
     padding-top: @pageGridMargin;
@@ -484,11 +483,6 @@
         /* Horizontal Segment */
         .ui.horizontal.segments@{notCompact} > .segment@{notCompact} {
             flex: 1 1 auto;
-            & when (@supportIE) {
-                // 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 {
             margin: 0;

package/src/definitions/globals/site.less

@@ -148,15 +148,7 @@ a:hover {
     body ::-webkit-scrollbar-thumb:hover {
         background: @thumbHoverBackground;
     }
-    & when (@supportIE) {
-        body .ui {
-            /* IE11 */
-            scrollbar-face-color: @thumbBackgroundHex;
-            scrollbar-shadow-color: @thumbBackgroundHex;
-            scrollbar-track-color: @trackBackgroundHex;
-            scrollbar-arrow-color: @trackBackgroundHex;
-        }
-    }
+
     @supports (-moz-appearance: none) {
         body .ui {
             /* firefox: first color thumb, second track */
@@ -178,15 +170,7 @@ a:hover {
     body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
         background: @thumbInvertedHoverBackground;
     }
-    & when (@supportIE) {
-        body .ui.inverted:not(.dimmer) {
-            /* IE11 */
-            scrollbar-face-color: @thumbInvertedBackgroundHex;
-            scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-            scrollbar-track-color: @trackInvertedBackgroundHex;
-            scrollbar-arrow-color: @trackInvertedBackgroundHex;
-        }
-    }
+
     @supports (-moz-appearance: none) {
         body .ui.inverted:not(.dimmer) {
             /* firefox: first color thumb, second track */

package/src/definitions/modules/calendar.js

@@ -1628,7 +1628,7 @@
         constantHeight: true, // add rows to shorter months to keep day calendar height consistent (6 rows)
         today: false, // show a 'today/now' button at the bottom of the calendar
         closable: true, // close the popup after selecting a date/time
-        monthFirst: true, // month before day when parsing date from a text
+        monthFirst: false, // month before day when parsing date from a text
         touchReadonly: true, // set input to readonly on touch devices
         inline: false, // create the calendar inline instead of inside a popup
         on: null, // when to show the popup (defaults to 'focus' for input, 'click' for others)

package/src/definitions/modules/checkbox.js

@@ -333,8 +333,6 @@
                     module.set.enabled();
                     if (!module.should.ignoreCallbacks()) {
                         settings.onEnable.call(input);
-                        // preserve legacy callbacks
-                        settings.onEnabled.call(input);
                     }
                 },
 
@@ -348,8 +346,6 @@
                     module.set.disabled();
                     if (!module.should.ignoreCallbacks()) {
                         settings.onDisable.call(input);
-                        // preserve legacy callbacks
-                        settings.onDisabled.call(input);
                     }
                 },
 
@@ -859,10 +855,6 @@
         onEnable: function () {},
         onDisable: function () {},
 
-        // preserve misspelled callbacks (will be removed in 3.0)
-        onEnabled: function () {},
-        onDisabled: function () {},
-
         className: {
             checked: 'checked',
             indeterminate: 'indeterminate',

package/src/definitions/modules/dimmer.less

@@ -77,15 +77,6 @@
     .ui.dimmer@{notInverted}::-webkit-scrollbar-thumb:hover {
         background: @thumbInvertedHoverBackground;
     }
-    & when (@supportIE) {
-        .ui.dimmer@{notInverted} {
-            /* IE11 */
-            scrollbar-face-color: @thumbInvertedBackgroundHex;
-            scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-            scrollbar-track-color: @trackInvertedBackgroundHex;
-            scrollbar-arrow-color: @trackInvertedBackgroundHex;
-        }
-    }
     @supports (-moz-appearance: none) {
         .ui.dimmer@{notInverted} {
             /* firefox: first color thumb, second track */

package/src/definitions/modules/dropdown.js

@@ -416,7 +416,7 @@
                                 .attr('class', $input.attr('class'))
                                 .addClass(className.selection)
                                 .addClass(className.dropdown)
-                                .html(templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className))
+                                .html(templates.dropdown(selectValues, settings))
                                 .insertBefore($input)
                             ;
                             if ($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
@@ -446,7 +446,7 @@
                         module.refresh();
                     },
                     menu: function (values) {
-                        $menu.html(templates.menu(values, fields, settings.preserveHTML, settings.className));
+                        $menu.html(templates.menu(values, settings));
                         $item = $menu.find(selector.item);
                         $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
                     },
@@ -1113,7 +1113,7 @@
                                     value = settings.templates.deQuote(item[fields.value]),
                                     name = settings.templates.escape(
                                         item[fields.name] || '',
-                                        settings.preserveHTML
+                                        settings
                                     )
                                 ;
                                 $input.append('<option value="' + value + '"' + (item.selected === true ? ' selected' : '') + '>' + name + '</option>');
@@ -1436,7 +1436,6 @@
                                 hasSubMenu     = $subMenu.length > 0,
                                 isBubbledEvent = $subMenu.find($target).length > 0
                             ;
-                            // prevents IE11 bug where menu receives focus even though `tabindex=-1`
                             if (document.activeElement.tagName.toLowerCase() !== 'input') {
                                 $(document.activeElement).trigger('blur');
                             }
@@ -1922,7 +1921,7 @@
                         $sizer.text(value);
 
                         // prevent rounding issues
-                        return Math.ceil($sizer.width() + (module.is.edge() ? 3 : 1));
+                        return Math.ceil($sizer.width() + 1);
                     },
                     selectionCount: function () {
                         var
@@ -2903,7 +2902,7 @@
                         $label = $('<a />')
                             .addClass(className.label)
                             .attr('data-' + metadata.value, escapedValue)
-                            .html(templates.label(escapedValue, text, settings.preserveHTML, settings.className))
+                            .html(templates.label(escapedValue, text, settings))
                         ;
                         $label = settings.onLabelCreate.call($label, escapedValue, text);
 
@@ -3450,9 +3449,6 @@
                     bubbledIconClick: function (event) {
                         return $(event.target).closest($icon).length > 0;
                     },
-                    edge: function () {
-                        return !!window.chrome && !!window.StyleMedia;
-                    },
                     empty: function () {
                         return $module.hasClass(className.empty);
                     },
@@ -4070,7 +4066,7 @@
         hideDividers: false, // Whether to hide any divider elements (specified in selector.divider) that are sibling to any items when searched (set to true will hide all dividers, set to 'empty' will hide them when they are not followed by a visible item)
 
         placeholder: 'auto', // whether to convert blank <select> values to the placeholder text
-        preserveHTML: true, // preserve HTML when selecting value
+        preserveHTML: false, // preserve HTML when selecting value
         sortSelect: false, // sort selection on init
 
         forceSelection: false, // force a choice on blur with search selection
@@ -4273,8 +4269,8 @@
         deQuote: function (string, encode) {
             return String(string).replace(/"/g, encode ? '&quot;' : '');
         },
-        escape: function (string, preserveHTML) {
-            if (preserveHTML) {
+        escape: function (string, settings) {
+            if (settings.preserveHTML) {
                 return string;
             }
             var
@@ -4299,31 +4295,34 @@
             return string;
         },
         // generates dropdown from select values
-        dropdown: function (select, fields, preserveHTML, className) {
+        dropdown: function (select, settings) {
             var
                 placeholder = select.placeholder || false,
-                html        = '',
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                html = '',
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
             html += '<i class="dropdown icon"></i>';
             html += placeholder
-                ? '<div class="default text">' + escape(placeholder, preserveHTML) + '</div>'
+                ? '<div class="default text">' + escape(placeholder, settings) + '</div>'
                 : '<div class="text"></div>';
             html += '<div class="' + deQuote(className.menu) + '">';
-            html += $.fn.dropdown.settings.templates.menu(select, fields, preserveHTML, className);
+            html += settings.templates.menu(select, settings);
             html += '</div>';
 
             return html;
         },
 
         // generates just menu from select
-        menu: function (response, fields, preserveHTML, className) {
+        menu: function (response, settings) {
             var
+                fields = settings.fields,
                 values = response[fields.values] || [],
-                html   = '',
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                html = '',
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
             $.each(values, function (index, option) {
                 var
@@ -4357,7 +4356,7 @@
                         maybeDescriptionVertical = option[fields.descriptionVertical]
                             ? className.descriptionVertical + ' '
                             : '',
-                        hasDescription = escape(option[fields.description] || '', preserveHTML) !== ''
+                        hasDescription = escape(option[fields.description] || '', settings) !== ''
                     ;
                     html += '<div class="' + deQuote(maybeActionable + maybeDisabled + maybeDescriptionVertical + (option[fields.class] || className.item)) + '" data-value="' + deQuote(option[fields.value], true) + '"' + maybeText + maybeData + '>';
                     if (isMenu) {
@@ -4370,17 +4369,17 @@
                         html += '<i class="' + deQuote(option[fields.icon] + ' ' + (option[fields.iconClass] || className.icon)) + '"></i>';
                     }
                     if (hasDescription) {
-                        html += '<span class="' + deQuote(className.description) + '">' + escape(option[fields.description] || '', preserveHTML) + '</span>';
+                        html += '<span class="' + deQuote(className.description) + '">' + escape(option[fields.description] || '', settings) + '</span>';
                         html += !isMenu ? '<span class="' + deQuote(className.text) + '">' : '';
                     }
                     if (isMenu) {
                         html += '<span class="' + deQuote(className.text) + '">';
                     }
-                    html += escape(option[fields.name] || '', preserveHTML);
+                    html += escape(option[fields.name] || '', settings);
                     if (isMenu) {
                         html += '</span>';
                         html += '<div class="' + deQuote(itemType) + '">';
-                        html += $.fn.dropdown.settings.templates.menu(option, fields, preserveHTML, className);
+                        html += settings.templates.menu(option, settings);
                         html += '</div>';
                     } else if (hasDescription) {
                         html += '</span>';
@@ -4388,7 +4387,7 @@
                     html += '</div>';
                 } else if (itemType === 'header') {
                     var
-                        groupName = escape(option[fields.name] || '', preserveHTML),
+                        groupName = escape(option[fields.name] || '', settings),
                         groupIcon = deQuote(option[fields.icon] || className.groupIcon)
                     ;
                     if (groupName !== '' || groupIcon !== '') {
@@ -4409,13 +4408,14 @@
         },
 
         // generates label for multiselect
-        label: function (value, text, preserveHTML, className) {
+        label: function (value, text, settings) {
             var
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
 
-            return escape(text, preserveHTML) + '<i class="' + deQuote(className.delete) + ' icon"></i>';
+            return escape(text, settings) + '<i class="' + deQuote(className.delete) + ' icon"></i>';
         },
 
         // generates messages like "No results"