Semantic is a UI component framework based around useful principles from natural language.
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 @gimco
Examples
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.Note
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 #6512
gulp-util to replace-ext Thanks @stevelacy #6322
Bug Fixes
clearable dropdown now works with dropdown that arent on:click, like hover or manual triggers. #6594
fullscreen modal having incorrect left offset with flex modals #6587
destroy
very 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 #2072
useFlex 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. #6449
basic label were appearing incorrectly Thanks @lasley / @ColinFrick #6582 #6440
left menu inside ui menu would display horizontally as flex #6359
Bugs
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 #6555
uk alias for united kingdom Thanks @PhilipGarnero #6531
disk outline icon alias #6556
content would not take up 100% width when used alongside img or icon
labeled icon menu #6557
@mobileTopAlignedMargin theming variable was not implementedblurring after undimming, to prevent issues with position: fixed #6520
Minor 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. Previous names can still be used, however it is recommended to migrate to new names for compatibility with transition.linkedin in is now linkedin alternate
zoom in is now zoom-in
zoom out is now zoom-out
sign in is now sign-in
sign out is now sign-out
log out is now logout
in cart is now in-cart
Enhancements
inverted and inverted basic variations for primary and secondary buttons Thanks @hammy2899 #6242
Theming
hover down active and focus variables for @invertedPrimaryColor and @invertedSecondaryColor
Bugs
apiSettings with a url that returns valid response but with no results when clicking directly on the dropdown icon. Thanks @vpeti #5231 #5809
:last-child
basic label does not use @basicBackground variables Thanks @levithomson
wechat icon not displaying due to typo Thanks @alex-karo #6429
A 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. #6123
fullTextSearch: 'exact' returning duplicate results @Thanks @prudho #6223 #6221
centered and bordered icons appearing incorrectly with FA5 Thanks @w96k #6192
2.3.0 Thanks hammy2899 #6181 #6175 #6176 #6174 #6175
link icon were appearing incorrectly due to changes in icons #6180
Enhancements
Bugs
onChange missing text from callback when dropdown is set to action: 'select' Thanks @martinduparc #4183 #4510
@importSolidIcons, importRegularIcons and @importBrandIcons variables Thanks hammy2899
fitted icon to fix compatibility with other components #6125
onScreen 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. #6227
ui images #6224
whitespace: nowrap; applying to content inside slide reveal and move reveal
Major 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 #6167
exact 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 #3396
onChanging callback for accordion that occurs before animation in both directions Thanks @GammeGames #5892
Tiny Enhancements
arrowBackground now inherits from background #6059 Thanks @devsli
headerFontWeight
Bugs
autofocus setting now checks to see if currently focused element is in modal, avoiding issues where focus could be set in onVisible or onShow
big and huge sizes being swapped in menu Thanks @jeremy091 #5902 #5899
tbody Thanks @Mlukman #4458
content specified in settings before title attribute #4614 Thanks @aaronbhansen
on: 'change' would still show validation prompts on blur when using inline: true #4423 Thanks @avalanche1
inverted dimmer with content having wrong text color Thanks @rijk #4631
ui 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 #6043
allowMultiple: true and a second modal that is larger than the screen height. #2423
Enhancements
ribbon label can now work with reveal #5681
ignoreCase (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 #5749
Bugs
toggle checkbox box shadow was missing Thanks @banandrew #5096
context setting due to an incorrect offset calculation. Thanks @dannyBies #5974 #5366
contain and doesntContain rules were swapped. Thanks @xiongyu-git #5530
bottomPassed 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 #5085
inverted menu rules would cause popup inside a menu to have incorrect link styling in link list Thanks @banandrew #5585 #5603
Build Tools
gulp-clone was only set to use > 1.0 causing issues with gulp builds due to upstream error #6067
Hotfix (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 docs
Critical Bugs (3)
dropdown inside ui menu to always appear on left edge of dropdown introduced 2.2.11 #5542
popup in 2.2.11 that caused popups to appear out of place in some cases due to incorrect calculation of offsetParent #5549 #5597 #5590
GulpUglifyError: 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 #3744
allowMultiple: true is used #5559