Tree: add chalk theme (#6901)

* Playground: bump to new theme

* Tree: update chalk theme

* update doc

* Update var.scss

examples/docs/en-US/tree.md

@@ -248,13 +248,13 @@
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
             </span>
           </span>);
       },
@@ -764,13 +764,13 @@ The content of tree nodes can be customized, so you can add icons or buttons as
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
             </span>
           </span>);
       }

examples/docs/zh-CN/tree.md

@@ -248,13 +248,13 @@
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
             </span>
           </span>);
       },
@@ -763,13 +763,13 @@
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
             </span>
           </span>);
       }

examples/play.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Element from 'main/index.js';
 import App from './play/index.vue';
-import 'packages/theme-default/src/index.css';
+import 'packages/theme-chalk/src/index.scss';
 
 Vue.use(Element);
 

packages/theme-chalk/src/common/var.scss

@@ -533,6 +533,12 @@ $--tag-danger-fill: rgba(255,73,73,0.10);
 $--tag-danger-border: rgba(255,73,73,0.20);
 $--tag-danger-color: $--color-danger;
 
+/* Tree
+-------------------------- */
+$--tree-node-hover-color: $--background-color-base;
+$--tree-text-color: $--color-text-regular;
+$--tree-expand-icon-color: $--color-text-placeholder;
+
 /* Dropdown
 -------------------------- */
 $--dropdown-menu-box-shadow: $--box-shadow-light;

packages/theme-chalk/src/tree.scss

@@ -4,7 +4,7 @@
 @include b(tree) {
   cursor: default;
   background: $--color-white;
-  border: 1px solid $--color-black;
+  color: $--tree-text-color;
 
   @include e(empty-block) {
     position: relative;
@@ -27,41 +27,35 @@
   white-space: nowrap;
 
   @include e(content) {
-    line-height: 36px;
-    height: 36px;
+    display: flex;
+    align-items: center;
+    height: 26px;
     cursor: pointer;
 
-    & > .el-checkbox,
     & > .el-tree-node__expand-icon {
-      margin-right: 8px;
+      margin: 0 8px;
     }
     & > .el-checkbox {
-      vertical-align: middle;
+      margin-right: 8px;
     }
     &:hover {
-      background: $--color-black;
+      background-color: $--tree-node-hover-color;
     }
   }
 
   @include e(expand-icon) {
-    display: inline-block;
     cursor: pointer;
     width: 0;
     height: 0;
-    vertical-align: middle;
     margin-left: 10px;
-    border: 6px solid transparent;
+    border: 3.5px solid transparent;
     border-right-width: 0;
-    border-left-color: $--color-black;
-    border-left-width: 7px;
+    border-left-color: $--tree-expand-icon-color;
+    border-left-width: 6px;
 
     transform: rotate(0deg);
     transition: transform 0.3s ease-in-out;
 
-    &:hover {
-      border-left-color: #999;
-    }
-
     &.expanded {
       transform: rotate(90deg);
     }
@@ -74,16 +68,12 @@
 
   @include e(label) {
     font-size: $--font-size-base;
-    vertical-align: middle;
-    display: inline-block;
   }
 
   @include e(loading-icon) {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 4px;
+    margin-right: 8px;
     font-size: $--font-size-base;
-    color: $--color-black;
+    color: $--tree-expand-icon-color;
   }
 
   & > .el-tree-node__children {

packages/tree/src/tree.vue

@@ -88,7 +88,7 @@
       accordion: Boolean,
       indent: {
         type: Number,
-        default: 16
+        default: 18
       }
     },