Standardize class names. (#43)

* Standardize class names. * Update class names in css and tests. * Get same tests to pass.
cognitoforms · Sep 11, 2020 · 0364f0a · 0364f0a
1 parent aa97ab9
commit 0364f0a
Show file tree

Hide file tree

Showing 25 changed files with 182 additions and 183 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     }