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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.10.0-beta.3+f3fff7f",
+  "version": "2.10.0-beta.4+fcf090f",
   "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

@@ -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
@@ -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

package/src/definitions/modules/dropdown.less

@@ -439,18 +439,6 @@ select.ui.dropdown {
         opacity: @selectionIconOpacity;
         transition: @selectionIconTransition;
     }
-    & when (@variationDropdownCompact) {
-        /* Compact */
-        .ui.compact.selection.dropdown {
-            min-width: 0;
-            & > .menu {
-                width: auto;
-                &:not(.multiline) {
-                    width: max-content;
-                }
-            }
-        }
-    }
 
     /* Selection Menu */
     .ui.selection.dropdown@{notUnlimited} .menu {
@@ -712,7 +700,21 @@ select.ui.dropdown {
         }
     }
 }
-
+& when (@variationDropdownCompact) {
+    /* Compact */
+    .ui.compact.dropdown {
+        min-width: 0;
+        & > .menu {
+            width: auto;
+            &:not(.multiline) {
+                width: max-content;
+            }
+        }
+        & .menu > .item {
+            white-space: normal;
+        }
+    }
+}
 & when (@variationDropdownSearch) {
     /* --------------
        Searchable
@@ -1395,15 +1397,6 @@ select.ui.dropdown {
     .ui.dropdown > .visible.menu .scrolling.menu {
         display: block;
     }
-    & when (@supportIE) {
-        /* Scrollbar in IE */
-        @media all and (-ms-high-contrast: none) {
-            .ui.scrolling.dropdown .menu,
-            .ui.dropdown .scrolling.menu {
-                min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
-            }
-        }
-    }
     @media only screen and (max-width: @largestMobileScreen) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
@@ -1519,12 +1512,6 @@ select.ui.dropdown {
     }
     .ui.simple.dropdown .menu {
         position: absolute;
-        & when (@supportIE) {
-            /* IE hack to make dropdown icons appear inline */
-            // stylelint-disable-next-line value-no-vendor-prefix
-            display: -ms-inline-flexbox !important;
-        }
-
         display: block;
         overflow: hidden;
         top: -9999px;
@@ -1814,15 +1801,15 @@ select.ui.dropdown {
     }
 
     /* Upward pointing */
-    .ui.pointing.upward.dropdown .menu,
-    .ui.top.pointing.upward.dropdown .menu {
+    .ui.pointing.upward.dropdown > .menu,
+    .ui.top.pointing.upward.dropdown > .menu {
         top: auto !important;
         bottom: 100% !important;
         margin: 0 0 @pointingMenuDistance;
         border-radius: @pointingUpwardMenuBorderRadius;
     }
-    .ui.pointing.upward.dropdown .menu::after,
-    .ui.top.pointing.upward.dropdown .menu::after {
+    .ui.pointing.upward.dropdown > .menu::after,
+    .ui.top.pointing.upward.dropdown > .menu::after {
         top: 100% !important;
         bottom: auto !important;
         box-shadow: @pointingUpwardArrowBoxShadow;
@@ -2075,16 +2062,7 @@ select.ui.dropdown {
         .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
             background: @thumbInvertedHoverBackground;
         }
-        & when (@supportIE) {
-            .ui.dropdown .inverted.menu,
-            .ui.inverted.dropdown .menu {
-                /* IE11 */
-                scrollbar-face-color: @thumbInvertedBackgroundHex;
-                scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-                scrollbar-track-color: @trackInvertedBackgroundHex;
-                scrollbar-arrow-color: @trackInvertedBackgroundHex;
-            }
-        }
+
         @supports (-moz-appearance: none) {
             .ui.dropdown .inverted.menu,
             .ui.inverted.dropdown .menu {