Fix component style (#7848)

* fix components style * fix snapshot * update travis node version * change upload action in ci
2025-01-18 14:13:37 +08:00 · 2017-10-11 12:01:27 +08:00 · 2017-10-11 12:01:27 +08:00 · 9053192ae9
commit 9053192ae9
parent b0381a6ce4
28 changed files with 79 additions and 62 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -3,7 +3,7 @@ sudo: false
 language: node_js

 node_js:
-  - "6"
+  - "8"

 env:
  matrix:
--- 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;
  }

--- 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"
 >
--- a/components/anchor/demo/static.md
+++ b/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
--- 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%;
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@ -5,13 +5,14 @@

 .@{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;
@ -19,7 +20,6 @@
  }

  & > span:last-child {
-    font-weight: 500;
    color: @text-color;
  }

--- 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();
--- 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>
--- 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>

--- 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])) ? (
--- 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"
--- 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 (
--- 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;
--- 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"
--- 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>
--- 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 {
--- 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;
    }
--- 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>
--- 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;
    }
  }
--- 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,7 +80,7 @@
  }

  &-header {
-    padding: 13px 16px;
+    padding: 13px 24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    color: @text-color;
@ -87,14 +88,14 @@
  }

  &-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 {
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@ -2,9 +2,9 @@
@import "../../style/mixins/index";

@notification-prefix-cls: ~"@{ant-prefix}-notification";
-@notification-width: 335px;
-@notification-padding: 16px;
-@notification-margin-bottom: 10px;
+@notification-width: 384px;
+@notification-padding: 16px 24px;
+@notification-margin-bottom: 16px;

 .@{notification-prefix-cls} {
  .reset-component;
@ -38,8 +38,8 @@
    &-message {
      font-size: @font-size-lg;
      color: @heading-color;
-      margin-bottom: 4px;
-      line-height: 20px;
+      margin-bottom: 8px;
+      line-height: 24px;
      display: inline-block;

      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
@ -105,8 +105,8 @@

    &-close {
      position: absolute;
-      right: 16px;
-      top: 10px;
+      right: 22px;
+      top: 16px;
      color: @text-color-secondary;
      outline: none;
      text-decoration: none;
--- a/components/progress/tests/snapshots/demo.test.js.snap
+++ b/components/progress/tests/snapshots/demo.test.js.snap
@ -623,7 +623,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
        >
          <div
            class="ant-progress-bg"
-            style="width:30%;height:8px"
+            style="width:30%;height:6px"
          />
        </div>
      </div>
@ -646,7 +646,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
        >
          <div
            class="ant-progress-bg"
-            style="width:50%;height:8px"
+            style="width:50%;height:6px"
          />
        </div>
      </div>
@ -669,7 +669,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
        >
          <div
            class="ant-progress-bg"
-            style="width:70%;height:8px"
+            style="width:70%;height:6px"
          />
        </div>
      </div>
@ -694,7 +694,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
        >
          <div
            class="ant-progress-bg"
-            style="width:100%;height:8px"
+            style="width:100%;height:6px"
          />
        </div>
      </div>
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -80,7 +80,7 @@ export default class Progress extends React.Component<ProgressProps, any> {
    if (type === 'line') {
      const percentStyle = {
        width: `${percent}%`,
-        height: strokeWidth || 8,
+        height: strokeWidth || (size === 'small' ? 6 : 8),
      };
      progress = (
        <div>
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -60,6 +60,7 @@
    margin-left: 0.75em;
    vertical-align: middle;
    display: inline-block;
+    color: @text-color-secondary;
    .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
@ -119,8 +120,8 @@
    top: 50%;
    transform: translateY(-50%);
    left: 0;
-    font-family: tahoma;
    margin: 0;
+    color: @text-color;

    .@{iconfont-css-prefix} {
      font-size: 14 / 12em;
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@ -94,7 +94,6 @@
  &-title {
    font-size: @font-size-lg;
    color: @text-color;
-    font-weight: 500;
    display: inline-block;
    padding-right: 10px;
    position: relative;
@ -122,6 +121,9 @@
      color: @process-icon-text-color;
    }
  }
+  &-process &-title {
+    font-weight: 500;
+  }
  .step-item-status(finish);
  .step-item-status(error);

--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -151,7 +151,7 @@
@btn-circle-size-lg     : @btn-height-lg;
@btn-circle-size-sm     : @btn-height-sm;

-@btn-group-border       : @primary-7;
+@btn-group-border       : @primary-5;

 // Checkbox
@checkbox-size          : 16px;
--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@ -12,7 +12,7 @@

  &-item {
    position: relative;
-    padding: 0 0 12px;
+    padding: 0 0 20px;
    list-style: none;
    margin: 0;
    font-size: @font-size-base;
@ -68,7 +68,7 @@
    }

    &-content {
-      padding: 0 0 10px 24px;
+      padding: 0 0 0 24px;
    }

    &-last {
--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -63,7 +63,7 @@ describe('Upload List', () => {

  it('should be uploading when upload a file', async () => {
    const wrapper = mount(
-      <Upload action="http://uploadcare.com/">
+      <Upload action="http://jsonplaceholder.typicode.com/posts/">
        <button>upload</button>
      </Upload>
    );