update color docs (#7256)

* update color docs * fix button test
2017-09-28 02:28:12 -05:00 · 2017-09-28 02:28:12 -05:00 · b578670168
parent 8774311c76
commit b578670168
9 changed files with 104 additions and 162 deletions
--- a/examples/app.vue
+++ b/examples/app.vue
@ -110,7 +110,7 @@
      margin-top: 20px;

      code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
        color: #445368;
      }
    }
@ -143,7 +143,7 @@
      }
  
      code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
        color: #445368;
      }
    }
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@ -103,10 +103,10 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
 :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.

 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
 :::
@ -119,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations

 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">Previous Page</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@ -172,6 +172,6 @@ Besides default size, Button component provides three additional sizes for you t
 | round     | determine whether it's a round button   | boolean    | — | false   |
 | loading   | determine whether it's loading   | boolean    | — | false   |
 | disabled  | disable the button    | boolean   | —   | false   |
-| icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
+| icon  | icon class name | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
 | native-type | same as native button's `type` | string | button / submit / reset | button |
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@ -24,15 +24,8 @@
      border-radius: 0 0 4px 4px;
    }
  }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #1989fa;
  }

  .bg-success {
@ -44,43 +37,38 @@
  .bg-danger {
    background-color: #ff4949;
  }
-
-  .bg-black {
-    background-color: #1f2d3d;
-  }
-  .bg-black-light {
-    background-color: #324057;
-  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #878D99;
  }

-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #2d2f33;
  }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-regular {
+    background-color: #5a5e66;
  }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-secondary {
+    background-color: #878d99;
+  }
+  .bg-text-placeholder {
+    background-color: #b4bccc;
  }

-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #d8dce6;
  }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #dfe4ed;
  }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #e6ebf5;
+  }
+  .bg-border-extra-light {
+    background-color: #edf2fc;
  }

-  .bg-white-dark {
-    background-color: #f9fafc;
-  }
-
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #5a5e66;
  }
 </style>

@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.

 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
  </el-col>
 </el-row>

@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen

 <el-row :gutter="12">
  <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
  </el-col>
 </el-row>

@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
 <el-row :gutter="12">
  <el-col :span="6">
    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
    </div>
  </el-col>
 </el-row>
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@ -22,7 +22,7 @@
    margin: 0 20px;
  }

-  .icon-list {
+  .page-component .content > ul.icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0;
--- a/examples/docs/zh-CN/button.md
+++ b/examples/docs/zh-CN/button.md
@ -104,10 +104,10 @@
 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。

 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">搜索</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
 <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
 ```
 :::
@ -120,13 +120,13 @@

 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">上一页</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@ -173,6 +173,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 | round     | 是否圆形按钮   | boolean    | — | false   |
 | loading     | 是否加载中状态   | boolean    | — | false   |
 | disabled  | 是否禁用状态    | boolean   | —   | false   |
-| icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
+| icon  | 图标类名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
 | native-type | 原生 type 属性 | string | button / submit / reset | button |
--- a/examples/docs/zh-CN/color.md
+++ b/examples/docs/zh-CN/color.md
@ -24,63 +24,51 @@
      border-radius: 0 0 4px 4px;
    }
  }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #1989fa;
  }

  .bg-success {
-    background-color: #13CE66;
+    background-color: #67C23A;
  }
  .bg-warning {
-    background-color: #f7ba2a;
+    background-color: #EB9E05;
  }
  .bg-danger {
-    background-color: #ff4949;
+    background-color: #FA5555;
+  }
+  .bg-info {
+    background-color: #878D99;
  }

-  .bg-black {
-    background-color: #1f2d3d;
+  .bg-text-primary {
+    background-color: #2d2f33;
  }
-  .bg-black-light {
-    background-color: #324057;
+  .bg-text-regular {
+    background-color: #5a5e66;
  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-text-secondary {
+    background-color: #878d99;
+  }
+  .bg-text-placeholder {
+    background-color: #b4bccc;
  }

-  .bg-silver {
-    background-color: #8492a6;
+  .bg-border-base {
+    background-color: #d8dce6;
  }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-border-light {
+    background-color: #dfe4ed;
  }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-border-lighter {
+    background-color: #e6ebf5;
+  }
+  .bg-border-extra-light {
+    background-color: #edf2fc;
  }

-  .bg-gray {
-    background-color: #d3dce6;
-  }
-  .bg-gray-light {
-    background-color: #e5e9f2;
-  }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
-  }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
-  }
-
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #5a5e66;
  }
 </style>

@ -93,14 +81,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
 Element 主要品牌颜色是鲜艳、友好的蓝色。

 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
  </el-col>
 </el-row>

@ -110,16 +92,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。

 <el-row :gutter="12">
  <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
  </el-col>
  <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
  </el-col>
 </el-row>

@ -130,29 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 <el-row :gutter="12">
  <el-col :span="6">
    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>
    </div>
  </el-col>
 </el-row>
--- a/examples/docs/zh-CN/icon.md
+++ b/examples/docs/zh-CN/icon.md
@ -21,7 +21,7 @@
    margin: 0 20px;
  }

-  .icon-list {
+  .page-component .content > ul.icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0;
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@ -16,7 +16,7 @@
    ]"
  >
    <i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
+    <i :class="icon" v-if="icon && !loading" @click="handleInnerClick"></i>
    <span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
  </button>
 </template>
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@ -16,7 +16,7 @@ describe('Button', () => {
  });
  it('icon', () => {
    vm = createTest(Button, {
-      icon: 'search'
+      icon: 'el-icon-search'
    }, true);
    let buttonElm = vm.$el;
    expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;