Semantic is a UI component framework based around useful principles from natural language.
Bugs
<select>
and allowAdditions: true
would cause dropdown selection to failProject Features
3.0
New 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 #3713
mini
, tiny
, small
, large
, big
, huge
, massive
. Headers remain with only 5 sizes small-huge
to match H1-H5
document
, 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. #3756
raised
card variation Thanks @yordis #2955
selection 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: false
search
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
autoInstall
option to allow for Semantic to be installed without user interaction. See docs explanation for how to use. #3616 Thanks @algorithme
fullSearchSearch: 'exact'
setting, which requires exact matches for dropdown values #3085 #3994 Thanks @ShawnCholeva
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
allowReselection
option to trigger onChange
events even when reselecting same valueminCharacters
which sets the minimum number of characters required to start filtering results #3886
depends
validation rule setting which will only validate a field if another specified field is not emptyboundary
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 popupobserveChanges
, 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.onLabelUpdate
callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditionsfireOnInit
for rating, which defaults to false
. When set to true onRate
will fire when rating is initialized #3712
selectFirstResult
, which defaults to false
. Will automatically highlight first result on searchshowNoResults
setting for determining whether no results messages should be shownwidth
, can use next
or initial
to specify whether it should use old or new side sizecacheType
, 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
deactivate
, defaults to siblings
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.onFixed
and onUnfixed
callbacks for visibility type: 'fixed'
onLoad
and onAllLoaded
callback for type: 'image'
visibilityzIndex
setting for specifying zindex with type: 'fixed'
#3370
New Behaviors
restore placeholder text
transition 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 40px 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-child
definition 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. #3660
cache: 'local'
would not return the localstorage cached results in some caseshorizontal divider
#3585
forceSelection
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 @Sanjo
refresh
#3879 #3622 Thanks @mdehoog
search dropdown
could cause a form to be submitted #3676
on: 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
#3835
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. #3856 #3870
destroy
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) #3653
right icon
like right arrow icon
would have additional margin inside an icon button
#3525
disabled loading button
would not remove pointer-events
#2933
green inverted button
#3873
default 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 #3763
indeterminate
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 #3766
1px
offset for current text so that the blinking text position cursor does not overlap first pixel of underlayed text.search selection
#3789
<label>
#3917
action: '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 #3743
disabled
property #4010 Thanks @eymengunay!
API
setting is now disabled by defaultdestroy
removing previous settings #3798
equal width fields
sometimes not including right field spacing on mobile #3913
inline
field was not being correctly inverted in color with inverted form
#4004 #4005 Thanks @tbracken
fields
and field
would cause different margin collapse, making fields
include larger gaps between content #3717
size()
method in prompt
#3655 Thanks @SimonArdrey
centered
content would cause justified
content to appear aligned left. #3496
vertically 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 #3907
dropdown
or button on the left side of an action
input not properly roundingright floated
element precedes a top attached label
relaxed
and very relaxed
lists included unnecessary padding on the first and last items #3710
stackable
menu with left/right
menu
or item
would incorrectly be floated when stacked. #3604
tabular menu
now has correct bottom margin #4167
@dividerSize
was not being used in vertical menu
#3781
vertical 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 @bcroq
background-color
were not being correctly interpreted #3665 Thanks @larsbo
destroy
not properly removing events from dimmer #3200
instanceof SVGGraphicsElement
caused error in IE11 #3043
onSuccess
, 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 #3730
onRate
when rating is initialized #3712
refresh
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. #3409
segments
to not clip border radius when only a single segment is includedtop attached message
has no border when attached to segment
#3619
tiny
large
etc inside a statistic group #3116
top attached steps
striped selectable
table would not correctly show hover color on striped rowstype: fixed
will now correctly remove all special classes and placeholder content on destroy
#3548
Changes
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. #3511
Minor 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. - #3466
response
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) - #3491
onUnplaceable
callback when element cannot be placee inside visible viewport #3388
Bug Fixes
loading form
#3122
1px
offset when attached segment
follows tabular menu
(max of 2 consecutive segments) #3479
sub header
used inside a header now correctly forces block
styling #3020
is visible
, is animating
, and is fluid
to always return true/false
and not the DOM element. #2781
onEnable
callback being defined with name onEnabled
and onDisable
with onDisabled
in default settings, causing an error. To preserve backwards compatibility, the mispelled callback name has been left, but the bug has been fixed. #3148
very thin
sidebar to not work #3300
transform
rules on child elements, this was causing layout issues in some cases (for example dropdowns in sidebars) #3306
noAnimation
error to more reasonably announce that the element is "not in the DOM" #3040
Bug 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 @mdehoog
onLabelRemove
callback that allows value removal to be cancelled by callback Thanks @goloveychuk
selectable
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 @mdehoog
opacity: 0
#3167 Thanks @mdehoog
selection 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 @listepo
decimal
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 @mdehoog
display: block
#3020movePopup: false
#3213 Thanks @parisholley
svg
elements #3043reset
will now reset value
to 0, so increment starts again at 0onSearchQuery
not firing when results are cached Thanks @mnquintana
url
parameter not working correctly due to typo in source Thanks @fabienb4
horizontal segment
when they are :first-child
inside segments
group
Docs Bugs
Critical Bugfixes
site.variables
would cause build to fail #3009 #3010
Enhancements
// 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}
#3001
Bugfixes
ui list
used inside ui message
now aligns properly in all conditions #2958
error 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 #2959
right menu
was not floating correctly inside a menu > container
on mobile #2969
right labeled icon button
with a right
named icon (for example right arrow
) having incorrect margin on icon. #2973
Bugfixes
?=
appearing before parameters instead of ?
#2956 Thanks @AgentShark
ui icon input
inside forms were not correct width #2953
action input
now correctly show focused border on button side, and avoids duplicating bordersMore zero-day bug fixes.
Bugfix
onSuccess
so as to not break backwards compatibility. #2945 #2944Bugfix
2.0.7
in dist/