site: update icon doc translation

components/menu/style/dark.less

@@ -106,7 +106,7 @@
 
   &&-dark &-item-selected,
   &-submenu-popup&-dark &-item-selected {
-    background-color: @menu-dark-item-selected-bg;
+    background-color: @menu-dark-item-active-bg;
   }
 
   // Disabled state sets text to dark gray and nukes hover/tab effects

components/tabs/style/index.less

@@ -17,13 +17,13 @@
     bottom: 1px;
     box-sizing: border-box;
     height: 2px;
-    background-color: @tabs-ink-bar-bg-color;
+    background-color: @tabs-ink-bar-color;
     transform-origin: 0 0;
   }
 
   &-bar {
     border-bottom: @border-width-base @border-style-base @border-color-split;
-    margin: @tab-bar-margin;
+    margin: @tabs-bar-margin;
     outline: none;
     transition: padding .3s @ease-in-out;
   }
@@ -40,8 +40,8 @@
     .clearfix;
 
     &-scrolling {
-      padding-left: @tab-scrolling-size;
-      padding-right: @tab-scrolling-size;
+      padding-left: @tabs-scrolling-size;
+      padding-right: @tabs-scrolling-size;
     }
   }
 
@@ -79,7 +79,7 @@
 
     &.@{tab-prefix-cls}-tab-arrow-show {
       opacity: 1;
-      width: @tab-scrolling-size;
+      width: @tabs-scrolling-size;
       height: 100%;
       pointer-events: auto;
     }
@@ -165,8 +165,8 @@
     .@{tab-prefix-cls}-tab {
       display: inline-block;
       height: 100%;
-      margin: @tab-horizontal-margin;
-      padding: @tab-horizontal-padding;
+      margin: @tabs-horizontal-margin;
+      padding: @tabs-horizontal-padding;
       box-sizing: border-box;
       position: relative;
 
@@ -179,11 +179,11 @@
       text-decoration: none;
 
       &:hover {
-        color: @tab-hover-color;
+        color: @tabs-hover-color;
       }
 
       &:active {
-        color: @tab-active-color;
+        color: @tabs-active-color;
       }
 
       .@{iconfont-css-prefix} {
@@ -192,7 +192,7 @@
     }
 
     .@{tab-prefix-cls}-tab-active {
-      color: @tab-highlight-color;
+      color: @tabs-highlight-color;
       font-weight: 500;
     }
   }
@@ -253,20 +253,20 @@
       border-bottom: 0;
       height: 100%;
       &-tab-prev, &-tab-next {
-        width: @tab-scrolling-size;
+        width: @tabs-scrolling-size;
         height: 0;
         transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
       }
       &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
       &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
         width: 100%;
-        height: @tab-scrolling-size;
+        height: @tabs-scrolling-size;
       }
 
       .@{tab-prefix-cls}-tab {
         float: none;
-        margin: @tab-vertical-margin;
-        padding: @tab-vertical-padding;
+        margin: @tabs-vertical-margin;
+        padding: @tabs-vertical-padding;
         display: block;
 
         &:last-child {
@@ -291,7 +291,7 @@
         margin-bottom: 0;
 
         &.@{tab-prefix-cls}-nav-container-scrolling {
-          padding: @tab-scrolling-size 0;
+          padding: @tabs-scrolling-size 0;
         }
       }
 
@@ -313,13 +313,13 @@
       .@{tab-prefix-cls}-tab-next {
         width: 100%;
         bottom: 0;
-        height: @tab-scrolling-size;
+        height: @tabs-scrolling-size;
       }
 
       .@{tab-prefix-cls}-tab-prev {
         top: 0;
         width: 100%;
-        height: @tab-scrolling-size;
+        height: @tabs-scrolling-size;
       }
     }
 

docs/spec/icon.zh-CN.md

@@ -20,10 +20,10 @@ Ant Design 在"确定"和"自然"的设计价值观影响之下，对全套的
 
 Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设计领域，一共有四个，他们分别为：
 
-- **准  确 ：** 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
-- **简  单 ：** 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
-- **节  奏 ：** 挖掘构图中的秩序之美。
-- **愉  悦 ：** 赋予适度的情感。
+- **准确：** 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
+- **简单：** 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
+- **节奏：** 挖掘构图中的秩序之美。
+- **愉悦：** 赋予适度的情感。
 
 ## 设计规格
 

site/theme/en-US.js

@@ -93,6 +93,9 @@ module.exports = {
     'app.publish.old-version-tips': ', or switch version with the select at header navigation.',
     'app.docs.color.pick-primary': 'Pick your primary color',
     'app.docs.components.icon.pick-theme': 'Select the Icon Theme',
+    'app.docs.components.icon.outlined': 'Outlined',
+    'app.docs.components.icon.filled': 'Filled',
+    'app.docs.components.icon.two-tone': 'Two Tone',
     'app.docs.components.icon.category.direction': 'Directional Icons',
     'app.docs.components.icon.category.suggestion': 'Suggested Icons',
     'app.docs.components.icon.category.edit': 'Editor Icons',

site/theme/template/IconDisplay/CopyableIcon.tsx

@@ -18,7 +18,7 @@ const CopyableIcon: React.SFC<CopyableIconProps> = ({
 }) => {
   return (
     <CopyToClipboard
-      text={`<Icon type="${type}" theme="${theme}" />`}
+      text={theme === 'outlined' ? <Icon type="${type}" /> : `<Icon type="${type}" theme="${theme}" />`}
       onCopy={() => onCopied(type)}
     >
       <li className={justCopied === type ? 'copied' : ''}>

site/theme/template/IconDisplay/index.tsx

@@ -107,13 +107,13 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
         <h3>{messages['app.docs.components.icon.pick-theme']}</h3>
         <Radio.Group value={this.state.theme} onChange={this.handleChangeTheme}>
           <Radio.Button value="outlined">
-            <Icon component={OutlinedIcon} /> Outlined
+            <Icon component={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
           </Radio.Button>
           <Radio.Button value="filled">
-            <Icon component={FilledIcon} /> Filled
+            <Icon component={FilledIcon} /> {messages['app.docs.components.icon.filled']}
           </Radio.Button>
           <Radio.Button value="twoTone">
-            <Icon component={TwoToneIcon} /> Two Tone
+            <Icon component={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
           </Radio.Button>
         </Radio.Group>
         {this.renderCategories(list)}

site/theme/zh-CN.js

@@ -93,6 +93,9 @@ module.exports = {
     'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。',
     'app.docs.color.pick-primary': '选择你的主色',
     'app.docs.components.icon.pick-theme': '选择图标主题风格',
+    'app.docs.components.icon.outlined': '线框风格',
+    'app.docs.components.icon.filled': '实底风格',
+    'app.docs.components.icon.two-tone': '双色风格',
     'app.docs.components.icon.category.direction': '方向性图标',
     'app.docs.components.icon.category.suggestion': '提示建议性图标',
     'app.docs.components.icon.category.edit': '编辑类图标',