2.4.0 (2017-12-21)
- icons: dc-icon--spin makes any icon rotate in-place (#417) (4e21447), closes #350
- tab: add css selector (f21a071), closes #406
- tab: emphasis a tab header (3f9b3db)
- tab: make a styling of tab header (66125bb), closes #406
- tab: update documentation about tab header (a4deb92)
- tests: setup visual regression tests (55fa579)
- tests: allow running tests both with local changes and in release (a9a67cb)
- tests: set up LFS for storage of tests screenshots (c63d783)
- regression: run regression tests in CI on releases (8109843)
2.3.0 (2017-11-23)
- breadcrumbs: last part of the breadcrumb is kept aligned when there is a whitespace in text (#409) (94de59f), closes #403
- icons: link-icon alignment fixed, closes (#405)
2.2.0 (2017-10-18)
- demo: fix table breaking demo layout (#387) (07c0009), closes #374
- input: search input to have box-sizing of border-box (42f7a1f), closes #286
- dialog: set max-height for body and add scroll bar (ed9363f)
- icon: add link icon. closes #382 (9403151)
2.1.1 (2017-08-24)
- table: fix table responsive after 2.1.0 (3ec675b)
- text-input: add small modifier (89de7ea)
2.1.0 (2017-08-22)
- style: Standardize elements height to 2.4rem (6a54b3e), closes #323
- table: fix possible overlapping of sorters (46aa548)
-
breakpoints: use same breakpoints for media queries and grid classes (#360) (82eeb42), closes #239 #346 #347
-
breakpoints: variable names have been renamed
- $dc-large-width breakpoint variable renamed to $dc-medium-width
- $dc-huge-width breakpoint variable renamed to $dc-large-width
- $dc-giant-width breakpoint variable renamed to $dc-huge-width
- $dc-giant-width and $dc-monstrous-width are deprecated and not used anymore
- checkbox: makes the checkboxes accessible (f0990df)
- grid: Add utility classes to hide/show at different breakpoint sizes (a5a875b), closes #287
- grid: Improve functionality and demo (787c292)
- icons: Add bar-chart, line-chart, pointer icons (#356) (e863f1a)
- messages: Update design of messages. (2055e43), closes #329
- radio: makes the radio button accessible (b17b582)
- tab: add tab atom to the dress-code (0549bf5)
- tables: Make table responsiveness optional (#330) (ba80a3a), closes #222
- textarea: add styles for error state (d1cde40)
2.0.0 (2017-01-23)
- select: update height of sc-select--small to 22px, for consistency (dcd9555)
- search: remove native date field clear button (e33142a)
- divider: add secondary divider (42abadd)
- icons: add users icon, update help and user icons (7495021)
- select: add dc-select--small (492a508)
-
overlay: dc-dialog__overlay has been removed, use dc-overlay outside dc-dialog instead
Change your code from this:
<div class="dc-dialog"> <div class="dc-dialog__overlay"></div> ...
To this:
<div class="dc-overlay"></div> <div class="dc-dialog> ...
2.0.0-beta.1 (2016-12-08)
- accordion: remove triangle icon, use border hack instead (69fe37c)
- btn: fix blue text on icon button (97c554c)
- demo: Fix small code issues (71f4399)
- dialog: fix broken overlay in chrome in retina displays (507e0f5)
- overlay: fix linting error because of wrong import of overlay atom (2d72d30)
- select: align the select dropdown arrow to fixed pixels from right (3541bb2), closes #232
- select: remove top/bottom padding and use height instead to fix height issue for select (9553f99), closes #225
- tables: Fix lint issues (beb4c18)
- tables: table column in responsive mode to have a min height (7b9884d), closes #267
- tooltip: restore version of previous commit to bypass travis scss-lint issue (557c184)
- accordion: #233 add accordion atom (3e68564)
- cursors: Use pointer cursor for buttons, checkboxes and radios (a3cefe9), closes #255
- dc-label__sub: add dc-label__sub mixins and classes (028fade)
- demo: Improve demo descriptions and structure (c67daf9), closes #231
- demo: Remove https from webfont code example (83084e4)
- demo: Style links as dc-link (9adf2e2), closes #242
- demo: Various demo improvements (7d8b8a1)
- font-cache-busting: #203 add font cache busting by appending query string based on the package version (#230) (af985c4)
- guidelines: add date time and number formats. closes #248. closes #249. (dbbf875)
- guidelines: change order of guidelines in demo menu (8b3e753)
- guidelines: simplify number format by removing some examples. (d1e5c9b)
- guides: add number format. closes #249 (e9bba72)
- icons: Add minus icon (4d8e08b)
- icons: add triangle up and down icons (1364d08)
- icons: Add up and down icons (521465e)
- messages: Align colors of messages and toasts (2fd1a39), closes #250
- modernizr: Remove modernizr classes (a7a02dd)
- modernizr: Remove modernizr from demo. Close #141 (d397de9)
- overlay: add new dc-overlay atom (55d0048)
- page: Add dc-page and dc-container. Close #226. (4312620)
- pagination: add pagination molecule (b500223), closes #224
- release: add release scripts (f1b3f77)
- search: Add clear icon for search. (ca94228), closes #200
- select-error-state: #236 add error state to select atom (5d8783f)
- side-revealer: Add new molecule to give the ability to have main content and sub content in the side (bd08f6c)
- table: Add hover effect to sorter arrows (9e1faca)
- tables: Add hover effect and pointer cursor to th (a466782)
- tables: Add sortable header. (4dfd2e4), closes #223
- tables: Match sorter style used in production (ece85f4)
- typography: Improve typography demo (c71330e), closes #289
-
overlay: dc-dialog__overlay as internal part of dc-dialog has been deprecated and will be removed in the next version, use dc-overlay externally instead
Change your code from this:
<div class="dc-dialog"> <div class="dc-dialog__overlay"></div> ...
To this:
<div class="dc-overlay"></div> <div class="dc-dialog> ...
-
drop node 0.12.x support
2.0.0-beta (2016-06-23)
- block-grid: fix build error (1838e22)
- button: remove margin from dc-btn (b023f16), closes #210
- demo: fix a minor typo error in the icon section, fix some minor issues (ddd3121)
- demo: Fix extend bug in sg section scss (7792145)
- dialog: Fix padding of button zone (bc5b395), closes #217
- toast: Fix for toast showing black border when animating, fixes #191 (7287128), closes #191
- toast: Moving the border style property to mixins so as not to rely on class names (d11f5c9)
- toast: Removing animation properties as these have to be customised by apps using dress code (2c078ae)
- buttons: Add active button option (1971ba7), closes #196
- grid: Added dc-block-grid with examples (a867cb8)
- grid: Adding grid styles to dress code (dde9f18)
- grid: Adding offset classes with examples in the docs for the same (27affc4)
- grid: Adding styles and example for collpased (no gutter) columns (afd4f7e)
- grid: Adding the styles and mixins for the Grid (5cc2fe8), closes #80
- icons: Update left and right arrow icons. Close #206 (f60c6de), closes #206
- logo: Update Zalando logo and favicon (bff6dfe), closes #209
- search: Improve search images and actions (31920b8)
- search: Maintain aspect ratio of images in search (d4a048e), closes #201
- select: Add disabled and match height with other atoms. (e55046e), closes #187 #189
- table: Use lighter color for hover background (c7b7336)
-
button: dc-btn does not have margin-right now. Check your button alignments. Add a modifier class for buttons with right-margin if necessary
-
svg-icons: some svg-icons were renamed
msg-error.svg -> error.svg
info.svg -> info-circle.svg
msg-info.svg -> info.svg
msg-neutral.svg -> neutral.svg
msg-success.svg -> success.svg
msg-warning.svg -> warning.svg
2.0.0-alpha (2016-04-07)
- demo: Fix color chips in screen width ~50em (09bb52e)
- demo: Fix left-margin overflow display in demo. (77a28b7), closes #120
- lists: Closes #180 (5147c67), closes #180
- lists: move scrollable list item action icon to right side. Closes #170 (90614e4), closes #170
- select: hide native arrow on firefox #110 (ff8362d)
- toast: do not use modifier classes without block ones #110 (95d0d23)
- toast: Remove CSS timing in toast animation. (9d7ca71), closes #169
- btn-group: use composition to fix controversial BEM #110 (c4aaad0), closes #110
- btn, btn-group, input-group: use grouped modifiers in a more flexible way (1fbd15c)
- dialog: fix controversial BEM by using composition #110 (8bb002c), closes #110
- input-groups: use composition to fix controversial BEM #110 (740c46e), closes #110
- messages: fix controversial BEM by using composition #110 (a32dac7), closes #110
- patterns: change names to be consistent with typography modifiers #110 (1a87c8a)
- patterns: use one naming conventions for patterns, introduce BC, close #172 (6d8f62f), closes #172
- search-form: use composition to fix controversial BEM #110 (80cebb3), closes #110
- toast: fix controversial BEM by using composition #110 (da6d3fe), closes #110
- dc-table: add dc-table__tr--interactive, refactor dc-table, see #110, add $dc-image-path (fe3288f)
- tooltip: add dc--has-tooltip enhanced version based on hint.css, close #157 (82a03b9), closes #157
-
patterns: patterns have been renamed from
dc-is-xxx
todc--is-xxx
-
tooltip:
dc-tooltip
and its sub-elements were removed.dc-has-tooltip
was renamed todc--has-tooltip
. A positioning class must be always applied.Replace this:
<button class="dc-btn dc-has-tooltip" data-dc-has-tooltip="Tooltip content">Button label<button>
With this:
<button class="dc-btn dc--has-tooltip dc--has-tooltip-top-right" data-dc-has-tooltip="Tooltip content"> Button label <button>
-
dc-table:
dc-table--spacious
,dc-table--comfortable
, etc. were removed in favor ofdc-table__tr--spacious
,dc-table__tr--comfortable
, etc. -
btn, btn-group, input-group:
dc-btn--grouped
modifier becomes a partial_dc-btn--grouped
which is extended in every molecule that uses it, for instancedc-btn--in-input-group
ordc-btn--in-btn-group
.dc-input-group__input
becomesdc-input--in-input-group
.Change your code from this:
<div class="dc-input-group"> <span class="dc-input-addon">User</span> <input class="dc-input dc-input-group__input"/> <a class="dc-btn dc-btn--grouped dc-btn--primary">Add</a> </div>
To this:
<div class="dc-input-group"> <span class="dc-input-addon">User</span> <input class="dc-input dc-input--in-input-group"/> <a class="dc-btn dc-btn--in-input-group dc-btn--primary">Add</a> </div>
-
messages: some classes were renamed
dc-icon--msg-success
has been renamed todc-icon--success
dc-icon--msg-info
has been renamed todc-icon--info
dc-icon--msg-error
has been renamed todc-icon--error
dc-icon--msg-warning
has been renamed todc-icon--warning
-
patterns: some patterns classes/mixins were removed, move patterns from typography to patterns file.
-
replace
dc-text--truncate
withdc--text-truncate
-
replace
dc-text--less-important
withdc--text-less-important
-
replace
dc-text--small
withdc--text-small
-
replace
dc-text--<error|success|center|left|right>
withdc--text-<error|success|center|left|right>
-
dc-collapse-bd
mixin and selectors were removed -
replace
dc-no-wrap
withdc--no-wrap
,dc-no-wrap-selectors
mixin was removed -
search-form: introduced
dc-search-form__btn__icon
anddc-suggest__item__img-frame
Change your code from this: ```html <div class="dc-search-form"> <input class="dc-input dc-search-form__input" type="search" placeholder="Search..."> <button class="dc-btn dc-search-form__btn"> <svg class="dc-svg dc-icon--interactive"> ............ </button> <ul class="dc-list dc-suggest"> <li class="dc-suggest__item dc-link"> <div class="dc-suggest__item__img"> <img src="....."> </div> <span class="dc-suggest__item__label">.....</span> </li> </ul> </div> ``` To this: ```html <div class="dc-search-form"> <input class="dc-input dc-search-form__input" type="search" placeholder="Search..."> <button class="dc-btn dc-search-form__btn"> <svg class="dc-svg dc-search-form__btn__icon dc-icon--interactive"> ............ </button> <ul class="dc-list dc-suggest"> <li class="dc-suggest__item dc-link"> <div class="dc-suggest__item__img-frame"> <img class="dc-suggest__item__img" src="....."> </div> <span class="dc-suggest__item__label">.....</span> </li> </ul> </div> ```
-
dialog: introduced
dc-dialog__actions__link
anddc-dialog__close__icon
-
input-groups: input-groups now use
dc-btn--grouped
instead ofdc-input-group__button
(which has been deleted) and must explicitly specify input class asdc-input-group__input
Change your code from this:
<div class="dc-input-group"> <span class="dc-input-addon">User</span> <input class="dc-input" type="text"/> <a class="dc-btn dc-input-group__btn dc-btn--primary">Add</a> </div>
To this:
<div class="dc-input-group"> <span class="dc-input-addon">User</span> <input class="dc-input dc-input-group__input"/> <a class="dc-btn dc-btn--grouped dc-btn--primary">Add</a> </div>
-
btn-group: introduced dc-btn--grouped and dc-btn-group--in-row
Change your code from this:
<div class="dc-btn-group-row"> <div class="dc-btn-group"> <button class="dc-btn dc-btn--primary">Primary</button>
To this:
<div class="dc-btn-group-row"> <div class="dc-btn-group dc-btn-group--in-row"> <button class="dc-btn dc-btn--grouped dc-btn--primary">Primary</button>
-
toast: toast animation duration was removed, you have to provide the duration.
-
toast: toast and toast container have no default position anymore, either top or bottom has to be explicitly specified using the specific class names.
Replace this code:
<div class="dc-toast-container"> <div class="dc-toast"> <div class="dc-toast__content dc-toast__content--info">
With this:
<div class="dc-toast-container--top"> <div class="dc-toast--top"> <div class="dc-toast__content dc-toast__content--info">
1.4.0-alpha (2016-04-01)
- demo-dialog: fix dialog preview, broken after IE fix pull request was merged, see #156 (d25757d), closes #156
- icons: Fix icon font for IE. Close #98 (0f9a7c2), closes #98
- inputs: Fix input groups for IE. Close #101 (15035ba), closes #101
- select: Fix select for IE. Close #99 (af36277), closes #99
- table: Fix table for IE. Close #100 (4b2eeeb), closes #100
- tooltip: Fix tooltip for IE. Close #102 (0a5943c), closes #102
- icons: Match svg-icons to font-icons. Move svg-icons to subfolder. Close #128 (95689ea), closes #128
- typography: solve #140, remove .dc-html .dc-body classes, apply style directly on html and body because they are in any case required. (bb80424)
- breadcrumbs: Add breadcrumbs molecule (e74ef87), closes #162
- button-link: add button link and button link with icon #137 (b84496c)
- button-link: update button link destroy and disabled behavior, remove success link #137 (7f63c69)
- icons: add contact font icon (5d71e0b)
- lists: closes #163. add simple and interactive scrollable lists (d10a8e6), closes #163
- table: Add compatibility btwn table and atoms. Close #90 (9dd23da), closes #90
-
icons: Rich SVG icons have been moved from /img to /img/svg-icons
-
lists: .dc-list--is-reset is now .dc-list
Use .dc-list instead of .dc-list--is-reset Use .dc-list--is-unordered or .dc-list--is-ordered for unordered and ordered lists
-
button-link: dc-link--success was removed.
-
table: Removed bottom-margin in buttons, checkboxes and radios. Check your layouts and reinsert margins manually as needed.
-
typography: .dc-html and .dc-body classes were removed.
If you @include dc-typography-selectors (already included when import dress-code and @include dc-everything) you don't need anymore to use dc-html and dc-body classes, style is already applied to html and body.
1.3.0-alpha (2016-03-21)
- icons: Add drag icon (7fb66a1)
1.2.2-alpha (2016-03-16)
- css-dist: restore missing css dist (af69f08)
1.2.1-alpha (2016-03-16)
- npm/bower: publish bower and npm package. You should be able to install the package with
npm install dress-code
orbower install dress-code
1.2.0-alpha (2016-03-14)
- npm: add npm3 support
- button-icon: add the possibility to put the icon inside a button at the right or at the left of text.
- dialog: change dc-dialog overlay mixin name to be consistent with the global selector on (7c2e8d6)
- dialog: make dialog scrollable when hovering outside of it #142 (9d99b44)
-
bower: the specific bower version will not be updated anymore and after a deprecation period will be removed. In your bower.json, replace
https://github.com/zalando/dress-code-bower.git
withhttps://github.com/zalando/dress-code.git
.
When using minified/built artifacts replace this<link href="bower_components/dress-code/css/dress-code.css" rel="stylesheets" />
with<link href="bower_components/dress-code/dist/css/dress-code.css" rel="stylesheets" />
.
When including dress-code with sass replace this@import bower_components/dress-code/sass/dress-code
with@import bower_components/dress-code/dist/sass/dress-code
. -
button-icon: an icon placed in a button with text now require also positioning modifiers:
dc-icon--btn--right
ordc-icon--btn-left
-
breakpoint-sass: to use the sass version you have to include breakpoint-sass plugin before dress-code is loaded. see #129.
1.1.1-alpha (2016-02-18)
- bower.json: fix extra comma in bower.json, we should somehow test this before building (325a183)
1.1.0-alpha (2016-02-18)
- demo: Fix typo in demo (c00dd59)
- dialog: Fix bgcolor of dialog actions area (f929142)
- icons: Fix header icons (5304fd6)
- dialog: style has been changed from a markup which used to look like this: (f929142)
<div class="dc-dialog__overlay">
<div class="dc-dialog">
<div class="dc-dialog__body">
...
</div>
<div class="dc-dialog__actions">
...
</div>
</div>
</div>
to a new more logical one which looks like this:
<div class="dc-dialog">
<div class="dc-dialog__overlay">
<div class="dc-dialog__content">
<div class="dc-dialog__body">
...
</div>
<div class="dc-dialog__actions">
...
</div>
</div>
</div>
</div>
1.0.1-alpha (2016-02-16)
- patterns: fix missing patterns classes (28ee3f0)
1.0.0-alpha (2016-02-16)
- demo/toast: #86 fix error and warning toast modifiers, were exchanged by mistake (eb64ef5)
- logo: fix broken demo logo in ie10, close #103 (a50958e), closes #103
- dc-tooltip: add dc-tooltip #86 (6e977c0d6bab127af6dada9139a81fc852b1f050)
- card: add card atom, close #107 (a9be85f), closes #107
- core/variables: use !default for all the variables #86 (7f3a401)
- typography: add dc-* placehoders, demo: update molecules order #86 (59c79ed)
-
sass: how to compiling sass changed.
Change your code from this:
@import bower_components/dress-code/sass/toolkit.scss // with npm: @import node_modules/dress-code/dist/sass/toolkit.scss
To this:
@import bower_components/dress-code/sass/dress-code.scss // with npm: @import node_modules/dress-code/dist/sass/dress-code.scss @include dc-everything;
-
icons: dc-font-icon was removed #80 (6a5b430a26b2f23aca9ef6472ed29792c76724b2)
If you were using dc-font-icon
Replace this:
<i class="dc-font-icon-add dc-font-icon--interactive"></i>
With:
<i class="dc-icon dc-icon--add dc-icon--interactive"></i>
If you were using icons button
Replace this:
<button class="dc-btn dc-btn--large"> <i class="dc-font-icon-add"></i> </button>
With:
<button class="dc-btn dc-btn--large"> <i class="dc-icon dc-icon--add dc-icon--btn dc-icon--btn-large"></i> </button>
-
dropdown: dc-dropdown radically changed #86 (7fd01962faf33df62a5c52a0a1589f49e13664e8)
Replace this:
<div class="dc-btn-dropup"> <button class="dc-btn dc-btn--primary"> Dropup <span class="dc-arrow-up"></span> </button> <ul class="dc-dropdown-list"> <li><a href="#">The first option</a></li> <li><a href="#">The second option</a></li> <li class="dc-divider"></li> <li><a href="#">Separated option</a></li> </ul> </div>
with this:
<div class="dc-btn-dropdown"> <button class="dc-btn dc-btn--primary"> Dropup <span class="dc-btn-dropdown__arrow dc-btn-dropdown__arrow--up"></span> </button> <ul class="dc-btn-dropdown__list dc-btn-dropdown__list--up"> <li class="dc-btn-dropdown__item"> <a href="#" class="dc-link">The first option</a> </li> <li class="dc-btn-dropdown__item"> <a href="#" class="dc-link">The second option</a> </li> <li class="dc-btn-dropdown__item dc-btn-dropdown__item--disabled"> <a href="#" class="dc-link">Disabled option</a> </li> <li class="dc-btn-dropdown__divider"></li> <li class="dc-btn-dropdown__item"> <a href="#" class="dc-link">Separated option</a> </li> </ul> </div>
0.2.2-alpha.4 (2016-02-11)
- spinner: Match spinner stroke to prod. Close #94 (5aa6864)
- demo/colors: Match colors in toolkit YAML to SCSS vars (ff4ce55)
0.2.2-alpha.3 (2016-02-09)
- tables: Clean up and extend tables (48705caf4f7c33deb91dff1a406b44af6187a1ca)
0.2.2-alpha.2 (2016-01-26)
- scss-lint: fix scss_lint errors after upgrading to 0.44.0 (40f785a)
- search-form: show search results which contain images and text labels #88 (cc17d4e)
0.2.2-alpha.1 (2016-01-15)
- dropdown: Add dropdown dropup button molecule (eb2960b)
0.2.2-alpha (2016-01-08)
- sass-versions-compatibility: #82 use the placeholder syntax with dc-cf, remove normalize.css dep... (fea826a)
0.2.1-alpha (2016-01-07)
- grid: grid was removed #80 (7f5dcf9)
0.2.0-alpha (2016-01-07)
- divider: Create a simple section divider (7fc3870)
- dropdown: Add dropdown dropup button molecule (a9d22d5)
- forms: Create input groups (668a712)
- toasts: Add toast molecule (f5ad3d9)
- loading-bar: Add loading bar atom (pull request #69)
0.1.1-alpha (2015-12-30)
- font-icon: use the new variable dc-font-path when generating fot-icon.scss (730d01c)
- forms: Fix radio button label style (e4a6fff)
- messages: Fix hover and click behavior to match original (7c66677)
- mix: add minor fixes (42ffbde)
- sass-lint: fix all warnings and errors thrown by sass-lint (b319a5f)
- table: fix clearfix row table after scss-lint compliant refactor, close #52 (220cdf0), closes #52
- button: Fix dc prefix for button icons (27e92e1)
- button: Fixes & lint (b11aadd)
- buttons: Complete all buttons types (01118c7)
- buttons: Improve and extend button groups #16 (91e312f)
- dialog: Add dialog molecule (18956d2)
- grid: closes #18 and #6. create a fully responsive 12 column grid, add generic grid he (6c00c31), closes #18 #6
- grid: Closes #18. switch to 12col grid, add grid demo page (1280c21), closes #18
- messages: Add a new view for the icon font #32 (07f3db1)
- messages: Beautified code #32 (3504f3f)
- messages: Change of icon size #32 (0ac4ccc)
- messages: Modify scss to reproduce current design (ebd25df)
- messages: Use icon font for messages (269aa13)
- spinner: add dc-spinner, close #50 (823bddc), closes #50
- spinner: Use shorter notation for border colors (a0cb1fa)
- demo: fixes #33. Change namespace inside demo scripts (140487f), closes #33
- demo: removes code auto select, fix #35 (b38effe), closes #35
- demo: updates github link in the main navbar (a0b4985)
- demo/icon: put icons view under git version control (b850e4e)
- gitignore: ignore fonts folder (cef0b09)
- gulp: exclude BOWER-README when build static website (1cc0ea8)
- npm: fix .npmignore (5c6f76c)
- npm: fix typo errors (e6cc1f8)
- search-form: ignore pointer-events on autosugget field while it is hidden (fe3d049)
- font-icon: merge develop updates, rename to dc-font-icon since the dc-icon was already take (d57fb09)
- font-icon: updates package.json install gulp plugin (4449c97)
- icon: add svg icons, something is broken in the build tool (83dcb7b)
- icon-font: #10 add the first icon font implementation (3b647d2)
- metadata: updates metadata #14 (0bce961)
- price-input: resolves #37. Add price input field. (bd254fe), closes #37
- text-input: resolves #21. Add number input field (c8f58e1), closes #21
- text-input: resolves #24. Add disabled input field. (0aa06c0), closes #24