## RELEASE NOTES ### Version 2.0.0 - March xx, 2015 **New UI / Major Changes** - **API** - API can now be used without `$.ajax`. `mockResponse` can be used to resolve request with a local function that receives the same function as the server. `mockResponseAsync` allows you to specify to return server response from a custom async callback. - **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 component has been added for multi-select - **Search 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. - **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 `vertical tabular menu` is now available - **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 - **Dropdown** - Nested scrolling menus can now use keyboard selection and filter with inline search. Nested menu scroll position will automatically adjust with keyboard selection. - **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` - **Shapes** - Shapes now animate height/width when side changes sizes and now correctly adjusts for margin on shape elements **Major Changes** - **Colors** - Global colors defaults have been adjusted to improve contrast with white text - **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 to reduce redundant code and 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` - **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 **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** - 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** - 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`) - **Form** - Added placeholder color rules for IE, `ms-input-placeholder` - **Form** - Fix `errored field` dropdown keyboard selection color - **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` - **Label** - Labels now have `active` and `active hover` states - **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` - **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. - **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 with `search selection` not changing text when reselecting same value from list - **Dropdown** - Dropdown `menu` now use same font size as dropdown - **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 - **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** - `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. - **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` - **Search** - Slightly adjusted search result theme for clarity - **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. ### 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 ``