📝 changelog for 3.22.0

5 years ago · 3ca53b7b38
4 changed files with 427 additions and 366 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,38 @@ timeline: true

 ---

+## 3.22.0
+
+`2019-08-17`
+
+- 🔥 New type `navigation` of Step. [#17994](https://github.com/ant-design/ant-design/pull/17994)
+  - <img width="600" class="markdown-inline-image" src="https://gw.alipayobjects.com/zos/antfincdn/oc7rRuPBbR/421d7885-a822-4375-9deb-92d607e0d9de.png" />
+- 🇷🇴 Add Romanian locale. [#18163](https://github.com/ant-design/ant-design/pull/18163) [@stefy](https://github.com/stefy)
+- Anchor
+  - 🌟 Add `getCurrentAnchor` property to specify current active anchor. [#17823](https://github.com/ant-design/ant-design/pull/17823) [@shaodahong](https://github.com/shaodahong)
+  - 🌟 Add `targetOffset` property to customize scroll position offset. [#17827](https://github.com/ant-design/ant-design/pull/17827) [@shaodahong](https://github.com/shaodahong)
+- 🌟 Drawer supports popup in custom dom node. [#18167](https://github.com/ant-design/ant-design/pull/18167)
+- 🌟 Mentions support `getPopupContainer` property. [#18298](https://github.com/ant-design/ant-design/pull/18298) [@vijayst](https://github.com/vijayst)
+- 🌟 Modal support custom `closeIcon`. [#18309](https://github.com/ant-design/ant-design/pull/18309)
+- 🌟 Upload support to preview `jfif` format images. [#18322](https://github.com/ant-design/ant-design/pull/18322)
+- 💄 Tweak Descriptions.Item padding bottom via size. [#18270](https://github.com/ant-design/ant-design/pull/18270)
+- Cascader
+  - 🌟 Allow input `autoComplete` to be overrided. [#18279](https://github.com/ant-design/ant-design/pull/18279) [@zomars](https://github.com/zomars)
+  - 🐞 Fix wrong `notFoundContent` width when using `fieldNames`.[#18325](https://github.com/ant-design/ant-design/pull/18325)
+  - 🐞 Fix missing `options` cause crash. [#18190](https://github.com/ant-design/ant-design/pull/18190) [@nnecec](https://github.com/nnecec)
+- 🐞 Fix Menu.SubMenu `className` applied to popup menu mistakenly. [#18290](https://github.com/ant-design/ant-design/pull/18290)
+- 🐞 Upgrade react-slick to fix Carousel lifecycle warning. [#18209](https://github.com/ant-design/ant-design/pull/18209)
+- 🐞 Fix Button `received false for a non-boolean attribute loading` warning. [#18208](https://github.com/ant-design/ant-design/pull/18208)
+- 🐞 Fix style problem when hovering Table selected row. [#18261](https://github.com/ant-design/ant-design/pull/18261)
+- 🐞 Fix Checkbox hovering border color when it is `disabled`. [#18168](https://github.com/ant-design/ant-design/pull/18168)
+- 🐞 Fix Progress missing or messed gradient color. [#18284](https://github.com/ant-design/ant-design/pull/18284)
+- 🐞 修复 TextArea scrollbar blinking problem when using `autosize` and `maxRows`. [#18289](https://github.com/ant-design/ant-design/pull/18289)
+- TypeScript
+  - 🐞 Fix some components (Tooltip, Breadcrumb, Badge) importing error. [#18282](https://github.com/ant-design/ant-design/pull/18282) [@lidianhao123](https://github.com/lidianhao123)
+  - 🐞 Fix MonthPicker `monthCellContentRender` property definition. [#18192](https://github.com/ant-design/ant-design/pull/18192) [@JonathanLee-LX](https://github.com/JonathanLee-LX)
+  - 🐞 Fix Upload.Dragger `children` error. [#18196](https://github.com/ant-design/ant-design/pull/18196)
+  - 🐞 Fix Tag.CheckableTag `style` property definition. [#18300](https://github.com/ant-design/ant-design/pull/18300)
+
 ## 3.21.4

 `2019-08-09`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,38 @@ timeline: true

 ---

+## 3.22.0
+
+`2019-08-17`
+
+- 🔥 新增 Steps `type="navigation"` 导航步骤条。[#17994](https://github.com/ant-design/ant-design/pull/17994)
+  - <img width="600" class="markdown-inline-image" src="https://gw.alipayobjects.com/zos/antfincdn/oc7rRuPBbR/421d7885-a822-4375-9deb-92d607e0d9de.png" />
+- 🇷🇴 新增罗马尼亚语。[#18163](https://github.com/ant-design/ant-design/pull/18163) [@stefy](https://github.com/stefy)
+- Anchor
+  - 🌟 新增 `getCurrentAnchor` 属性用于指定当前高亮锚点。[#17823](https://github.com/ant-design/ant-design/pull/17823) [@shaodahong](https://github.com/shaodahong)
+  - 🌟 新增 `targetOffset` 属性用于自定义滚动偏移量。[#17827](https://github.com/ant-design/ant-design/pull/17827) [@shaodahong](https://github.com/shaodahong)
+- 🌟 支持 Drawer 在局部节点弹出。[#18167](https://github.com/ant-design/ant-design/pull/18167)
+- 🌟 Mentions 新增 `getPopupContainer` 属性。[#18298](https://github.com/ant-design/ant-design/pull/18298) [@vijayst](https://github.com/vijayst)
+- 🌟 Modal 支持 `closeIcon` 属性用于自定义关闭图标。[#18309](https://github.com/ant-design/ant-design/pull/18309)
+- 🌟 Upload 支持预览 `jfif` 格式图片。[#18322](https://github.com/ant-design/ant-design/pull/18322)
+- 💄 调整不同大小下 Descriptions.Item 内边距样式。 [#18270](https://github.com/ant-design/ant-design/pull/18270)
+- Cascader
+  - 🌟 允许自定义输入框的 `autoComplete` 属性可以被覆盖。[#18279](https://github.com/ant-design/ant-design/pull/18279) [@zomars](https://github.com/zomars)
+  - 🐞 修复指定 `fieldNames` 时空数据弹层宽度问题。[#18325](https://github.com/ant-design/ant-design/pull/18325)
+  - 🐞 修复 `options` 参数未传入数组类型导致页面崩溃。[#18190](https://github.com/ant-design/ant-design/pull/18190) [@nnecec](https://github.com/nnecec)
+- 🐞 修复 Menu.SubMenu `className` 错误应用到弹层上的问题。[#18290](https://github.com/ant-design/ant-design/pull/18290)
+- 🐞 升级 react-slick 以修复 Carousel 的生命周期警告问题。[#18209](https://github.com/ant-design/ant-design/pull/18209)
+- 🐞 修复 Button `received false for a non-boolean attribute loading` 警告信息。[#18208](https://github.com/ant-design/ant-design/pull/18208)
+- 🐞 修复 Table 选中行 hover 背景样式问题。[#18261](https://github.com/ant-design/ant-design/pull/18261)
+- 🐞 修复 Checkbox 失效时的 hover 边框颜色。[#18168](https://github.com/ant-design/ant-design/pull/18168)
+- 🐞 修复 Progress 渐变色混乱和失效的问题。[#18284](https://github.com/ant-design/ant-design/pull/18284)
+- 🐞 修复 TextArea `autosize` 内使用 `maxRows` 时滚动条闪烁的问题。[#18289](https://github.com/ant-design/ant-design/pull/18289)
+- TypeScript
+  - 🐞 修复部分组件（Tooltip、Breadcrumb、Badge）无法引入的问题。[#18282](https://github.com/ant-design/ant-design/pull/18282) [@lidianhao123](https://github.com/lidianhao123)
+  - 🐞 修复 MonthPicker `monthCellContentRender` 属性。[#18192](https://github.com/ant-design/ant-design/pull/18192) [@JonathanLee-LX](https://github.com/JonathanLee-LX)
+  - 🐞 修复 Upload.Dragger `children` 报错的问题。[#18196](https://github.com/ant-design/ant-design/pull/18196)
+  - 🐞 修复 Tag.CheckableTag 的 `style` 属性定义。[#18300](https://github.com/ant-design/ant-design/pull/18300)
+
 ## 3.21.4

 `2019-08-09`
--- a/components/steps/tests/snapshots/demo.test.js.snap
+++ b/components/steps/tests/snapshots/demo.test.js.snap
@ -727,468 +727,459 @@ exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
 exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
 <div>
  <div
-    style="border:1px solid rgb(235, 237, 240);margin-bottom:24px"
+    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
+    style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
  >
    <div
-      class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
    >
      <div
-        class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
+            <i
+              aria-label="icon: check"
+              class="anticon anticon-check ant-steps-finish-icon"
            >
-              <i
-                aria-label="icon: check"
-                class="anticon anticon-check ant-steps-finish-icon"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="check"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                  />
-                </svg>
-              </i>
-            </span>
-          </div>
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </i>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
+            Step 1
            <div
-              class="ant-steps-item-title"
-            >
-              Step 1
-              <div
-                class="ant-steps-item-subtitle"
-                title="00:00:05"
-              >
-                00:00:05
-              </div>
-            </div>
-            <div
-              class="ant-steps-item-description"
+              class="ant-steps-item-subtitle"
+              title="00:00:05"
            >
-              This is a description.
+              00:00:05
            </div>
          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process"
+    >
      <div
-        class="ant-steps-item ant-steps-item-process"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              2
-            </span>
-          </div>
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
+            Step 2
            <div
-              class="ant-steps-item-title"
-            >
-              Step 2
-              <div
-                class="ant-steps-item-subtitle"
-                title="00:01:02"
-              >
-                00:01:02
-              </div>
-            </div>
-            <div
-              class="ant-steps-item-description"
+              class="ant-steps-item-subtitle"
+              title="00:01:02"
            >
-              This is a description.
+              00:01:02
            </div>
          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
      <div
-        class="ant-steps-item ant-steps-item-wait"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              3
-            </span>
-          </div>
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
+            Step 3
            <div
-              class="ant-steps-item-title"
-            >
-              Step 3
-              <div
-                class="ant-steps-item-subtitle"
-                title="waiting for longlong time"
-              >
-                waiting for longlong time
-              </div>
-            </div>
-            <div
-              class="ant-steps-item-description"
+              class="ant-steps-item-subtitle"
+              title="waiting for longlong time"
            >
-              This is a description.
+              waiting for longlong time
            </div>
          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
        </div>
      </div>
    </div>
  </div>
  <div
-    style="border:1px solid rgb(235, 237, 240);margin-bottom:24px"
+    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
+    style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
  >
    <div
-      class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
    >
      <div
-        class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
+            <i
+              aria-label="icon: check"
+              class="anticon anticon-check ant-steps-finish-icon"
            >
-              <i
-                aria-label="icon: check"
-                class="anticon anticon-check ant-steps-finish-icon"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="check"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                  />
-                </svg>
-              </i>
-            </span>
-          </div>
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </i>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              Step 1
-            </div>
+            Step 1
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process"
+    >
      <div
-        class="ant-steps-item ant-steps-item-process"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              2
-            </span>
-          </div>
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              Step 2
-            </div>
+            Step 2
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
      <div
-        class="ant-steps-item ant-steps-item-wait"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              3
-            </span>
-          </div>
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              Step 3
-            </div>
+            Step 3
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
      <div
-        class="ant-steps-item ant-steps-item-wait"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              4
-            </span>
-          </div>
+            4
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              Step 4
-            </div>
+            Step 4
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
-    style="border:1px solid rgb(235, 237, 240);margin-bottom:24px"
+    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
+    style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
  >
    <div
-      class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
+      class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
    >
      <div
-        class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
+            <i
+              aria-label="icon: check"
+              class="anticon anticon-check ant-steps-finish-icon"
            >
-              <i
-                aria-label="icon: check"
-                class="anticon anticon-check ant-steps-finish-icon"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="check"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                  />
-                </svg>
-              </i>
-            </span>
-          </div>
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </i>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              finish 1
-            </div>
+            finish 1
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
      <div
-        class="ant-steps-item ant-steps-item-finish"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
+            <i
+              aria-label="icon: check"
+              class="anticon anticon-check ant-steps-finish-icon"
            >
-              <i
-                aria-label="icon: check"
-                class="anticon anticon-check ant-steps-finish-icon"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="check"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-                  />
-                </svg>
-              </i>
-            </span>
-          </div>
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </i>
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              finish 2
-            </div>
+            finish 2
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process"
+    >
      <div
-        class="ant-steps-item ant-steps-item-process"
+        class="ant-steps-item-container"
+        role="button"
+        tabindex="0"
      >
        <div
-          class="ant-steps-item-container"
-          role="button"
-          tabindex="0"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              3
-            </span>
-          </div>
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              current process
-            </div>
+            current process
          </div>
        </div>
      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait ant-steps-item-disabled"
+    >
      <div
-        class="ant-steps-item ant-steps-item-wait ant-steps-item-disabled"
+        class="ant-steps-item-container"
      >
        <div
-          class="ant-steps-item-container"
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
        >
-          <div
-            class="ant-steps-item-tail"
-          />
-          <div
-            class="ant-steps-item-icon"
+          <span
+            class="ant-steps-icon"
          >
-            <span
-              class="ant-steps-icon"
-            >
-              4
-            </span>
-          </div>
+            4
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
          <div
-            class="ant-steps-item-content"
+            class="ant-steps-item-title"
          >
-            <div
-              class="ant-steps-item-title"
-            >
-              wait
-            </div>
+            wait
          </div>
        </div>
      </div>
--- a/components/steps/demo/nav.md
+++ b/components/steps/demo/nav.md
@ -18,6 +18,11 @@ import { Steps } from 'antd';

 const { Step } = Steps;

+const stepStyle = {
+  marginBottom: 60,
+  borderBottom: '1px solid rgb(235, 237, 240)',
+};
+
 class Demo extends React.Component {
  state = {
    current: 0,
@ -30,51 +35,52 @@ class Demo extends React.Component {

  render() {
    const { current } = this.state;
-    const containerStyle = {
-      border: '1px solid rgb(235, 237, 240)',
-      marginBottom: 24,
-    };
-
    return (
      <div>
-        <div style={containerStyle}>
-          <Steps type="navigation" size="small" current={current} onChange={this.onChange}>
-            <Step
-              title="Step 1"
-              subTitle="00:00:05"
-              status="finish"
-              description="This is a description."
-            />
-            <Step
-              title="Step 2"
-              subTitle="00:01:02"
-              status="process"
-              description="This is a description."
-            />
-            <Step
-              title="Step 3"
-              subTitle="waiting for longlong time"
-              status="wait"
-              description="This is a description."
-            />
-          </Steps>
-        </div>
-        <div style={containerStyle}>
-          <Steps type="navigation" current={current} onChange={this.onChange}>
-            <Step status="finish" title="Step 1" />
-            <Step status="process" title="Step 2" />
-            <Step status="wait" title="Step 3" />
-            <Step status="wait" title="Step 4" />
-          </Steps>
-        </div>
-        <div style={containerStyle}>
-          <Steps type="navigation" size="small" current={current} onChange={this.onChange}>
-            <Step status="finish" title="finish 1" />
-            <Step status="finish" title="finish 2" />
-            <Step status="process" title="current process" />
-            <Step status="wait" title="wait" disabled />
-          </Steps>
-        </div>
+        <Steps
+          type="navigation"
+          size="small"
+          current={current}
+          onChange={this.onChange}
+          style={stepStyle}
+        >
+          <Step
+            title="Step 1"
+            subTitle="00:00:05"
+            status="finish"
+            description="This is a description."
+          />
+          <Step
+            title="Step 2"
+            subTitle="00:01:02"
+            status="process"
+            description="This is a description."
+          />
+          <Step
+            title="Step 3"
+            subTitle="waiting for longlong time"
+            status="wait"
+            description="This is a description."
+          />
+        </Steps>
+        <Steps type="navigation" current={current} onChange={this.onChange} style={stepStyle}>
+          <Step status="finish" title="Step 1" />
+          <Step status="process" title="Step 2" />
+          <Step status="wait" title="Step 3" />
+          <Step status="wait" title="Step 4" />
+        </Steps>
+        <Steps
+          type="navigation"
+          size="small"
+          current={current}
+          onChange={this.onChange}
+          style={stepStyle}
+        >
+          <Step status="finish" title="finish 1" />
+          <Step status="finish" title="finish 2" />
+          <Step status="process" title="current process" />
+          <Step status="wait" title="wait" disabled />
+        </Steps>
      </div>
    );
  }