Fix component style (ant-design#7848)

* fix components style * fix snapshot * update travis node version * change upload action in ci
yzxzz · Oct 11, 2017 · 9053192 · 9053192
1 parent b0381a6
commit 9053192
Show file tree

Hide file tree

Showing 28 changed files with 79 additions and 62 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,7 +3,7 @@ sudo: false
 language: node_js
 
 node_js:
-  - "6"
+  - "8"
 
 env:
   matrix:

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -85,11 +85,11 @@
   }
 
   &-with-description {
-    padding: 16px 16px 16px 60px;
+    padding: 16px 16px 16px 64px;
     position: relative;
     border-radius: @border-radius-base;
     color: @text-color;
-    line-height: 1.5;
+    line-height: @line-height-base;
   }
 
   &-with-description&-no-icon {
@@ -99,7 +99,7 @@
   &-with-description &-icon {
     position: absolute;
     top: 16px;
-    left: 20px;
+    left: 24px;
     font-size: 24px;
   }
 

diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap
@@ -79,7 +79,7 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/fixed.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
 >

diff --git a/components/anchor/demo/fixed.md → components/anchor/demo/static.md b/components/anchor/demo/fixed.md → components/anchor/demo/static.md
@@ -1,8 +1,8 @@
 ---
 order: 2
 title:
-  zh-CN: 固定
-  en-US: Fixed Anchor
+  zh-CN: 静态位置
+  en-US: Static Anchor
 ---
 
 ## zh-CN

diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -25,9 +25,9 @@
     &-ball {
       display: none;
       position: absolute;
-      width: 9px;
-      height: 9px;
-      border-radius: 9px;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
       border: 3px solid @primary-color;
       background-color: @component-background;
       left: 50%;

diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
@@ -5,21 +5,21 @@
 
 .@{breadcrumb-prefix-cls} {
   .reset-component;
+  color: @text-color-secondary;
 
   .@{iconfont-css-prefix} {
     font-size: @font-size-sm;
   }
 
   a {
-    color: @text-color;
+    color: @text-color-secondary;
     transition: color .3s;
     &:hover {
       color: @primary-5;
     }
   }
 
   & > span:last-child {
-    font-weight: 500;
     color: @text-color;
   }
 

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -40,7 +40,7 @@
 
   &:hover,
   &:focus {
-    .button-color(@primary-color; @background; @primary-color);
+    .button-color(@primary-5; @background; @primary-5);
   }
 
   &:active,
@@ -56,12 +56,12 @@
 
   &:hover,
   &:focus {
-    .button-color(@btn-primary-color; @color; @color;);
+    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
   }
 
   &:active,
   &.active {
-    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`;);
+    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
   }
 
   .button-disabled();

diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
@@ -53,6 +53,6 @@ Fields in `showSearch`:
 
 <style>
 .ant-cascader-picker {
-  width: 220px;
+  width: 300px;
 }
 </style>
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
@@ -54,7 +54,7 @@ subtitle: 级联选择
 
 <style>
 .ant-cascader-picker {
-  width: 220px;
+  width: 300px;
 }
 </style>
 

diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
@@ -235,7 +235,7 @@ export default class RangePicker extends React.Component<any, any> {
     // default width for showTime
     const pickerStyle = {} as any;
     if (props.showTime) {
-      pickerStyle.width = (style && style.width) || 300;
+      pickerStyle.width = (style && style.width) || 350;
     }
 
     const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? (

diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -234,7 +234,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
   <br />
   <span
     class="ant-calendar-picker"
-    style="width:300px"
+    style="width:350px"
   >
     <span
       class="ant-calendar-picker-input ant-input"
@@ -326,7 +326,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
   </span>
   <span
     class="ant-calendar-picker"
-    style="width:300px"
+    style="width:350px"
   >
     <span
       class="ant-calendar-picker-input ant-input"
@@ -512,7 +512,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
   <br />
   <span
     class="ant-calendar-picker"
-    style="width:300px"
+    style="width:350px"
   >
     <span
       class="ant-calendar-picker-input ant-input"
@@ -739,7 +739,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
   <br />
   <span
     class="ant-calendar-picker"
-    style="width:300px"
+    style="width:350px"
   >
     <span
       class="ant-calendar-picker-input ant-input"

diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
@@ -23,7 +23,7 @@ ReactDOM.render(
       dateRender={(current) => {
         const style = {};
         if (current.date() === 1) {
-          style.border = '1px solid #08c';
+          style.border = '1px solid #1890ff';
           style.borderRadius = '50%';
         }
         return (
@@ -37,7 +37,7 @@ ReactDOM.render(
       dateRender={(current) => {
         const style = {};
         if (current.date() === 1) {
-          style.border = '1px solid #08c';
+          style.border = '1px solid #1890ff';
           style.borderRadius = '50%';
         }
         return (

diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less
@@ -5,7 +5,7 @@
   border: 0;
   height: 99%;
   outline: 0;
-  width: 43%;
+  width: 44%;
   text-align: center;
   vertical-align: top;
   .placeholder();
@@ -17,7 +17,7 @@
 
 .@{calendar-prefix-cls}-range-picker-separator {
   color: @text-color-secondary;
-  width: 8px;
+  width: 10px;
   display: inline-block;
   height: 100%;
   vertical-align: top;

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1432,7 +1432,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             >
               <div
                 class="ant-select ant-select-enabled"
-                style="width:60px"
+                style="width:64px"
               >
                 <div
                   aria-autocomplete="list"
@@ -1859,7 +1859,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       >
         <span
           class="ant-calendar-picker"
-          style="width:300px"
+          style="width:350px"
         >
           <span
             class="ant-calendar-picker-input ant-input"

diff --git a/components/form/demo/register.md b/components/form/demo/register.md
@@ -115,7 +115,7 @@ class RegistrationForm extends React.Component {
     const prefixSelector = getFieldDecorator('prefix', {
       initialValue: '86',
     })(
-      <Select style={{ width: 60 }}>
+      <Select style={{ width: 64 }}>
         <Option value="86">+86</Option>
         <Option value="87">+87</Option>
       </Select>

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -100,7 +100,6 @@ input[type="checkbox"] {
     line-height: @form-component-height;
     display: inline-block;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
 
     label {

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -2,6 +2,8 @@
 @import "../../style/mixins/index";
 
 @menu-prefix-cls: ~"@{ant-prefix}-menu";
+@menu-inline-toplevel-item-height: 54px;
+@menu-item-height: 40px;
 
 // default theme
 .@{menu-prefix-cls} {
@@ -360,11 +362,17 @@
     .@{menu-prefix-cls}-submenu-title {
       padding: 0 16px;
       font-size: @font-size-base;
-      line-height: 42px;
-      height: 42px;
+      line-height: @menu-item-height;
+      height: @menu-item-height;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      line-height: @menu-inline-toplevel-item-height;
+      height: @menu-inline-toplevel-item-height;
+    }
   }
 
   &-inline-collapsed {
@@ -381,7 +389,7 @@
       }
       .@{iconfont-css-prefix} {
         font-size: 16px;
-        line-height: 42px;
+        line-height: @menu-item-height;
         margin: 0;
         + span {
           max-width: 0;
@@ -437,8 +445,8 @@
     border-radius: 0;
     & > .@{menu-prefix-cls}-item,
     & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
-      line-height: 42px;
-      height: 42px;
+      line-height: @menu-item-height;
+      height: @menu-item-height;
       list-style-type: disc;
       list-style-position: inside;
     }

diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
@@ -56,3 +56,9 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ````
+
+<style>
+.ant-modal p {
+  margin: 0;
+}
+</style>
diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less
@@ -12,7 +12,7 @@
   }
 
   .@{ant-prefix}-modal-body {
-    padding: 30px 40px;
+    padding: 24px;
   }
 
   &-body-wrapper {
@@ -42,11 +42,11 @@
   }
 
   .@{confirm-prefix-cls}-btns {
-    margin-top: 30px;
+    margin-top: 24px;
     float: right;
 
     button + button {
-      margin-left: 10px;
+      margin-left: 8px;
       margin-bottom: 0;
     }
   }

diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
@@ -23,7 +23,7 @@
   &-title {
     margin: 0;
     font-size: @font-size-lg;
-    line-height: 21px;
+    line-height: 22px;
     font-weight: 500;
     color: @heading-color;
   }
@@ -48,9 +48,10 @@
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
-    transition: color .3s ease;
+    transition: color .3s;
     color: @text-color-secondary;
     outline: 0;
+    padding: 0;
 
     &-x {
       display: block;
@@ -79,22 +80,22 @@
   }
 
   &-header {
-    padding: 13px 16px;
+    padding: 13px 24px;
     border-radius: @border-radius-base @border-radius-base 0 0;
     background: @component-background;
     color: @text-color;
     border-bottom: @border-width-base @border-style-base @border-color-split;
   }
 
   &-body {
-    padding: 16px;
+    padding: 24px;
     font-size: @font-size-base;
-    line-height: 1.5;
+    line-height: @line-height-base;
   }
 
   &-footer {
     border-top: @border-width-base @border-style-base @border-color-split;
-    padding: 10px 16px 10px 10px;
+    padding: 10px 16px;
     text-align: right;
     border-radius: 0 0 @border-radius-base @border-radius-base;
     button + button {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ sudo: false @@
     language: node_js
     node_js:
-      - "6"
+      - "8"
     env:
       matrix:
@@ Expand Down @@