From 654a675532b5829bf1150fd06e6b648bfa01810d Mon Sep 17 00:00:00 2001
From: David Broder-Rodgers <broder@users.noreply.github.com>
Date: Tue, 29 Oct 2019 03:24:07 +0000
Subject: [PATCH] docs: Responsive fixes for examples pages (#19448)

* Remove fixed width from cascader examples

* Replace fixed vertical slider example height with clearfix div

* Replace fixed width on TreeSelect examples with percentage width

* Update test snapshots

* Use inline-block rather than float left for vertical slider example
---
 components/cascader/index.en-US.md                   |  6 ------
 components/cascader/index.zh-CN.md                   |  6 ------
 .../slider/__tests__/__snapshots__/demo.test.js.snap | 10 ++++------
 components/slider/demo/vertical.md                   |  4 ++--
 .../__tests__/__snapshots__/demo.test.js.snap        | 12 ++++++------
 components/tree-select/demo/async.md                 |  2 +-
 components/tree-select/demo/basic.md                 |  2 +-
 components/tree-select/demo/checkable.md             |  2 +-
 components/tree-select/demo/multiple.md              |  2 +-
 components/tree-select/demo/suffix.md                |  2 +-
 components/tree-select/demo/treeData.md              |  2 +-
 11 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index 073f2a3bda..88c60d06b3 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -72,9 +72,3 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | remove focus |         |
 | focus() | get focus    |         |
-
-<style>
-.ant-cascader-picker {
-  width: 300px;
-}
-</style>
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 84733d02b8..adc0bbdef4 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -74,10 +74,4 @@ interface Option {
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-<style>
-.ant-cascader-picker {
-  width: 300px;
-}
-</style>
-
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index 5050e82983..642fce56b6 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -1032,11 +1032,9 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
 `;
 
 exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
-<div
-  style="height:300px"
->
+<div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-vertical"
@@ -1067,7 +1065,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-vertical"
@@ -1108,7 +1106,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div
-    style="float:left;height:300px;margin-left:70px"
+    style="display:inline-block;height:300px;margin-left:70px"
   >
     <div
       class="ant-slider ant-slider-with-marks ant-slider-vertical"
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index 6dd833c36d..b66c739d1c 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -17,7 +17,7 @@ The vertical Slider.
 import { Slider } from 'antd';
 
 const style = {
-  float: 'left',
+  display: 'inline-block',
   height: 300,
   marginLeft: 70,
 };
@@ -35,7 +35,7 @@ const marks = {
 };
 
 ReactDOM.render(
-  <div style={{ height: 300 }}>
+  <div>
     <div style={style}>
       <Slider vertical defaultValue={30} />
     </div>
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
index 01b9863e09..ad79807158 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -5,7 +5,7 @@ exports[`renders ./components/tree-select/demo/async.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -53,7 +53,7 @@ exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -101,7 +101,7 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="-1"
 >
   <span
@@ -184,7 +184,7 @@ exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="-1"
 >
   <span
@@ -231,7 +231,7 @@ exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled ant-select-allow-clear"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
@@ -279,7 +279,7 @@ exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
   aria-haspopup="listbox"
   class="ant-select ant-select-enabled"
   role="combobox"
-  style="width:300px"
+  style="width:100%"
   tabindex="0"
 >
   <span
diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md
index ef98d7c584..b2b9eabae8 100644
--- a/components/tree-select/demo/async.md
+++ b/components/tree-select/demo/async.md
@@ -63,7 +63,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         treeDataSimpleMode
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index 1531262648..9fcf82cef4 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -32,7 +32,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         showSearch
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index 0b15e2c4fd..172dc7040f 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -74,7 +74,7 @@ class Demo extends React.Component {
       showCheckedStrategy: SHOW_PARENT,
       searchPlaceholder: 'Please select',
       style: {
-        width: 300,
+        width: '100%',
       },
     };
     return <TreeSelect {...tProps} />;
diff --git a/components/tree-select/demo/multiple.md b/components/tree-select/demo/multiple.md
index 44d8674ed3..a94090a095 100644
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@@ -32,7 +32,7 @@ class Demo extends React.Component {
     return (
       <TreeSelect
         showSearch
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"
diff --git a/components/tree-select/demo/suffix.md b/components/tree-select/demo/suffix.md
index bc56f5bab9..40ebcc1fd7 100644
--- a/components/tree-select/demo/suffix.md
+++ b/components/tree-select/demo/suffix.md
@@ -35,7 +35,7 @@ class Demo extends React.Component {
       <TreeSelect
         showSearch
         suffixIcon={icon}
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="Please select"
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index e790cccf59..3122e9d79d 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -54,7 +54,7 @@ class Demo extends React.Component {
   render() {
     return (
       <TreeSelect
-        style={{ width: 300 }}
+        style={{ width: '100%' }}
         value={this.state.value}
         dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
         treeData={treeData}