Merge pull request #101 from TuSimple/freestyle

feat(data-table): make filter menu scrollable

src/Checkbox/src/Checkbox.vue

@@ -13,10 +13,10 @@
     @keyup.enter="handleKeyUpEnter"
     @keyup.space="handleKeyUpSpace"
     @keydown.space="handleKeyDownSpace"
+    @click="handleClick"
   >
     <div
       class="n-checkbox-box"
-      @click="handleClick"
     >
       <check-mark class="n-checkbox-box__check-mark" />
       <line-mark class="n-checkbox-box__line-mark" />
@@ -24,7 +24,6 @@
     <span
       v-if="$slots.default"
       class="n-checkbox__label"
-      @click="handleClick"
     >
       <slot />
     </span>

src/DataTable/src/HeaderButton/FilterMenu.vue

@@ -1,36 +1,42 @@
 <template>
   <div class="n-data-table-filter-menu">
-    <n-checkbox-group
-      v-if="multiple"
-      :theme="theme"
-      :value="cachedValue"
-      class="n-data-table-filter-menu__group"
-      @change="handleChange"
+    <n-scrollbar
+      :content-style="{
+        transform: 'translateZ(0)'
+      }"
     >
-      <n-checkbox
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
+      <n-checkbox-group
+        v-if="multiple"
+        :theme="theme"
+        :value="cachedValue"
+        class="n-data-table-filter-menu__group"
+        @change="handleChange"
       >
-        {{ option.label }}
-      </n-checkbox>
-    </n-checkbox-group>
-    <n-radio-group
-      v-else
-      :theme="theme"
-      :name="radioGroupName"
-      class="n-data-table-filter-menu__group"
-      :value="cachedValue && cachedValue[0]"
-      @change="handleChange"
-    >
-      <n-radio
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
+        <n-checkbox
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </n-checkbox>
+      </n-checkbox-group>
+      <n-radio-group
+        v-else
+        :theme="theme"
+        :name="radioGroupName"
+        class="n-data-table-filter-menu__group"
+        :value="cachedValue && cachedValue[0]"
+        @change="handleChange"
       >
-        {{ option.label }}
-      </n-radio>
-    </n-radio-group>
+        <n-radio
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </n-radio>
+      </n-radio-group>
+    </n-scrollbar>
     <n-divider :theme="theme" />
     <div class="n-data-table-filter-menu__action">
       <n-button
@@ -61,6 +67,7 @@ import NRadioGroup from '../../../Radio/src/RadioGroup'
 import NRadio from '../../../Radio/src/Radio'
 import NDivider from '../../../Divider'
 import NButton from '../../../Button'
+import NScrollbar from '../../../Scrollbar'
 
 function isEqual (value, oldValue) {
   if (Array.isArray(value) && Array.isArray(oldValue)) {
@@ -84,7 +91,8 @@ export default {
     NDivider,
     NRadioGroup,
     NRadio,
-    NButton
+    NButton,
+    NScrollbar
   },
   props: {
     radioGroupName: {

styles/Checkbox.scss

@@ -2,8 +2,6 @@
 
 @mixin checkbox-size-mixin ($size) {
   @include m($size + '-size') {
-    height: map-get($--n-font-size, $size);
-    line-height: map-get($--n-font-size, $size);
     font-size: map-get($--n-font-size, $size);
     @include b(checkbox-box) {
       height: map-get($--n-checkbox-size, $size);
@@ -16,7 +14,7 @@
   @include once {
     @include b(checkbox-group) {
       font-size: 14px;
-      line-height: 14px;
+      line-height: 1.25;
       @include b(checkbox) {
         margin-right: 18px;
       }
@@ -25,14 +23,15 @@
       @include checkbox-size-mixin('small');
       @include checkbox-size-mixin('medium');
       @include checkbox-size-mixin('large');
+      line-height: 1.25;
       outline: none;
       cursor: pointer;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       white-space: nowrap;
       @include b(checkbox-box) {
         display: inline-block;
         box-sizing: border-box;
-        vertical-align: bottom;
         border-radius: 4px;
         position: relative;
         transition:

styles/DataTable.scss

@@ -467,15 +467,20 @@
 }
 
 @include b(data-table-filter-menu) {
+  @include b(scrollbar) {
+    max-height: 240px;
+  }
   @include e(group) {
     display: flex;
     flex-direction: column;
     padding: 12px 12px 0 12px;
     @include b(checkbox) {
       margin-bottom: 12px;
+      margin-right: 0;
     }
     @include b(radio) {
       margin-bottom: 12px;
+      margin-right: 0;
     }
   }
   @include b(divider) {

styles/Radio.scss

@@ -33,6 +33,7 @@
       @include radio-size-mixin('small');
       @include radio-size-mixin('medium');
       @include radio-size-mixin('large');
+      line-height: 1.25;
       outline: none;
       position: relative;
       user-select: none;

styles/Tree.scss

@@ -113,7 +113,7 @@
           background-color: transparent;
         }
         @include e(text) {
-          line-height: 1.25em;
+          line-height: 1.25;
           border-bottom: 1px solid transparent;
           transition: border-color .3s $--n-ease-in-out-cubic-bezier;
         }