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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.10.0-beta.2+d30ebd7",
+  "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/README.md

@@ -2,7 +2,7 @@
 
 ### Built-In Tools
 
-From the Fomantic directory you can setup gulp to build Fomantic by running.
+From the Fomantic directory you can set up gulp to build Fomantic by running.
 
 ```bash
 npm install
@@ -68,7 +68,7 @@ filename | usage | Initial Name
 
 You will only need to use Fomantic's build tools while refining your UI. When designing pages, you can rely on the compiled css packages in  `dist/`.
 
-When creating your UI you can try <a href="http://www.learnsemantic.com/themes/creating.html">downloading different themes</a>, adjusting your <a href="http://www.learnsemantic.com/developing/customizing.html#setting-global-variables">site-wide settings</a> (font-family, colors, etc) and tweaking components in your site's <a href="http://www.learnsemantic.com/developing/customizing.html#designing-for-the-long-now">component overrides</a>.
+When creating your UI you can try <a href="http://www.learnsemantic.com/themes/creating.html">downloading different themes</a>, adjusting your <a href="http://www.learnsemantic.com/developing/customizing.html#setting-global-variables">site-wide settings</a> (font-family, colors, etc.) and tweaking components in your site's <a href="http://www.learnsemantic.com/developing/customizing.html#designing-for-the-long-now">component overrides</a>.
 
 Files in the  `examples/` folder of your project can be useful for testing out changes in your UI. For example, you might run  `gulp watch` download a new theme to  `src/site/themes/` then adjust your  `theme.config` file with the name of the new theme and refresh  `examples/kitchensink.html` to inspect changes in the theme.
 
@@ -120,7 +120,7 @@ You may also specify your own custom LESS in `site/elements/button.overrides`. T
 
 You can modify `theme.config` to use any prepackaged theme available in `src/themes/`.
 
-For example you can modify `theme.config` to use a `github` button theme by changing
+For example, you can modify `theme.config` to use a `github` button theme by changing
 
 ```less
 @button: 'github';

package/src/definitions/behaviors/api.js

@@ -211,7 +211,7 @@
                     // call beforesend and get any settings changes
                     requestSettings = module.get.settings();
 
-                    // check if before send cancelled request
+                    // check if before send canceled request
                     if (requestSettings === false) {
                         module.cancelled = true;
                         module.error(error.beforeSend);
@@ -767,8 +767,8 @@
                     },
                     errorFromRequest: function (response, status, httpMessage) {
                         return $.isPlainObject(response) && response.error !== undefined
-                            ? response.error // use json error message
-                            : (settings.error[status] !== undefined // use server error message
+                            ? response.error // use JSON error message
+                            : (settings.error[status] !== undefined // use the server error message
                                 ? settings.error[status]
                                 : httpMessage);
                     },
@@ -1125,7 +1125,7 @@
         // whether to add default data to url data
         defaultData: true,
 
-        // whether to serialize closest form
+        // whether to serialize the closest form
         // use true to convert complex named keys like a[b][1][c][] into a nested object
         // use 'formdata' for formdata web api
         serializeForm: false,
@@ -1162,7 +1162,7 @@
         // after request
         onResponse: false, // function(response) { },
 
-        // response was successful, if JSON passed validation
+        // response was successful if JSON passed validation
         onSuccess: function (response, $module) {},
 
         // request finished without aborting

package/src/definitions/behaviors/form.js

@@ -377,10 +377,10 @@
                         if (currentValue === undefined || currentValue === null) {
                             currentValue = '';
                         } else if (Array.isArray(currentValue)) {
-                            // multiple select values are returned as arrays which are never equal, so do string conversion first
+                            // multiple select values are returned as arrays which are never equal, so do the string conversion first
                             currentValue = currentValue.toString();
                         }
-                        // Boolean values can be encoded as "true/false" or "True/False" depending on underlying frameworks so we need a case insensitive comparison
+                        // Boolean values can be encoded as "true/false" or "True/False" depending on underlying frameworks, so we need a case-insensitive comparison
                         var boolRegex = /^(true|false)$/i;
                         var isBoolValue = boolRegex.test(initialValue) && boolRegex.test(currentValue);
                         if (isBoolValue) {
@@ -494,7 +494,7 @@
                                 event.returnValue = settings.text.leavingMessage;
                             }
 
-                            // For olders...
+                            // For older...
                             return settings.text.leavingMessage;
                         }
                     },
@@ -1315,7 +1315,7 @@
                                 if (typeof settings.errorFocus === 'string') {
                                     $focusElement = $(document).find(settings.errorFocus);
                                     hasTabIndex = $focusElement.is('[tabindex]');
-                                    // to be able to focus/scroll into non input elements we need a tabindex
+                                    // to be able to focus/scroll into non-input elements, we need a tabindex
                                     if (!hasTabIndex) {
                                         $focusElement.attr('tabindex', -1);
                                     }
@@ -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;
@@ -1858,7 +1853,7 @@
                 return $.fn.form.settings.regExp.email.test(value);
             },
 
-            // value is most likely url
+            // value is most likely the url
             url: function (value) {
                 return $.fn.form.settings.regExp.url.test(value);
             },
@@ -1934,7 +1929,7 @@
                 );
             },
 
-            // is valid number (with decimal)
+            // is it a valid number (with decimal)
             decimal: function (value, range) {
                 return $.fn.form.settings.rules.range(value, range, 'decimal');
             },
@@ -1944,7 +1939,7 @@
                 return $.fn.form.settings.rules.range(value, range, 'number');
             },
 
-            // is value (case insensitive)
+            // is value (case-insensitive)
             is: function (value, text) {
                 text = typeof text === 'string'
                     ? text.toLowerCase()
@@ -1961,7 +1956,7 @@
                 return value == text;
             },
 
-            // value is not another value (case insensitive)
+            // value is not another value (case-insensitive)
             not: function (value, notValue) {
                 value = typeof value === 'string'
                     ? value.toLowerCase()
@@ -1973,7 +1968,7 @@
                 return value != notValue;
             },
 
-            // value is not another value (case sensitive)
+            // value is not another value (case-sensitive)
             notExactly: function (value, notValue) {
                 return value != notValue;
             },
@@ -2038,7 +2033,7 @@
                     : false;
             },
 
-            // different than another field
+            // different from another field
             different: function (value, identifier, module) {
                 var matchingValue = module.get.value(identifier, true);
 

package/src/definitions/behaviors/state.js

@@ -73,7 +73,7 @@
                 initialize: function () {
                     module.verbose('Initializing module');
 
-                    // allow module to guess desired state based on element
+                    // allow module to guess the desired state based on the element
                     if (settings.automatic) {
                         module.add.defaults();
                     }
@@ -615,7 +615,7 @@
         // whether to automatically map default states
         automatic: true,
 
-        // activate / deactivate changes all elements instantiated at same time
+        // activate / deactivate changes all elements instantiated at the same time
         sync: false,
 
         // default flash text duration, used for temporarily changing text of an element

package/src/definitions/behaviors/visibility.js

@@ -1211,7 +1211,7 @@
         // whether to refresh calculations after page resize event
         refreshOnResize: true,
 
-        // should call callbacks on refresh event (resize, etc)
+        // should call callbacks on refresh event (resize, etc.)
         checkOnRefresh: true,
 
         // callback should only occur one time

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
@@ -645,7 +639,7 @@
             border-color: @formStates[@@state][inputHoverBorderColor];
         }
 
-        /* Preserve Native Select Stylings */
+        /* Preserve Native Select Styling */
         .ui.form .field.@{state} select {
             -webkit-appearance: menulist-button;
         }
@@ -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

@@ -149,7 +149,7 @@
                                 $container = $('<div/>', { id: module.popupId }).addClass(className.popup).appendTo($document.find(settings.context));
                             } else {
                                 // prepend the popup element to the activator's parent so that it has less chance of messing with
-                                // the styling (eg input action button needs to be the last child to have correct border radius)
+                                // the styling (e.g., input action button needs to be the last child to have the correct border radius)
                                 var
                                     $activatorParent = $activator.parent(),
                                     domPositionFunction = $activatorParent.closest(selector.append).length > 0 ? 'appendTo' : 'prependTo'
@@ -631,7 +631,7 @@
                         }
                         var parent = target.parent();
                         if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) {
-                            // clicked on a child element, switch to parent (used when clicking directly on prev/next <i> icon element)
+                            // clicked on a child element, switch to parent (used when clicking directly on the prev/next <i> icon element)
                             target = parent;
                         }
                         var date = target.data(metadata.date);
@@ -1623,12 +1623,12 @@
 
         context: false,
 
-        type: 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
+        type: 'datetime', // picker type. can be 'datetime', 'date', 'time', 'month', or 'year'
         firstDayOfWeek: 0, // day for first day column (0 = Sunday)
         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 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)
@@ -1645,7 +1645,7 @@
         multiMonth: 1, // show multiple months when in 'day' mode
         monthOffset: 0, // position current month by offset when multimonth > 1
         minTimeGap: 5,
-        showWeekNumbers: false, // show Number of Week at the very first column of a dayView
+        showWeekNumbers: false, // show Number of Weeks at the very first column of a dayView
         disabledHours: [], // specific hour(s) which won't be selectable and contain additional information.
         disabledDates: [], // specific day(s) which won't be selectable and contain additional information.
         disabledDaysOfWeek: [], // day(s) which won't be selectable(s) (0 = Sunday)
@@ -1940,7 +1940,7 @@
 
                 var date = new Date(year, month - 1, day, hour, minute);
                 if (date.getMonth() !== month - 1 || date.getFullYear() !== year) {
-                    // month or year don't match up, switch to last day of the month
+                    // month or year don't match up, switch to the last day of the month
                     date = new Date(year, month, 0, hour, minute);
                 }