fix(tree-select): fix the tree-select style problems (#690)

fix the tree-select style problems Co-authored-by: Jack <panjie@growingio.com>
growingio · Jan 6, 2021 · d8b3cd1 · d8b3cd1 · vercel · Jan 6, 2021
1 parent 6cf6e62
commit d8b3cd1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/src/components/tree-select/__tests__/__snapshots__/tree-select.test.js.snap b/src/components/tree-select/__tests__/__snapshots__/tree-select.test.js.snap
@@ -1184,9 +1184,9 @@ initialize {
                   "attribs": Object {
                     "class": "gio-icon-svg",
                     "fill": "currentColor",
-                    "height": "12px",
+                    "height": "16px",
                     "viewBox": "0 0 14 14",
-                    "width": "12px",
+                    "width": "16px",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
@@ -1465,9 +1465,9 @@ initialize {
                 "attribs": Object {
                   "class": "gio-icon-svg",
                   "fill": "currentColor",
-                  "height": "12px",
+                  "height": "16px",
                   "viewBox": "0 0 14 14",
-                  "width": "12px",
+                  "width": "16px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
@@ -2180,9 +2180,9 @@ initialize {
                   "attribs": Object {
                     "class": "gio-icon-svg",
                     "fill": "currentColor",
-                    "height": "12px",
+                    "height": "16px",
                     "viewBox": "0 0 14 14",
-                    "width": "12px",
+                    "width": "16px",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
@@ -2461,9 +2461,9 @@ initialize {
                 "attribs": Object {
                   "class": "gio-icon-svg",
                   "fill": "currentColor",
-                  "height": "12px",
+                  "height": "16px",
                   "viewBox": "0 0 14 14",
-                  "width": "12px",
+                  "width": "16px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [
@@ -3182,9 +3182,9 @@ initialize {
                   "attribs": Object {
                     "class": "gio-icon-svg",
                     "fill": "currentColor",
-                    "height": "12px",
+                    "height": "16px",
                     "viewBox": "0 0 14 14",
-                    "width": "12px",
+                    "width": "16px",
                     "xmlns": "http://www.w3.org/2000/svg",
                   },
                   "children": Array [
@@ -3463,9 +3463,9 @@ initialize {
                 "attribs": Object {
                   "class": "gio-icon-svg",
                   "fill": "currentColor",
-                  "height": "12px",
+                  "height": "16px",
                   "viewBox": "0 0 14 14",
-                  "width": "12px",
+                  "width": "16px",
                   "xmlns": "http://www.w3.org/2000/svg",
                 },
                 "children": Array [

diff --git a/src/components/tree-select/iconUtil.tsx b/src/components/tree-select/iconUtil.tsx
@@ -24,7 +24,7 @@ export default function getIcons({
   // Clear Icon
   let mergedClearIcon = clearIcon;
   if (!clearIcon) {
-    mergedClearIcon = <CloseCircleFilled size="12px" />;
+    mergedClearIcon = <CloseCircleFilled size="16px" />;
   }
 
   // Arrow item icon
@@ -34,7 +34,7 @@ export default function getIcons({
   } else {
     const iconCls = `${prefixCls}-suffix`;
     mergedSuffixIcon = () => {
-      return <CaretDownOutlined className={iconCls} size="12px" />;
+      return <CaretDownOutlined className={iconCls} size="16px" />;
     };
   }
 
@@ -43,7 +43,7 @@ export default function getIcons({
   if (menuItemSelectedIcon !== undefined) {
     mergedItemIcon = menuItemSelectedIcon;
   } else if (multiple) {
-    mergedItemIcon = <CheckOutlined size="12px" />;
+    mergedItemIcon = <CheckOutlined size="16px" />;
   } else {
     mergedItemIcon = null;
   }
@@ -52,7 +52,7 @@ export default function getIcons({
   if (removeIcon !== undefined) {
     mergedRemoveIcon = removeIcon;
   } else {
-    mergedRemoveIcon = <CloseOutlined size="12px" />;
+    mergedRemoveIcon = <CloseOutlined size="16px" />;
   }
 
   return {

diff --git a/src/components/tree-select/style/index.less b/src/components/tree-select/style/index.less
@@ -143,18 +143,19 @@
     position: relative;
     display: flex;
     flex-wrap: wrap;
+    box-sizing: border-box;
     width: 100%;
     min-height: 40px;
-    padding: 0 8px 0 16px;
+    padding: 0 32px 0 16px;
     background-color: #fff;
     border: 1px solid @palette-gray-3;
     border-radius: 4px;
-    &:hover {
-      border: 1px solid @palette-blue-5;
-    }
     cursor: text;
     -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    &:hover {
+      border: 1px solid @palette-blue-5;
+    }
     .@{select-prefix-cls}-selection-search {
       position: absolute;
       top: 0;
@@ -193,18 +194,14 @@
   }
   .@{select-prefix-cls}-arrow {
     position: absolute;
-    top: 53%;
     right: 8px;
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin-top: -6px;
-    color: inherit;
-    color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #a3adc8;
     font-size: 12px;
     font-style: normal;
-    line-height: 1;
-    text-align: center;
     text-transform: none;
     pointer-events: none;
     text-rendering: optimizeLegibility;