## RELEASE NOTES ### Version 2.0.0 - March xx, 2015 -**Migration Guide** - **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. - **Grid** - `page grid` have been modified to have fixed widths. Fluid grid gutters make it very difficult to style responsive page content because they continuously adjust with the browser. Moving forward we will be recommending using `ui container` a fixed width container for holding page contents. - **Form Validation** - Form validation now passes settings through a `fields` object, the previous syntax will continue to work but produce deprecation notices in console **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](http://www.semantic-ui.com/elements/container.html#examples) - **Multiselect** - New dropdown types has been added for multi-select, including tagging/tokenizing features - **Headers** - Added new header type `sub header`, useful for displaying small headers alongside text content. See examples [in the header docs](http://www.semantic-ui.com/elements/header.html#sub-headers) - **Menu** - New UI `vertical tabular menu` is now available with `menu` - **Modal** - Add new settings `blurring` and `inverted` which are simple shortcuts for setting modal's dimmer to use either blurring or inverted variations. - **Dropdown** - Added new dropdown variation `scrolling dropdown` and `scrolling menu`, see docs or try it out with the language menu in the navigation bar - **Image** - Images now include a `spaced` variation for adding whitespace around images when used inline with text. - **Dimmer** - Dimmers now have a `blurring` variation which apply a glass-like effect when dimmed - **Popup** - Popups now default as `exclusive: false` and will not hide other popups when opening - **Steps** - Steps can now be attached to other UI like `segment` **Major Changes** - **API** - API can now be used with custom XHR backends. `mockResponse` can be used to resolve request with a local function that receives the same settings as the server. `mockResponseAsync` allows you to specify to server response from a custom async callback. - **Colors** - Global colors defaults have been adjusted to improve contrast with white text - **Dropdown** - Nested scrolling menus can now use keyboard selection and filter with inline search. Nested menu scroll position will automatically adjust with keyboard selection. - **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. - **Grid** - Grids are now based on `flexbox`, columns are now `equal height` by default. Flexbox alignment has 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](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) have been removed. This means any element can be a direct child of `grid` or `menu`. - **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 - **Transition** - Fallback javascript animations have been removed from some UI components like dropdown and popup to reduce redundant code, increase performance (can remove `:visible`, and `:hidden` checks) and reduce filesizes. - **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 several validation for multiple - **Item** - Item now uses `flexbox` for layout - **Message** - `icon message` now uses `flexbox` - **Input** - All `input` types use `flexbox` - **Shapes** - Shapes now animate height/width when side changes sizes and now correctly adjusts for margin on shape elements - **Steps** - Steps now use `flexbox`, the default horizontal theme has the active element point downward now instead of to the right. Steps no longer need `item count` and will automatically divide evenly - **Transition** - Transition has been optimized to be more performant. **Enhancements** - **Accordion** - adds `onOpening` and `onClosing` callback (before animation) to go with `onOpen`, `onClose` (after animation) **Thanks @cluppric** - **API** - API callbacks now have an `onResponse` callback that can modified a server response before it is parsed by other callbacks for success or failure conditions. **Thanks @mnquintana** - **Accordion** - Added `on` setting for accordion trigger event - **Build Tools** - Build tools will now produce understandable errors when a theme file is missing or an element specifies an unavailable theme - **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less` - **Divider** - `vertical divider` inside `ui grid` now accounts for column padding - **Dropdown** - Using keyboard letter when any type of selection dropdown is used will - **Dropdown** - Dropdowns now have `match` setting to specify whether to match on `text`, `value` or `both` - **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions - **Dropdown** - Multi select dropdowns now have new settings for specifying maximum selection count - **Dropdown** - Dropdown has new `placeholder` setting for setting placeholder text in javascript - **Dropdown** - Added `showOnFocus` option that lets you specify whether dropdown menu should show on focus - **Dropdown** - `fullTextSearch: true` now uses fuzzy search (same as `ui search`) - **Dropdown** - Page down and page up now works with dropdown menus - **Form** - Added placeholder color rules for IE, `ms-input-placeholder` - **Form** - Fix `errored field` dropdown keyboard selection color - **Form Validation** - Added `different[field]` rule which requires a field to be different than another field - **Form Validation** - `data-validate` now takes precedence over other validation matching schemes like `name` or `id` - **Form Validation** - New rules for matching against custom regular expressions - **Form Validation** - Form validation now has `minCount`, `maxCount`, and `exactCount` for validating multiple selections - **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation - **Grid** - `equal width` now works without `row` wrappers - **Grid** - rows can now be `stretched` as well as `middle aligned`, `bottom aligned` and `top aligned`! - **Input** - Added placeholder color rules for IE, `ms-input-placeholder` - **Input** - Action input now supports multiple buttons, and dropdown - **Label** - Labels now have `active` and `active hover` states - **Label** - Label now sets an `img` height even when not using an `image label` - **Menu** - Added `stackable` menu variation for simple responsive menus - **Menu** - Added many new variables to menu - **Menu** - Fixed several inheritance issues for `dropdown item` inside `menu` appearing as `menu item`. - **Menu** - Horizontal menus now set a default image size for images / logos - **Menu** - Menus items are now slightly more padded - **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`. Dropdown styles can be themed specifically inside `menu`. - **Menu** - Vertical dropdown menus are no longer 100% `min-width` - **Modal** - Modal `onApprove` and `onDeny` now receive the activating element as the first parameter. Added documentation about using `return false` to avoid hiding element on click. - **Modal** - Modal content now uses flex, image content now requires `image content` class on parent to allow for flex stylings. - **Popup** - Added more size variations for popup `mini`, `tiny` - **Progress** - `indicating` labels now are more legible use separate css variables from `indicating` bar color - **Reveal** - Added new `active` state that allows you to show `reveal` programatically - **Search** - Cache can now be cleared using `$('.search').search('clear cache')` - **Segment** - Added `padded` and `very padded` segment variations - **Search** - Search now operates off a unique id generated by result position to retrieve results. For example category #1's first result is 'A1' . Previously result titles were used as their "id", which could cause issues with duplicate titles, or results that do not contain a title. - **Sidebar** - Improved animation performance through performance debugging. Sidebar now caches, width, height, rtl direction on load. - **Site** - Added in `pageOverflowX` variable, default theme hides horizontal scrollbars on `body` - **Sticky** - Sticky now internally caches current scroll position when `cantFit = true` to avoid getting DOM property on scroll. - **Statistic** - Added new evenly divided group variation, for example `three statistics` shows 3 per row - **Statistic** - Statitic group now use `flex`. Styles have been updated. - **Tabs* - Added `parseScripts` option, defaults to `once` parsing inline scripts only first load - **Table** - Added `vertical alignment` variations to `ui table` - **Visibility/Sticky** - Visibility and sticky now refresh automatically after page content loading to deal with changes in position from images loading - **Visibility/Sticky** - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events **Bugs** - **All Modules** - Performance logging now delays 500ms instead of 100ms for console logging to ensure all logs are captured in one group - **All Modules/Transition** - Transitions no longer use `rotateZ(0deg)` to trigger GPU display of visible state. This causes issues with `transform` creating new stacking context that can disrupt `z-index`. - **Accordion** - Fixed bug where `exclusive: true` could sometimes cause other accordion element animations to get stuck when animating rapidly - **Card** - IE11 now can correctly use `flexbox` cards **THanks @Widcket** - **Checkbox** - Fix `disabled checkbox` sometimes displaying hand cursor - **Checkbox** - Fixes nested `dropdown` inside `checkbox` causing issues - **Divider** - Hidden divider now correctly hides vertical dividers - **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu` - **Dropdown** - Fixes `onChange` to fire when input value changes, not just when menu UI changes - **Dropdown** - Dropdowns with `transition: none` now work correctly. - **Dropdown** - Fixed issue where `sortSelect` was relying on object key enumeration order which is browser dependent and unreliable. It now uses a sort function which functions the same in all browsers - **Dropdown** - Fixed issue with `search selection` not changing text when reselecting same value from list - **Dropdown** - Dropdown `menu` now use same font size as dropdown - **Dropdown** - Fixed `inline dropdown` icon not aligning with content - **Dropdown** - Fixed behaviors called on `` change - **Form/Input** - `ui labeled input` inside `form` will no longer escape column width. `ui fluid input` will now use input widths shorter than browser default. - **Grid** - Fix `doubling row` not working correctly inside a different `doubling grid` (css spec issue) - **Grid** - Fix `doubling grid` incorrectly applying width to `(x) column row` - **Grid** - First column on `stackable grid` no longer receives top margin - **Grid** - `x column wide` inside `equal width/height` now cannot grow beyond column size - **Grid** - Fixes colored grid columns not appearing when not nested in rows - **Icon** - Fixes `ascending` and `descending` icon being swapped - **Icon** - Fixes phone icon only appearing as alias `call` - **Input** - Fixed improper left padding on `transparent left icon input` **Thanks @zxfwinder** - **Input** - Fixed `placeholder` color not changing correctly on focus **Thanks @zxfwinder** - **Label** - Labels inside `header` now vertical align better by accounting for line height offset - **List** - Fixes numbers not appearing when using `inverted ordered list` **Thanks @pcj** - **List** - `a` elements inside a `ui list` will no longer apply styles on `ui` elements like `button` **Thanks @ahtinurme** - **List** - Bullets and numbers are no longer selectable in `bulleted list` and `ordered list` - **List** - Fixed `inverted bulleted list` bullet color - **List** - Fix first element touches border on `ui horizontal celled list` - **Loader** - Fix position of `inline centered loader` to be centered correctly - **Message** - Message now uses `@lineHeight` from `site.variables` - **Modal** - Modal no longer hides page scroll bar causing dimmed page content to jump positions. - **Modal** - Fixed bug where clicking an element detached from dom would cause modal to hide prematurely - **Modal** - Clicking on other modals will no longer close open modal when `allowMultiple: true` - **Modal** - Fixed `scrolling` class not being removed after opening a normal modal after a `scrolling` modal. - **Message** - Updated all message colors for legibility - **Menu** - Fixes divider appears on last element of `(x) item menu` - **Menu** - Menu now has a `min-height` that matches standard item padding - **Modal** - `scrollable modal` now correctly adds padding below modal - **Modal** - Modal with `detachable: false` inside `ui sidebar` `pusher` element will now show correctly - **Popup** - Fixes issue with `min-width` in firefox exceeding `max-width` causing element to not wrap correctly - **Popup** - Popup will now produce an error message and not mistakenly appear in the top left corner of page, if called with a `popup` or `target` that does not exist. - **Popup** - Popup will no longer appear incorrectly if the targeted element is not visible on page - **Popup** - Fixed bug which could cause pre-existing inline popup to be removed from DOM after hiding - **Reveal** - Removed `masked` reveal, all reveals are masked by default - **Search** - Search will no longer incorrectly produce an error when API settings are passed through metadata - **Sidebar** - Top/Bottom sidebar will now show scroll bars correctly when taller than 100% page height - **Sidebar** - Fixed bug where having a `style[title]` in page causing page not to be pushed correctly - **Sidebar** - Last menu item now has a border when sidebar and menu are used together - **Search** - Fixed `onSelect` not returning the correct value when using `type: category` - **Search** - Fixed `onSelect` returning the first term that matches the beginining of the selected value not the exact value. - **Search** - `searchFields` setting now correctly replaces default fields instead of adding the user fields to defaults - **Search** - Search API calls now use the same level debug settings as search - **Steps** - Fixes bug where `ordered steps` had smaller numbers in `IE10` - **Steps** - Fixed bug where `stackable steps` were not working correctly - **Sticky** - Fix issue with sticky content scroll css transition causing element to scroll too slowly when cannot fit on screen. - **Sticky** - Fixed issue with sticky content animating width on display in some cases. - **Tab** - Tab name is no longer case sensitive - **Table** - Fixes `ascending` and `descending` icons were reversed in table - **Table** - `very basic table` now works together with `padded table` - **Table** - Fix inheritance of text alignment and vertical alignment - **Transition** - Fixed bug where transition could sometimes not occur when an element was determined to always be hidden **Changes** - **All Modules** - All modules now default to `verbose: false` - **Accordion** - Accordion no longer sets a `font-size` to better couple with other components defaults - **Button** - Button focus color now uses hoverColor background instead of blue box shadow - **Breadcrumb** - Increased `divider` spacing to add more whitespace - **Card** - Card styles have been adjusted, `link card` now raise to show selection. Colored variations now have shadows. - **Checkbox** - Toggle now uses `@primaryColor` - **Dropdown** - Dropdown padding values now resolve to exact pixel values from em - **Feed** - Removed `extra text` pointer border - **Form** - `set value` no longer automatically calls `validate form` - **Grid** - Small computer `page grid` gutters have been adjusted from 8% to 3% to allow for roomier layouts on small screens. - **Grid** - `center aligned` no longer centers rows, just text. Use `centered grid` to center a grid column on the page. - **Header/Table/Divider** - These components now pull border color defaults from `site.variables` instead of using their own values - **Image** - `mini image` default width has been increased to `35px` - **Item** - item `description` now longer sets a `max-width` - **Icon** - `disabled icon` now have `pointer-events` again. - **Label** - Label size now varies by type. `pointing label` are now `1em` by default. - **Label** - Padding on `corner label` has been increased - **Input** - Input now use `em` instead of `rem` so they will inherit the size of the elements they are nested inside - **Progress* - Update contrast on `indicating`, update default styles. Fixed some examples - **Menu** - Menu now uses `border` for borders instead of `box-shadow` - **Menu** - `secondary pointing menu` has had some slight design tweaks, thinner lines, more padding - **Menu** - Active sub-menu items are now `bold` - **Menu** - Menus no longer have additional borders on `active item` in the default theme - **Menu** - `tiered menu` has been removed - **Menu** - Increased contrast on `inverted` menu selection for legibility - **Modal** - Modals now used fixed widths and not percentage widths. Widths might be slightly different. - **Modal** - Modal no longer observes DOM changes by default, added setting to enable - **Message** - Slightly increases `box-shadow` - **Popup** - Popup no longer produces an error when a position cannot be found on the page. - **Segment** - **Clearfix** has been removed from `ui segment` - **Sidebar** - Sidebar now defaults to `useLegacy: false` to avoid the overhead of feature detection for most users - **Search** - Slightly adjusted search result theme for clarity - **Statistic** - Statistic label styles have been updated - **Site** - Increase contrast on default hovered/down colors for colored variations - **Site** - Page background is now `#FFFFFF` by default instead of an offwhite `#F7F7F7` - **Site** - Adjusted global line height to the closest even pixel value - **Table** - Horizontal cell padding has been slightly reduced, and cell borders are slightly lighter. - **Transition - Transition no longer checks for vendor prefixed `animation-name` css property. This was introduced in jQuery `1.8` ### Version 1.12.0 - April 13, 2015 **Enhancements** - **Visibility** - Adds updated visibility module from `2.x` channel. Visibility will automatically refresh by default after images load on page refresh. Fixes issues with element positions after image loading. - **Sticky** - Adds sticky module from `2.x` branch. Sticky elements now use pub/sub with drastically improved performance. Sticky elements that do not fit on page will now scroll at the same speed as the page is scrolled instead of slower. **Changes** - **Popup** - Popup no longer produces a console error when it cannot find an adequate position in the browser viewport. **Bugs** - **Build Tools** - Fixes issue with component glob matching twice (causing build to include file twice) if duplicate values found in `semantic.json` component. - **Input** - Backports fix from `2.x` for `ui fluid input` not appearing correctly. - **Visibility** - Fixed issue where `precache` behavior was missing from visibility causing `image` lazy loading to fail ### Version 1.11.8 - April 13, 2015 **Bugs** - **Build Tools** - Fixed `npm install` without `semantic.json` to merge changes with site theme and packaged themes in a similar fashion to `npm update` - **Build** - `gulp build` now properly warns against missing `semantic.json` **Thanks @rudyrk** ### Version 1.11.7 - April 13, 2015 **Bugs** - **Sticky** - Fixes errant `console.log` statement appearing in source - **Card** - Fixes card `flex` display issues in IE - **Build Tools** - Fixes issue where `npm update` install scripts would remove custom themes from `src/themes/` during copy after updating Semantic UI ### Version 1.11.6 - March 27, 2015 More critical bug backports from `2.x` branch, as well as fixes for browserify **Bugs** - **Menu/Dropdown** - Fix dropdown headers disappearing inside menus - **Dropdown** - Fix unescaped character in css property causing css validation errors - **Form** - Fix `grouped required` fields display issues **Thanks @palmsey** - **All UI** - Fix `index.js` npm build to work with browserify in individual component repos **Thanks @sdimit** - **LESS Repo** - Add missing `semantic.less` file to less repo for importing components ### Version 1.11.5 - March 23, 2015 This version backports several bugs that were being packed in `2.0` to `1.x`. 2.0 will be coming in the next 1-2 weeks. **Bugs** - **Build Tools** - Adjusting site.variables will now rebuild all UI, instead of just site.less - **Build Tools** - LESS will now throw errors correctly in `watch` - **Card** - Fixes dimmer background shorthand property causes transparent dimmer in minified version - **Dimmer** - Fixed `variation` setting not working correctly - **Dropdown** - `onChange` no longer fires when reselecting same value - **Dropdown** - Fix bug where element will not blur on tab key when search selection and no selection made - **Dropdown** - Dropdown init on `select` now returns `ui dropdown` created for chaining - **Dropdown** - Dropdown `focus` color has been adjusted to match forms more closely - **Dropdown** - Fixes IE10 scrollbar width in menu (calc was being precompiled in LESS) **Thanks @gabormeszoly** ### Version 1.11.3-4 - March 6, 2015 **Enhancements** - **Grid** - Added opt-in `stretched` variation for `equal height` instead of forcing `flex` on all `equal height columns` which may cause layout issues due to changes in rendering with `flexbox`. **Fixes** - **Build Tools** - Fix issues with minified CSS `@import` not being on top of minified semantic ui concatenated release due to [bug in clean-css](https://github.com/jakubpawlowicz/clean-css/issues/476) - **Grid** - Fixes `stackable` `equal height/width` grid to remove `flex` on mobile when stacking - **Grid** - Fixed `right/left/center aligned` to adjust `align-items` in flex containers like `equal height/width` ### Version 1.11.2 - March 6, 2015 **Enhancements** - **Accordion** - Accordion can now specify a trigger element instead of `title`, added an [example in docs](http://www.semantic-ui.com/modules/accordion.html#changing-trigger) - **Accordion** - Accordion can now hide while opening animation is still occuring - **Grid** - Equal width grids will now make column content stretch to full height, not just the column itself (requires flexbox). See examples [in the grid docs](http://www.semantic-ui.com/collections/grid.html#equal-height) - **Header** - Labels inside headers have been slightly increased in size - **Search** - Search now uses internally [fuzzy search](https://github.com/bevacqua/fuzzysearch) as its new full text search algorithm. **Important Fixes** - **Build Tools** - Fix issues with minified component CSS `@import` not always being on top of files due to [bug in clean-css](https://github.com/jakubpawlowicz/clean-css/issues/476) **Bugs** - **Accordion** - Removed mistaken extra `1px` top border on nested `styled accordion` - **Modal** - Fixes modal `buttons` on mobile devices to not have extra bottom padding. - **Card/Dimmer** - Fix dimmer z-index being too high when inside a `ui card`. Added variable for specifying default dimmer color inside card. - **Site** - `h1-h5` now have no top margin when `first-child` and no bottom margin when `last-child` - **Dropdown** - Fix issue in `setup reference` (added in `1.11.1`) where chaining would not return `ui dropdown` immediately after initialization ### Version 1.11.1 - March 5, 2015 **Enhancements** - **Dropdown** - Calling behaviors on a dropdown `select` will now automatically route them to the appropriate parent `ui dropdown` **Bugs** - **Grid** - Fix issue in `centered grid` not centering `column` inside `row` - **Dropdown** - Added select styles for elements before they are initialized instead of FOIC (Flash of invisible content) ### Version 1.11.0 - March 3, 2015 **New Components** - **Visibiliity** - Attach callbacks to elements visibility conditions like `top visible` `bottom visible`, `passing`. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics. [See the examples](http://www.semantic-ui.com/behaviors/visibility.html#/examples) online for a demonstration. **Enhancements** - **Menu** - Horizontal menus now use flexbox so they can resize automatically to content size. - **Form** - `` values after initialization, and will automatically update dropdown menu when changed - **Dropdown** - Dropdown behavior `set selected` will now also call `set value` automatically, so you do not have to invoke two behaviors to update a `selection dropdown` **Thanks @mktm** - **Form** - Form will now prevent browsers from resubmitting form repeatedly when keydown is pressed on input field. - **Header** - Content headers now inherit `@h1-h6` sizes from `site.variables` - **Header** - Sub headers now adjust in size depending on header size, added new variables for subheader resizing - **Search** - Greatly reduced search delay from `300ms` to `100ms`. Previous request will automatically abort `xhr` when new request made - **Search** - Search `onSelect` and `onResultsAdd` can now cancel default actions by returning `false`. - **Transition** - Transition duration now defaults to what is specified in `css`, to set custom duration you can still pass at run-time as a different value. Animation duration no longer set by default during animation. - **Transition** - Transition will now prevent repeated animations when using an inferred direction i.e. animation without `in` or `out` specified. When `queue: true` only animations with explicit direction, e.g. `fade in`, will be ignored when called repeatedly. **Bugs** - **API** - Fixed bug where `$.api('get xhr')` was not correctly returning xhr promise - **API** - Fixed bug where API would query resource immediately when specifying `on: false` - **Button** - ``ui vertical basic buttons` now have dividers in default theme - **Button** - Fixes formatting for `disabled button` inside `ui buttons` - **Checkbox** - Checkbox now only modifies `input[type="radio"]` and `input[type="checkbox"]` ignoring any other inputs - **Dropdown** - Dropdown no longer will not show menu when no `item` are present in menu. Dropdown will now only filter results for `ui search dropdown` #1632 **Thanks PSyton**. - **Dropdown** - Dropdown will now produce an error if behaviors on an initialized ``` elements will now preserve original ``