Skip to content

Releases: Semantic-Org/Semantic-UI

Version 2.1.0 - Sep 02, 2015

02 Sep 04:32
Compare
Choose a tag to compare

New UI Features

  • API - Added encodeParameters option to enable/disable parameters being encoded with encodeURIComponent #2752
  • API Added new setting hideError, defaults to auto (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 like divided and celled by device #2685
  • Icon - Added fitted icon variation, and new small sizes tiny and mini
  • 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 new tabular 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 with table-layout: fixed;. This also supports "..." ellipsis when used with single line content

Additional Features

  • 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 and get 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 support colored individual items Thanks @maturano #2850
  • Menu - text menu now uses padding for hitboxes to make target area for links larger

Community Added Features

  • Build Tools - gulp build now correctly calls callback, allowing those importing tasks to chain it correctly #2836 Thanks @artemkaint
  • Dropdown - Dropdown show and hide are now cancellable by returning false from onShow or onHide callbacks.
  • Flag - England flag alias is now correctly set #2770 Thanks @eduardom
  • Form Validation - Added number and decimal validations to form Thanks @tonnyorg #2537
  • Form Validation - Form onSuccess and onFailure 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

Reported Bugs

  • Accordion - Added missing notation for accordion docs #2812
  • Build Tools - Fixed bug where gulp version would show x.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 and active 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 being 100% + 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 inside ui 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 using action: '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 using clear and restore 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 for ui 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 to 0px width, especially when used inside an inline field [#2705 [#2621 #2821
  • Form - disabled field(s) now remove pointer-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, or success 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...
Read more

Version 2.0.8 - August 10, 2015

10 Aug 18:38
Compare
Choose a tag to compare

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

23 Jul 21:36
Compare
Choose a tag to compare

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.

Reported Bugs

  • API - Fixed some cases where onComplete, onSuccess and onFailure would receive XHR as first parameter and not response. #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 existing semantic.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

Merged PR

  • 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 of onHide when hiding popup
  • Popup - Popup on touchstart now occurs immediately without waiting for delay.show

Version 2.0.6 - July 22, 2015

22 Jul 15:46
Compare
Choose a tag to compare

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 returning length to functioning as "minimum length" and added a new rule exactLenght for matching exact length. #2681

Reported Bugs

  • 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 of set 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 an item 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 with maxSelections, and receives special UX considerations

Version 2.0.5 - July 20, 2015

20 Jul 22:32
Compare
Choose a tag to compare

Reported Bugs

  • 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 on keydown but cancel events correctly on keyup #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 using search inside menu to break when multiple #2666
  • Message - Fixed issues where icon would overlap in icon message when at mobile resolutions due to flex-collapse value being incorrect #2665

Additional Fixes

  • Dropdown - <select> dropdowns intialized without multiple property set on <select> will now produce an error to alert users selection will not be preserved correctly. Related #2573
  • Dropdown - Dropdown <option> added with userAddition now recieve class name addition 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

17 Jul 20:41
Compare
Choose a tag to compare

Reported Bugs

  • Build Tools - Fixed issue where sub tasks were undefined when importing SUI's build and watch tasks into custom gulpfile #2648
  • Button - Fixed fluid buttons not working correctly with <button> due to button tags not supporting flex 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 and doesntContainExactly #2638
  • Form - Fixed issue with minLength[1] validation not behaving same as minLength > 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 incorrect input border radius inside ui form #2638
  • Modal - Modal action now uses a more specific selector to prevent modifying comment action
  • Popup - fluid popup with setFluidWidth: true (default value), will now use parent width and not offsetContext 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, and bottom sidebar will not have their direction removed on destroy #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 called force 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 and very 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 using flex
  • Sticky - Fixed sticky content jumping from fixed to bount 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

10 Jul 18:33
Compare
Choose a tag to compare

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.

Reported Bugs

  • 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> and apiSettings 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 and square 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 to true 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 when module cache is cleared. #2469

Additional Bugs

  • Form - URL regexp will now match now works correctly, and matches against non http:// prefixed urls like www.google.com

Version 2.0.2 - July 7, 2015

07 Jul 21:45
Compare
Choose a tag to compare

Reported Bugs

  • 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

06 Jul 20:56
Compare
Choose a tag to compare

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 to centered 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 and inverted when destroy 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 to false
  • 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 using flex style incorrectly
  • Menu - Fixes border-top not appearing on bottom 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

01 Jul 03:31
Compare
Choose a tag to compare

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 because flex rules require parent styling that the previous table-row rules did not.
  • Modal - Modal will now only close on buttons matching deny or approve 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 using ui 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 other item content
  • Form - grouped inline field no longer display horizontally. Use inline field instead for horizontal inline field groups.
  • Input - pointer-events have been removed from icon in icon input unless a link 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 uses 1rem 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 of content-box. This means manually specified rail widths will now need to account for padding. This was added to fix issues where rail height: 100% would incorrectly match content when a rail had padding.
  • Menu - tiered menu has been removed in 2.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 and onTabLoad have been renamed to onFirstLoad and onLoad 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 callbacks onVisible and onRequest have been added as well.
  • Button - wide variations using numbers 2 wide, 3 wide have been removed due to incompatibilities with some build tools. Please use two wide, or three wide instead.
  • Video - The undocumented video module has been renamed to embed. 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 pass successTest function. onError and onAbort 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 and grey. 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 vs checked
  • 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 and scrolling 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 and page 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 using flex
  • Grid - Grids now use flexbox, columns are now all equal height by default. New flexbox alignment types like stretch 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 of grid or menu.
  • Modal - Added new settings blurring and inverted 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 and equal height by default, the equal 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 in console
  • 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 uses flexbox for layout
  • Menu - vertical tabular menu, a vertical tab menu, has been added
  • Input - All input types use flexbox 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 for document or body when using a sidebar. Chrome on iOS no longer has...
Read more