From 5b29913174a244637549d79cf8c51f33c821cc4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=97=E4=BD=A0=E6=98=AF=E5=B0=8F=E7=8C=AB=E5=92=AA?=
 <darryshaw@gmail.com>
Date: Sat, 21 Dec 2019 22:01:47 +0800
Subject: [PATCH] refactor(Button): base style use flex (#20300)

* improvement(Button): base style use flex

* remove unnecessary style

* add vertical-align

* fix style lint order

* remove vertical-align and improve global line-height

* change line-height-base

* update form debug demo
---
 .../__tests__/__snapshots__/demo.test.js.snap | 165 ++++++++++++++++++
 components/auto-complete/demo/form-debug.md   |  13 +-
 components/button/style/mixin.less            |   5 +-
 components/style/themes/default.less          |   3 +-
 4 files changed, 182 insertions(+), 4 deletions(-)

diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 83b3cb367b..d01290fe28 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -747,6 +747,171 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+    >
+      <label
+        class=""
+        title="Input Group 和 Button 结合"
+      >
+        Input Group 和 Button 结合
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <span
+          class="ant-input-group ant-input-group-compact"
+        >
+          <div
+            class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+            style="width:20%"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-activedescendant="undefined_list_0"
+                  aria-autocomplete="list"
+                  aria-controls="undefined_list"
+                  aria-haspopup="listbox"
+                  aria-owns="undefined_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  role="combobox"
+                  style="opacity:0"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+          <div
+            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <span
+                  class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
+                >
+                  <input
+                    aria-activedescendant="undefined_list_0"
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-input"
+                    role="combobox"
+                    type="text"
+                    value=""
+                  />
+                  <span
+                    class="ant-input-suffix"
+                  >
+                    <span
+                      aria-label="search"
+                      class="anticon anticon-search ant-input-search-icon"
+                      role="img"
+                      tabindex="-1"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class=""
+                        data-icon="search"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+          </div>
+          <button
+            class="ant-btn ant-btn-primary"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+            <span>
+              Search
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
 </form>
 `;
 
diff --git a/components/auto-complete/demo/form-debug.md b/components/auto-complete/demo/form-debug.md
index 16375b4efa..700ec5ed2b 100644
--- a/components/auto-complete/demo/form-debug.md
+++ b/components/auto-complete/demo/form-debug.md
@@ -7,7 +7,7 @@ debug: true
 ---
 
 ```jsx
-import { Input, AutoComplete, Form, TreeSelect } from 'antd';
+import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 const formItemLayout = {
@@ -56,6 +56,17 @@ ReactDOM.render(
         </AutoComplete>
       </Input.Group>
     </Form.Item>
+    <Form.Item label="Input Group 和 Button 结合" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '20%' }} />
+        <AutoComplete>
+          <Input.Search />
+        </AutoComplete>
+        <Button type="primary" icon={<SearchOutlined />}>
+          Search
+        </Button>
+      </Input.Group>
+    </Form.Item>
   </Form>,
   mountNode,
 );
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index aa0ac3f3c6..29200db1e5 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -179,10 +179,11 @@
 // --------------------------------------------------
 .btn() {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-weight: @btn-font-weight;
   white-space: nowrap;
-  text-align: center;
   background-image: none;
   border: @btn-border-width @btn-border-style transparent;
   box-shadow: @btn-shadow;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 666d45029d..b0acfaee06 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -68,7 +68,8 @@
 @heading-2-size: ceil(@font-size-base * 2.14);
 @heading-3-size: ceil(@font-size-base * 1.71);
 @heading-4-size: ceil(@font-size-base * 1.42);
-@line-height-base: 1.5;
+// https://github.com/ant-design/ant-design/issues/20210
+@line-height-base: 1.5715;
 @border-radius-base: 2px;
 
 // vertical paddings