RELEASE-NOTES.md
Note
Special Note: If you run into any breaking changes with Gulp 4. Please reach out to me at [email protected] with bug reports
Critical Fix
Breaking Changes
Build
api.addAssets #6790 Thanks @gimcoExamples
Bug Fixes
right menu inside a ui menu (See examples/sticky.html) for use-casebound bottom (fixed to bottom of context) if the sticky element is larger than the contextmin-height not to be set correctly.Build
gulp build from running due to updates to gulp dependencies Thanks for assistance @himanshu230 #6631 #6622 #6067Note
If you are using the
semantic-ui-lesspackage with versions of LESS before 3.5 somecalcvalues will not be computed correctly due to changes in variable interpolation. It is recommended that you upgrade to at least 3.5 to continue using new versions of SUI. For more information see #6512
Build
3.5.0 Thanks @sciyoshi #6512gulp-util to replace-ext Thanks @stevelacy #6322Bug Fixes
clearable dropdown now works with dropdown that arent on:click, like hover or manual triggers. #6594fullscreen modal having incorrect left offset with flex modals #6587destroyvery relaxed vertically divided grid having wrong margins on dividers
2.4.0includes a new componentplaceholder. To use this component in your existing SUI site, be sure to add@placeholder: 'default';to yourtheme.config. You can see an example intheme.config.example
New Components
ui placeholder that can be used to show where content will soon appear.New UI Type
ui placeholder segment used to reserve space for UI when content is missing or empty.Major Enhancements
clearable dropdowns. When clearable: true is specified an (X) will appear to clear dropdown selection #2072useFlex which defaults to auto. Modals and dimmers will automatically revert to using non-flex layouts when there may be layout issues with using flexbox. Modals will fall back to JS position when detachable: false is used or with IE11/Edge (Absolutely positioned elements inside flex containers in IE behave differently).Critical Bugs
scrolling modal would not allow for scrolling with touch devices. #6449basic label were appearing incorrectly Thanks @lasley / @ColinFrick #6582 #6440left menu inside ui menu would display horizontally as flex #6359Bugs
variation at runtime, to support run-time swapping between top aligned and middle aligned using .dimmer('setting', 'variation', 'top aligned')onChange when used with action: hide would be missing the third param $item #6555uk alias for united kingdom Thanks @PhilipGarnero #6531disk outline icon alias #6556content would not take up 100% width when used alongside img or iconlabeled icon menu #6557@mobileTopAlignedMargin theming variable was not implementedblurring after undimming, to prevent issues with position: fixed #6520Minor Changes
inline dropdown close icon default right margin default spacing slightly modified.Bug Fixes
cache: false will now affect default settings for apiSettings when using a remote endpoint. Previously you would also have to pass in apiSettings: { cache: false} as welltransition in and transition out used in animations.linkedin in is now linkedin alternatezoom in is now zoom-inzoom out is now zoom-outsign in is now sign-insign out is now sign-outlog out is now logoutin cart is now in-cartEnhancements
inverted and inverted basic variations for primary and secondary buttons Thanks @hammy2899 #6242Theming
hover down active and focus variables for @invertedPrimaryColor and @invertedSecondaryColorBugs
apiSettings with a url that returns valid response but with no results when clicking directly on the dropdown icon. Thanks @vpeti #5231 #5809:last-childbasic label does not use @basicBackground variables Thanks @levithomsonwechat icon not displaying due to typo Thanks @alex-karo #6429A Special Message about Flex Modals There will be an update shortly to resolve issues related to flex modals when using multiple modals and
detachable: false, in order to not hold up this release, we've decided to move forward without a fix.
A general solution will most likely require branching code for IE11 which will disable flex (as IE11 doesnt correctly implement the latest spec for absolute positioned flex containers).
Critical Bugs
2.3.0 that could cause multiselect dropdowns initialized by converting <select> to not add initial selected options. #6123fullTextSearch: 'exact' @Thanks @prudho returning duplicate results #6223 #6221centered and bordered icons appearing incorrectly with FA5 Thanks @w96k #61922.3.0 Thanks hammy2899 #6181 #6175 #6176 #6174 #6175link icon were appearing incorrectly due to changes in icons #6180Enhancements
Bugs
onChange missing text from callback when dropdown is set to action: 'select' Thanks @martinduparc #4183 #4510@importSolidIcons, importRegularIcons and @importBrandIcons variables Thanks hammy2899fitted icon to fix compatibility with other components #6125onScreen callback to not occur properly for elements that are taller than screen.disabled item showing hover style for secondary menu Thanks @tcmal #6268@normal for normal font weight for all non-default themes included in repo. #6227ui images #6224whitespace: nowrap; applying to content inside slide reveal and move revealDocs
/examples/theming.html #6269Major Enhancements
Icons - Font Awesome 5 is now included in Semantic UI Thanks @hammy2899 #6085
Search - Category search can now work with local search by adding a category property to any result and specifying type: 'category'
var categoryContent = [
{ category: 'South America', title: 'Brazil' },
{ category: 'South America', title: 'Peru' },
{ category: 'North America', title: 'Canada' },
{ category: 'Asia', title: 'South Korea' },
{ category: 'Asia', title: 'Japan' },
{ category: 'Asia', title: 'China' },
{ category: 'Europe', title: 'Denmark' },
{ category: 'Europe', title: 'England' },
{ category: 'Europe', title: 'France' },
{ category: 'Europe', title: 'Germany' },
{ category: 'Africa', title: 'Ethiopia' },
{ category: 'Africa', title: 'Nigeria' },
{ category: 'Africa', title: 'Zimbabwe' },
];
$('.ui.search')
.search({
type: 'category',
source: categoryContent
})
;
Popup - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in this example.
Popup - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). See this explanation
To preserve functionality movePopup default has remained as true (moving the popup to the same offset context), however now setting movePopup: false should now always position correctly. Be sure to use movePopup: true to avoid issues with ui popup inside menu, input or other places where it may inherit rules from its activating element or its context.
Transition - Adds new glow transition for highlighting an element on the page, and zoom animation for scaling elements without opacity tween.
Modal - Modal has been rewritten to use flexbox. No need to call refresh() to recalculate vertical centering.
Modal - Modals now have a setting centered which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position.
Minor Enhancements
normal and bold font weights for custom font stacks. Thanks @jaridmargolin #6167exact setting matching dropdown for fullTextSearch preventing fuzzy searchtitle row if titles are long instead of forcing a title widthcontent element.closable setting after init Thanks @mdehoog #3396onChanging callback for accordion that occurs before animation in both directions Thanks @GammeGames #5892Tiny Enhancements
arrowBackground now inherits from background #6059 Thanks @devsliheaderFontWeightBugs
autofocus setting now checks to see if currently focused element is in modal, avoiding issues where focus could be set in onVisible or onShowbig and huge sizes being swapped in menu Thanks @jeremy091 #5902 #5899tbody Thanks @Mlukman #4458content specified in settings before title attribute #4614 Thanks @aaronbhansenon: 'change' would still show validation prompts on blur when using inline: true #4423 Thanks @avalanche1inverted dimmer with content having wrong text color Thanks @rijk #4631ui images would show nested images with transition hidden as block (Fixes sequential img animation demo in docs)Doc Updates
Doc Bugs
Critical Bugs
get values Thanks @tincdev #5713 #6043allowMultiple: true and a second modal that is larger than the screen height. #2423Enhancements
ribbon label can now work with reveal #5681ignoreCase (defaults to false) that will prevent values from being added that match existing values (case insensitive). This is particularly useful when using allowAdditions for tagging to not allow case insensitive matches.@customScrollbarHeight and specifies a default horizontal scrollbar height Thanks @jayphelps #5749Bugs
toggle checkbox box shadow was missing Thanks @banandrew #5096context setting due to an incorrect offset calculation. Thanks @dannyBies #5974 #5366contain and doesntContain rules were swapped. Thanks @xiongyu-git #5530bottomPassed and topPassed would not fire under some conditionsui input in a dropdown menu could cause the input to be too wide in some cases Thanks @banandrew #5085inverted menu rules would cause popup inside a menu to have incorrect link styling in link list Thanks @banandrew #5585 #5603gulp-clone was only set to use > 1.0 causing issues with gulp builds due to upstream error #6067Hotfix (2)
gulp-prompt plugin to allow for updated inquirer versionMajor Enhancements (1)
values specified in javascript when initializing.This should simplify cases where dropdown contents are contingent on other fields, for example listing sub categories. You can see some examples here and in the usage section of dropdown docsCritical Bugs (3)
dropdown inside ui menu to always appear on left edge of dropdown introduced 2.2.11 #5542popup in 2.2.11 that caused popups to appear out of place in some cases due to incorrect calculation of offsetParent #5549 #5597 #5590GulpUglifyError: unable to minify JavaScript
Caused by: DefaultsError: `preserveComments` is not a supported option
Enhancements (2)
<select> DOM node is replaced with a different select, and not just if new <option> are addedBugs (4)
focused default text was not being applied for multiselects #5633<select> will now work when using setting behavior to set settings after load #3744allowMultiple: true is used #5559Critical Bugs (5)
down key to re-open dropdown when using search selection dropdown would start at the top element instead of jumping to selected element #4506inverted blurring or closable settings will now function normally in all cases #4368refresh was being called on modals even if they are hidden, causing display issues when multiple modals are shown. Thanks @p2kmgcl #5319onFailure values if not set #5064context height was determined by sticky's height in position: static; #3430New Features (6)
add rule add field, remove rule, remove field to programmatically and and remove validation rules from form validation #4267 #5253@useCustomScrollbars: false in your site.variablesscrolling content variation to have a modal with content that scrollssetSize to determine whether it should set content size on stick to the size before sticking (fixed content uses different positioning system) #4360tiny and mini sized modals Thanks @Banandrew #5123unstackable variation Thanks @TemaSM #3714Enhancements (4)
image inside menu item and for selected textbind clickaway bind touch close bind close on scroll behaviors to make it easier for on: 'manual' popup to specify behaviorvisible into visible and popupVisible, this way you can remove visible indication on activating element without modifying popup visibility.Bug Fixes (19)
sortable table Thanks @Banandrew #5303setting will now modify settings correctly on next show/hide without re-initializationloading dropdown icon position being slightly offsetsearch selection dropdown would reset list to top after selection when re-opening dropdown #4506content icon to use an existing alias sidebar icon, as it is most common use case and prevents naming collisions with content of elements Thanks @philrykoff #4574ios browser detection, and use of -webkit-overflow-scrolling: touch;. iOS no longer has sizing issues when displaying sidebar content in latest iOS.searchDelay could cause results to appear after search had lost focus.offset setting, sticky element would not internally scroll if the rail contents (without the offset setting) would fit on screensupports svg was not working correctly due to incorrect comparison to undefined Thanks @mathiasrw #4544compact icon message not appearing compact #4759left menu and right menu did not display correctly in stackable menu on mobile Thanks @BleuDiamant @Traverse #3604 #5116(x) item attached menu was off by 1 pixel due to a css inheritance issue #4248popup and target setting together in cases where the target has a different offsetParent than the activating element.red segment inside segments would not work when :first-child #4013ui sticky used with a percentage based width would not resize properly if the content size of container changed when "stuck" #4360position: relative; Thanks @jinyangzhen #4707Doc Fixes (3)
add prompt to list of behaviorsCritical Bugs
search inside menu. #4237Bugs
@basicActiveBoxShadow being used incorrectly in basic button variablescontext other than body that has overflow-x or overflow-y set to auto or scrollupward at bottom edge of the screen when using a context with overflow-x or overflow-y set to autoonDeny and onApprove callbacks can no longer occur multiple times if you rapidly click a approve/deny button in a. #4479Enhancements -Form - Credit card validation now no longer fails validation with dashed credit card values #5122 Thanks @neokio
Bugs
context setting on a scrollable context (with overflow) would cause callbacks to fire incorrectlytop passed and bottom passed would appear as incorrect values if using settings from get element calculations when element is off screen.Build Tools
2.2.8 npm install script failing due to incorrect path in require statementSome quirks have been resolved that may cause changes for upgrading users who were expecting these behaviors
If you are using form validation, previous to 2.2.8 calling is valid would trigger UI updates. This behavior now no longer triggers UI updates, and will only return a boolean whether form is valid.
To trigger UI updates you can call validate form. Additional form behaviors have been added as well. See the new documentation on programmatic validation for more examples.
multiple selection dropdown no longer automatically adds the currently selected value when you "alt-tab" or blur the field, even when forceSelection: true is set.
Major Enhancements
4.7.0 Always the man @BreadMaker #4766filterRemoteData, when set to true API will be expected to return the complete result set, which will then be filtered clientside to only display matching results. Thanks @enix223 #4815\ could cause dropdowns to not work. #4688 #4692loadOnce, which when enabled only calls remote endpoint for tab data on first load and leaves the DOM undisturbed afterwards. #2534Critical Bugs
forceSelection setting will no longer cause highlighted value in multiselect to be selected on blur when using a multiple selection dropdown #4041 #4516showNoResults: false #4616iOS would show incorrect background when opening sidebar if page is less than 100% height #4264Critical Doc Fixes
onOnscreen and onOffScreen, two very important callbacks that occur when an element is or isn't in currently scrolled view.Enhancements
unstackable variation to prevent items from stacking on mobile #2901callback to behaviors query, show results, hide results, and search remote to allow a function to be called after completion.name="user[name]" Thanks @mzygmunt #4163esc key now hides results and prevents them from being displayed again until form field is blurredBuild Tools
Bugs
icon buttons to not center correctly #4487dropdown icon when using remote data would not open menu #4041dispatchEvent DOM APIs for generating simulated eventsleft pointing dropdown and right pointing dropdown appear styled incorrectly when opening upward #4896fullTextSearch: 'exact' would still fuzzy search on value Thanks @ rminnett #4651 #3424scrolling menu or scrolling dropdown would have excessive right padding by removing scrollbar width from calculation (no longer necessary in modern browsers)small, large and other comment sizes now default to global size variables.selectOnKeydown with html content would cause only non html content to display in text until blur. in valueimage icon or image outline icon would cause incorrect display within ui header due to namespace collision with ui image #4145dropdown, search, input to sometimes appear off by 1 pixel #4279padded vertical segment very padded vertical segment mistakenly receives horizontal padding #3012$('img').visibility({ type: 'image'}) will no longer animate a second time if re-initialized.Documentation
size variations to comments docs #4450Build Tools
autoinstall: true was not copying build files during npm install Thanks @AnsonT #4430Bugs
-Tab - Hotfix for accidental use of ES6 let
Bugs
Enhancements
DOM which preserves the final DOM state after scripts rendering. This can be used to avoid re-running returned <script> tags on each cached read #2534container setting. This can be used to specify the offsetParent of the sticky element and avoid having to calculate on initialization (improving performance)transitionEnd css callback does not fire correctlydata-display to specify the final display state for an animation in cases that it is detected incorrectly (you can also pass in as a setting)Critical Bug
2.2.3 due to regression #4469Bugs
gulp-minify-css package from deps #4463Enhancements
@paddingEnhancements
value parameter #3313search selection with selectOnKeydown will now highlight the partial search matching the currently keyboard selected valueinput #4370Bugs
package.json to allow either jQuery 2.x or 3.x #4254ui dropdown button could have incorrect spacing for dropdown icon Thanks @ilanus #4408pointer-events: none no to work on loading segment and loading form Thanks @YamiOdymel and @ilanus #4403icons can now receive link styling Thanks @tbracken #4399vertical buttons with only 1 button having incorrect border radius Thanks @Denhai #4107(x) aligned column inside a (x) aligned row would not properly apply the column alignmentdisabled fields with radio inputs would not correctly dim the label Thanks @louwers #4366dropdown in vertical menu would not correctly open upward when no space below Thanks @gdaunton [#4150 #4156search selection with selectOnKeydown` and text content that includes html, will not apply html content (like images) to the text until dropdown blur, making sure that content can align correctly with the partial search content of the search input (which cannot include HTML)clear would not remove active state when useLabels: true and multiple dropdown Thanks vinh123456789 #4275 #4366dropdown icon no longer relies on stopping event propagation. This means using the dropdown icon will now cause other dropdowns to correctly hide. #3998action: select not working correctly since 2.2 due to incorrect use of new function signature. #4183dribbble icon due to incorrect count of "b" (should be 3). #4185grab icon and television icon not appearing correctly #4178input styles now apply to type="file" thanks @coldfire79 #4074talk icon not working correctly Thanks @anantogosh #4354observeChanges: false setting in popup would not prevent mutation observersDocs
Themes
Roboto google font to use https Thanks @AndyR207 #4051Bugs
width are calculated on elements with transformsearch selection, now all input area will appear with "text" input cursorinverted: true or blurring: true when initializing modals with then afterwards without either setting.Bugs
<select> and allowAdditions: true would cause dropdown selection to failProject Features
3.0New UI Features
silent to all modules which allows you to disable all console output including errors. This can be useful for preventing known errors, like a popup which cannot place itself on screen, or sticky content which initializes before it is visible #3713mini, tiny, small, large, big, huge, massive. Headers remain with only 5 sizes small-huge to match H1-H5document, body, or a settings.context now all use DOM mutation observers to detect removal and prevent memory leaksprimary secondary positive negative buttons with the basic styling variation. #3756raised card variation Thanks @yordis #2955selection dropdown, will now select the first menu item that starts with a pressed keyboard key, for example "N" will select "New"enter key press to confirm selection in most cases. To enable previous pre 2.2 selection style use the setting selectOnKeydown: falsesearch inside of a dropdown menu after it is opened.4.6.3 Icons. 80+ new icons+ are included. Thanks @BreadMaker for the PR and @davegandy for the font!tooltip popup type that works without javascript. Tooltips can specify positioning and some variations using data attributes, and will handle positioning automatically with CSS only.onprogress events say every 50ms) will now appear smooth as butter.definition table now includes additional class names for forcing, or ignoring definition cell stylesNew Settings
Build Tools - Added new autoInstall option to allow for Semantic to be installed without user interaction. See docs explanation for how to use. #3616 Thanks @algorithme
Dropdown - Added fullSearchSearch: 'exact' setting, which requires exact matches for dropdown values #3085 #3994 Thanks @ShawnCholeva
Dropdown - Added new setting for search selection hideAdditions this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state empty which will format an active dropdown with empty results. #3791
Dropdown - Adds new allowReselection option to trigger onChange events even when reselecting same value
Dropdown - Adds new setting minCharacters which sets the minimum number of characters required to start filtering results #3886
Form Validation - Added depends validation rule setting which will only validate a field if another specified field is not empty
Popup - Added new setting boundary and scrollContext. boundary lets you specify an element that the popup will try to position itself to be contained inside of. scrollContext lets you specify the element which when scrolled should hide the popup
Popup - Added new settings observeChanges, which is enabled by default. This will add special mutation observers to trigger destroy when the element is removed from the document, preventing memory leaks.
Progress - Added onLabelUpdate callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditions
Rating - Added new setting fireOnInit for rating, which defaults to false. When set to true onRate will fire when rating is initialized #3712
Search - Added a new option selectFirstResult, which defaults to false. Will automatically highlight first result on search
Search - Search now includes a showNoResults setting for determining whether no results messages should be shown
Shape - Shape now lets you specify next side width using setting width, can use next or initial to specify whether it should use old or new side size
Tab - Added new setting cacheType, can either be html or response (default). HTML will cache resulting html after callbacks, response will cache the original response so that it can be played back identically on future loads #2534
Tab - Added new option deactivate, defaults to siblings which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to <code>'all'</code> will deactivate any other tab element initialized at the same time.
Visibility - Added onFixed and onUnfixed callbacks for visibility type: 'fixed'
Visibility - Added onLoad and onAllLoaded callback for type: 'image' visibility
Visibility - Added zIndex setting for specifying zindex with type: 'fixed' #3370
New Behaviors
restore placeholder texttransition hidden image now shows correctly as visibility: hidden; and not display: none. This will allow offset with visibility and sticky to work more seamlessly. hidden image will still remain display: none;is complete for returning whether success, warning, or error conditions are metCSS Enhancements
@relativePX and @px) up to 64px to allow for simple theming with exact valuesdisabled background image and box shadow.ui message now includes individual colored border shadows based on new site defaults.@inputColor and @inputPlaceholderColor global variables that now control placeholder text styles across all components.definition table now supports definition variation to specify definition styles on an element that is not :first-childdefinition table now supports ignored variation to force a first-child to ignore its default definition stylingsCritical Bug Fixes
component('setting, {}) to add multiple settings as an object literal, for example error: {}, will now deep extend the existing object instead of replacing it.beforeSend would not correctly cancel request when return false; is used in callback. #3660cache: 'local' would not return the localstorage cached results in some caseshorizontal divider #3585forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered valuesearch selection would not let you move back in an entered search string with left arrow #3596 Thanks @Sanjorefresh #3879 #3622 Thanks @mdehoogsearch dropdown could cause a form to be submitted #3676on: blur could cause fields not yet interacted with to be validated #3606(x) fields and equal width fields where middle rows would be slightly smaller because they include both left and right padding in % width. (Edges only have one side padding). Field groups now use negative margins instead.close rail and very close rail caused by variable addition with mixed units px + em #3835onResult returning false would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results. #3856 #3870destroy if removed from DOM context, fixing a possible memory leak.video('change') behavior not properly changing video.Bugs
onResponse with dataType other than JSON or JSONP would cause an error. (Not allowing plain text responses to be translated) #3653right icon like right arrow icon would have additional margin inside an icon button #3525disabled loading button would not remove pointer-events #2933green inverted button #3873default text no longer receive incorrect font styling for placeholder textonEnable and onDisable with checkbox but callback was called onEnabled and onDisabled, both callbacks will now be valid until 3.0 #3761 #3763indeterminate styles when user has not yet interacted with the page in ChromeapiSettings was not defaulting to use cache: 'local' as specified in the docsget value would not return correct value when value was blank #37661px offset for current text so that the blinking text position cursor does not overlap first pixel of underlayed text.search selection #3789<label> #3917action: 'hide' could cause text value not to be passed to onChange callback" (double quotes) would not work with a dropdown using a select, because value would not be encoded as html entitiesallowAdditions would cause input to mistakingly drop to next line early #3743disabled property #4010 Thanks @eymengunay!API setting is now disabled by defaultdestroy removing previous settings #3798equal width fields sometimes not including right field spacing on mobile #3913inline field was not being correctly inverted in color with inverted form #4004 #4005 Thanks @tbrackenfields and field would cause different margin collapse, making fields include larger gaps between content #3717size() method in prompt #3655 Thanks @SimonArdreycentered content would cause justified content to appear aligned left. #3496vertically divided grid would have top margin in first row groupsmall were using with rem #3782:active styles appearing on disabled input, when input is disabled using disabled property #3907dropdown or button on the left side of an action input not properly roundingright floated element precedes a top attached labelrelaxed and very relaxed lists included unnecessary padding on the first and last items #3710stackable menu with left/right menu or item would incorrectly be floated when stacked. #3604tabular menu now has correct bottom margin #4167@dividerSize was not being used in vertical menu #3781vertical text menu no longer includes left or right padding, but will now sit flush with content.compact message appearing as block when inside a form #3343 Thanks @bcroqbackground-color were not being correctly interpreted #3665 Thanks @larsbodestroy not properly removing events from dimmer #3200instanceof SVGGraphicsElement caused error in IE11 #3043onSuccess, onError, and onWarning callbacks now occur after the animation completes for the state change.ui rating to not used outlined star in basic variation, instead using a lighter filled in star for increased visibility #3730onRate when rating is initialized #3712refresh behavior for search to refresh selector cache. Cache will automatically refresh after API results receivedhref was not pulling correctly on search click when the result was an a itself. #3409segments to not clip border radius when only a single segment is includedtop attached message has no border when attached to segment #3619tiny large etc inside a statistic group #3116top attached stepsstriped selectable table would not correctly show hover color on striped rowstype: fixed will now correctly remove all special classes and placeholder content on destroy #3548Changes
mini the smallest size has been modified to align to 11px instead of previous 10px at base em sizeDocs
Critical Fix
2 from using Semantic UI, caused by removing the deprecated peerDependencies which are necessary for NPM2 install to function correctly. #3511Minor Fix
Enhancements
mockResponse) will now receive a settings object with all values resolved. For example url will be /user/2/ and not user/{id} in the callback. - #3466response and responseAsync to replace mockResponse and mockResponseAsync. The use of "mock" may not represent the most common use case which is providing a response from a third party source. (These changes are purely cosmetic and no underlying behavior has changed) - #3491onUnplaceable callback when element cannot be placed in visible screen #3388Bug Fixes
loading form #31221px offset when attached segment follows tabular menu (max of 2 consecutive segments) #3479sub header used inside a header now correctly forces block styling #3020is visible, is animating, and is fluid to always return true/false and not the DOM element. #2781onEnable callback being defined with name onEnabled and onDisable with onDisabled in default settings, causing an error. To preserve backwards compatibility, the misspelled callback name has been left, but the bug has been fixed. #3148very thin sidebar to not work #3300transform rules on child elements, this was causing layout issues in some cases (for example dropdowns in sidebars) #3306noAnimation error to more reasonably announce that the element is "not in the DOM" #3040Bug Fixes
change events were not bubbling. (Dispatched events were swapped to use native document.creatEvent in 2.1.5 unfortunately the flag to bubble events was mistakenly off.)Docs Enhancements
Minor Enhancements
equal width form and equal width fields for simpler grouped fieldsonHide callback can now cancel event by returning false #3168 Thanks @mdehoogonLabelRemove callback that allows value removal to be cancelled by callback Thanks @goloveychukselectable on table cell, allowing for full table-cell linksarrow background color based on position, top, center or bottom. This makes it easier to use gradient backgrounds with popups and still match arrow colors.get popup and change content to more easily determine popup from activating element and change textMajor Bug Fixes
.trigger('change') would not fire native change event. Only triggering event handlers attached with jQuery #3108onComplete eventbody and scrollTop is not 0 on page load.Bugs
@mobileBreakpoint caused by incorrect edge conditions in media query #3180 Thanks @mdehoogopacity: 0 #3167 Thanks @mdehoogselection dropdown in some cases. #3002remoteValues as a possible field setting. Allowing users to return API results using arbitrary JSON object groupings. #3080keys as a setting, to avoid issues with languages where comma delimiter may be a different keycode #3016search dropdown will now initialize with autocomplete="off" to avoid triggering native autocomplete menublur or change when using a blank validation object #3131 Thanks @listepodecimal rule now only matches decimals, to match any number use number rule. #3060divider spacing as part of ui form, this caused inheritance issues when using special divider types #3092widescreen only class #3161 Thanks @mdehoogdisplay: block #3020movePopup: false #3213 Thanks @parisholleysvg elements #3043reset will now reset value to 0, so increment starts again at 0onSearchQuery not firing when results are cached Thanks @mnquintanaurl parameter not working correctly due to typo in source Thanks @fabienb4horizontal segment when they are :first-child inside segments group
Docs BugsCritical Bugfixes
site.variables would cause build to fail #3009 #3010Enhancements
// expands out using default prompts and identifier matching property label
$('.ui.form')
.form({
fields: {
name : 'empty',
gender : 'empty',
username : 'empty',
password : ['minLength[6]', 'empty'],
skills : ['minCount[2]', 'empty'],
terms : 'checked'
}
})
;
identifier and prompt are now optional for all form validation rules. Default prompt values have been added for all rule types, and identifier will now automatically match on the named value for rule if no ID is specified. #3001 #2579{value}, {name}, {ruleValue}, and {identifier} #3001Bugfixes
ui list used inside ui message now aligns properly in all conditions #2958error message group are now correctly removed when invalid field revalidates on blurword-wrap: nowrap #3006(x) column segment table was inheriting accidentally inheriting some grid stylesmiddle aligned grid not applying to columns #2959right menu was not floating correctly inside a menu > container on mobile #2969right labeled icon button with a right named icon (for example right arrow) having incorrect margin on icon. #2973Bugfixes
?= appearing before parameters instead of ? #2956 Thanks @AgentSharkui icon input inside forms were not correct width #2953action input now correctly show focused border on button side, and avoids duplicating bordersBugfix
onSuccess so as to not break backwards compatibility. #2945 #2944Bugfix
2.0.7 in dist/New UI Features
encodeParameters option to enable/disable parameters being encoded with encodeURIComponent #2752hideError, defaults to auto (will automatically hide error for elements that are not forms). #2586.overrides file are now an optional includecolored basic button are now colored before :hover in the default theme, this is more in line with common usage across other websites.labeled button variation for display a count next to a button.stackable cards which was available but undocumented in previous versions.beforeChecked, beforeUnchecked, beforeDeterminate, beforeIndeterminate. You can now cancel a state change by returning false from these callbacks.fields (similar to search).change event is triggered) #2626form.variablesreversed variations for reversing column order, these are also compatible with other grid types like divided and celled by device #2685fitted icon variation, and new small sizes tiny and minidisabled state for inputs #2694basic label style, works symbiotically with other label types to provide a more lightweight style labeltabular menu types, right tabular, bottom tabular, added many new tabular menu variables for customizinglabeled icon menu has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.fields parameter to pass in a mapping of server response to content thanks @anibalmf1 #2645@focusedFormBorderColor for controlling form focus border colorfixed table variation added for use with table-layout: fixed;. This also supports "..." ellipsis when used with single line contentinline-block content.get default text and get placeholder text behaviors for returning text values.upward, and will automatically move pointer arrows when appearing upward #2733inverted form now remove input border, added new variables for controlling inverted form input stylesbasic label variation, useful for item countsinverted menu now support colored individual items Thanks @maturano #2850text menu now uses padding for hitboxes to make target area for links largergulp build now correctly calls callback, allowing those importing tasks to chain it correctly #2836 Thanks @artemkaintshow and hide are now cancellable by returning false from onShow or onHide callbacks.number and decimal validations to form Thanks @TonnyORG #2537onSuccess and onFailure now receive current form fields as a parameter Thanks @guodonggulp version would show x.x [#2875 #2920{tab, table} caused table to be included twice in concatenated source **active and active focus state #2635basic button would not have focus color text when colored #2264label will now work correctly, and will not toggle the checkbox. #2804fluid container being 100% + gutter at mobile resolution (causing overflow)forceSelection no longer sets current value in search selection when current query is blank #2058@arrowSize will now automatically reposition itself if size is changed with variable@dropdownArrowSize, and is slightly smaller than previouslyleft menu inside ui menu appearing horizontally #2778allowAdditions: true caused by value matching its own whitespace-trimed value #2853onChange would not fire when using action: 'hide'. #2818placeholder: false is used. Fixes issues with using clear and restore defaults without placeholders. #2637trim which causes issues IE 11 and below #2806console.log statements in js #2760::placeholder text color for ui error input, modifies form error placeholder color to distinguish from form value error color #2786ui input would sometimes collapse to 0px width, especially when used inside an inline field [#2705 [#2621 #2821disabled field(s) now remove pointer-events allowing it to disable checkbox and dropdown functionality #555error, warning, or success state.relaxed stackable grid would have incorrect margin on mobile widthstackable grid would have incorrect margin on mobile.attached header to have the correct bottom border on top attached and attached variations. #2798left corner labeled left icon input #2782bottom aligned not working in item due to incorrect flex value #2826right floated or left floated(x) column nested grid with alignment stacking vertically (wrong flex-direction) #2810secondary menu and text menu` #2862close specificity, modal will now only close on > .close #2736.search('show results') no longer fails when input is not focused #2842ribbon labels will now automatically position themselves when used inside a table #1930this set. #2758false by default, like other modules. #2817!important to avoid inheritance issues in some cases Thanks @lauri-elevant #2710first/ vs /second/first/ causing tab to not open in some cases Thanks @habibutsu #2843Additional Bugs
form action if no api event is specified now when form is stateContext but not initialized elementwin platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators.onchange event on hidden input when setting value during initial load (unless fireOnInit: true) #2795 Thanks @lauri-elevantforceSelection would not occur when pageLostFocus (clicked into another tab and back)value="false" would cause an option to not be removable from a multiple selectuseLabels: false placeholder text will now show up when 0 items selected, instead of the text "0 items selected"metadata was not referencing settings metadata valueget value(s) where unchecked checkboxes would not correctly retrieve valuesinline field now use auto width instead of 100%ui relaxed grid container and ui very relaxed grid container will now all render at same container widthstackable celled grid having doubled border width between rowschubby and bookish header themes appearing too largeactive icon or emphasized icon would not adjust opacity inside menuslabeled input now keeps border on label edge so that focus color appears correctlyfont-weight and font-style if set on parent;action input and labeled input now have focused border on inner edge with label/buttonpointing and attached labels are now word order sensitive to allow them to work correctly with other directional variations.pointint label now rounds to exact pixel em value, should align correctly in more cases@pressedItemColor has been renamed to @pressedItemTextColor to match naming conventions of other variablesflex: 0 0 auto to menu item to make sure menu do not collapse text content to reduce spacedropdown item inside icon menumenu correctly. Fixed docs example of hybrid <select> initializationlabeled input text inside menu not appearing vertically centeredonRemove firing even when popup is not removeddisplay: inherit instead of forcing inline-blockAll UI - This release should fix issues caused when importing individual component using require when using single component repos. See discussion in #2816, and previously #1156, and #1878
Important Note
This release should fix bugs some may have encountered with npm install semantic-ui hanging after set-up. See this thread for more details.
onComplete, onSuccess and onFailure would receive XHR as first parameter and not response. #2713onFailure would pass response as stringified JSON and not a JS object #2713npm install with CI or tests. Install will not stop to ask questions if project has an existing semantic.json file (more quiet options to come) #1816circular labeled icon button #2700label would not open. #2711last 2 versions #2717 Thanks @frontdevdeCannot find module 'gulp-help' which may occur when importing gulp tasks #2653 #2668 Thanks @fholzerDocs
Minor Enhancements
xhr from API request as the third callback parameterAdditional Fixes
onShow was mistakenly being called instead of onHide when hiding popuptouchstart now occurs immediately without waiting for delay.showImportant Notes
2.0.4 length rules were corrected to match "exact length" and not "minimum length". This may have caused issues for those who were using this rule as min length previously. We've remedied any breaking changes introduced by by returning length to functioning as "minimum length" and added a new rule exactLength for matching exact length. #2681disabled dropdown would still receive focus #2699restore value sometimes now working correctly due to "animating out" label still being mistaken for selected. #2690set exactly to remedy confusion of set selected not removing current selections with multiple #2689ui image label as a direct child of an item would remove right padding #2691Additional Fixes
useLabels: false, would cause selection count to appear incorrect.useLabels: false, now works correctly with maxSelections, and receives special UX considerationsurlData, will now be url encoded by default. Additionally checks were added to avoid double encoding already encoded values. #2394onChange not firing when space key is used. Checkbox keyboard shortcuts now occur on keydown but cancel events correctly on keyup #2676:indeterminate selector #2505multiple search dropdown using search inside menu to break when multiple #2666icon message when at mobile resolutions due to flex-collapse value being incorrect #2665Additional Fixes
<select> dropdowns initialized without multiple property set on <select> will now produce an error to alert users selection will not be preserved correctly. Related #2573<option> added with userAddition now receive class name addition to distinguish from original <select> options. #2573<option> removed if a user deselects an addition. #2573build and watch tasks into custom gulpfile #2648fluid buttons not working correctly with <button> due to button tags not supporting flex rules. #2617search selection appearing incorrectly inside menu (default text would not disappear) #2624doesntContain and doesntContainExactly #2638minLength[1] validation not behaving same as minLength > 2 #2636.identifier #2629CR LF (Windows) line endings #2649left action input displaying with incorrect input border radius inside ui form #2638action now uses a more specific selector to prevent modifying comment actionfluid popup with setFluidWidth: true (default value), will now use parent width and not offsetContext width #2526jitter setting for allowing popups to escape page boundaries by a small margin #2526inverted segment.horizontal segments in IE will no longer stretch to the natural width of child imgs #2550 flexbug [#1](hright, top, and bottom sidebar will not have their direction removed on destroy #2644sticky element that cannot fit in viewport not scrolling correctly when fixed to viewport #2605onComplete would fail because animation had not yet called force visible/hidden #2583refreshOnResize now correctly includes a default value #2615attached logic for all components using attached. #2599Additional Bugs
space shortcut causing checkbox to trigger twicecolored theme to add new focus color variables.wide and very wide popup will now limit themselves to normal popup widths on mobile so that they still appear on screen.attached icon message not using flexsticky content jumping from fixed to bound bottom when scroll position has surpassed bottom of container during page refresh.bottomPadding to determine bottom edge of container.basic steps theme to appear correctlyDocs
.variable files would ignore first variable after a comment.Docs Updates
for/id matching would cause toggle to occur twice on click (making it seem as if nothing was updated) thanks @malacalypse #2572vertical divider no longer has inexplicable right border when stacked on mobile #2558<select> and apiSettings will now correctly add new <option> value when selections are made #2573black icon have been added back as a color option #2556square and square outline icon #2532labeled inputpreserve setting (which preserves popup in DOM to avoid regenerating on each show/hide) was set to true by default causing generated popups to remain in DOM. #1369github theme for steps not displaying correctly in 2.0 #2545step no longer incorrectly shows arrow #2552get current animation erroring when module cache is cleared. #2469Additional Bugs
http:// prefixed urls like www.google.com2.0.1 causing search dropdown not to clear values correctly #2533@emSize adjusting all sizing variations proportionately as @emSize changes #2538onChange callback so that callback reflects new dropdown conditions #2539Additional Bugs
large and bigger sizes #2486attached segment #2503centered cards variation now works similar to centered card. #2520checked class #2506cache setting. Removed use of API's local caching by default. #2493reset will no longer clear values if no default value is found #2504Additional Bugs
blurring and inverted when destroy is called.restore defaults in dropdown when used with multiple will now correctly clear other values selected that were not there on page load.pointing menu arrow color slightly offdebug: true by default. This has been now correctly set to falsescrolling modal now correctly inherits rules so that it appears at top of screen on mobilecompact vertical menu using flex style incorrectlyborder-top not appearing on bottom fixed menuloading tab on first load.Docs
reset in form docs #25041.0 docs are now available at http://1.semantic-ui.com Link in footer has been fixed.mini image having wrong pixel size in docs #2521fluid image variationevaluateScripts and HTML5 state tabsMigration Guide
image content on the parent element. This is because flex rules require parent styling that the previous table-row rules did not.deny or approve selector. Any button that should hide modal on click should either match one of these selectors, or call $('.ui.modal').modal('hide') onclick.page grid has been deprecated. page grids used percentage gutters which made it unnecessarily difficult to style responsive page content. Moving forward we recommend using ui container a fixed width responsive container for holding page contents.dropdown({ direction: 'upward'})fields object. This is to make form initialization match other components. The previous syntax will continue to work but will produce deprecation notices in consolefireOnInit now defaults to false. Checkboxes now also do not require javascript to function.description now are floated in default theme and should be included before other item contentgrouped inline field no longer display horizontally. Use inline field instead for horizontal inline field groups.pointer-events have been removed from icon in icon input unless a link icon is used. This is to make sure the hitbox for focusing an input includes the icon.exclusive: true. Additionally the default theme now uses 1rem size for standard popups.clearing segment to clear floated content.border-box instead of content-box. This means manually specified rail widths will now need to account for padding. This was added to fix issues where rail height: 100% would incorrectly match content when a rail had padding.tiered menu has been removed in 2.0. This may be rewritten in the future, but was not up to the standards of the rest of the library and has been removed.onTabInit and onTabLoad have been renamed to onFirstLoad and onLoad respectively. This is to conform to the naming conventions of other modules (no self reference). Previous callbacks will continue to work but will produce deprecation notices in console. Two new callbacks onVisible and onRequest have been added as well.wide variations using numbers 2 wide, 3 wide have been removed due to incompatibilities with some build tools. Please use two wide, or three wide instead.video module has been renamed to embed. Behaviors remain the same, but users need to adjust their javascript init to $('.ui.embed').embed();onFailure will now be called in all failure conditions, when a request is errored (504, 404 etc), aborted (page change or CORS), or JSON does not pass successTest function. onError and onAbort will also fire for each specific failure condition.New UI
ui page grid, view more examples in docsmultiple dropdown types have been added. Many new dropdown improvements have been added including tagging/tokenizing features and loading data through API requests.Major Enhancements (Please Read)
olive, violet, brown and grey. These are available in all elements with color variations. Thanks @lemartialoumockResponse has been added to resolve request with a prespecified JSON object, or a synchronous function callback.mockResponseAsync has been added for custom asynchronous requests. This allows you to specify a custom async callback to resolve an API request, helping with integration with libraries like Ember or Angular that may wrap AJAX requests.onResponse callback that can adjust a servers response before it is parsed by other callbacks for success or failure conditions. Thanks @mnquintanacache: 'local'. This is not enabled by default. Local caching is useful for results that should return the same values across a single session, for example when querying an autocomplete.content blocks. Content blocks and images can now appear in any order.indeterminate checkboxes, along with new stylings.set checked vs checkedsearch selection to query against a remote dataset.blurring variation which apply a glass-like effect when dimmedmenu and will update selector cache with new additionsallowAdditions: true setting. Search now displays error messages on no results in all cases.<select> behavior.scrolling dropdown and scrolling menu, this can be used to include a scrollable section inside a dropdown menu.page up and page down keys will now scroll menus by a page at a timeflexbox for creating field groups. Inline fields now support (x) wide sizing using flexflexbox, columns are now all equal height by default. New flexbox alignment types like stretch have been added for easier vertical alignment.font-size: 0; to remove white-space from inline block is no longer necessary. Removing this hack, now means any element can be a direct child of grid or menu.blurring and inverted which automatically set a modal's dimmer to either inverted or blurring.right menu content should now follow other menu content instead of preceding it (no longer uses float).flexbox and equal height by default, the equal height variation can safely be removed:visible, :animated and :hidden and reduces filesize.settings object like other modules. Using (fields, settings) will continue to work but will produce a deprecation notifications in consoleflexbox for layout.icon message now uses flexbox for layoutvertical tabular menu, a vertical tab menu, has been addedinput types use flexbox for layouthorizontal segment groups make laying out auto resizing text columns much easier.scrollTop values for document or body when using a sidebar. Chrome on iOS no longer has issues with fixed content not sticking immediately when using a sidebar.sidesflexbox, fluid steps now center content inside each stepitem count and will automatically divide evenly.visibility({ type: 'fixed'}) will now automatically add a placeholder element which will swap places with an element when it is attached to the viewport. This should make fixed content drastically simpler.scroll.onOnScreen and onOffScreen, which occur, most obviously when an element first appears in or out of a browser's viewport.Enhancements
inputPadding, along with more border colors, accents, and colors.onOpening and onClosing callback (before animation) to go with onOpen, onClose (after animation) Thanks @cluppricon setting for specifying accordion trigger event.flexboxthrottleFirstRequest and interruptRequests. Interrupt requests will abort a previous request on an element when making a new request. throttleFirstRequest, sets whether the first request or only subsequent requests should be throttled when a throttle duration is specified.site.variables will now rebuild all UI, instead of just site.less:focus styles for all button types, all button examples in docs now are keyboard focusable using either <button> or tabindex where appropriate.centered variationui checkbox.vertical divider inside ui grid now accounts for column paddingscrolling menus now support keyboard selection, e.g. pressing "A" for apple, and keyboard scrolling.match setting to specify whether to match on text, value or bothplaceholder setting for setting placeholder text in javascriptshowOnFocus option that lets you specify whether dropdown menu should show on focusfullTextSearch: true now uses fuzzy search (same as ui search)disabled prop on an option will now correctly appear disableddisabled item state, disabled items will automatically be skipped with keyboard selectionms-input-placeholdererrored field dropdown keyboard selection colorsuccess stateis valid behavior, returns true/false if form is validdifferent[field] rule which requires a field to be different than another fielddata-validate now takes precedence over other validation matching schemes like name or idminCount, maxCount, and exactCount for validating multiple selectionscelled grid now removes internal cells on mobile and tablet when used with doubling grid responsive variation.large screen only and widescreen only responsive variations for grid.equal width grids now works without row wrappersstretched as well as middle aligned, bottom aligned and top aligned!internally celled gridcelled and internally celled grid now use flexbox instead of display: table;sub header, useful for displaying small headers alongside text content. See examples in the header docsspaced variation for adding whitespace around images when used inline with text.ms-input-placeholderactive and active hover statesimg height even when not using an image labelui list can now be vertically alignedfixed menustackable menu variation for simple responsive menusdropdown item inside menu appearing as menu item.dropdown item have been adjusted to match item. Dropdown styles can be themed specifically inside menu.min-widthscale in transition in the default theme, that should be more subtle and work better with long modal content.onApprove and onDeny now receive the activating element as the first parameter. Added documentation about using return false to avoid hiding element on click.image content class on parent to allow for flex stylings.transform-origin so animations will be affected by the direction the element is placedonShow and onHide callback can now cancel popup from showing or hiding by returning falsemini, tinyindicating labels now are more legible use separate css variables from indicating bar coloractive state that allows you to show reveal programmatically$('.search').search('clear cache')padded and very padded segment variationscategory when using type: category.results container if one is not present on initem for resizes, making sure it will resize with the surrounding contentprompt now has focus styles defined if not using ui inputclearing segment for cases that need a clearfix.@defaultDuration and @transitionDuration usage to use a single variable across all UI @defaultDuration, the same for @defaultEasing and @transitionEasingpageOverflowX variable, default theme hides horizontal scrollbars on bodyfocus colors for all color variations@floatedShadow making theming easiercantFit = true to avoid getting DOM property on scroll.three statistics shows 3 per rowflex. Styles have been updated.attached steps, which can now be attached to other UI like segmentonTabVisible and onRequestparseScripts option, defaults to once parsing inline scripts only first loadselectable table variation, which shows hover effect on row when hoveringvertical alignment variations to ui tablesingle line table variation which prevents text from wrappingstyle or class during a transition, will no longer reset the change after transition completes.onComplete callback sets visibility.checkOnRefresh which determines whether visibility callbacks should occur on resize or refreshimage will now wait to lazy load images that are above the current screen position, not just below.Bugs
rotateZ(0deg) to trigger GPU display of visible state. This causes issues with transform creating new stacking context that can disrupt z-index.exclusive: true could sometimes cause other accordion element animations to get stuck when animating rapidlyreadyState = 0 as sole check for request abort, this may accidentally trigger with JSONP or CORS requests.this context of beforeSend to use stateContext not elementloadingDuration not correctly delaying requests when invoking with .api('query')background: inherit; to be removed.attached buttons 1px offset when attached to segment and menu (border vs box shadow border)flexbox cards Thanks @Widcketdisabled checkbox sometimes displaying hand cursordropdown inside checkbox causing issues:focus styles only applying if checkbox is uncheckedvertical divider or horizontal dividervertical divider when it automatically adjusts to horizontal divider inside a stackable gridfocus after changing tabs will no longer cause menu to re-open Thanks @trevorharwellui dropdown when nested in ui menuonChange to fire when input value changes, not just when menu UI changestransition: none now work correctly.sortSelect was relying on object key enumeration order which is browser dependent and unreliable. It now uses a sort function which functions the same in all browserssearch selection not changing text when reselecting same value from listmin-width issues causing background to not appear behind unwrapped text with white-space: nowrapmenu now use same font size as dropdownmetadata attribute caching causing issues with React integrationsub menu when aligned leftinline dropdown icon not aligning with content<select> after initialization not being correctly applied to ui dropdownset selected with true or falsesearch dropdown submitting parent form when enter shortcut pressed0textarea using the rows propertyinline fields are now 1em and do not match label's reduced sizefield inside fields no longer produce double sized margins.site.variablesmatch rule not to work as expected.clear and reset causing validation error to appear on checkbox if empty rule was set on checkbox.<select> changeui selection dropdown having dropdown icon z-index issuesui labeled input inside form will no longer escape column width. ui fluid input will now use input widths shorter than browser default.divided, celled, on mobiledoubling row not working correctly inside a different doubling grid (css spec issue)doubling grid incorrectly applying width to (x) column rowstackable grid no longer receives top marginx column wide inside equal width/height now cannot grow beyond column sizeascending and descending icon being swappedcallrounded image and circular image now apply border radius to all child elements, fixing dimmers, and other content roundingtransparent left icon input Thanks @zxfwinderplaceholder color not changing correctly on focus Thanks @zxfwinderlabeled input that were not corner labeledheader now vertical align better by accounting for line height offsethorizontal list are now aligned middle by default, while vertical lists are aligned top.inverted ordered list Thanks @pcja elements inside a ui list will no longer apply styles on ui elements like button Thanks @ahtinurmedivided bulleted list child lists getting wrong indentbulleted list and ordered listinverted bulleted list bullet colorui horizontal celled listinline centered loader to be centered correctly@lineHeight from site.variablesleft fixed right fixed are all now class order dependent.pagination menu or compact menuallowMultiple: truescrolling class not being removed after opening a normal modal after a scrolling modal.(x) item menutop attached menu not having margin-top, and bottom attached menu not having margin-bottommin-height that matches standard item paddingdropdown menu in a secondary pointing menu or tabular menu now receive distinct active styling from other active itempointing menu to be more consistent, round to exact pixels and account for arrow border widthpointing arrow having too high a z-index and appearing above ui dropdown menuscrollable modal now correctly adds padding below modaldetachable: false inside ui sidebar pusher element will now show correctlydata attributes changemin-width in firefox exceeding max-width causing element to not wrap correctlypopup or target that does not exist.addTouchEvents to specify whether touch events should be added to trigger popup on mobileborder-box to ensure exact height match to containerdata attributes changemasked reveal, all reveals are masked by defaultrtl: 'both' in semantic.json not building both versions of source correctly.style[title] in page causing page not to be pushed correctlyraised or piled or stackedcategory search not applying active styles correctly to category namesonSelect not returning the correct value when using type: categoryonSelect returning the first term that matches the beginning of the selected value not the exact value.loading search with an icon button causing double loaders.searchFields setting now correctly replaces default fields instead of adding the user fields to defaultsset value or query now obey minCharacterLengthordered steps had smaller numbers in IE10stackable steps were not working correctlypushing: true with sticky content having incorrect bottom spacing, when container has bottom paddingcontext: 'parent' will now each use their own parentsorted column are not correctly centered with center aligned due to margin on sort iconascending and descending icons were reversed in tablevery basic table now works together with padded tableout animation during an in animation with queue: false now correctly calls the complete event of the original animationChanges
verbose: falsefont-size to better couple with other components defaultsbasic colored button now grow their border size to 2px in default theme on hoverem rounding, adjusted distance in default themelink card now raise to show selection. Colored variations now have shadows.@primaryColoritem description is now floated by defaultextra text pointer borderset value no longer automatically calls validate formpage grid gutters have been adjusted from 8% to 3% to allow for roomier layouts on small screens.center aligned no longer centers rows, just text. Use centered grid to center a grid column on the page.site.variables instead of using their own valuesavatar image size has been slightly decreasedmini image default width has been increased to 35pxdescription now longer sets a max-widthdisabled icon now have pointer-events again.pointing label are now 1em by default.corner label has been increasedem instead of rem so they will inherit the size of the elements they are nested insideindicating, update default styles. Fixed some examplesborder for borders instead of box-shadowsecondary pointing menu has had some slight design tweaks, thinner lines, more paddingboldactive item in the default themetiered menu has been removedinverted menu selection for legibilitybox-shadowexclusive: false and will not hide other popups when openingui segmentlegacy animations have been removed. 3D transforms are now available in all supported browsers.border for border instead of a second box-shadow, this may adjust position by 1pixel#FFFFFF by default instead of an offwhite #F7F7F7animation-name css property. This was introduced in jQuery 1.8in animation is more telegraphed than the out animation, which may now recede more gently.calculations object, visible and hidden are renamed to onScreen and offScreen, since this describes more accurately what the value represents.Announcement Version 2.0 will be launching on June 1st, which will include 100+ bug fixes, enhancements, new ui, and default theme improvements.
Bugs
2.xBugs
left and right arrow does not move input cursor with visible selection dropdown. Event accidentally prevented by sub menu shortcut keys.Bugs
<select> not applying to the generated ui dropdown Backport from 2.0webkit Backport from 2.0min-width: moz-max-content from popups, which may cause display differences between chrome and FFEnhancements
2.x channel. Visibility will automatically refresh by default after images load on page refresh. Fixes issues with element positions after image loading.2.x branch. Sticky elements now use pub/sub with drastically improved performance. Sticky elements that do not fit on page will now scroll at the same speed as the page is scrolled instead of slower.Changes
Bugs
semantic.json component.2.x for ui fluid input not appearing correctly.precache behavior was missing from visibility causing image lazy loading to failBugs
npm install without semantic.json to merge changes with site theme and packaged themes in a similar fashion to npm updategulp build now properly warns against missing semantic.json Thanks @rudyrkBugs
console.log statement appearing in sourceflex display issues in IEnpm update install scripts would remove custom themes from src/themes/ during copy after updating Semantic UIMore critical bug backports from 2.x branch, as well as fixes for browserify
Bugs
grouped required fields display issues Thanks @palmseyindex.js npm build to work with browserify in individual component repos Thanks @sdimitsemantic.less file to less repo for importing componentsThis version backports several bugs that were being packed in 2.0 to 1.x.
2.0 will be coming in the next 1-2 weeks.
Bugs
watchvariation setting not working correctlyonChange no longer fires when reselecting same valueselect now returns ui dropdown created for chainingfocus color has been adjusted to match forms more closelyEnhancements
stretched variation for equal height instead of forcing flex on all equal height columns which may cause layout issues due to changes in rendering with flexbox.Fixes
@import not being on top of minified semantic ui concatenated release due to bug in clean-cssstackable equal height/width grid to remove flex on mobile when stackingright/left/center aligned to adjust align-items in flex containers like equal height/widthEnhancements
title, added an example in docsImportant Fixes
@import not always being on top of files due to bug in clean-cssBugs
1px top border on nested styled accordionbuttons on mobile devices to not have extra bottom padding.ui card. Added variable for specifying default dimmer color inside card.h1-h5 now have no top margin when first-child and no bottom margin when last-childsetup reference (added in 1.11.1) where chaining would not return ui dropdown immediately after initializationEnhancements
select will now automatically route them to the appropriate parent ui dropdownBugs
centered grid not centering column inside rowNew Components
top visible bottom visible, passing. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics.See the examples online for a demonstration.
Enhancements
<select> now receive error formatting on form error Thanks @davialexandreinline loader now has a centered variationexclusive: trueexclusive parameter to automatically close other popups on opentoggle behavior and docs for show and hidestop, stop all, and clear queue for removing transitions, (undocumented method stop, and start renamed to enable and disable)opacity setting to override css value. Add to docs several undocumented settings, like useCSS, and variation.@src variable to make it adjustable with themes that dont support all types like woff2Deprecations
ui tiered menu has been deprecated. It has been removed from the docs, and will be removed eventually in 2.0Bugs
ui action input inside menu due to flexbox changessearch dropdown searchsearch dropdown searchcolumn colors to not affect other elements with columnsclockwise rotated icon causing clockwise icon to appearpopup not re-opening until another element gains focus on a mobile touchscreenshow during another modal hideonHidden when an element is hidden by opening a different popupwindow events and unbinding on destroy Thanks @revovmobile sizes can surpass parent container widthswing out animations not working correctlyblock not determined when using show and hide without an animationremove looping causing next animation to use same durationui segmentsonSelect returning null when minCharacters: 0onSelect returning null` when results retrieved from cached API queryimg inside of ui item content now do not receive size formatting by defaultinput[type="search"] styles to ui formDocs
hide, show, toggle, stop, stop all, and clear queue`ui item documentationform (defaults to form action)api check for serialize object optional dependency no longer produces error when serializeForm: true and dependency is not found.Bugs
<button> inside vertical buttons not taking full container widthNo changes, fixes stale pm component builds
New Features
interval to allow grouped elements to animate one by one with a delay between each animation. Grouped animations determine order based on transition direction to avoid reflows, or can manually be reversed by using <code>reverse: true</code> See Examples for more details.Critical Fixes
failSafe used for Chromium Bug #437860 now also works for queued animationsEnhancements
containsExactly, notExactly, isExactly case sensitive validation rules, make contains, not, is case insensitive.contains rule is now case insensitiveinline fields like checkboxes after error appearswas cancelled to determine whether request was cancelled by beforeSendhidden image stateFixes
.ui.cards > .ui.card margins to match .ui.cards > .card marginsexclusive: true now queue animations after hiding previous sidebar (unless overlay) to avoid rendering issuescancelled API requests correctlyui grid or ui segment (not vertical)-Docs
-Transition - useFailSafe was incorrectly shown as false by default
Bugs
rtl tasks not running correctly on gulp build due to name typo, build rtl instead of build-rtlremote content with tab where current tab would not hide while another tab is loadingauto: true now removes duplicate slashes from url pathapi debug output to console to more clearly label url and data sentDocs
Added new repositories for css and less only versions, can be installed with
npm install semantic-ui-less
npm install semantic-ui-css
Bug Fixes
middle aligned image not to work correctly.gulp watch now compiles concatenated css (missing in 1.9.1 only)LESS Changes
Importing individual components into other less files now requires scoping. This is to prevent issues with variable scope that cannot be resolved inside definitions.
/* Import a specific component */
& { @import 'src/definitions/elements/button'; }
Importing semantic.less still does not require any special syntax
@import 'src/semantic';
Bugs
semantic.less caused by variable scoping in .loadOverrides().equal height row could not be centered, or less than full widthnpm install semantic-ui is now the recommended path for getting Semantic UInpm post-install scripts which automatically install or update semantic@import 'src/semantic';@import 'src/definitions/elements/button'.Major Enhancements
display: flex. No longer are card heights required to be specified manually to alignaction input and labeled input now use display: flex. ui action input now supports <button> tag usage (!) which support flex but not table-cellui segments that stack together in groups without using additional class namesEnhancement
onRequest callback setting that receives the XHR promise after initializing the requestpointer-events in default theme. Added variable for loading button opacity.search selection dropdown will now close the menu when a dropdown icon is clickedforceSelection which forces search selection to a selected value on blur. Defaults to true.input[type="time"]get values, set values now support multiple select e.g. field[]on: 'blur'ribbon label can now be used inside ui image and ui card correctlycontext specifiedui rating with inline content now accounts for parent line heightBugs
destroy could remove third party events when re-initializedui rating inside carddisplay: none no longer causes layout issues with (x) cardsimage inside content no longer has a fixed size Thanks @romuloctbainfo message are no longer hidden by default inside ui formexternal link and external link square has been renamed to external icon to no longer receive link styles by defaultscrolling modal when close icon no longer can be displayed, instead of modal contentmoduleNamespace was being omittedDocs
Bugs
text-align: left from column definition. Now inherits from grid.ui labeled input now uses flex added example in ui docs with dropdownui action input with button groups, aka ui buttonshide all will now use transition set in settings.transition when closing other popupsdoubling grid setting 100% width which may causeView Closed Issues View Commits
Key Features
reset, clear, set value(s), and read value(s) for modifying and reading form data. Check docs for details on implementation. Thanks @mktmonSelect now receives JSON object matching currently selected element, you can now programmatically retrieve result JSON using .search('get result', 'query') or .search('get results'). get result will default to current value unless specified as first parameter.placeholder text (prompt text) as separate from default text (text set on page load). You can now reset placeholder conditions using `$('.ui.dropdown').dropdown('clear');``Enhancements
$.api('abort') which cancels current requestallowCategorySelection: false) as well.<select> values after initialization, and will automatically update dropdown menu when changedset selected will now also call set value automatically, so you do not have to invoke two behaviors to update a selection dropdown Thanks @mktm@h1-h6 sizes from site.variables300ms to 100ms. Previous request will automatically abort xhr when new request madeonSelect and onResultsAdd can now cancel default actions by returning false.css, to set custom duration you can still pass at run-time as a different value. Animation duration no longer set by default during animation.in or out specified. When queue: true only animations with explicit direction, e.g. fade in, will be ignored when called repeatedly.Bugs
$.api('get xhr') was not correctly returning xhr promiseon: falsedisabled button inside ui buttonsinput[type="radio"] and input[type="checkbox"] ignoring any other inputsitem are present in menu. Dropdown will now only filter results for ui search dropdown #1632 Thanks PSyton.<select> are not invoked on ui dropdownevent.preventDefaultui corner label appearing on-top of ui dropdown menu due to issue in z-index hierarchyui ribbon label not positioning itself correctly when using sizes like small or largerelaxed list and very relaxed list no longer add padding to child menu itemssettings.popup mistakingly passes multiple DOM elementspusher inheriting first child margins due to margin-collapseis mobile was using RegExp test() which would return an incorrect value when called multiple timespusher or underlayed body (scale out). Clicking on fixed elements will not close sidebar.semantic.json not correctly overriding default componentsBugs
progress, ad, and sidebar not loading .override files correctlytheme.config.exampleMajor Changes
Enhancements / Changes
equal width variation using flex-box, equal height now also uses flex-box (this may have to be removed if causes unexpected browser issues)ui visible sidebar on page load to have a sidebar element appear on page load. To close call $('.ui.sidebar').sidebar('hide')bodyclass. No need to calldestroy`. Thanks Psyton{value} in text templatesupward dropdown variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu directionoffsetParent meaning 3D contexts (like inside an animation) no longer should break positioningpreserve: false by default, this is slightly less performant but will reduce page clutter caused by leaving generated elements in the DOMCode / 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 @PeterDaveHellosetup layout not occurs synchronously if you initialize a sidebar without the proper html. This makes sure calls to sidebar will occur correctly before the page is setup. A new setting delaySetup will override this, increasing performance..size() for .length across all modules$.proxy swapped to native function.call() for performance gains across all modulesBugs
// instead of defaulting to httprestore defaults will now set placeholder styling and remove active element. Added example in docs.left floated and right floated content sometimes not applying correctlywide and very wide popup will now appear when screen size is below their max-widthui tabular menu now correctly aligns with attached segment when using fluid variation Thanks @MohammadYounesbasic segment no longer removes padding on first and last elementstable-cell to allow steps to be equal height by default, even with different content height.total and value receiving the wrong values for text templatesui list inside ui menu1.6.3 contained an unintentional character at beginning of label.less re-released as 1.6.4Bugs
1.6.3 contained an unintentional character at beginning of label.less re-released as 1.6.4Bugs
Site Variables
small large etc are now all calculated from @emSize allowing you to only change one variable.Bugs
fluid text menu to have correct marginsBugs
useFailSafe: true to avoid callbacks not occurring because of race conditions with transitionend in webkitBuild
Updates / Enhancements
$.fn.transition and css animations by default (if available)animateChildren option to disable/enable opacity animation on child elementsinstead ofeaseInOutQuint`` to increase perceived responsiveness of drawersstackable grid now only adds horizontal padding when using stackable page grid, otherwise content will take up full width of parent elementBugs
ui popup receiving error $offsetParent is undefined when using a pre-defined popupui popup` not appearing with ui flowing popupdue to newly addedmin-width: max-content``ui search dropdown inside a form has incorrect focus styleui fluid labeled icon menu to not have min-widthBugs
useLegacy introduced in 1.5.1Bugs
ui animated buttonCritical Bugs
1.4.0 introduced a bug with concatenated uncompressed dist/ release including minified code. This would occur only when no components were specified in installer or semantic.json.Enhancements
allowCategorySelection lets menu items with sub menus be selected. Added example in docs.box-sizing from html tagui ribbon label can now appear on the right side of content when specifying ui right ribbon labelmin-width: max-content to allow for better display with inline in some circumstances where it escapes parent element.ui fixed menu now defaults to ui top fixed menuBugs
fields group on tablet or mobile$.tab() would not pass arguments correctlyui search and ui search dropdown using RegExp test which advances pointer on match causing results to display incorrectlyui input now receives the same formatting as a normal input inside an inline fieldui action input uses a ui icon button, button was receiving i.icon formatting.ui icon button or ui icon header causing element to receive icon formattingui stackable grid could cause horizontal scroll bars on mobileBuild Tools
gulp build will now only build dist/components/ for components selected in installexpress and custom installBugs
<select> elements will now preserve original <option> order by default. Added sortSelect setting (disabled by default) to automatically sort <option> on initializationwill-change property added to ui button causing layout z-indexing issues (dropdown button)Enhancements
type specified are now formatted Thanks PSytonBugs
ui indicating progress would not update its label immediately in webkitui vertical menuui selection dropdown inside menuDocs
chubby theme instead of default themeBrowse Closed Issues for 1.3.0
Critical Bugs
theme.config causing gulp watch to throw an errorEnhancement
false, meaning search terms will return only results beginning with letters50ms and can be modified with settings delay.searchonNoResultsstructured table type, which removes some formatting considerations to support complex table layouts with colspan and rowspanBugs
loading classfloating dropdownfields for mobile.stackable grid now display correctly when nested inside a different stackable gridoverflow on page's html when browsing from iOS devices. Using overflow caused issues with page's scroll being lost when resizing a browser to mobile widths. This also affected modules that used `$(window).scrollTop()`` at mobile screen sizesdefinition table.$('.dropdown').dropdown('hid');Docs
Enhancement
optional which will only validate a field against a set of rules if the user does not leave it blank Thanks DHNCarlossite.variables Thanks gabormeszolyis open/closed that are aliases for is visible/hiddenlimitValues setting to adjust values outside of 0-100 automatically to within range, defaults to trueBugs
ui stackable grid sometimes not aligning correctly at mobile sizes with ui page gridui link stylesselect that use <option values with capital letters not being selectableDocs / Build
dist/ not being included when using NPM due to .gitignoreBugs
em instead of rem for line-height.Enhancements
settings.prefer that defaults to adjacent. This setting sets preferred next placement when a popup cannot fit on screen in the chosen placement. prefer can also be set to opposite to prefer the same position on the opposite sidelastResort. When set to a position it will be used as a last resort even if popup does not entirely fit on the page. Setting this to false will produce an error when a popup cannot fit on screen.useFailSafe parameter (off by default) to ensure transition callback fires even if native onAnimationEnd event does not fire due to element visibility. Chromium Bug Report by Product Manager @ Mozilla and this open issueem measurements adjusted slightly to calculate out as exact pixel values (Fixes 1px rounding errors)transparent input can now be invertedonChange callback now fires when calling setSelected programmatically.Bugs
remove icon is now formatted correctly when used as remove link iconui action input can now accomodate ui button that adjust padding from defaultaction input used inside ui dropdown to appear correctly Thanks ordepdevDocs
Bugs
// when loading locally causing freezingBreaking Changes
left aligned or right floated classnames must be adjacent. This is to prevent conflicts with other multiple word variationsui icon input with a calendar icon insteadleft and right sections are now replaced with image and descriptionui styled accordionui list or ui list listui item while floated grouped content should continue to use ui card. Some 'card' view content has been slightly adjusted. Please refer to documentationcorner left and top label types. Any labeled inputs should be converted to corner labeled input to preserve functionality from 0.xonComplete and onStartEnhancements
fireOnInit setting for firing callbacks on page loadchecked class when checked, making it easier to write css selectors on checked checkboxes, for example when using sibling selectors .ui.checked.checkbox + .content { // style }<select> element without any htmlsettings.ondimmerNamevariation setting.required formats labels to show filling out field is mandatoryui divider can now be used inside of row columns as well as vertically divided grid variationbordered image variationstart callback, before animation starts** Bug Fixes **
Bug Fixes
Bug Fixes
Bug Fixes
Enhancements
Fixes
ui list when used inside a ui accordion, fixes issues with menu accordion display in some circumstancesui inverted secondary pointing menu to have correct pointer color for all color variations Thanks AdamMarasEnhancements
Fixes
Docs
Enhancements
onRemove callback after removing element from DOMFixes
ui input to work correctly inside inline fieldFixes
Enhancements
Critical Fixes
0.15.5 due to poor fix for reveal selectabilityFixes
Critical Fixes
ui checkbox to obey disabled property of inputFixes
ui icon messageclose icon inside messageFixes
Changes
Docs
Changes
Fixes
Critical Fixes
Enhancements
Critical Fixes
data-text values were erroring when selectedFixes
false or 0Project
Enhancements
Fixes
Project
Fixes
Enhancements
change eventFixes
relative/absolute modal content on mobileon: 'hoverEnhancement
<div class="or" data-text"text"> with alternate text Thanks MohammadYounesFixes
title attribute to store data were losing title content instead of correctly restoring itFixes
ui buttons to work inside an ui action input **Thanks MohammadYounes **ui horizontal items to work correctly, missing comma Thanks mishak87Project
Fixes
attached message thanks joltmodeEnhancement
$('.form').form('add prompt', identifier, 'Error message');Fixes
only tablet/mobile/computer showing both devices on exact pixel of breakpoint, i.e. 768pxFixes
<a> tag from inheriting link styles. thanks joltmodeaction input to work inside menus thanks joltmodeDocs
Major Fixes
Major Updates
allowMultiple lets you specify whether multiple modals can be shown at oncedetachable allows you to specify whether modal DOM element can be moved (Thanks MohammadYounes)Updates
cancel/deny or ok/approve, for approve/deny events to fire (Thanks MohammadYounes)Fixes
Major Updates
-Transition: Transition has been completely rewritten, performance should be about 10x after first animation due to caching and use of request animation frame
New Features
-Transition: Transitions now work with any display type not just display: block, meaning transitions can be used on buttons and other inline elements without affecting display
Fixes
-Transition: Fixes typo in "horizontal flip out" causing opacity to be fading in
-Popup - Fixes popup sometimes opening and closing when event:click is used and a user double clicks
-Modules: Fixed error in all modules where calling invoke would modify instance outside of scope, making it impossible to access some data (for instance cached positions) from outside of module.
-Modal: Fixes issues with modal in IE, IE11 can now use CSS animations with modals
Critical Fixes
Fixes
title attributeNew
Fixes
Fixes
New
doubling responsive variation which automatically formats content spacing based on device typeUpdates
Fixes
Updates
active when rateable since active are much more commonx wide was being overruled by parent element x column.New
Fixes
Fixes
Docs
Fixes
Fixes - Fixes popup not repositioning itself when offstage.
New
Updates
New
ui grid and ui grid column/rowDocs
Updates
Fixes
Fixes
Docs
Fixes
Fixes
show modal would mistakenly call show if it existed.Docs
Fixes
Fixes
Docs
Fixes
Docs
New
class="2 buttons"Fixes
Docs
Fixes
Fixes
New
onApprove and onDeny by returning false from callbackDocs
Fixes
module('setting') with an objectUpdates
Fixes
Fixes
Deprecation
Updates
Fixes
Updates
Updates
Fixes
Updates
Fixes
Fixes
Updates
Critical Fixes
Fixes
Updates
Fixes
Fixes
Fixes
Updates
Fixes
Fixes
Updates
Fixes
Docs
Updates
Fixes
Fixes
Fixes
Updates
Updates
Fixes
Fixes
Fixes
Fixes
Updates
Updates
Updates
Updates
Fixes
New
Fixes
New
Fixes
Updates