From a366c84ee2addb16d38bd42b16919403b0108d99 Mon Sep 17 00:00:00 2001
From: zhuzilv <61216850+zhutubao@users.noreply.github.com>
Date: Thu, 29 Apr 2021 13:49:25 +0800
Subject: [PATCH] fix: some components centered (#965)

---
 src/components/dropdown/Dropdown.mdx         |  7 ++--
 src/components/dropdown/Dropdown.stories.tsx | 39 ++++++++++++--------
 src/components/time-picker/index.tsx         |  2 +-
 src/components/time-picker/style/index.less  |  7 ++--
 src/components/time-picker/style/picker.less |  5 ++-
 src/components/tree/style/index.less         |  5 ++-
 6 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/components/dropdown/Dropdown.mdx b/src/components/dropdown/Dropdown.mdx
index 4487fa1b31..eaee4eb893 100644
--- a/src/components/dropdown/Dropdown.mdx
+++ b/src/components/dropdown/Dropdown.mdx
@@ -3,13 +3,14 @@ import Dropdown from './index';
 
 # Dropdown 下拉菜单
 
-<Subtitle>向下弹出的列表。当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。</Subtitle>
+<Subtitle>
+  向下弹出的列表。当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
+</Subtitle>
 
 [1] 用于收罗一组命令操作。
 
 [2] Select 用于选择，而 Dropdown 是命令集合。
 
-
 ## 应用场景
 
 【在控件中使用】
@@ -39,6 +40,6 @@ import Dropdown from './index';
 
 ### 位置
 
-一共 12 种位置。位置选择原则：下拉菜单需要显示完整且不错乱。
+一共 3 种位置。位置选择原则：下拉菜单需要显示完整且不错乱。
 
 [Example](/?path=/story/functional-components-dropdown--placement)
diff --git a/src/components/dropdown/Dropdown.stories.tsx b/src/components/dropdown/Dropdown.stories.tsx
index 07851547d0..2ec8599eb8 100644
--- a/src/components/dropdown/Dropdown.stories.tsx
+++ b/src/components/dropdown/Dropdown.stories.tsx
@@ -5,6 +5,8 @@ import Docs from './Dropdown.mdx';
 import Dropdown, { DropdownProps } from './index';
 import './style';
 import { Button, List } from '../..';
+import ListPro from '../list-pro';
+import { properties } from '../list/__tests__/data';
 
 export default {
   title: 'Functional Components/Dropdown',
@@ -23,47 +25,54 @@ const overlay = (
       height: 120,
       border: '1px dashed #DCDFED',
       borderRadius: '4px',
-      backgroundColor: '#FFFFFF',
+      backgroundColor: '#FFF',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
     }}
   >
-    内容区域
+    {/* <SearchBar /> */}
+    <List items={properties} />
   </div>
 );
 
+const options = [
+  { value: 'a', label: '功能名称' },
+  { value: 'b', label: '功能名称' },
+  { value: 'c', label: '功能名称' },
+  { value: 'd', label: '功能名称' },
+  { value: 'e', label: '功能名称' },
+  { value: 'f', label: '功能名称' },
+  { value: 'g', label: '功能名称' },
+];
+
 const Template: Story<DropdownProps> = (args) => (
   <Dropdown {...args}>
-    <Button>点击下拉</Button>
+    <Button>更多功能</Button>
   </Dropdown>
 );
 export const Default = Template.bind({});
 Default.args = {
   overlay,
+
   placement: 'bottom',
 };
 
-const options = [
-  { value: 'a', label: '功能名称' },
-  { value: 'c', label: '功能名称' },
-];
 const PlacementTemplate: Story<DropdownProps> = (args) => (
-  <div style={{ padding: 300 }}>
-    <Dropdown {...args} placement="bottomRight">
-      <Button type="text" icon={<MoreOutlined />} style={{ marginLeft: '64px' }} />
+  <div style={{ display: 'flex', justifyContent: 'space-around', height: 800, flexWrap: 'wrap' }}>
+    <Dropdown {...args} placement="bottomLeft">
+      <Button type="text" icon={<MoreOutlined />} style={{ margin: '50px' }} />
     </Dropdown>
     <Dropdown {...args} placement="bottom">
-      <Button type="text" icon={<MoreOutlined />} style={{ margin: '0px 128px' }} />
+      <Button type="text" icon={<MoreOutlined />} style={{ margin: '50px' }} />
     </Dropdown>
-    <Dropdown {...args} placement="bottomLeft">
-      <Button type="text" icon={<MoreOutlined />} />
+    <Dropdown {...args} placement="bottomRight">
+      <Button type="text" icon={<MoreOutlined />} style={{ margin: '50px' }} />
     </Dropdown>
   </div>
 );
-
 export const Placement = PlacementTemplate.bind({});
 
 Placement.args = {
-  overlay: <List dataSource={options} width={144} height={88} />,
+  overlay: <ListPro dataSource={options} width={144} height={88} />,
 };
diff --git a/src/components/time-picker/index.tsx b/src/components/time-picker/index.tsx
index bcdc368977..4540771099 100644
--- a/src/components/time-picker/index.tsx
+++ b/src/components/time-picker/index.tsx
@@ -14,7 +14,7 @@ export default ({ prefixCls: customizePrefixCls, ...props }: TimePickerProps) =>
       <TimePicker
         prefixCls={prefixCls}
         inputIcon={<StopWatchOutlined color="#5C4E61" />}
-        clearIcon={<CloseCircleFilled />}
+        clearIcon={<CloseCircleFilled color="#5C4E61" />}
         {...props}
       />
     </>
diff --git a/src/components/time-picker/style/index.less b/src/components/time-picker/style/index.less
index 697052716f..31446f1dad 100644
--- a/src/components/time-picker/style/index.less
+++ b/src/components/time-picker/style/index.less
@@ -5,17 +5,16 @@
 
 .@{prefixClass} {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   box-sizing: border-box;
+  width: 160px;
   * {
     box-sizing: border-box;
   }
 
-  width: 160px;
-
   &-addon-icon {
     position: absolute;
-    top: 12px;
     right: 14px;
     width: 20px;
     height: 20px;
diff --git a/src/components/time-picker/style/picker.less b/src/components/time-picker/style/picker.less
index 79a98d1fda..06190ff770 100644
--- a/src/components/time-picker/style/picker.less
+++ b/src/components/time-picker/style/picker.less
@@ -8,7 +8,7 @@
     width: 100%;
     height: 40px;
     padding: 9px 20px;
-    color: #666;
+    color: #313e75;
     font-size: @size-font-14;
     line-height: 1.5;
     background-color: #fff;
@@ -19,6 +19,9 @@
     cursor: text;
     transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
       box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    ::-webkit-input-placeholder {
+      color: #dbdee8;
+    }
     &:hover {
       border: 1px solid @palette-blue-5;
     }
diff --git a/src/components/tree/style/index.less b/src/components/tree/style/index.less
index 77b3339774..ec023bce2e 100644
--- a/src/components/tree/style/index.less
+++ b/src/components/tree/style/index.less
@@ -115,9 +115,10 @@
 
     // >>> Title
     & &-node-content-wrapper {
+      display: flex;
+      align-items: center;
       width: 100%;
       cursor: pointer;
-
       .@{custom-tree-prefix-cls}-title {
         overflow: hidden;
         white-space: nowrap;
@@ -129,7 +130,7 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        margin: 2px 8px 0 0;
+        margin: 0 8px;
         line-height: 16px;
         text-align: center;
         vertical-align: middle;