update Select and Cascader chalk theme

packages/cascader/src/main.vue

@@ -63,6 +63,7 @@ import emitter from 'element-ui/src/mixins/emitter';
 import Locale from 'element-ui/src/mixins/locale';
 import { t } from 'element-ui/src/locale';
 import debounce from 'throttle-debounce/debounce';
+import merge from 'element-ui/src/utils/merge';
 
 const popperMixin = {
   props: {
@@ -76,7 +77,9 @@ const popperMixin = {
     popperOptions: Popper.props.popperOptions
   },
   methods: Popper.methods,
-  data: Popper.data,
+  data() {
+    return merge({ visibleArrow: true }, Popper.data);
+  },
   beforeDestroy: Popper.beforeDestroy
 };
 

packages/theme-chalk/src/cascader.scss

@@ -92,8 +92,7 @@
   border-radius: $--border-radius-small;
   box-shadow: $--select-dropdown-shadow;
 
-  &.el-popper[x-placement^="bottom"] .popper__arrow {
-    // dont do that, bro dont do that
+  &.el-popper .popper__arrow {
     left: 24px !important;
   }
 }
@@ -155,12 +154,7 @@
     }
 
     @include when(active) {
-      color: $--color-white;
-      background-color: $--select-option-selected;
-
-      &:hover {
-        background-color: $--select-option-selected-hover;
-      }
+      color: $--select-option-selected;
     }
 
     &:hover {

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

@@ -220,7 +220,7 @@ $--select-option-disabled-background: $--color-white;
 $--select-option-height: 34px;
 $--select-option-hover-background: $--background-color-base;
 $--select-option-selected: $--color-primary;
-$--select-option-selected-hover: mix($--color-primary, black, 95%);
+$--select-option-selected-hover: $--background-color-base;
 
 $--select-group-color: $--color-info;
 $--select-group-height: 30px;
@@ -601,15 +601,14 @@ $--rate-icon-color: $--color-text-placeholder;
 
 /* DatePicker
 --------------------------*/
-$--datepicker-color: $--link-color;
-$--datepicker-off-color: #ddd;
-$--datepicker-header-color: $--border-color-hover;
-$--datepicker-icon-color: $--color-text-secondary;
+$--datepicker-color: $--color-text-regular;
+$--datepicker-off-color: $--color-text-placeholder;
+$--datepicker-header-color: $--color-text-regular;
+$--datepicker-icon-color: $--color-text-primary;
 $--datepicker-border-color: $--disabled-border-base;
 $--datepicker-inner-border-color: #e4e4e4;
-$--datepicker-cell-hover-color: $--color-text-secondary;
-$--datepicker-inrange-color: tint($--color-primary, 0.8);
-$--datepicker-inrange-hover-color: tint($--color-primary, 0.64);
+$--datepicker-inrange-color: $--border-color-extra-light;
+$--datepicker-inrange-hover-color: $--border-color-extra-light;
 $--datepicker-active-color: $--color-primary;
 $--datepicker-text-hover-color: $--color-primary;
 

packages/theme-chalk/src/option.scss

@@ -29,12 +29,7 @@
     }
 
     &.selected {
-      color: $--color-white;
-      background-color: $--select-option-selected;
-
-      &.hover {
-        background-color: $--select-option-selected-hover;
-      }
+      color: $--select-option-selected;
     }
 
     & span {

packages/theme-chalk/src/select-dropdown.scss

@@ -36,8 +36,8 @@
     padding: 0;
   }
 
-  &[x-placement^="bottom"] .popper__arrow {
-    left: 10% !important;
+  & .popper__arrow {
+    left: 24px !important;
   }
 }
 

packages/theme-chalk/src/select.scss

@@ -107,10 +107,6 @@
     z-index: $--index-normal;
     top: 50%;
     transform: translateY(-50%);
-
-    .el-tag {
-
-    }
   }
 
   & .el-tag__close {

test/unit/specs/cascader.spec.js

@@ -64,17 +64,17 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3); // two menus and an arrow
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -155,17 +155,17 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -299,7 +299,7 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(1);
+        expect(menuElm.children.length).to.be.equal(2);
         expect(item1.classList.contains('is-active')).to.be.false;
         done();
       });
@@ -362,7 +362,7 @@ describe('Cascader', () => {
       const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
       const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
 
-      expect(menuElm.children.length).to.be.equal(3);
+      expect(menuElm.children.length).to.be.equal(4);
       expect(item1.classList.contains('is-active')).to.be.true;
       expect(item2.classList.contains('is-active')).to.be.true;
       expect(item3.classList.contains('is-active')).to.be.true;
@@ -432,17 +432,17 @@ describe('Cascader', () => {
 
       triggerEvent(item1, 'mouseenter');
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         triggerEvent(item2, 'mouseenter');
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -514,19 +514,19 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
         expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
           expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -599,7 +599,7 @@ describe('Cascader', () => {
         const menuElm = menu.$el;
         const item1 = menuElm.querySelector('.el-cascader-menu__item');
 
-        expect(menuElm.children.length).to.be.equal(1);
+        expect(menuElm.children.length).to.be.equal(2);
         expect(menuElm.children[0].children.length).to.be.equal(3);
 
         item1.click();

test/unit/specs/color-picker.spec.js

@@ -232,7 +232,7 @@ describe('ColorPicker', () => {
       alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
       vm.$nextTick(() => {
         const picker = vm.$children[0];
-        expect(picker.color._alpha < 1).to.true;
+        expect(picker.color._alpha < 100).to.true;
         done();
       });
     }, ANIMATION_TIME);