Semantic UI v2.2.0 Release Notes
Release Date: 2016-06-26 // almost 8 years ago-
Project Features
- jQuery - Semantic UI is now fully compatible with jQuery
3.0
- Webpack - All css is now webpack-compatible
- NPM - NPM dependencies have all been updated to latest stable releases
🆕 New UI Features
- 💻 All UI - Added new setting
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, orsticky
content which initializes before it is visible #3713 - 💻 All UI - All UI now include all sizing variations,
mini
,tiny
,small
,large
,big
,huge
,massive
. Headers remain with only 5 sizessmall-huge
to matchH1-H5
- 💻 All UI - Components that use event handlers on
document
,body
, or asettings.context
now all use DOM mutation observers to detect removal and prevent memory leaks - Button - Added compatibility with
primary
secondary
positive
negative
buttons with thebasic
styling variation. #3756 - Card - Added
raised
card variation Thanks @yordis #2955 - ⬇️ Dropdown - All dropdowns, not just
selection dropdown
, will now select the firstmenu item
that starts with a pressed keyboard key, for example "N" will select "New" - ⬇️ Dropdown - Dropdown now changes user selection on keyboard shortcuts immediately, this will save the extra
enter
key press to confirm selection in most cases. To enable previous pre2.2
selection style use the settingselectOnKeydown: false
- ⬇️ Dropdown - Dropdown will now automatically focus on
search
inside of a dropdown menu after it is opened. - ⬇️ Dropdown - Multiple select dropdown now sizes current dropdown input based on rendered width of a hidden element, not using an estimate based on character count. This means search will never break to a second line earlier than would normally fit in current line.
- Icons - Icons now use the latest Font Awesome
4.6.3
Icons. 80+ new icons+ are included. Thanks @BreadMaker for the PR and @davegandy for the font! - Popup - Added new
tooltip
popup type that works without javascript. Tooltips can specify positioning and some variations usingdata
attributes, and will handle positioning automatically with CSS only. - Progress - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr
onprogress
events say every 50ms) will now appear smooth as butter. - Table -
definition table
now includes additional class names for forcing, or ignoring definition cell styles
🆕 New 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 stateempty
which will format an active dropdown with empty results. #3791 - ⬇️ Dropdown - Adds new
allowReselection
option to triggeronChange
events even when reselecting same value ⬇️ Dropdown - Adds new setting
minCharacters
which sets the minimum number of characters required to start filtering results #3886Form Validation - Added
depends
validation rule setting which will only validate a field if another specified field is not emptyPopup - Added new setting
boundary
andscrollContext
.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 popupPopup - Added new settings
observeChanges
, which is enabled by default. This will add special mutation observers to triggerdestroy
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 conditionsRating - Added new setting
fireOnInit
for rating, which defaults tofalse
. When set to trueonRate
will fire when rating is initialized #3712Search - Added a new option
selectFirstResult
, which defaults tofalse
. Will automatically highlight first result on searchSearch - Search now includes a
showNoResults
setting for determining whether no results messages should be shownShape - Shape now lets you specify next side width using setting
width
, can usenext
orinitial
to specify whether it should use old or new side sizeTab - Added new setting
cacheType
, can either behtml
orresponse
(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 #2534Tab - Added new option
deactivate
, defaults tosiblings
which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to 'all' will deactivate any other tab element initialized at the same time.Visibility - Added
onFixed
andonUnfixed
callbacks for visibilitytype: 'fixed'
Visibility - Added
onLoad
andonAllLoaded
callback fortype: 'image'
visibilityVisibility - Added
zIndex
setting for specifying zindex withtype: 'fixed'
#3370
🆕 New Behaviors
- ⬇️ Dropdown - Added new convenience method
restore placeholder text
- Image -
transition hidden image
now shows correctly asvisibility: hidden;
and notdisplay: none
. This will allowoffset
withvisibility
andsticky
to work more seamlessly.hidden image
will still remaindisplay: none;
- Progress - Added progress
is complete
for returning whether success, warning, or error conditions are met
CSS Enhancements
- 💻 All UI Extended variables which return exact pixel values in em (
@relativePX
and @px) up to 64px to allow for simple theming with exact values - Button - Added variables for configuring
disabled
background image and box shadow. - Site - Added colored box shadow defaults.
ui message
now includes individual colored border shadows based on new site defaults. - Site - Added new
@inputColor
and@inputPlaceholderColor
global variables that now control placeholder text styles across all components. - Table -
definition table
now supportsdefinition
variation to specify definition styles on an element that is not:first-child
- Table -
definition table
now supportsignored
variation to force afirst-child
to ignore its default definition stylings
🚑 Critical Bug Fixes
- 💻 All UI - Using
component('setting, {})
to add multiple settings as an object literal, for exampleerror: {}
, will now deep extend the existing object instead of replacing it. - API -
beforeSend
would not correctly cancel request whenreturn false;
is used in callback. #3660 - API -
cache: 'local'
would not return the localstorage cached results in some cases - Divider - Descenders like "g" are cut off in
horizontal divider
#3585 - ⬇️ Dropdown -
forceSelection
will now automatically select values with multi dropdowns. When usinguserAdditions
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 #3596 Thanks @Sanjo - ⬇️ Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered
refresh
#3879 #3622 Thanks @mdehoog - Form Validation / Dropdown - Using "enter" key in a
search dropdown
could cause a form to be submitted #3676 - Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail #3955 #3755
- Form Validation - Revalidating a field
on: blur
could cause fields not yet interacted with to be validated #3606 - Form - Fixed issue with
(x) fields
andequal 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 #3887
- Rail - Fixed incorrect width for
close rail
andvery close rail
caused by variable addition with mixed unitspx
+em
#3835 - Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request #2779
- Search - Fixed an issue where
onResult
returningfalse
would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results. #3856 #3870 - 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.
🐛 Bugs
- API - Using
onResponse
withdataType
other than JSON or JSONP would cause an error. (Not allowing plain text responses to be translated) #3653 - 🏗 Build Tools - Fixed gulp help text incorrect for RTL tasks in build tools #3858
- Button -
right icon
likeright arrow icon
would have additional margin inside anicon button
#3525 - Button - Fixed issue where
disabled loading button
would not removepointer-events
#2933 - Button - Fixed typo in
green inverted button
#3873 - Button/Dropdown - Button dropdowns using
default text
no longer receive incorrect font styling for placeholder text - Checkbox - Fixed issue where docs refer to
onEnable
andonDisable
with checkbox but callback was calledonEnabled
andonDisabled
, both callbacks will now be valid until 3.0 #3761 #3763 - Checkbox - Radio buttons received
indeterminate
styles when user has not yet interacted with the page in Chrome - ⬇️ Dropdown -
apiSettings
was not defaulting to usecache: 'local'
as specified in the docs - ⬇️ Dropdown -
get value
would not return correct value when value was blank #3766 - ⬇️ Dropdown - Added
1px
offset for current text so that the blinking text position cursor does not overlap first pixel of underlayed text. - ⬇️ Dropdown - Dropdown would open when an label delete x was clicked when not using
search selection
#3789 - ⬇️ Dropdown - Dropdowns no longer re-open on selection when nested inside of a
<label>
#3917 - ⬇️ Dropdown - Dropdowns with sub-menus would not properly activate on mobile #3183
- ⬇️ Dropdown - Fixed bug where using
action: 'hide'
could causetext
value not to be passed toonChange
callback - ⬇️ Dropdown - Fixed issue where values with
"
(double quotes) would not work with a dropdown using a select, because value would not be encoded as html entities - ⬇️ Dropdown - Long dropdown text entry with
allowAdditions
would cause input to mistakingly drop to next line early #3743 - ⬇️ Dropdown - Regenerated dropdown will no longer ignore
disabled
property #4010 Thanks @eymengunay! - ⬇️ Dropdown - Search selection would lose search input focus when clicking on a choice #3790
- Embed -
API
setting is now disabled by default - Form Validation - Fixed issue where initializing form multiple times would not properly call
destroy
removing previous settings #3798 - Form - Fix
equal width fields
sometimes not including right field spacing on mobile #3913 - Form - Fixed issue where
inline
field was not being correctly inverted in color withinverted form
#4004 #4005 Thanks @tbracken - Form - Grouped
fields
andfield
would cause different margin collapse, makingfields
include larger gaps between content #3717 - Form - Remove deprecated
size()
method inprompt
#3655 Thanks @SimonArdrey - Grid -
centered
content would causejustified
content to appear aligned left. #3496 - Grid - Fixed issue where
vertically divided
grid would have top margin in firstrow
group - Icon - Sizes smaller tham
small
were using withrem
#3782 - Input - Fixed
:active
styles appearing on disabled input, when input is disabled usingdisabled
property #3907 - Input - Fixes issue with
dropdown
or button on the left side of anaction
input not properly rounding - Label - Fixed margin when
right floated
element precedes atop attached label
- List -
relaxed
andvery relaxed
lists included unnecessary padding on the first and last items #3710 - List - Bullets would be affected by font weight, or whether the list item was a link #3715 #3721
- List - Divided lists had unnecessary padding on first and last items, in both horizontal and vertical layouts #3710
- Menu -
stackable
menu withleft/right
menu
oritem
would incorrectly be floated when stacked. #3604 - Menu -
tabular menu
now has correct bottom margin #4167 - Menu -
@dividerSize
was not being used invertical menu
#3781 - Menu -
vertical text menu
no longer includesleft
orright
padding, but will now sit flush with content. - Message - Fixes
compact message
appearing asblock
when inside aform
#3343 Thanks @bcroq - Modal - RGB values set for dimmer
background-color
were not being correctly interpreted #3665 Thanks @larsbo - Modal/Dimmer - Fixed issue with
destroy
not properly removing events from dimmer #3200 - Popup - checking
instanceof SVGGraphicsElement
caused error in IE11 #3043 - Progress - Progress
onSuccess
,onError
, andonWarning
callbacks now occur after the animation completes for the state change. - Rating - Fixed
ui rating
to not used outlined star in basic variation, instead using a lighter filled in star for increased visibility #3730 - Rating - rating does not fire
onRate
when rating is initialized #3712 - Search - Added
refresh
behavior for search to refresh selector cache. Cache will automatically refresh after API results received - Search - Fixed issue where
href
was not pulling correctly on search click when theresult
was ana
itself. #3409 - Segment - Fixed
segments
to not clip border radius when only a single segment is included - Segment/Message -
top attached message
has no border when attached tosegment
#3619 - Statistic - statistic receives incorrect size when using
tiny
large
etc inside a statistic group #3116 - Step - Fix incorrect bottom margin on
top attached steps
- Table -
striped selectable
table would not correctly show hover color on striped rows - Visibility - Using
type: fixed
will now correctly remove all special classes and placeholder content ondestroy
#3548
🔄 Changes
- Sizing -
mini
the smallest size has been modified to align to11px
instead of previous10px
at base em size
📄 Docs
- Progress - Added new examples to progress
- Progress - Added all available behaviors with progress
- Form - Added example of using custom rules with form
- 🏗 Build Tools - Added explanation of using SUI with CI, and auto-install in "recipes" section.
- 🏗 Build Tools - Added explanation of how to build RTL in "recipes" section
- Layouts - Added "attached" example showing content attached to other content
- jQuery - Semantic UI is now fully compatible with jQuery