Releases: Semantic-Org/Semantic-UI
Version 2.1.0 - Sep 02, 2015
New UI Features
- API - Added
encodeParameters
option to enable/disable parameters being encoded withencodeURIComponent
#2752 - API Added new setting
hideError
, defaults toauto
(will automatically hide error for elements that are not forms). #2586 - Build Tools - Packaged
.overrides
file are now an optional include - Button -
colored basic
button are now colored before:hover
in the default theme, this is more in line with common usage across other websites. - Button - Added
labeled button
variation for display a count next to a button. - Cards - Added documentation for
stackable
cards which was available but undocumented in previous versions. - Checkbox - Added 4 new callbacks
beforeChecked
,beforeUnchecked
,beforeDeterminate
,beforeIndeterminate
. You can now cancel a state change by returning false from these callbacks. - Divider - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808
- Dropdown - Dropdown using remote data, can now customize the property names returned by api call using
fields
(similar to search). - Dropdown - Dropdown will now automatically update selected values when hidden input value changes (so long as
change
event is triggered) #2626 - Dropdown - Dropdown with user additions now will use custom templated messages to distinguish added choice from preselected choice #2923
- Form Validation - Added credit card validation, supports array of card types, and international cards including non luhn cards like China UnionPay #2729
- Form Validation - Updated appearance of form validation prompts to use a more lightweight style. Added variables for controlling error validation prompt styles in
form.variables
- Grid - Added new responsive
reversed
variations for reversing column order, these are also compatible with other grid types likedivided
andcelled
by device #2685 - Icon - Added
fitted
icon variation, and new small sizestiny
andmini
- Input - Added
disabled
state for inputs #2694 - Input - Added ability for labeled input to be attached to both sides #2922 Thanks @maturano
- Label - Added a new
basic label
style, works symbiotically with other label types to provide a more lightweight style label - Menu - Added new
tabular
menu types,right tabular
,bottom tabular
, added many newtabular
menu variables for customizing - Menu - Appearance of
labeled icon menu
has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before. - Search - Search now can use any server response mapping, use the
fields
parameter to pass in a mapping of server response to content thanks @anibalmf1 #2645 - Site - Added global variable
@focusedFormBorderColor
for controlling form focus border color - Table - New
fixed
table variation added for use withtable-layout: fixed;
. This also supports "..." ellipsis when used withsingle line
content
- Breadcrumb - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other
inline-block
content. - Dropdown - Added
get default text
andget placeholder text
behaviors for returning text values. - Dropdown - Pointing dropdown (dropdown with arrows) now support
upward
, and will automatically move pointer arrows when appearing upward #2733 - Form -
inverted form
now remove input border, added new variables for controlling inverted form input styles - GitHub Theme - Added github icon theme with port of Octicons.
- Label - Added
basic
label variation, useful for item counts - Menu -
inverted menu
now supportcolored
individual items Thanks @maturano #2850 - Menu -
text menu
now uses padding for hitboxes to make target area for links larger
- Build Tools -
gulp build
now correctly callscallback
, allowing those importing tasks to chain it correctly #2836 Thanks @artemkaint - Dropdown - Dropdown
show
andhide
are now cancellable by returningfalse
fromonShow
oronHide
callbacks. - Flag - England flag alias is now correctly set #2770 Thanks @eduardom
- Form Validation - Added
number
anddecimal
validations to form Thanks @tonnyorg #2537 - Form Validation - Form
onSuccess
andonFailure
now receive current form fields as a parameter Thanks @guodong - Popup - Popup will now look for inline popup as any next adjacent sibling #2772 Thanks @malacalypse
Bugs
- Accordion - Added missing notation for accordion docs #2812
- Build Tools - Fixed bug where
gulp version
would showx.x
[#2875 #2920 - Build Tools - Fixes issue where component glob
{tab, table}
caused table to be included twice in concatenated source ** - Button - Fixes inverted button missing an
active
andactive focus
state #2635 - Button - Fixes issue where
basic button
would not have focus color text when colored #2264 - Checkbox - Clicking a link inside an initialized checkbox
label
will now work correctly, and will not toggle the checkbox. #2804 - Container - Fix issue with
fluid container
being100% + gutter
at mobile resolution (causing overflow) - Dropdown -
forceSelection
no longer sets current value in search selection when current query is blank #2058 - Dropdown - Dropdown
@arrowSize
will now automatically reposition itself if size is changed with variable - Dropdown - Dropdown arrow now has a variable
@dropdownArrowSize
, and is slightly smaller than previously - Dropdown - Fix
left menu
insideui menu
appearing horizontally #2778 - Dropdown - Fixed error where menu would disappear when entering spaced words using
allowAdditions: true
caused by value matching its own whitespace-trimed value #2853 - Dropdown - Fixed issue where "no results" message would be still be visible before search query on input focus #2824
- Dropdown - Fixed issue where
onChange
would not fire when usingaction: 'hide'
. #2818 - Dropdown - Fixed issue where selected item would not be shown when being re-shown after filtering with single search selection #2824
- Dropdown - Fixes issues with setting "" (empty quote) values when
placeholder: false
is used. Fixes issues with usingclear
andrestore defaults
without placeholders. #2637 - Dropdown - Remove use of
trim
which causes issues IE 11 and below #2806 - Embed - Remove accidental
console.log
statements in js #2760 - Form / Input - Fixes
::placeholder
text color forui error input
, modifies form error placeholder color to distinguish from form value error color #2786 - Form / Input - Fixes issue where
ui input
would sometimes collapse to0px
width, especially when used inside aninline field
[#2705 [#2621 #2821 - Form -
disabled field(s)
now removepointer-events
allowing it to disable checkbox and dropdown functionality #555 - Form - Date input and other special input in chrome now are the same height as normal input (adds custom vendor shadow dom styling) #2704
- Form - Form will no longer show messages that are empty in
error
,warning
, orsuccess
state. - Grid - Fixed issue where
relaxed stackable grid
would have incorrect margin on mobile width - Grid - Fixed issue where nested
stackable grid
would have incorrect margin on mobile. - Header - Fixed
attached header
to have...
Version 2.0.8 - August 10, 2015
All 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
Version 2.0.7 - July 23, 2015
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.
- API - Fixed some cases where
onComplete
,onSuccess
andonFailure
would receive XHR as first parameter and notresponse
. #2713 - API - Fixed issue where
onFailure
would pass response as stringified JSON and not a JS object #2713 - Build Tools - Fixed some cases of
npm install
with CI or tests. Install will not stop to ask questions if project has an existingsemantic.json
file (more quiet options to come) #1816 - Dropdown - Fixed border radius on
circular labeled icon button
#2700 - Dropdown - Fixed issue where dropdown nested inside
label
would not open. #2711 - Popup - Fixed issue where popup would not open on tablets with both touchscreen and mouse on mouseenter. #2715
- Build Tools - Fixed autoprefixer not correctly setting
last 2 versions
#2717 Thanks @frontdevde - Gulp Import - Fixes error
Cannot find module 'gulp-help'
which may occur when importing gulp tasks #2653 #2668 Thanks @fholzer
Docs
- Recipes - Add links to Sketch files for SUI. Add example repo on how to import gulp tasks.
Minor Enhancements
- API - All API callbacks now recieve
xhr
from API request as the third calback parameter
Additional Fixes
- Checkbox - Fix checkbox "check" appearing italicized when included inside italicized text
- Popup - Fixed terribly typo where popup
onShow
was mistakenly being called instead ofonHide
when hiding popup - Popup - Popup on
touchstart
now occurs immediately without waiting fordelay.show
Version 2.0.6 - July 22, 2015
Important Notes
- Form Validation - In
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 returninglength
to functioning as "minimum length" and added a new ruleexactLenght
for matching exact length. #2681
- Dropdown - Fixed issue where
disabled
dropdown would still receive focus #2699 - Dropdown - Fixed
restore value
sometimes now working correctly due to "animating out" label still being mistaken for selected. #2690 - Dropdown - Added
set exactly
to remedy confusion ofset selected
not removing current selections with multiple #2689 - List- Fixed issue where using an image variation like
ui image label
as a direct child of anitem
would remove right padding #2691
Additional Fixes
- Dropdown - Fixed issue where using text labels,
useLabels: false
, would cause selection count to appear incorrect. - Dropdown - Text labels,
useLabels: false
, now works correctly withmaxSelections
, and receives special UX considerations
Version 2.0.5 - July 20, 2015
- API - Data replaced in urls,
urlData
, will now be url encoded by default. Additionally checks were added to avoid double encoding already encoded values. #2394 - Checkbox - Fix issue with
onChange
not firing when space key is used. Checkbox keyboard shortcuts now occur onkeydown
but cancel events correctly onkeyup
#2676 - Radio Checkbox - Fixed regression causing radio checkboxes to all appear selected in chrome due to
:indeterminate
selector #2505 - Dropdown - Fixed issue causing
multiple search dropdown
usingsearch
inside menu to break when multiple #2666 - Message - Fixed issues where icon would overlap in
icon message
when at mobile resolutions due toflex-collapse
value being incorrect #2665
Additional Fixes
- Dropdown -
<select>
dropdowns intialized withoutmultiple
property set on<select>
will now produce an error to alert users selection will not be preserved correctly. Related #2573 - Dropdown - Dropdown
<option>
added withuserAddition
now recieve class nameaddition
to distinguish from original<select>
options. #2573 - Dropdown - User additions now have their
<option>
removed if a user deselects an addition. #2573
Version 2.0.4 - July 17, 2015
- Build Tools - Fixed issue where sub tasks were undefined when importing SUI's
build
andwatch
tasks into custom gulpfile #2648 - Button - Fixed
fluid buttons
not working correctly with<button>
due to button tags not supportingflex
rules. #2617 - Button - Fixed colored vertical basic buttons appearing 2px offset #2655
- Checkbox - Checkbox now focus after click, allowing for tab navigation from current position #2610
- Checkbox - Fixed checkbox not using javascript having incorrect colors on focus #2607
- Dropdown - Fixed
search selection
appearing incorrectly inside menu (default text would not disappear) #2624 - Form - Added
doesntContain
anddoesntContainExactly
#2638 - Form - Fixed issue with
minLength[1]
validation not behaving same asminLength > 2
#2636. - Form - Fixes errors when a field identifier is named
identifier
#2629 - Form - Form fields will now error when a non-string identifier is used
- Formatting - Fixed several source files that had
CR LF
(Windows) line endings #2649 - Input - Fixed
left action input
displaying with incorrectinput
border radius insideui form
#2638 - Modal - Modal
action
now uses a more specific selector to prevent modifyingcomment action
- Popup -
fluid
popup withsetFluidWidth: true
(default value), will now useparent
width and notoffsetContext
width #2526 - Popup - Fixed issues where rounding could cause elements that are against edge of page from not appearing. Add new
jitter
setting for allowing popups to escape page boundaries by a small margin #2526 - Segment - Added additional variables for
inverted
segment. - *Segment -
horizontal segments
in IE will no longer stretch to the natural width of child imgs #2550 flexbug [#1](h - Sidebar -
right
,top
, andbottom
sidebar will not have their direction removed ondestroy
#2644 - Sticky - Fixed
sticky
element that cannot fit in viewport not scrolling correctly when fixed to viewport #2605 - Transition - Fixed issue where animating same element in its own
onComplete
would fail because animation had not yet calledforce visible/hidden
#2583 - Visibility -
refreshOnResize
now correctly includes a default value #2615 - Menu/Segment/Table - Consolidated
attached
logic for all components using attached. #2599
Additional Bugs
- Checkbox - Fixed
space
shortcut causing checkbox to trigger twice - Checkbox - Updated
colored
theme to add new focus color variables. - Popup -
wide
andvery wide
popup will now limit themselves to normal popup widths on mobile so that they still appear on screen. - Message - Fixes
attached icon message
not usingflex
- Sticky - Fixed
sticky
content jumping fromfixed
tobount bottom
when scroll position has surpassed bottom of container during page refresh. - Sticky - Sticky no longer uses
bottomPadding
to determine bottom edge of container. - Steps - Updated
basic
steps theme to appear correctly
Docs
- Fixed theme previews appearing incorrectly in all UI in docs. Regex parsing
.variable
files would ignore first variable after a comment. - Added individual examples of all form validation rules
- Partial rewrite of sidebar documentation
- Added attached examples to
examples/
- Updated example in theme guide to include checkbox focus colors
Version 2.0.3 - July 8, 2015
Docs Updates
- Examples - Source code examples have been greatly improved. Required class names for each example will be highlighted in yellow. Other UI elements used in examples will now link out to their definition pages.
- Checkbox - Checkbox initialized with JS and with
for/id
matching would cause toggle to occur twice on click (making it seem as if nothing was updated) thanks @malacalypse #2572 - Divider/Grid -
vertical divider
no longer has inexplicable right border when stacked on mobile #2558 - Dropdown - Dropdown using
<select>
andapiSettings
will now correctly add new<option>
value when selections are made #2573 - Icon -
black icon
have been added back as a color option #2556 - Icon - Adds missing
square
andsquare outline
icon #2532 - Input - Fixed errored input field having incorrect border radius with
labeled input
- Modal - Modal that is larger than page height will now correctly reset body height on remove #2576
- Popup - Popup
preserve
setting (which preserves popup in DOM to avoid regenerating on each show/hide) was set totrue
by default causing generated popups to remain in DOM. #1369 - Steps - Fixed
github
theme for steps not displaying correctly in 2.0 #2545 - Steps - Last
step
no longer incorrectly shows arrow #2552 - Transition - Fixes
get current animation
erroring whenmodule cache
is cleared. #2469
Additional Bugs
- Form - URL regexp will now match now works correctly, and matches against non
http://
prefixed urls likewww.google.com
Version 2.0.2 - July 7, 2015
- Dropdown - Fixed regression in
2.0.1
causing search dropdown not to clear values correctly #2533 - Site - Sizing variables now are relative to
@emSize
adjusting all sizing variationss proportionately as@emSize
changes #2538 - Dropdown - Dropdown icon will now always toggle menu visibility #2510
- Dropdown - Pressing same key on dropdown with multiple choices with same first letter will now cycle selections. For example "California" then "Colorado" when pressing C #2516
- Dropdown - Dropdown now changes text before calling
onChange
callback so that callback reflects new dropdown conditions #2539
Additional Bugs
- Dropdown - Clicking on label, or deleting a label will no longer trigger dropdown menu toggling
- Dropdown - Multiselect that do use text labels (e.g. "5 selected") will now remove filters on selection and scroll to last selected value
Version 2.0.1 - July 6, 2015
Reported Bugs
- Label - Attached labels now use a border-radius for corner-edges that matches more closely #2500
- Label - Fixes incorrect label sizing for
large
and bigger sizes #2486 - Segment - Fixed incorrect margin set on
attached segment
#2503 - Card -
centered cards
variation now works similar tocentered card
. #2520 - Checkbox - Fixed issue in chrome where radio checkbox would appear incorrectly when no default value was selected #2505
- Dropdown - Fixed transparent tap color not being set correctly. Removed toggle behavior from touch events on multiple dropdown. #2524
- Checkbox - Fixed issue where radio checkbox were not properly receiving
checked
class #2506 - Tab - Tab now correctly obeys
cache
setting. Removed use of API's local caching by default. #2493 - Form -
reset
will no longer clear values if no default value is found #2504
Additional Bugs
- Dimmer - Dimmer now removes variations like
blurring
andinverted
whendestroy
is called. - Dropdown -
restore defaults
in dropdown when used with multiple will now correctly clear other values selected that were not there on page load. - Dropdown - Removes accidental console.log statement in dropdown
- Menu - Fixed
pointing menu
arrow color slightly off - Progress - Progress included
debug: true
by default. This has been now correctly set tofalse
- Modal -
scrolling modal
now correctly inherits rules so that it appears at top of screen on mobile - Menu - Inverted menu no longer includes a 1px transparent border.
- Menu - Fixes
compact vertical menu
usingflex
style incorrectly - Menu - Fixes
border-top
not appearing onbottom fixed
menu - Tab - Fixed bug where remote loaded tab content would not show
loading tab
on first load.
Docs
- Form - Clarified usage for
reset
in form docs #2504 - Docs -
1.0
docs are now available at http://1.semantic-ui.com Link in footer has been fixed. - Image - Fixed
mini image
having wrong pixel size in docs #2521 - Image - Added docs for missing
fluid image
variation - Modal - Removed legacy JS animation settings still accidentally in docs
- Tab - Added new examples for
evaluateScripts
and HTML5 state tabs
Version 2.0.0 - June 30, 2015
Authors Notes
So this thing is finally done. These "notes" are about 10 printed pages long, so I apologize for that in advance. I've tried to move all the most essential changes to the top of the release notes to help in scanning below.
Thanks everyone who helped make this happen.
Migration Guide
Migration shouldn't be too difficult, just take heed of the breaking changes listed below:
- Modal - If you are using a modal with image content, you will need to use
image content
on the parent element. This is becauseflex
rules require parent styling that the previoustable-row
rules did not. - Modal - Modal will now only close on buttons matching
deny
orapprove
selector. Any button that should hide modal on click should either match one of these selectors, or call$('.ui.modal').modal('hide')
onclick
. - Grid -
page grid
has been deprecated.page grids
used percentage gutters which made it unnecessarily difficult to style responsive page content. Moving forward we recommend usingui container
a fixed width responsive container for holding page contents. - Dropdown - Dropdowns will now change opening directions automatically based on available screen space. If you need to force a dropdown direction use
dropdown({ direction: 'upward'})
- Form Validation - Form validation now passes settings through a
fields
object. This is to make form initialization match other components. The previous syntax will continue to work but will produce deprecation notices in console - Checkbox - Checkbox
fireOnInit
now defaults to false. Checkboxes now also do not require javascript to function. - Dropdown - Dropdown item
description
now are floated in default theme and should be included before otheritem
content - Form -
grouped inline field
no longer display horizontally. Useinline field
instead for horizontal inline field groups. - Input -
pointer-events
have been removed fromicon
inicon input
unless alink icon
is used. This is to make sure the hitbox for focusing an input includes the icon. - Popup - Popups are no longer exclusive by default. Opening a popup will not necessarily close other visible popups. You can change this behavior by using the setting
exclusive: true
. Additionally the default theme now uses1rem
size for standard popups. - Colors - Default colors have been adjusted, which may cause slight changes in your design. New colors have also been added to fill in missing gaps in color naming.
- Segment - Segment no longer includes a clearfix by default. You will need to specify a
clearing segment
to clear floated content. - Rail - Rail now uses
border-box
instead ofcontent-box
. This means manually specified rail widths will now need to account for padding. This was added to fix issues where railheight: 100%
would incorrectly match content when a rail had padding. - Menu -
tiered menu
has been removed in2.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. - Tab -
onTabInit
andonTabLoad
have been renamed toonFirstLoad
andonLoad
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 callbacksonVisible
andonRequest
have been added as well. - Button -
wide
variations using numbers2 wide
,3 wide
have been removed due to incompatibilities with some build tools. Please usetwo wide
, orthree wide
instead. - Video - The undocumented
video
module has been renamed toembed
. Behaviors remain the same, but users need to adjust their javascript init to$('.ui.embed').embed();
- API - API
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 passsuccessTest
function.onError
andonAbort
will also fire for each specific failure condition.
New UI
- Container - Containers are fixed width containers meant for holding page contents, and are a simpler alternative to
ui page grid
, view more examples in docs - Multiselect - New
multiple
dropdown types have been added. Many new dropdown improvements have been added including tagging/tokenizing features and loading data through API requests. - Embed - New embed component allows for responsive iframe embeds that maintain their aspect ratio. Embed can be used with YouTube or Vimeo videos, along with placeholder content to avoid loading third party libraries until a user chooses to interact with the video.
Major Enhancements (Please Read)
- Site - Added new colors
olive
,violet
,brown
andgrey
. These are available in all elements with color variations. Thanks @lemartialou - API - API can now be used with mocked responses, and custom AJAX requests.
mockResponse
has been added to resolve request with a prespecified JSON object, or a synchronous function callback. - API
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. - API - API callbacks now have an
onResponse
callback that can adjust a servers response before it is parsed by other callbacks for success or failure conditions. Thanks @mnquintana - API - API now provides a local caching setting to avoid server roundtrips for identical urls by using
cache: '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. - Card - Cards now support multiple custom
content
blocks. Content blocks and images can now appear in any order. - Checkbox - Checkbox no longer require javascript to function.
- Checkbox - Added support for
indeterminate
checkboxes, along with new stylings. - Checkbox - Now includes separate behaviors for triggering state changes without invoking callbacks
set checked
vschecked
- Dropdown - Added remote API integration with dropdown, to allow
search selection
to query against a remote dataset. - Dimmer - Dimmers now have a
blurring
variation which apply a glass-like effect when dimmed - Dropdown - Dropdowns now automatically observe changes in
menu
and will update selector cache with new additions - Dropdowns - Added ability to add custom choices to all search selection dropdowns (multi/single) using
allowAdditions: true
setting. Search now displays error messages on no results in all cases. - Dropdown - Keyboard shortcuts have been added for selecting dropdown choices, for example "N" will scroll to "New York" in a state selection list, similar to native
<select>
behavior. - Dropdown - Added new dropdown variation
scrolling dropdown
andscrolling menu
, this can be used to include a scrollable section inside a dropdown menu. - Dropdown - Dropdown will automatically animate upward if there is not enough space to appear below.
- Dropdown - Using
page up
andpage down
keys will now scroll menus by a page at a time - Form - Forms now use
flexbox
for creating field groups. Inline fields now support(x) wide
sizing usingflex
- Grid - Grids now use
flexbox
, columns are now all equal height by default. New flexbox alignment types likestretch
have been added for easier vertical alignment. - Multiple UI - Many components now use flexbox, which means previous confusing fixes like
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 ofgrid
ormenu
. - Modal - Added new settings
blurring
andinverted
which automatically set a modal's dimmer to either inverted or blurring. - Menu - Menu now uses flexbox. This allows menu items to match each others heights regardless of each items content size.
right menu
content should now follow other menu content instead of preceding it (no longer uses float). - Grid - Grids are now
flexbox
andequal height
by default, theequal height
variation can safely be removed - Popup - Popup has been rewritten to drastically improve performance, especially when testing multiple positions.
- Transition - Fallback javascript animations have been removed from UI components like dropdown and popup to increase performance. This removes need for expensive pseudo selectors like
:visible
,:animated
and:hidden
and reduces filesize. - Form Validation - Form validation now uses a single
settings
object like other modules. Using(fields, settings)
will continue to work but will produce a deprecation notifications inconsole
- Form Validation - Form validation now supports many new validation rules, including some specifically for use with multiple select values.
- Item - Items now uses
flexbox
for layout. - Message -
icon message
now usesflexbox
for layout - Menu -
vertical tabular menu
, a vertical tab menu, has been added - Input - All
input
types useflexbox
for layout - Segment - Segments now support complex nesting, many new rules for how segment groups should appear inside groups
- Segment - New
horizontal segment
groups make laying out auto resizing text columns much easier. - Sidebar - iOS will now correctly report
scrollTop
values fordocument
orbody
when using a sidebar. Chrome on iOS no longer has...