2.2 brings many new bug fixes. For a complete list please check out our release notes. Here is a highlight of some critical bugs
View Critical Bug List
All UI - Using component('setting, {}) to add multiple settings as an object literal, for example error: {}, will now deep extend the existing object instead of replacing it.
API - beforeSend would not correctly cancel request when return false; is used in callback.
API - cache: 'local' would not return the localstorage cached results in some cases
Divider - Descenders like "g" are cut off in horizontal divider
Dropdown - forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered value
Dropdown - search selection would not let you move back in an entered search string with left arrow
Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered refresh
Form Validation / Dropdown - Using "enter" key in a search dropdown could cause a form to be submitted
Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail
Form Validation - Revalidating a field on: blur could cause fields not yet interacted with to be validated
Form - Fixed issue with (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.
Popup - Fixed issue where clicking element inside popup removed from DOM (like clicking a multi select label) would cause popup to close
Rail - Fixed incorrect width for close rail and very close rail caused by variable addition with mixed units px + em
Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request.
Search - Fixed an issue where onResult returning false would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results.
Sticky/Visibility - Added mutation observer to teardown element with destroy if removed from DOM context, fixing a possible memory leak
Video - Fixed issue with .video('change') behavior not properly changing video.
jQuery 3.0 Support
We now support jQuery 3.0 out of the box. Learn more about jQuery 3.0 to see why you should switch.
Webpack Support
Our CSS pipeline has been corrected to fix incompatibilty issues with Webpack.
Better CI / Automation Support
We've added a new semantic.json setting autoInstall which allows for silent install when Semantic UI is used in CLI environments, making testing more streamlined.
Silent Mode
All JS components now include a new setting silent: true that will prevent all console output including errors.
More CSS Variables
We've added many new variables, including many to make sizing with relative EM units a cinch in custom themes. The default theme now defines relative pixel unit variables from @1px-@64pxREM and @relative1px-@relative64px with EM.
New Features
CSS-Only Tooltips
2.2 includes CSS only popups that work without JS initialization using the data-tooltip property on any element. CSS tooltips even support inversion and specified positioning.
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center
New Icons
2.2 of Semantic UI includes the latest version of Font Awesome with 50+ new icons. For a complete breakdown of new icons please check Font Awesome's list.
$('.rapid.example .ui.button')
.on('click', function() {
var
$progress = $('.rapid.example .ui.progress'),
$button = $(this),
updateEvent
;
clearInterval(window.fakeProgress)
$progress.progress('reset');
// updates every 10ms until complete
window.fakeProgress = setInterval(function() {
$progress.progress('increment');
$button.text( $progress.progress('get value') );
// stop incrementing when complete
if($progress.progress('is complete')) {
clearInterval(window.fakeProgress)
}
}, 10);
})
;
$('.rapid.example .ui.progress')
.progress({
duration : 200,
total : 200,
text : {
active: '{value} of {total} done'
}
})
;
Reduced Memory Leaks
Sticky, visibility, popup, and dropdown, modules that can attach events on initialization to window and body, for example to detect changes in window scroll, will now use additional mutation observers to determine if they are removed from the DOM and automatically fire their destroy behaviors.
This can prevent memory leaks when the parent element of a component is removed without the element is propertly teared down by calling its destroy behavior.
Simulate Memory Leak
Not Active
This segment has visibility events attached to modify the button above to say "active" when it is on screen
$('.memory.example .demo.segment')
.visibility({
onOnScreen: function() {
// this will no longer fire even though element was removed indirectly
$('.memory.example .display.segment').html('This is active');
}
})
;
// button will remove parent of visibility element and callback will stop firing automatically
$('.memory.example .ui.button')
.on('click', function() {
$('.memory.example .display.segment').html('De-activated');
$('.memory.example .wrapper')
.remove()
;
})
;
Dependent Form Validation
Form field validation can now specify a depends property which will only cause validation to occur only when another field, like a checkbox or input, is selected.
$('.depends.example .ui.form')
.form({
onSuccess: function() {
alert('No form problems');
return false;
},
fields: {
yearsPracticed: {
identifier : 'yearsPracticed',
depends : 'isDoctor',
rules : [
{
type : 'empty',
prompt : 'Please enter the number of years you have been a doctor'
}
]
}
}
})
;
Faster Dropdown Selection
We've updated dropdowns to make it simpler to breeze through forms with dropdowns, and provide more intuitive selection controls
Multiple select dropdowns use a new algorithm for line breaks based on actual rendered pixels and not estimated length based on glyph width calculations, meaning more choices can squeeze on a line than before.
Dropdowns now change selections on keyboards without hitting "enter", this lets users quickly navigate between dropdown elements in a form without having to hit "enter" before "tab" after each field entry, saving an additional keystroke.
All dropdown menus now support letter keyboard shortcuts. Hitting "C" for instance will let you jump to "California" in a dropdown list, then hitting it again "Colorado", even without using a search selection dropdown.
More Basic Buttons
We've added primary, secondary, positive and negativebasic buttons
Popup Boundaries and Scroll Context
Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. This can be useful in complex paned layouts
Additionally popups can now specify a scroll context, to allow for scroll containers other than window to cause a clicked popup to hide on scroll.
Normally this popup would open in the default position top center but because this would escape the boundaries of the segment it will search other available positions until it can find one to place the popup while staying inside the segment
New Settings
We've added many new settings to components to help provide more granular control for some use-cases.
Dropdowns
selectOnKeydown
Whether dropdown should change active selection on keyboard shortcuts, preventing the requirement of hitting enter to confirm selection before the user tabs out of the field. (This will save one extra keystroke)
allowReselection
Setting to true will allow onChange to be triggered even when reselecting the same option
fullTextSearch
Setting to true will allow search across any part of string, setting to exact will disable fuzzy matching for dropdowns.
hideAdditions
Setting to true will allow custom user additions without triggering a special dropdown message for "Add custom choice". This is now enabled by default
minCharacters
Minimum characters required to begin showing filtered results
When set to html will cache the tabs html after load, reloading with the exact same html. Setting to response will cache the serve response, allowing for load events to fire with same contents.
deactivate
When set to siblings deactivates only DOM elements that are siblings of the selected tab activator. all will deactivate all other elements initialized at the same time.
When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel width, will force the size to that width.
height
When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel height, will force the size to that height.
Grids now support reversing their column flow per-device. This can be useful when a column should appear on the opposite side of the screen on smaller screens.
Reversing grids are also designed to be compatible with column-order specific variations like divided or celled
Computer First
Tablet Fourth
Computer Second
Tablet Third
Computer Third
Tablet Second
Computer Fourth
Tablet First
Stackable Cards
Cards have a stackable variation so that they appear full width on mobile.
14h
Elliot
17 likes
3 comments
14h
Elliot
17 likes
3 comments
14h
Elliot
17 likes
3 comments
14h
Elliot
17 likes
3 comments
Fixed Tables
Tables now include a variation for using table-layout: fixed, which does not adjust column widths based on size.
This can help present data more cleanly with content that is uniformly formatted.
Fixed tables also support content collapsing using text-overflow: ellipsis when used with single line.
Name
Status
Gender
John
Approved
Male
Jamie
Approved
Male
Jill
Denied
Female
Fixed Tables
Name
Status
Description
John
Approved
This is much too long to fit I'm sorry about that
Jamie
Approved
Shorter description
Jill
Denied
Shorter description
New Behaviors
Fully Customizable JSON
In 2.1 all component that uses remote data will let you specify a fields array to modify expected JSON property names, saving you the trouble of specifying an onResponse callback to modify the data structure.
We've added new validation rules for payment. These work with luhn and non-luhn card numbers. If you only accept a certain set of credit cards you can specify that too.
Try 4565340519181845 a test visa card number
$('.payment.example form')
.form({
on: 'blur',
inline: true,
fields: {
card: {
identifier : 'card',
rules: [
{
type : 'creditCard',
prompt : 'Please enter a valid credit card'
}
]
},
exactCard: {
identifier : 'exact-card',
rules: [
{
type : 'creditCard[visa,amex]',
prompt : 'Please enter a visa or amex card'
}
]
}
}
})
;
Cancellable Checkboxes
Checkboxes now include four new callbacks beforeChecked, beforeUnchecked, beforeDeterminate, and beforeIndeterminate, returning false from these callbacks will cancel the action from occuring.
All components have received a face-lift for 2.0. Styles give slightly more negative space and a few idiosyncratic design touches have been removed.
More Precise EM Values
EM sizing has been improved in 2.0, with all values rounding to exact pixel values. This helps common relative sizing pitfalls like rounding errors in vertical alignment.
Em variables now use new globally calculated em ratios, like @relative4px, to express pixel values in terms of root em size. This makes sure components don't include confusing decimal or fractional values when dealing with sizing.
Grids
Flexbox Grid
Grids in 2.0 now use flexbox so columns are always equal height across rows.
1
1
2
1
2
3
Grids Create Themselves
The new equal width variation adjusts column widths automatically splitting available width between columns.
If a column has a specified width, other columns will adapt to take available space around it.
Containers
Containers have been added as a simple way to limit content width.
Stretched rows
The new stretched variation makes vertically aligning layouts much simpler. Columns will not only match heights, but stretch their contents to match heights.
1
2
1
2
Dropdowns
Multiple Selection
Multiple select dropdowns are now available, and can generate automatically from standard HTML selects.
Dropdowns now all support advanced keyboard shortcuts like pagedown, delete, shift+leftctrl+click, and selection using first letter of item.
Additionally dropdowns will now automatically open upward if there is not enough space available in the viewport below a dropdown.
User Tagging
All dropdowns, single and multiple now support user tagging. Values can be automatically separated by a delimiter and placed in a hidden input, or extend an existing select element.
All dropdowns now support loading remote data. Selected name value pairs retrieved remotely are stored in sessionStorage so that selected values are repopulated correctly even after a page refresh.
Listing choices in a nested menu will still give all the same keyboard shortcuts and filtering as regular menus.
Filter Posts
Tag Label
Already Fixed
Announcement
Cannot Fix
Discussion
Enhancement
Important
Interesting
News
Off Topic
Up Next
Advanced Shortcuts
Dropdowns now support advanced shortcuts like page down and page up, scrolling to selection on first letter press, i.e. "N" for New York, shift+left/right for group selection, and ctrl+click for modifying groups.
Much More
Dropdowns support many, many new features, including:
Maximum selection count is supported for multiple selects
Mutation observers will now watch for changes in menus or the elements they are generated from and will update choices automatically
Custom templated error messages are now supported with dropdowns
API
Local Caching
API now supports sessionStorage caching. This setting makes repeated requests to a URL return results instantly across a user's session, drastically improving performance for components like search.
Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.
API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.
$('.ui.search')
.search({
type : 'category',
minCharacters : 3,
apiSettings : {
onResponse: function(githubResponse) {
var
response = {
results : {}
}
;
// translate GitHub API response to work with search
$.each(githubResponse.items, function(index, item) {
var
language = item.language || 'Unknown',
maxResults = 8
;
if(index >= maxResults) {
return false;
}
// create new language category
if(response.results[language] === undefined) {
response.results[language] = {
name : language,
results : []
};
}
// add result to category
response.results[language].results.push({
title : item.name,
description : item.description,
url : item.html_url
});
});
return response;
},
url: '//api.github.com/search/repositories?q={query}'
}
})
Mocked Responses
API now supports mocked responses, letting you specify how responses are returned in advance.
$('.toggle.button')
.api({
// lets pretend this took a while
loadingDuration: 500,
// lets treat this button as requesting this JSON
mockResponse: {
success: true
}
})
// successful responses will trigger a text state change
.state({
text: {
inactive : 'Off',
active : 'On'
}
})
;
Off
Custom Backends
API can now use custom asynchronous callbacks for resolving API requests, this can let you use other custom XHR backends, or local data to resolve requests.
$('.toggle.button')
.api({
// lets wait a half second then try your luck
mockResponseAsync: function(settings, callback) {
var
luckyPerson = (Math.random() < 0.5),
response = (luckyPerson)
? { success: true }
: { success: false, message: 'You are not lucky' }
;
// simulate this is an async task
setTimeout(function() {
callback(response);
}, 500);
},
successTest: function(response) {
return response && response.success;
},
onFailure: function (response) {
alert(response.message);
}
})
.state({
text: {
inactive : 'Off',
active : 'On'
}
})
;
Off
Form
Autocomplete
Form now include custom styling for browser autocompleted form fields. Autocompleted fields can also specify focused autocomplete, and errored autocomplete styles.
Visibility APIs now include useful shortcuts for sticky content. A placeholder will automatically be added when an element is passed making sure other content does not shift position.
Additionally visibility and sticky have been rewritten to use a pub/sub pattern which is much more performant than 1.0
$('.overlay')
.visibility({
type : 'fixed',
offset : 15 // give some space from top of screen
})
;
Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.