diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index af712ba90..d32e7f6d9 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -6,8 +6,7 @@ - **Project** - Right-to-left (RTL) support added. New gulp tasks for RTL file generation. Docs do not yet support RTL.*Thanks @MohammadYounes!*. - **Project** - Install now let you specify the outputted file permissions and RTL use (express/custom install) -**Enhancements** -- **Grid** - Grid's ``equal height row` now uses a combination of `flexbox` and ``display: table-cell`` for older browsers +**Enhancements / Changes** - **Site** - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue. - **Dropdown** - Dropdown can now be disabled by adding ``disabled` class without requiring `destroy`. **Thanks Psyton** - **Dropdown** - Search dropdown input can now have backgrounds. Fixes issues with autocompleted search dropdowns which have forced yellow "autocompleted" bg. @@ -16,6 +15,9 @@ - **Progress* - Progress bars can now display percent or amount left using `{value}` in text templates - **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction - **Dropdown** - Dropdown matching fields without values now trims whitespace by default +- **Checkbox** - Checkbox now toggles on spacebar when focused (previously only toggled on enter key). +- **Popup** - Popup now uses its own custom method for determining `offsetParent` meaning 3D contexts (like inside an animation) no longer should break positioning +- **Popup** - Popup now uses `preserve: false` by default, this is slightly less performant but will reduce page clutter caused by leaving generated elements in the DOM **Code / Build** - **Build** - `Dist/` files now set file permissions in build. `644` by default. Can adjust in `semantic.json` or during gulp install. You will need to run `npm install` to add the new gulp-chmod dependency *Thanks @PeterDaveHello* @@ -27,6 +29,7 @@ - **Video** - Video component now uses `//` instead of defaulting to `http` - **Dropdown** - Fixed bug where sub menus may sometimes have dropdown icon overlap text - **Dropdown** - Fixes dropdown search input from filtering text values when input is inside menu, i.e "In-Menu Search" +- **Dropdown** - Fix issue with search selection not correctly creating RegExp when select values are not strings **Thanks @alufers** - **Popup** - `wide` and `very wide` popup will now appear when screen size is below their `max-width` - **Popup** - Popup no longer blurs element on popup hide - **Segment** - ``ui tabular menu`` now correctly aligns with attached segment when using fluid variation *Thanks @MohammadYounes* diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 4a6bae739..7045c6ae6 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1182,7 +1182,7 @@ .ui[class*="left aligned"].grid > .row > .column, .ui[class*="left aligned"].grid > .column, .ui.grid [class*="left aligned"].column, -.ui.grid > [class*="left aligned"].aligned.row > .column { +.ui.grid > [class*="left aligned"].row > .column { text-align: left; } .ui.grid [class*="left aligned"].column{ @@ -1193,7 +1193,7 @@ .ui[class*="center aligned"].grid, .ui[class*="center aligned"].grid > .row > .column, .ui[class*="center aligned"].grid > .column, -.ui.grid > [class*="center aligned"].aligned.row > .column { +.ui.grid > [class*="center aligned"].row > .column { text-align: center; } .ui.grid [class*="center aligned"].column{ @@ -1204,7 +1204,7 @@ .ui[class*="right aligned"].grid, .ui[class*="right aligned"].grid > .row > .column, .ui[class*="right aligned"].grid > .column, -.ui.grid > [class*="right aligned"].aligned.row > .column { +.ui.grid > [class*="right aligned"].row > .column { text-align: right; } .ui.grid [class*="right aligned"].column{ @@ -1234,19 +1234,20 @@ .ui[class*="top aligned"].grid > .row > .column, .ui[class*="top aligned"].grid > .column, .ui.grid [class*="top aligned"].column, -.ui.grid > [class*="top aligned"].aligned.row > .column { +.ui.grid > [class*="top aligned"].row > .column { vertical-align: top; } -.ui.grid [class*="top aligned"].column{ +.ui.grid [class*="top aligned"].column { vertical-align: top !important; } /* Middle Aligned */ -.ui[class*="center aligned"].grid, +.ui[class*="middle aligned"].grid, .ui[class*="middle aligned"].grid > .row > .column, .ui[class*="middle aligned"].grid > .column, -.ui.grid > [class*="middle aligned"].aligned.row > .column { +.ui.grid > [class*="middle aligned"].row > .column { vertical-align: middle; + align-items: center; } .ui.grid [class*="middle aligned"].column{ vertical-align: middle !important; @@ -1256,13 +1257,29 @@ .ui[class*="bottom aligned"].grid, .ui[class*="bottom aligned"].grid > .row > .column, .ui[class*="bottom aligned"].grid > .column, -.ui.grid > [class*="bottom aligned"].aligned.row > .column { +.ui.grid > [class*="bottom aligned"].row > .column { vertical-align: bottom; + align-items: flex-end; } .ui.grid [class*="bottom aligned"].column{ vertical-align: bottom !important; } +/* Flex +.ui[class*="top aligned"].grid, +.ui.grid > [class*="top aligned"].row { + align-items: flex-start; +} +.ui[class*="middle aligned"].grid, +.ui.grid > [class*="middle aligned"].row { + align-items: center; +} +.ui[class*="bottom aligned"].grid, +.ui.grid > [class*="bottom aligned"].row { + align-items: flex-end; +} +*/ + /*---------------------- Colored -----------------------*/ @@ -1396,23 +1413,38 @@ .ui[class*="equal height"].grid { display: table; + table-layout: fixed; } .ui[class*="equal height"].grid > .row, .ui.grid > [class*="equal height"].row { display: table; table-layout: fixed; - display: flex; - flex-direction: row; width: 100% !important; } .ui[class*="equal height"].grid > .column, .ui[class*="equal height"].grid > .row > .column, .ui.grid > [class*="equal height"].row > .column { display: table-cell; +} + +/* Flexbox (Experimental / Overrides Where Supported) +.ui[class*="equal height"].grid { + display: flex; + flex-direction: row; +} +.ui[class*="equal height"].grid > .row, +.ui.grid > [class*="equal height"].row { + display: flex; + flex-direction: row; +} +.ui[class*="equal height"].grid > .column, +.ui[class*="equal height"].grid > .row > .column, +.ui.grid > [class*="equal height"].row > .column { display: inline-flex; + flex-direction: column; flex: 1 0 auto; } - +*/ /*------------------- Doubling diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index d891c7310..5b5095104 100644 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -70,7 +70,6 @@ $.fn.popup = function(parameters) { // binds events initialize: function() { module.debug('Initializing module', $module); - module.refresh(); if(settings.on == 'click') { $module .on('click' + eventNamespace, module.toggle) @@ -88,12 +87,9 @@ $.fn.popup = function(parameters) { $window .on('resize' + eventNamespace, module.event.resize) ; - if( !module.exists() ) { + if( !module.exists() && settings.preserve) { module.create(); } - else if(settings.hoverable) { - module.bind.popup(); - } module.instantiate(); }, @@ -111,29 +107,31 @@ $.fn.popup = function(parameters) { } else { if(settings.inline) { - $popup = $target.next(settings.selector.popup); + $popup = $target.next(selector.popup); } } if(settings.popup) { $popup.addClass(className.loading); - $offsetParent = $module.offsetParent(); - if($popup.offsetParent()[0] !== $offsetParent[0]) { + $offsetParent = module.get.offsetParent(); + $popup.removeClass(className.loading); + if(module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) { module.debug('Moving popup to the same offset parent as activating element'); $popup .detach() .appendTo($offsetParent) ; } - $popup.removeClass(className.loading); } else { $offsetParent = (settings.inline) - ? $target.offsetParent() - : $body + ? module.get.offsetParent($target) + : module.has.popup() + ? module.get.offsetParent($popup) + : $body ; } if( $offsetParent.is('html') ) { - module.debug('Page is popups offset parent'); + module.debug('Setting page as offset parent'); $offsetParent = $body; } }, @@ -228,14 +226,23 @@ $.fn.popup = function(parameters) { .appendTo( $context ) ; } + module.refresh(); if(settings.hoverable) { module.bind.popup(); } settings.onCreate.call($popup, element); } - else if($target.next(settings.selector.popup).length !== 0) { - module.verbose('Pre-existing popup found, reverting to inline'); + else if($target.next(selector.popup).length !== 0) { + module.verbose('Pre-existing popup found'); settings.inline = true; + settings.popup = $target.next(selector.popup); + module.refresh(); + if(settings.hoverable) { + module.bind.popup(); + } + } + else if(settings.popup) { + module.verbose('Used popup specified in settings'); module.refresh(); if(settings.hoverable) { module.bind.popup(); @@ -264,12 +271,12 @@ $.fn.popup = function(parameters) { show: function(callback) { callback = $.isFunction(callback) ? callback : function(){}; module.debug('Showing pop-up', settings.transition); - if(!settings.preserve && !settings.popup) { - module.refresh(); - } if( !module.exists() ) { module.create(); } + else if(!settings.preserve && !settings.popup) { + module.refresh(); + } if( $popup && module.set.position() ) { module.save.conditions(); module.animate.show(callback); @@ -322,8 +329,9 @@ $.fn.popup = function(parameters) { removePopup: function() { module.debug('Removing popup', $popup); - if( module.has.popup() ) { + if( module.has.popup() && !settings.popup) { $popup.remove(); + $popup = undefined; } settings.onRemove.call($popup, element); }, @@ -433,9 +441,35 @@ $.fn.popup = function(parameters) { } return false; }, + offsetParent: function($target) { + var + element = ($target !== undefined) + ? $target[0] + : $module[0], + parentNode = element.parentNode, + $node = $(parentNode) + ; + if(parentNode) { + var + is2D = ($node.css('transform') === 'none'), + isStatic = ($node.css('position') === 'static'), + isHTML = $node.is('html') + ; + while(parentNode && !isHTML && isStatic && is2D) { + parentNode = parentNode.parentNode; + $node = $(parentNode); + is2D = ($node.css('transform') === 'none'); + isStatic = ($node.css('position') === 'static'); + isHTML = $node.is('html'); + } + } + return ($node && $node.length > 0) + ? $node + : $() + ; + }, offstagePosition: function(position) { var - position = position || false, boundary = { top : $(window).scrollTop(), bottom : $(window).scrollTop() + $(window).height(), @@ -450,6 +484,7 @@ $.fn.popup = function(parameters) { offstage = {}, offstagePositions = [] ; + position = position || false; if(popup.offset && position) { module.verbose('Checking if outside viewable area', popup.offset); offstage = { @@ -610,7 +645,6 @@ $.fn.popup = function(parameters) { }); module.debug('RTL: Popup positioning updated', computedPosition); } - switch (computedPosition) { case 'top left': positioning = { @@ -801,7 +835,7 @@ $.fn.popup = function(parameters) { has: { popup: function() { - return ($popup.length > 0); + return ($popup && $popup.length > 0); } }, @@ -828,7 +862,7 @@ $.fn.popup = function(parameters) { reset: function() { module.remove.visible(); - if(settings.preserve || settings.popup) { + if(settings.preserve) { if($.fn.transition !== undefined) { $popup .transition('remove transition') @@ -1057,7 +1091,7 @@ $.fn.popup.settings = { target : false, popup : false, inline : false, - preserve : true, + preserve : false, hoverable : false, duration : 200, diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 1b6371683..5ebf42cd7 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -879,7 +879,7 @@ $.fn.transition.settings = { onHide : function() {}, // whether timeout should be used to ensure callback fires in cases animationend does not - useFailSafe : false, + useFailSafe : true, // whether EXACT animation can occur twice in a row allowRepeats : false,