Merge branch 'develop' into topic/fix-controversial-bem-110

* develop: fix(dialog): make dialog scrollable when hovering outside of it #142 chore(node4): test build on node 4.0.0 #129 fix chore(breakpoint-sass): removes breakpoint-sass dep, remove bower build, removing vendors file #129 fix: change dc-dialog overlay mixin name to be consistent with the global selector one #130 feature(icon button): Order icon button content by BEM
zalando · Mar 14, 2016 · b4ac60c · b4ac60c
2 parents 1fbd15c + a5916e7
commit b4ac60c
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 153 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,7 @@
 language: node_js
 node_js:
 - 0.12
+- 4.0.0
 before_install:
 - rvm install 2.0.0
 - rvm use 2.0.0
@@ -12,5 +13,4 @@ install:
 script:
 - npm run lint
 - npm run build
-- npm run build:bower
 - npm run build:demo
diff --git a/README.md b/README.md
@@ -14,14 +14,14 @@ The Dress Code is the official style guide and style framework for all Brand Sol
 
 ### Requirements
 
-* [modernizer](https://modernizr.com/) included in the ```<head>``` of your web page.
+* [modernizer](https://modernizr.com/) ~2.8.2 included in the ```<head>``` of your web page.
 
 ### Install
 
 #### with Bower
 
 ```
-bower install https://github.com/zalando/dress-code-bower.git --save
+bower install https://github.com/zalando/dress-code.git --save
 ```
 
 #### with Npm
@@ -48,28 +48,23 @@ npm install
 Include this in your ```<head>```:
 
 ```html
-<link href="bower_components/dress-code/css/dress-code.min.css" rel="stylesheet">
+<link href="bower_components/dress-code/dist/css/dress-code.min.css" rel="stylesheet">
 ```
 
-or if installed with **npm**:
-
-
-```html
-<link href="node_modules/dress-code/dist/css/dress-code.min.css" rel="stylesheet">
-```
-
-
 #### How to use dress-code SASS 
 
-> **At the moment we don't support ```npm@3```**
-
 You can compile the dress code by your own using a sass compiler.
 
 ```scss
+@import "node_modules/breakpoint-sass/stylesheets" // this a required dependency, load this before loading the dress-code
 @import "node_modules/dress-code/dist/sass/dress-code" // or bower_components/dress-code/sass/dress-code
 @include dc-everything; // output dc-* selectors
 ```
 
+> the dress-code rely on [breakpoint-sass](https://github.com/at-import/breakpoint) to manage media queries
+more easily, please be sure that the plugin/scss module is loaded before trying to compile the dress-code stuff. Thanks.
+
+
 ##### Compass notes
 
 > Note for those using compass. Add this to yours config.rb file: 
@@ -160,14 +155,6 @@ $ npm run deploy:demo
 Publish the demo as github-pages website @ https://zalando.github.io/dress-code
 
 
-**Deploy bower package:**
-
-```
-$ npm run deploy:bower
-```
-
-Publish the distribution version for bower @ https://github.com/zalando/dress-code-bower  
-
 ## License
 
 The Dress Code is released under the MIT license. See LICENSE for details.
diff --git a/bower.json b/bower.json
@@ -3,7 +3,7 @@
   "version": "1.1.1-alpha",
   "homepage": "https://zalando.github.io/dress-code",
   "description": "The Dress Code is the official style guide/UI toolkit for all Brand Solutions products.",
-  "main": "sass/dress-code.scss",
+  "main": "dist/sass/dress-code.scss",
   "moduleType": [],
   "authors": [
     "Thomas Nägele <thomas.naegele.extern@zalando.de>",
@@ -20,6 +20,6 @@
   ],
   "dependencies": {
     "compass-breakpoint": "breakpoint-sass#~2.6.1",
-    "modernizer": "~2.8.2"
+    "modernizr": "~2.8.2"
   }
 }
diff --git a/docs/BOWER-README.md b/docs/BOWER-README.md
diff --git a/docs/demo/materials/03-molecules/01-button-icon.html b/docs/demo/materials/03-molecules/01-button-icon.html
@@ -4,35 +4,34 @@
 notes: |
     Use icon buttons with caution. Their meanings are sometimes difficult to understand.
 
-    For buttons with icon and text, the icon will always display at the right side. The button text must be wrapped in an element (any element works).
+    For buttons with icon and text, use the modifiers `dc-icon--btn--left` and `dc-icon--btn--right` to set the position of the icon.
 ---
 <button class="dc-btn">
-    <i class="dc-icon dc-icon--history dc-icon--btn"></i>
+    Text
 </button>
-
 <button class="dc-btn dc-btn--primary">
     <i class="dc-icon dc-icon--pencil dc-icon--btn"></i>
 </button>
-
+<button class="dc-btn">
+    <a>Undo</a><i class="dc-icon dc-icon--undo dc-icon--btn dc-icon--btn--left"></i>
+</button>
 <button class="dc-btn dc-btn--destroy">
     <i class="dc-icon dc-icon--trash dc-icon--btn"></i>
 </button>
 
-<button class="dc-btn">
-    <span>Undo</span><i class="dc-icon dc-icon--undo dc-icon--btn"></i>
-</button>
+
 
 <button class="dc-btn dc-btn--disabled">
-    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn"></i>
+    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn--right"></i>
 </button>
 
 
 <br>
 
 <button class="dc-btn dc-btn--small">
-    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn-small"></i>
+    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn-small dc-icon--btn--left"></i>
 </button>
 
 <button class="dc-btn dc-btn--destroy dc-btn--large">
-    <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large"></i>
+    <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
 </button>
diff --git a/docs/guides/RELEASING.md b/docs/guides/RELEASING.md
@@ -37,7 +37,7 @@ When the CI job pass with SUCCESS, merge or rebase the release branch on top of
 ```
 git checkout master;
 git pull;
-git rebase release/<semver>;
+git rebase release/<semver>; # or open a pull request to master
 ```
 
 6) Add a git tag, push the master branch and the new tag.
@@ -48,26 +48,14 @@ git push origin master;
 git push origin <semver>; # push the tag
 ```
 
-7) Sync the ```bower``` version.
-
 ```
-npm run deploy:bower
-cd .tmp/.deploy-bower
-git tag -a <semver> -m "<semver>";
-git push origin <semver>; # push the tag
-git checkout develop;
-git rebase master;
-git push origin develop;
-git checkout master;
-```
-
-8) Build and deploy [docs/demo](http://zalando.github.io/dress-code/) artifacts. 
+7) Build and deploy demo [docs/demo](http://zalando.github.io/dress-code/) artifacts. 
 
 ```
 npm run deploy:demo;
 ```
 
-9) Keep in sync the develop branch.
+8) Keep in sync the develop branch.
 
 ```
 git checkout develop;

diff --git a/gulpfile.js b/gulpfile.js
@@ -16,12 +16,10 @@ var replace = require('gulp-replace');
 var reload = browserSync.reload;
 var runSequence = require('run-sequence');
 var sass = require('gulp-sass');
-// var sassImportOnce = require('node-sass-import-once');
 var sourcemaps = require('gulp-sourcemaps');
 var webpack = require('webpack');
 var gulp = require('gulp');
 var ghPages = require('gulp-gh-pages');
-var gulpFilter = require('gulp-filter');
 var gulpDebug = require('gulp-debug');
 var iconfont = require('gulp-iconfont');
 var iconfontCss = require('gulp-iconfont-css');
@@ -44,7 +42,7 @@ var config = {
         },
         styles: {
             fabricator: './docs/demo/assets/fabricator/styles/fabricator.scss',
-            toolkit: './src/styles/index.scss'
+            toolkit: './src/styles/_index.scss'
         },
         images: 'src/img/**/*',
         icons: 'src/icons/*.svg'
@@ -332,53 +330,8 @@ gulp.task('dist:icons', ['demo:icons'], function () {
         .pipe(gulp.dest(path.join(config.tmp.dist, '/fonts')));
 });
 
-gulp.task('dist:bower:clean', function (cb) {
-    return del([config.tmp.distBower], cb);
-});
-
-
-gulp.task('dist:bower', ['dist:bower:clean', 'dist:build'], function () {
-    var bowerReadmeFilter = gulpFilter(['BOWER-README.md'], {restore: true});
-    var vendorsFilter = gulpFilter(['**/sass/core/_vendors.scss'], {restore: true});
-
-    return gulp.src([
-        path.join(config.tmp.dist, '/**/*'),
-        'bower.json',
-        'LICENSE',
-        'docs/BOWER-README.md',
-        '.editorconfig'
-    ])
-    .pipe(bowerReadmeFilter)
-    .pipe(rename('README.md'))
-    .pipe(gulp.dest(config.tmp.distBower))
-    .pipe(bowerReadmeFilter.restore)
-    .pipe(vendorsFilter)
-    .pipe(replace(/@import "..\/..\/..\/node_modules\/(.*)"/g, function (match, p1) {
-        if (p1.indexOf('breakpoint-sass') > -1) {
-            return '@import "../../../compass-breakpoint/stylesheets/breakpoint"';
-        } else {
-            return '@import "../../../' + p1 + '"';
-        }
-    }))
-    .pipe(vendorsFilter.restore)
-    .pipe(gulp.dest(config.tmp.distBower));
-});
-
-// push bower dist to the bower version repo
-// use --dev to push to the develop branch (default: master)
-gulp.task('dist:bower:deploy', ['dist:bower'], function () {
-    return gulp.src(path.join(config.tmp.distBower, '/**/*'))
-        .pipe(ghPages({
-            cacheDir: config.tmp.deployBower,
-            branch: gutil.env.dev ? 'develop' : 'master',
-            remoteUrl: 'git@github.com:zalando/dress-code-bower'
-        }));
-});
-
 gulp.task('dist:changelog', function() {
-    var changelogConfig = {
-        preset: 'angular'
-    };
+    var changelogConfig = { preset: 'angular' };
 
     return gulp.src('CHANGELOG.md', {
         buffer: true

diff --git a/package.json b/package.json
@@ -7,10 +7,8 @@
   "scripts": {
     "lint": "gulp scss-lint",
     "build": "gulp dist",
-    "build:bower": "gulp dist:bower",
     "build:demo": "gulp demo",
     "deploy:demo": "gulp demo:deploy --demo-base-path=/dress-code",
-    "deploy:bower": "gulp dist:bower:deploy",
     "changelog": "gulp dist:changelog",
     "start": "gulp"
   },
@@ -33,10 +31,9 @@
     "type": "git",
     "url": "https://github.com/zalando/dress-code.git"
   },
-  "engineStrict": true,
   "engines": {
-    "node": ">=0.10.0 <=4.x",
-    "npm": "^2.0.0"
+    "node": ">=0.12.0 <=5.x",
+    "npm": ">=2.x.x"
   },
   "dependencies": {
     "breakpoint-sass": "^2.6.1"

diff --git a/src/icons/lock.svg b/src/icons/lock.svg
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
@@ -0,0 +1,11 @@
+//
+// This file is used to generate the distribution css artifacts
+// and for the demo
+//
+
+// breakpoint-sass
+@import "../../node_modules/breakpoint-sass/stylesheets/breakpoint";
+
+@import "./dress-code";
+
+@include dc-everything;
diff --git a/src/styles/atoms/_btn.scss b/src/styles/atoms/_btn.scss
@@ -1,7 +1,6 @@
 // @import "../core/core";
 
 @mixin dc-btn {
-
     display: inline-block;
     margin-right: $dc-space50;
     margin-bottom: $dc-space100;
@@ -19,15 +18,12 @@
     text-transform: capitalize;
     box-shadow: 0 1px 1px transparent;
     cursor: default;
+    vertical-align: top;
 
     &:focus {
         outline: none;
     }
 
-    > * {
-        margin-right: 10px;
-    }
-
     @content;
 }
 
@@ -232,9 +228,3 @@
         @include dc-btn--block;
     }
 }
-
-
-
-
-
-
diff --git a/src/styles/core/_core.scss b/src/styles/core/_core.scss
@@ -1,4 +1,3 @@
-@import "vendors";
 @import "variables";
 @import "mixins";
 @import "placeholders";

diff --git a/src/styles/core/_mixins.scss b/src/styles/core/_mixins.scss
@@ -1,4 +1,3 @@
-
 //  ---------------------------------------------------------------------------
 //
 //  The clearfix

diff --git a/src/styles/core/_vendors.scss b/src/styles/core/_vendors.scss
diff --git a/src/styles/index.scss b/src/styles/index.scss