From 0364f0a35375c9bab7b5b87d044269d1eda42424 Mon Sep 17 00:00:00 2001
From: Tyler Trotter <tylertrotter@gmail.com>
Date: Fri, 11 Sep 2020 10:21:37 -0400
Subject: [PATCH] Standardize class names. (#43)

* Standardize class names.

* Update class names in css and tests.

* Get same tests to pass.
---
 .../components/theme/components-preview.vue   |   6 +-
 packages/date-picker/src/basic/date-table.vue |  20 ++--
 .../date-picker/src/basic/month-table.vue     |   6 +-
 .../date-picker/src/basic/time-spinner.vue    |   6 +-
 packages/date-picker/src/basic/year-table.vue |  44 ++++----
 .../date-picker/src/panel/time-select.vue     |   4 +-
 packages/table/src/table-body.js              |   2 +-
 packages/table/src/table-column.js            |   2 +-
 .../src/date-picker/date-table.scss           |  15 ++-
 .../src/date-picker/month-table.scss          |  18 +--
 .../src/date-picker/time-spinner.scss         |   8 +-
 .../src/date-picker/year-table.scss           |  10 +-
 packages/theme-chalk/src/pagination.scss      |  10 +-
 packages/theme-chalk/src/popper.scss          |  16 +--
 packages/theme-chalk/src/slider.scss          |   2 +-
 packages/theme-chalk/src/table-column.scss    |   2 +-
 packages/theme-chalk/src/table.scss           |  14 +--
 packages/theme-chalk/src/time-select.scss     |   4 +-
 packages/theme-chalk/src/tooltip.scss         |  24 ++--
 src/utils/popper.js                           |   4 +-
 src/utils/vue-popper.js                       |   2 +-
 test/unit/specs/date-picker.spec.js           | 104 +++++++++---------
 test/unit/specs/table.spec.js                 |  28 ++---
 test/unit/specs/time-picker.spec.js           |   6 +-
 test/unit/specs/time-select.spec.js           |   8 +-
 25 files changed, 182 insertions(+), 183 deletions(-)

diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue
index 0f5b34909c..8d9a389143 100644
--- a/examples/components/theme/components-preview.vue
+++ b/examples/components/theme/components-preview.vue
@@ -327,14 +327,14 @@
     </el-row>
     <h4>Tooltip</h4>
     <el-row>
-      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-dark" style="position: relative; width: 40px;text-align: center;">Dark<div x-arrow="" class="popper__arrow"></div>
+      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-dark" style="position: relative; width: 40px;text-align: center;">Dark<div x-arrow="" class="el-popper__arrow"></div>
       </div>
-      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-light" style="margin-top: 10px;position: relative; width: 40px;text-align: center;">Light<div x-arrow="" class="popper__arrow"></div>
+      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-light" style="margin-top: 10px;position: relative; width: 40px;text-align: center;">Light<div x-arrow="" class="el-popper__arrow"></div>
       </div>
     </el-row>
     <h4>Popover</h4>
     <el-row>
-      <div role="tooltip" x-placement="top" id="el-popover-2936" aria-hidden="true" class="el-popover el-popper el-popover--plain" tabindex="0" style="width: 200px; position: relative; "><div class="el-popover__title">Title</div>this is content, this is content, this is content<div x-arrow="" class="popper__arrow"></div></div>
+      <div role="tooltip" x-placement="top" id="el-popover-2936" aria-hidden="true" class="el-popover el-popper el-popover--plain" tabindex="0" style="width: 200px; position: relative; "><div class="el-popover__title">Title</div>this is content, this is content, this is content<div x-arrow="" class="el-popper__arrow"></div></div>
     </el-row>
     <h4>Card</h4>
     <el-row>
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
index ccef31f3a6..4a031b2595 100644
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -14,14 +14,14 @@
     <tr
       class="el-date-table__row"
       v-for="(row, key) in rows"
-      :class="{ current: isWeekActive(row[1]) }"
+      :class="{ ['is-selected']: isWeekActive(row[1]) }"
       :key="key">
       <td
         v-for="(cell, key) in row"
         :class="getCellClasses(cell)"
         :key="key">
         <div>
-          <span>
+          <span class="el-date-picker__cell">
             {{ cell.text }}
           </span>
         </div>
@@ -181,14 +181,14 @@
                 cell.text = count++;
               } else {
                 cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
-                cell.type = 'prev-month';
+                cell.type = 'is-muted';
               }
             } else {
               if (count <= dateCountOfMonth) {
                 cell.text = count++;
               } else {
                 cell.text = count++ - dateCountOfMonth;
-                cell.type = 'next-month';
+                cell.type = 'is-muted';
               }
             }
 
@@ -255,11 +255,11 @@
 
         let classes = [];
         if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
-          classes.push('available');
+          classes.push('is-selectable');
           if (cell.type === 'today') {
-            classes.push('today');
+            classes.push('is-current');
           }
-        } else {
+        } else if (cell.type !== 'normal') {
           classes.push(cell.type);
         }
 
@@ -268,7 +268,7 @@
         }
 
         if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.date || this.value)) {
-          classes.push('current');
+          classes.push('is-selected');
         }
 
         if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
@@ -284,11 +284,11 @@
         }
 
         if (cell.disabled) {
-          classes.push('disabled');
+          classes.push('is-disabled');
         }
 
         if (cell.selected) {
-          classes.push('selected');
+          classes.push('is-selected');
         }
 
         if (cell.customClass) {
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index c25e6a07bd..97801d7b44 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -4,7 +4,7 @@
     <tr v-for="(row, key) in rows" :key="key">
       <td :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
         <div>
-          <a class="cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
+          <a class="el-date-picker__cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
         </div>
       </td>
     </tr>
@@ -107,8 +107,8 @@
         style.disabled = typeof this.disabledDate === 'function'
           ? datesInMonth(year, month).every(this.disabledDate)
           : false;
-        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
-        style.today = today.getFullYear() === year && today.getMonth() === month;
+        style['is-selected'] = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
+        style['is-current'] = today.getFullYear() === year && today.getMonth() === month;
         style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));
 
         if (cell.inRange) {
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index 8e75544cb9..8e82099627 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -15,7 +15,7 @@
           v-for="(disabled, hour) in hoursList"
           class="el-time-spinner__item"
           :key="hour"
-          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ formatListItem('hours', hour) }}{{ getAmPm(hour, { prefix: ' ' }) }}</li>
+          :class="{ 'active': hour === hours, 'is-disabled': disabled }">{{ formatListItem('hours', hour) }}{{ getAmPm(hour, { prefix: ' ' }) }}</li>
       </el-scrollbar>
       <el-scrollbar
         @mouseenter.native="emitSelectRange('minutes')"
@@ -31,7 +31,7 @@
           v-for="(enabled, key) in minutesList"
           :key="key"
           class="el-time-spinner__item"
-          :class="{ 'active': key === minutes, disabled: !enabled }">{{ formatListItem('minutes', key) }}</li>
+          :class="{ 'active': key === minutes, 'is-disabled': !enabled }">{{ formatListItem('minutes', key) }}</li>
       </el-scrollbar>
       <el-scrollbar
         v-show="showSeconds"
@@ -77,7 +77,7 @@
         <ul class="el-time-spinner__list" ref="hours">
           <li
             class="el-time-spinner__item"
-            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
+            :class="{ 'active': hour === hours, 'is-disabled': hoursList[hour] }"
             v-for="(hour, key) in arrowHourList"
             :key="key">{{ hour === undefined ? '' : formatListItem('hours', hour) + (showAmPm ? '' : getAmPm(hour, { prefix: ' ' })) }}</li>
         </ul>
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
index 02509adcb3..43c73980d3 100644
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -2,39 +2,39 @@
   <table @click="handleYearTableClick" class="el-year-table">
     <tbody>
     <tr>
-      <td class="available" :class="getCellStyle(startYear + 0)">
-        <a class="cell">{{ startYear }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 0)">
+        <a class="el-date-picker__cell">{{ startYear }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 1)">
-        <a class="cell">{{ startYear + 1 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 1)">
+        <a class="el-date-picker__cell">{{ startYear + 1 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 2)">
-        <a class="cell">{{ startYear + 2 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 2)">
+        <a class="el-date-picker__cell">{{ startYear + 2 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 3)">
-        <a class="cell">{{ startYear + 3 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 3)">
+        <a class="el-date-picker__cell">{{ startYear + 3 }}</a>
       </td>
     </tr>
     <tr>
-      <td class="available" :class="getCellStyle(startYear + 4)">
-        <a class="cell">{{ startYear + 4 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 4)">
+        <a class="el-date-picker__cell">{{ startYear + 4 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 5)">
-        <a class="cell">{{ startYear + 5 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 5)">
+        <a class="el-date-picker__cell">{{ startYear + 5 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 6)">
-        <a class="cell">{{ startYear + 6 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 6)">
+        <a class="el-date-picker__cell">{{ startYear + 6 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 7)">
-        <a class="cell">{{ startYear + 7 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 7)">
+        <a class="el-date-picker__cell">{{ startYear + 7 }}</a>
       </td>
     </tr>
     <tr>
-      <td class="available" :class="getCellStyle(startYear + 8)">
-        <a class="cell">{{ startYear + 8 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 8)">
+        <a class="el-date-picker__cell">{{ startYear + 8 }}</a>
       </td>
-      <td class="available" :class="getCellStyle(startYear + 9)">
-        <a class="cell">{{ startYear + 9 }}</a>
+      <td class="is-selectable" :class="getCellStyle(startYear + 9)">
+        <a class="el-date-picker__cell">{{ startYear + 9 }}</a>
       </td>
       <td></td>
       <td></td>
@@ -81,8 +81,8 @@
         style.disabled = typeof this.disabledDate === 'function'
           ? datesInYear(year).every(this.disabledDate)
           : false;
-        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
-        style.today = today.getFullYear() === year;
+        style['is-selected'] = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
+        style['is-current'] = today.getFullYear() === year;
         style.default = this.defaultValue && this.defaultValue.getFullYear() === year;
 
         return style;
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 9d0a3e0f49..76bfbe23d4 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -9,7 +9,7 @@
       <el-scrollbar noresize wrap-class="el-picker-panel__content">
         <div class="time-select-item"
           v-for="item in items"
-          :class="{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }"
+          :class="{ 'is-selected': value === item.value, 'is-disabled': item.disabled, default: item.value === defaultValue }"
           :disabled="item.disabled"
           :key="item.value"
           @click="handleClick(item)">{{ item.value }}</div>
@@ -128,7 +128,7 @@
       handleMenuEnter() {
         const selected = this.items.map(item => item.value).indexOf(this.value) !== -1;
         const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1;
-        const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.disabled)';
+        const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.is-disabled)';
         this.$nextTick(() => this.scrollToOption(option));
       },
 
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 4be819a92a..f6abbf96ad 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -164,7 +164,7 @@ export default {
     getRowClass(row, rowIndex) {
       const classes = ['el-table__row'];
       if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
-        classes.push('current-row');
+        classes.push('is-selected');
       }
 
       if (this.stripe && rowIndex % 2 === 1) {
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index 528eff1ab1..73b367ce14 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -158,7 +158,7 @@ export default {
       // TODO: 这里的实现调整
       if (column.type === 'expand') {
         // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
-        column.renderCell = (h, data) => (<div class="cell">
+        column.renderCell = (h, data) => (<div class="el-date-picker__cell">
           { originRenderCell(h, data) }
         </div>);
         this.owner.renderExpanded = (h, data) => {
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 5fed1bbd30..735d0e40a8 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -11,7 +11,7 @@
         div {
           background-color: $--datepicker-inrange-background-color;
         }
-        td.available:hover {
+        td.is-selectable:hover {
           color: $--datepicker-font-color;
         }
         td:first-child div {
@@ -26,7 +26,7 @@
         }
       }
 
-      &.current div {
+      &.is-selected div {
         background-color: $--datepicker-inrange-background-color;
       }
     }
@@ -59,12 +59,11 @@
       border-radius: 50%;
     }
 
-    &.next-month,
-    &.prev-month {
+    &.is-muted {
       color: $--datepicker-off-font-color;
     }
 
-    &.today {
+    &.is-current {
       position: relative;
       span {
         color: $--color-primary;
@@ -76,7 +75,7 @@
       }
     }
 
-    &.available:hover {
+    &.is-selectable:hover {
       color: $--datepicker-hover-font-color;
     }
 
@@ -87,7 +86,7 @@
       }
     }
 
-    &.current:not(.disabled) span {
+    &.is-selected:not(.is-disabled) span {
       color: $--color-white;
       background-color: $--datepicker-active-color;
     }
@@ -113,7 +112,7 @@
       border-bottom-right-radius: 15px;
     }
 
-    &.disabled div {
+    &.is-disabled div {
       background-color: $--background-color-base;
       opacity: 1;
       cursor: not-allowed;
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index 1164f70b5b..45a1525801 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -14,18 +14,18 @@
       padding: 6px 0;
       box-sizing: border-box;
     }
-    &.today {
-      .cell {
+    &.is-current {
+      .el-date-picker__cell {
         color: $--color-primary;
         font-weight: bold;
       }
-      &.start-date .cell,
-      &.end-date .cell {
+      &.start-date .el-date-picker__cell,
+      &.end-date .el-date-picker__cell {
         color: $--color-white;
       }
     }
 
-    &.disabled .cell {
+    &.is-disabled .el-date-picker__cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
       color: $--color-text-placeholder;
@@ -35,7 +35,7 @@
       }
     }
 
-    .cell {
+    .el-date-picker__cell {
       width: 60px;
       height: 36px;
       display: block;
@@ -59,8 +59,8 @@
       color: $--color-white;
     }
 
-    &.start-date .cell,
-    &.end-date .cell {
+    &.start-date .el-date-picker__cell,
+    &.end-date .el-date-picker__cell {
       color: $--color-white;
       background-color: $--datepicker-active-color;
     }
@@ -75,7 +75,7 @@
       border-bottom-right-radius: 24px;
     }
 
-    &.current:not(.disabled) .cell {
+    &.is-selected:not(.is-disabled) .el-date-picker__cell {
       color: $--datepicker-active-color;
     }
   }
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index c63fc74cb6..f5dd53f92c 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -34,7 +34,7 @@
         transform: translateY(-32px);
       }
 
-      .el-time-spinner__item:hover:not(.disabled):not(.active) {
+      .el-time-spinner__item:hover:not(.is-disabled):not(.active) {
         background: $--color-white;
         cursor: default;
       }
@@ -98,17 +98,17 @@
     font-size: 12px;
     color: $--color-text-regular;
 
-    &:hover:not(.disabled):not(.active) {
+    &:hover:not(.is-disabled):not(.active) {
       background: $--background-color-base;
       cursor: pointer;
     }
 
-    &.active:not(.disabled) {
+    &.active:not(.is-disabled) {
       color: $--color-text-primary;
       font-weight: bold;
     }
 
-    &.disabled {
+    &.is-disabled {
       color: $--color-text-placeholder;
       cursor: not-allowed;
     }
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 18fbed921f..a519f19598 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -14,14 +14,14 @@
     padding: 20px 3px;
     cursor: pointer;
 
-    &.today {
-      .cell {
+    &.is-current {
+      .el-date-picker__cell {
         color: $--color-primary;
         font-weight: bold;
       }
     }
 
-    &.disabled .cell {
+    &.is-disabled .el-date-picker__cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
       color: $--color-text-placeholder;
@@ -31,7 +31,7 @@
       }
     }
 
-    .cell {
+    .el-date-picker__cell {
       width: 48px;
       height: 32px;
       display: block;
@@ -44,7 +44,7 @@
       }
     }
 
-    &.current:not(.disabled) .cell {
+    &.is-selected:not(.is-disabled) .el-date-picker__cell {
       color: $--datepicker-active-color;
     }
   }
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 02384e6774..dfc7139fba 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -87,7 +87,7 @@
     padding-left: 12px;    
   }
 
-  .el-pager li.disabled {
+  .el-pager li.is-disabled {
     color: $--color-text-placeholder;
     cursor: not-allowed;
   }
@@ -106,7 +106,7 @@
       min-width: 22px;
     }
 
-    .arrow.disabled {
+    .arrow.is-disabled {
       visibility: hidden;
     }
 
@@ -199,7 +199,7 @@
       min-width: 30px;
       border-radius: 2px;
 
-      &.disabled {
+      &.is-disabled {
         color: $--color-text-placeholder;
       }
     }
@@ -212,7 +212,7 @@
       }
     }
 
-    .el-pager li:not(.disabled) {
+    .el-pager li:not(.is-disabled) {
       &:hover {
         color: $--pagination-hover-color;
       }
@@ -266,7 +266,7 @@
       line-height: 28px;
       color: $--pagination-button-color;
 
-      &.disabled {
+      &.is-disabled {
         color: $--color-text-placeholder;
       }
     }
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
index 2104f599bb..d219a7d088 100644
--- a/packages/theme-chalk/src/popper.scss
+++ b/packages/theme-chalk/src/popper.scss
@@ -2,8 +2,8 @@
 @import "common/var";
 
 @include b(popper) {
-  .popper__arrow,
-  .popper__arrow::after {
+  .el-popper__arrow,
+  .el-popper__arrow::after {
     position: absolute;
     display: block;
     width: 0;
@@ -12,12 +12,12 @@
     border-style: solid;
   }
 
-  .popper__arrow {
+  .el-popper__arrow {
     border-width: $--popover-arrow-size;
     filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
   }
 
-  .popper__arrow::after {
+  .el-popper__arrow::after {
     content: " ";
     border-width: $--popover-arrow-size;
   }
@@ -26,7 +26,7 @@
     margin-bottom: #{$--popover-arrow-size + 6};
   }
 
-  &[x-placement^="top"] .popper__arrow {
+  &[x-placement^="top"] .el-popper__arrow {
     bottom: -$--popover-arrow-size;
     left: 50%;
     margin-right: #{$--tooltip-arrow-size / 2};
@@ -45,7 +45,7 @@
     margin-top: #{$--popover-arrow-size + 6};
   }
 
-  &[x-placement^="bottom"] .popper__arrow {
+  &[x-placement^="bottom"] .el-popper__arrow {
     top: -$--popover-arrow-size;
     left: 50%;
     margin-right: #{$--tooltip-arrow-size / 2};
@@ -64,7 +64,7 @@
     margin-left: #{$--popover-arrow-size + 6};
   }
 
-  &[x-placement^="right"] .popper__arrow {
+  &[x-placement^="right"] .el-popper__arrow {
     top: 50%;
     left: -$--popover-arrow-size;
     margin-bottom: #{$--tooltip-arrow-size / 2};
@@ -83,7 +83,7 @@
     margin-right: #{$--popover-arrow-size + 6};
   }
 
-  &[x-placement^="left"] .popper__arrow {
+  &[x-placement^="left"] .el-popper__arrow {
     top: 50%;
     right: -$--popover-arrow-size;
     margin-bottom: #{$--tooltip-arrow-size / 2};
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index 666c52dccf..58a67901e8 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -23,7 +23,7 @@
       width: auto;
     }
 
-    &.disabled {
+    &.is-disabled {
       cursor: default;
 
       .el-slider__bar {
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
index 6fd54e7a47..8a92babbbe 100644
--- a/packages/theme-chalk/src/table-column.scss
+++ b/packages/theme-chalk/src/table-column.scss
@@ -5,7 +5,7 @@
 
 @include b(table-column) {
   @include m(selection) {
-    .cell {
+    .el-date-picker__cell {
       padding-left: 14px;
       padding-right: 14px;
     }
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index 319c5d135a..fd1670d929 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -35,7 +35,7 @@
 
   // 展开行
   @include e(expand-column) {
-    .cell {
+    .el-date-picker__cell {
       padding: 0;
       text-align: center;
     }
@@ -189,7 +189,7 @@
     user-select: none;
     background-color: $--table-header-background-color;
 
-    > .cell {
+    > .el-date-picker__cell {
       display: inline-block;
       box-sizing: border-box;
       position: relative;
@@ -225,7 +225,7 @@
     }
   }
 
-  .cell {
+  .el-date-picker__cell {
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -283,7 +283,7 @@
     th, td {
       border-right: $--table-border;
 
-      &:first-child .cell {
+      &:first-child .el-date-picker__cell {
         padding-left: 10px;
       }
     }
@@ -485,7 +485,7 @@
           background: #FAFAFA;
         }
 
-        &.current-row td {
+        &.is-selected td {
           background-color: $--table-current-row-background-color;
         }
       }
@@ -495,7 +495,7 @@
   @include e(body) {
     tr.hover-row {
       &, &.el-table__row--striped {
-        &, &.current-row {
+        &, &.is-selected {
           > td {
             background-color: $--table-row-hover-background-color;
           }
@@ -503,7 +503,7 @@
       }
     }
 
-    tr.current-row > td {
+    tr.is-selected > td {
       background-color: $--table-current-row-background-color;
     }
   }
diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss
index 0de3853873..1c4ac181d9 100644
--- a/packages/theme-chalk/src/time-select.scss
+++ b/packages/theme-chalk/src/time-select.scss
@@ -20,12 +20,12 @@
   line-height: 20px;
 }
 
-.time-select-item.selected:not(.disabled) {
+.time-select-item.selected:not(.is-disabled) {
   color: $--color-primary;
   font-weight: bold;
 }
 
-.time-select-item.disabled {
+.time-select-item.is-disabled {
   color: $--datepicker-border-color;
   cursor: not-allowed;
 }
diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss
index 0a016a85c0..fcfb74229b 100644
--- a/packages/theme-chalk/src/tooltip.scss
+++ b/packages/theme-chalk/src/tooltip.scss
@@ -15,8 +15,8 @@
     min-width: 10px;
     word-wrap: break-word;
 
-    .popper__arrow,
-    .popper__arrow::after {
+    .el-popper__arrow,
+    .el-popper__arrow::after {
       position: absolute;
       display: block;
       width: 0;
@@ -25,11 +25,11 @@
       border-style: solid;
     }
 
-    .popper__arrow {
+    .el-popper__arrow {
       border-width: $--tooltip-arrow-size;
     }
 
-    .popper__arrow::after {
+    .el-popper__arrow::after {
       content: " ";
       border-width: 5px;
     }
@@ -38,7 +38,7 @@
       margin-bottom: #{$--tooltip-arrow-size + 6px};
     }
 
-    &[x-placement^="top"] .popper__arrow {
+    &[x-placement^="top"] .el-popper__arrow {
       bottom: -$--tooltip-arrow-size;
       border-top-color: $--tooltip-border-color;
       border-bottom-width: 0;
@@ -55,7 +55,7 @@
       margin-top: #{$--tooltip-arrow-size + 6px};
     }
 
-    &[x-placement^="bottom"] .popper__arrow {
+    &[x-placement^="bottom"] .el-popper__arrow {
       top: -$--tooltip-arrow-size;
       border-top-width: 0;
       border-bottom-color: $--tooltip-border-color;
@@ -72,7 +72,7 @@
       margin-left: #{$--tooltip-arrow-size + 6px};
     }
 
-    &[x-placement^="right"] .popper__arrow {
+    &[x-placement^="right"] .el-popper__arrow {
       left: -$--tooltip-arrow-size;
       border-right-color: $--tooltip-border-color;
       border-left-width: 0;
@@ -89,7 +89,7 @@
       margin-right: #{$--tooltip-arrow-size + 6px};
     }
 
-    &[x-placement^="left"] .popper__arrow {
+    &[x-placement^="left"] .el-popper__arrow {
       right: -$--tooltip-arrow-size;
       border-right-width: 0;
       border-left-color: $--tooltip-border-color;
@@ -112,25 +112,25 @@
       background: $--tooltip-color;
       border: 1px solid $--tooltip-fill;
 
-      &[x-placement^="top"] .popper__arrow {
+      &[x-placement^="top"] .el-popper__arrow {
         border-top-color: $--tooltip-fill;
         &::after {
           border-top-color: $--tooltip-color;
         }
       }
-      &[x-placement^="bottom"] .popper__arrow {
+      &[x-placement^="bottom"] .el-popper__arrow {
         border-bottom-color: $--tooltip-fill;
         &::after {
           border-bottom-color: $--tooltip-color;
         }
       }
-      &[x-placement^="left"] .popper__arrow {
+      &[x-placement^="left"] .el-popper__arrow {
         border-left-color: $--tooltip-fill;
         &::after {
           border-left-color: $--tooltip-color;
         }
       }
-      &[x-placement^="right"] .popper__arrow {
+      &[x-placement^="right"] .el-popper__arrow {
         border-right-color: $--tooltip-fill;
         &::after {
           border-right-color: $--tooltip-color;
diff --git a/src/utils/popper.js b/src/utils/popper.js
index cb3b6d9d08..55b9ec36c5 100644
--- a/src/utils/popper.js
+++ b/src/utils/popper.js
@@ -94,7 +94,7 @@
      * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`.
      * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is.
      * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element.
-     * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element.
+     * @param {Array} [popper.arrowClassNames='el-popper__arrow'] Same as `popper.classNames` but for the arrow element.
      * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element.
      * @param {Object} options
      * @param {String} [options.placement=bottom]
@@ -283,7 +283,7 @@
             content: '',
             contentType: 'text',
             arrowTagName: 'div',
-            arrowClassNames: [ 'popper__arrow' ],
+            arrowClassNames: [ 'el-popper__arrow' ],
             arrowAttributes: [ 'x-arrow']
         };
         config = Object.assign({}, defaultConfig, config);
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index ca35df92b1..6e71995f0a 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -178,7 +178,7 @@ export default {
         arrow.setAttribute(hash, '');
       }
       arrow.setAttribute('x-arrow', '');
-      arrow.className = 'popper__arrow';
+      arrow.className = 'el-popper__arrow';
       element.appendChild(arrow);
     }
   },
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 070db48c0e..a12e080b72 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -74,7 +74,7 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         expect(spans[0].textContent).to.include(date.getFullYear() - 1);
         expect(spans[1].textContent).to.include(date.getMonth() + 1);
-        $el.querySelector('td.available').click();
+        $el.querySelector('td.is-selectable').click();
         vm.$nextTick(_ => {
           expect(vm.value).to.exist;
         });
@@ -99,7 +99,7 @@ describe('DatePicker', () => {
     input.focus();
     setTimeout(_ => {
       const $el = vm.$refs.compo.picker.$el;
-      $el.querySelector('td.available').click();
+      $el.querySelector('td.is-selectable').click();
       setTimeout(_ => {
         vm.$refs.compo.showClose = true;
         vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
@@ -127,7 +127,7 @@ describe('DatePicker', () => {
     input.focus();
     setTimeout(_ => {
       const $el = vm.$refs.compo.picker.$el;
-      $el.querySelector('td.available').click();
+      $el.querySelector('td.is-selectable').click();
       vm.$nextTick(_ => {
         vm.$el.querySelector('.el-input__icon').click();
         setTimeout(_ => {
@@ -157,7 +157,7 @@ describe('DatePicker', () => {
       const $el = vm.$refs.compo.picker.$el;
       $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right').click();
       setTimeout(_ => {
-        $el.querySelector('td.available').click();
+        $el.querySelector('td.is-selectable').click();
         vm.$nextTick(_ => {
           vm.value = '';
           setTimeout(_ => {
@@ -223,7 +223,7 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         expect(onChangeValue).to.not.exist;
         // user interaction does emit change
-        picker.$el.querySelector('td.available').click();
+        picker.$el.querySelector('td.is-selectable').click();
         setTimeout(_ => {
           expect(onChangeValue.getTime()).to.equal(vm.value.getTime());
           done();
@@ -304,7 +304,7 @@ describe('DatePicker', () => {
     input.focus();
     setTimeout(_ => {
       const picker = vm.$refs.compo.picker;
-      picker.$el.querySelector('td.available').click();
+      picker.$el.querySelector('td.is-selectable').click();
       setTimeout(_ => {
         const date = vm.$refs.compo.picker.date;
         expect(date.getHours()).to.equal(12);
@@ -351,7 +351,7 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
 
-        picker.$el.querySelector('td.available').click();
+        picker.$el.querySelector('td.is-selectable').click();
         setTimeout(_ => {
           expect(emitted).to.true;
           emitted = false;
@@ -360,7 +360,7 @@ describe('DatePicker', () => {
             input.blur();
             input.focus();
 
-            picker.$el.querySelector('td.available').click();
+            picker.$el.querySelector('td.is-selectable').click();
             setTimeout(_ => {
               expect(emitted).to.false;
               done();
@@ -400,9 +400,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
 
-        picker.$el.querySelector('td.available').click();
+        picker.$el.querySelector('td.is-selectable').click();
         setTimeout(_ => {
-          picker.$el.querySelector('td.available + td.available').click();
+          picker.$el.querySelector('td.is-selectable + td.is-selectable').click();
           setTimeout(_ => {
             expect(emitted).to.true;
             emitted = false;
@@ -412,9 +412,9 @@ describe('DatePicker', () => {
               input.focus();
 
               const picker = vm.$refs.compo.picker;
-              picker.$el.querySelector('td.available').click();
+              picker.$el.querySelector('td.is-selectable').click();
               setTimeout(_ => {
-                picker.$el.querySelector('td.available + td.available').click();
+                picker.$el.querySelector('td.is-selectable + td.is-selectable').click();
                 setTimeout(_ => {
                   expect(emitted).to.false;
                   done();
@@ -474,7 +474,7 @@ describe('DatePicker', () => {
 
       vm.$refs.compo.$el.querySelector('input').focus();
       setTimeout(_ => {
-        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.is-selectable').click();
         setTimeout(_ => {
           const today = new Date();
           const yyyy = today.getFullYear();
@@ -507,7 +507,7 @@ describe('DatePicker', () => {
       vm.$refs.compo.$el.querySelector('input').focus();
 
       setTimeout(_ => {
-        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.is-selectable').click();
         setTimeout(_ => {
           const today = new Date();
           const yyyy = today.getFullYear();
@@ -544,7 +544,7 @@ describe('DatePicker', () => {
         expect(date.getFullYear()).to.equal(2000);
         expect(date.getMonth()).to.equal(1);
         expect(date.getDate()).to.equal(1);
-        vm.$refs.compo.picker.$el.querySelector('.el-date-table .current').click();
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table .is-selected').click();
         setTimeout(_ => {
           expect(input.value).to.equal('2000-02-01');
           done();
@@ -762,7 +762,7 @@ describe('DatePicker', () => {
       input.focus();
       setTimeout(_ => {
         let $el = vm.$refs.compo.picker.$el;
-        expect($el.querySelector('.el-date-table td.current')).to.exist;
+        expect($el.querySelector('.el-date-table td.is-selected')).to.exist;
         vm.defaultValue = defaultValue;
         triggerEvent(vm.$refs.compo.$el, 'mouseenter');
         setTimeout(_ => {
@@ -771,7 +771,7 @@ describe('DatePicker', () => {
             input.focus();
             setTimeout(() => {
               $el = vm.$refs.compo.picker.$el;
-              expect($el.querySelector('.el-date-table td.current')).to.not.exist;
+              expect($el.querySelector('.el-date-table td.is-selected')).to.not.exist;
               expect($el.querySelector('.el-date-table td.default')).to.exist;
               $el.querySelector('.el-date-table td.default').click();
               setTimeout(() => {
@@ -1012,7 +1012,7 @@ describe('DatePicker', () => {
     setTimeout(_ => {
       expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.empty;
       expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.be.equal('none');
-      vm.picker.$el.querySelector('.el-month-table a.cell').click();
+      vm.picker.$el.querySelector('.el-month-table a.el-date-picker__cell').click();
       expect(vm.pickerVisible).to.false;
       done();
     }, DELAY);
@@ -1043,7 +1043,7 @@ describe('DatePicker', () => {
         rightBtn.click();
       }
 
-      vm.picker.$el.querySelector('.el-year-table a.cell').click();
+      vm.picker.$el.querySelector('.el-year-table a.el-date-picker__cell').click();
       expect(vm.pickerVisible).to.false;
       done();
     }, DELAY);
@@ -1297,7 +1297,7 @@ describe('DatePicker', () => {
         input.focus();
 
         setTimeout(_ => {
-          vm.$refs.compo.picker.$el.querySelector('td.available').click();
+          vm.$refs.compo.picker.$el.querySelector('td.is-selectable').click();
           setTimeout(_ => {
             expect(spy.called).to.equal(false);
             vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();
@@ -1332,7 +1332,7 @@ describe('DatePicker', () => {
           // simplified change
           picker.handleVisibleDateChange('2000-01-02');
           setTimeout(_ => {
-            expect(picker.$el.querySelector('td.current').innerText.trim()).to.equal('2');
+            expect(picker.$el.querySelector('td.is-selected').innerText.trim()).to.equal('2');
             expect(spy.called).to.equal(false);
             // keyDown does not work, event listener attached to document.body
             picker.handleKeydown({ keyCode: ENTER, stopPropagation() {}, preventDefault() {} });
@@ -1524,7 +1524,7 @@ describe('DatePicker', () => {
     });
 
     it('click cell', done => {
-      vm.picker.$el.querySelector('.el-date-table__row .available').click();
+      vm.picker.$el.querySelector('.el-date-table__row .is-selectable').click();
       setTimeout(_ => {
         expect(vm.picker.week).to.exist;
         done();
@@ -1545,7 +1545,7 @@ describe('DatePicker', () => {
       vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
 
       setTimeout(_ => {
-        vm.picker.$el.querySelector('.el-month-table .cell').click();
+        vm.picker.$el.querySelector('.el-month-table .el-date-picker__cell').click();
 
         setTimeout(_ => {
           expect(vm.picker.$el.querySelector('.el-date-table.is-week-mode').style.display).to.equal('');
@@ -1570,10 +1570,10 @@ describe('DatePicker', () => {
 
       setTimeout(() => {
         const pickerEl = vm.$refs.compo.picker.$el;
-        const numberOfHighlightRows = () => pickerEl.querySelectorAll('.el-date-table__row.current').length;
+        const numberOfHighlightRows = () => pickerEl.querySelectorAll('.el-date-table__row.is-selected').length;
         expect(numberOfHighlightRows()).to.equal(0);
         setTimeout(() => {
-          pickerEl.querySelector('.el-date-table__row ~ .el-date-table__row td.available').click();
+          pickerEl.querySelector('.el-date-table__row ~ .el-date-table__row td.is-selectable').click();
           setTimeout(() => {
             expect(vm.value).to.exist;
             input.blur();
@@ -1621,7 +1621,7 @@ describe('DatePicker', () => {
     afterEach(() => destroyVM(vm));
 
     it('click cell', done => {
-      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
+      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .is-selectable');
       td.click();
       setTimeout(_ => {
         expect(vm.$refs.compo.value).to.be.an('array');
@@ -1633,7 +1633,7 @@ describe('DatePicker', () => {
     });
 
     it('restore value when cancel', done => {
-      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
+      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .is-selectable');
       td.click();
       setTimeout(_ => {
         vm.$refs.compo.handleClose();
@@ -1665,9 +1665,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
         expect(Array.prototype.slice.call(panels)).to.length(2);
-        panels[0].querySelector('td.available').click();
+        panels[0].querySelector('td.is-selectable').click();
         setTimeout(_ => {
-          panels[1].querySelector('td.available').click();
+          panels[1].querySelector('td.is-selectable').click();
           setTimeout(_ => {
             inputs[0].focus();
             setTimeout(_ => {
@@ -1707,9 +1707,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
         expect(Array.prototype.slice.call(panels)).to.length(2);
-        panels[1].querySelector('td.available').click();
+        panels[1].querySelector('td.is-selectable').click();
         setTimeout(_ => {
-          panels[0].querySelector('td.available').click();
+          panels[0].querySelector('td.is-selectable').click();
           setTimeout(_ => {
             inputs[0].focus();
             setTimeout(_ => {
@@ -1864,9 +1864,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
         setTimeout(_ => {
-          picker.$el.querySelector('td.available').click();
+          picker.$el.querySelector('td.is-selectable').click();
           setTimeout(_ => {
-            picker.$el.querySelector('td.available ~ td.available').click();
+            picker.$el.querySelector('td.is-selectable ~ td.is-selectable').click();
             setTimeout(_ => {
               expect(spy.calledOnce).to.equal(true);
               // change event is not emitted if used does not change value
@@ -1974,8 +1974,8 @@ describe('DatePicker', () => {
 
     it('select daterange', done => {
       const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-      const leftCell = pickers[0].querySelector('td.available');
-      const rightCell = pickers[1].querySelector('td.available');
+      const leftCell = pickers[0].querySelector('td.is-selectable');
+      const rightCell = pickers[1].querySelector('td.is-selectable');
 
       triggerEvent(leftCell, 'mousemove', true);
       triggerEvent(leftCell, 'click', true);
@@ -2016,8 +2016,8 @@ describe('DatePicker', () => {
 
         setTimeout(_ => {
           const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-          const leftCell = pickers[0].querySelector('td.available');
-          const rightCell = pickers[1].querySelector('td.available');
+          const leftCell = pickers[0].querySelector('td.is-selectable');
+          const rightCell = pickers[1].querySelector('td.is-selectable');
 
           const {
             minDate,
@@ -2128,8 +2128,8 @@ describe('DatePicker', () => {
 
         setTimeout(_ => {
           const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-          const leftCell = pickers[0].querySelector('td.available');
-          const rightCell = pickers[1].querySelector('td.available');
+          const leftCell = pickers[0].querySelector('td.is-selectable');
+          const rightCell = pickers[1].querySelector('td.is-selectable');
 
           const {
             minDate,
@@ -2229,8 +2229,8 @@ describe('DatePicker', () => {
     it('input date', done => {
       const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');
       const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-      const leftCell = pickers[0].querySelector('td.available');
-      const rightCell = pickers[1].querySelector('td.available');
+      const leftCell = pickers[0].querySelector('td.is-selectable');
+      const rightCell = pickers[1].querySelector('td.is-selectable');
 
       triggerEvent(leftCell, 'mousemove', true);
       triggerEvent(leftCell, 'click', true);
@@ -2258,8 +2258,8 @@ describe('DatePicker', () => {
       const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');
       const input2 = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[2];
       const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-      const leftCell = pickers[0].querySelector('td.available');
-      const rightCell = pickers[1].querySelector('td.available');
+      const leftCell = pickers[0].querySelector('td.is-selectable');
+      const rightCell = pickers[1].querySelector('td.is-selectable');
 
       triggerEvent(leftCell, 'mousemove', true);
       triggerEvent(leftCell, 'click', true);
@@ -2362,9 +2362,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
         expect(Array.prototype.slice.call(panels)).to.length(2);
-        panels[0].querySelector('td:not(.disabled)').click();
+        panels[0].querySelector('td:not(.is-disabled)').click();
         setTimeout(_ => {
-          panels[1].querySelector('td:not(.disabled)').click();
+          panels[1].querySelector('td:not(.is-disabled)').click();
           setTimeout(_ => {
             inputs[0].focus();
             setTimeout(_ => {
@@ -2404,9 +2404,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
         expect(Array.prototype.slice.call(panels)).to.length(2);
-        panels[1].querySelector('td:not(.disabled)').click();
+        panels[1].querySelector('td:not(.is-disabled)').click();
         setTimeout(_ => {
-          panels[0].querySelector('td:not(.disabled)').click();
+          panels[0].querySelector('td:not(.is-disabled)').click();
           setTimeout(_ => {
             inputs[0].focus();
             setTimeout(_ => {
@@ -2557,9 +2557,9 @@ describe('DatePicker', () => {
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
         setTimeout(_ => {
-          picker.$el.querySelector('td:not(.disabled)').click();
+          picker.$el.querySelector('td:not(.is-disabled)').click();
           setTimeout(_ => {
-            picker.$el.querySelector('td:not(.disabled) ~ td:not(.disabled)').click();
+            picker.$el.querySelector('td:not(.is-disabled) ~ td:not(.is-disabled)').click();
             setTimeout(_ => {
               expect(spy.calledOnce).to.equal(true);
               // change event is not emitted if used does not change value
@@ -2735,13 +2735,13 @@ describe('DatePicker', () => {
           const list = $el.querySelectorAll('.el-time-spinner__list');
           const hoursEl = list[0];
           const disabledHours = [].slice
-            .call(hoursEl.querySelectorAll('.disabled'))
+            .call(hoursEl.querySelectorAll('.is-disabled'))
             .map(node => Number(node.textContent));
           expect(disabledHours[disabledHours.length - 2]).to.equal(16);
           expect(disabledHours[disabledHours.length - 1]).to.equal(23);
           const minutesEl = list[1];
           const disabledMinutes = [].slice
-            .call(minutesEl.querySelectorAll('.disabled'))
+            .call(minutesEl.querySelectorAll('.is-disabled'))
             .map(node => Number(node.textContent));
           expect(disabledMinutes.length).to.equal(19);
           done();
@@ -2772,7 +2772,7 @@ describe('DatePicker', () => {
     afterEach(() => destroyVM(vm));
 
     it('create', () => {
-      expect(vm.picker.$el.querySelector('.disabled')).to.be.ok;
+      expect(vm.picker.$el.querySelector('.is-disabled')).to.be.ok;
     });
 
     it('set value', done => {
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index f0888d2fc2..b4963da2f7 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -225,13 +225,13 @@ describe('Table', () => {
         vm.currentRowKey = 1;
         const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
         setTimeout(_ => {
-          expect(tr.classList.contains('current-row')).to.be.true;
+          expect(tr.classList.contains('is-selected')).to.be.true;
           vm.currentRowKey = 2;
 
           const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
           setTimeout(_ => {
-            expect(tr.classList.contains('current-row')).to.be.false;
-            expect(rows[1].classList.contains('current-row')).to.be.true;
+            expect(tr.classList.contains('is-selected')).to.be.false;
+            expect(rows[1].classList.contains('is-selected')).to.be.true;
             destroyVM(vm);
             done();
           }, DELAY);
@@ -1874,11 +1874,11 @@ describe('Table', () => {
       vm.$refs.table.setCurrentRow(vm.testData[1]);
       await waitImmediate();
       const secondRow = vm.$el.querySelectorAll('.el-table__row')[1];
-      expect(secondRow.classList.contains('current-row')).to.true;
+      expect(secondRow.classList.contains('is-selected')).to.true;
 
       vm.$el.querySelector('.clear').click();
       await waitImmediate();
-      expect(secondRow.classList.contains('current-row')).to.false;
+      expect(secondRow.classList.contains('is-selected')).to.false;
 
       destroyVM(vm);
     });
@@ -1932,13 +1932,13 @@ describe('Table', () => {
       const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
       triggerEvent(tr, 'click', true, false);
       setTimeout(_ => {
-        expect(tr.classList.contains('current-row')).to.be.true;
+        expect(tr.classList.contains('is-selected')).to.be.true;
         const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
 
         triggerEvent(rows[1], 'click', true, false);
         setTimeout(_ => {
-          expect(tr.classList.contains('current-row')).to.be.false;
-          expect(rows[1].classList.contains('current-row')).to.be.true;
+          expect(tr.classList.contains('is-selected')).to.be.false;
+          expect(rows[1].classList.contains('is-selected')).to.be.true;
 
           const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th');
           triggerEvent(ths[3], 'click', true, false);
@@ -1946,8 +1946,8 @@ describe('Table', () => {
           setTimeout(_ => {
             const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
 
-            expect(rows[1].classList.contains('current-row')).to.be.false;
-            expect(rows[3].classList.contains('current-row')).to.be.true;
+            expect(rows[1].classList.contains('is-selected')).to.be.false;
+            expect(rows[3].classList.contains('is-selected')).to.be.true;
             destroyVM(vm);
             done();
           }, DELAY);
@@ -1976,7 +1976,7 @@ describe('Table', () => {
       let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
       triggerEvent(rows[2], 'click', true, false);
       setTimeout(() => {
-        expect(rows[2].classList.contains('current-row')).to.be.true;
+        expect(rows[2].classList.contains('is-selected')).to.be.true;
         const data = getTestData();
         data.splice(0, 0, {
           id: 8,
@@ -1990,7 +1990,7 @@ describe('Table', () => {
 
         setTimeout(() => {
           rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
-          expect(rows[3].classList.contains('current-row')).to.be.true;
+          expect(rows[3].classList.contains('is-selected')).to.be.true;
           destroyVM(vm);
           done();
         }, DELAY);
@@ -2018,13 +2018,13 @@ describe('Table', () => {
       let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
       triggerEvent(rows[1], 'click', true, false);
       setTimeout(() => {
-        expect(rows[1].classList.contains('current-row')).to.be.true;
+        expect(rows[1].classList.contains('is-selected')).to.be.true;
         const cells = vm.$el.querySelectorAll('.el-table__header-wrapper thead th > .cell');
         triggerEvent(cells[3], 'click', true, false);
 
         setTimeout(() => {
           rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
-          expect(rows[3].classList.contains('current-row')).to.be.true;
+          expect(rows[3].classList.contains('is-selected')).to.be.true;
           destroyVM(vm);
           done();
         }, DELAY);
diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js
index d666f0858d..342c018ccf 100644
--- a/test/unit/specs/time-picker.spec.js
+++ b/test/unit/specs/time-picker.spec.js
@@ -380,17 +380,17 @@ describe('TimePicker', () => {
       const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
       const hoursEl = list[0];
       const disabledHours = [].slice
-        .call(hoursEl.querySelectorAll('.disabled'))
+        .call(hoursEl.querySelectorAll('.is-disabled'))
         .map(node => Number(node.textContent));
 
-      hoursEl.querySelectorAll('.disabled')[0].click();
+      hoursEl.querySelectorAll('.is-disabled')[0].click();
       expect(disabledHours).to.not.include.members([17, 18, 19, 20, 21, 22]);
 
       const minutesEl = list[1];
       hoursEl.querySelectorAll('.el-time-spinner__item')[18].click();
       setTimeout(_ => {
         const disabledMinutes = [].slice
-          .call(minutesEl.querySelectorAll('.disabled'))
+          .call(minutesEl.querySelectorAll('.is-disabled'))
           .map(node => Number(node.textContent));
         expect(disabledMinutes.every(t => t > 30 && t < 50)).to.equal(true);
         expect(disabledMinutes.length).to.equal(19);
diff --git a/test/unit/specs/time-select.spec.js b/test/unit/specs/time-select.spec.js
index d784dc5b6b..3cc4cf0556 100644
--- a/test/unit/specs/time-select.spec.js
+++ b/test/unit/specs/time-select.spec.js
@@ -75,8 +75,8 @@ describe('TimeSelect', () => {
 
     setTimeout(_ => {
       expect(input.value).to.equal('14:30');
-      expect(vm.picker.$el.querySelector('.selected')).to.be.ok;
-      expect(vm.picker.$el.querySelector('.selected').textContent).to.equal('14:30');
+      expect(vm.picker.$el.querySelector('.is-selected')).to.be.ok;
+      expect(vm.picker.$el.querySelector('.is-selected').textContent).to.equal('14:30');
       done();
     }, 50);
   });
@@ -97,7 +97,7 @@ describe('TimeSelect', () => {
     input.blur();
 
     setTimeout(_ => {
-      const elms = picker.picker.$el.querySelectorAll('.disabled');
+      const elms = picker.picker.$el.querySelectorAll('.is-disabled');
       const elm = elms[elms.length - 1];
 
       expect(elm.textContent).to.equal('14:30');
@@ -153,7 +153,7 @@ describe('TimeSelect', () => {
     input.blur();
 
     setTimeout(_ => {
-      const elm = picker.picker.$el.querySelector('.disabled');
+      const elm = picker.picker.$el.querySelector('.is-disabled');
 
       expect(elm.textContent).to.equal('14:30');
       done();