Pre release fixes (#902)

* fix: accordion item animation * fix: combo box animation * fix: data table toolbar animation Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · May 20, 2020 · 6cd7dce · 6cd7dce
1 parent 9d5a5dc
commit 6cd7dce
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/packages/core/src/components/cv-accordion/cv-accordion-item.vue b/packages/core/src/components/cv-accordion/cv-accordion-item.vue
@@ -9,7 +9,8 @@
   <li
     data-accordion-item
     class="cv-accordion-item bx--accordion__item"
-    :class="{ 'bx--accordion__item--active': dataOpen }"
+    :class="itemClasses"
+    @animationend="onAnimationEnd"
   >
     <button
       type="button"
@@ -50,6 +51,7 @@ export default {
   },
   data() {
     return {
+      animation: '',
       dataOpen: false,
     };
   },
@@ -58,6 +60,7 @@ export default {
   },
   methods: {
     toggle(force) {
+      this.animation = this.dataOpen ? 'collapsing' : 'expanding';
       const newValue = typeof force === 'boolean' ? !!force : !this.dataOpen;
       const change = this.dataOpen !== undefined && newValue !== this.dataOpen;
 
@@ -66,6 +69,21 @@ export default {
         this.$parent.$emit('cv:change', this);
       }
     },
+    onAnimationEnd() {
+      this.animation = '';
+    },
+  },
+  computed: {
+    itemClasses() {
+      const classes = [];
+      if (this.dataOpen) {
+        classes.push('bx--accordion__item--active');
+      }
+      if (this.animation) {
+        classes.push(`bx--accordion__item--${this.animation}`);
+      }
+      return classes.join(' ');
+    },
   },
 };
 </script>
diff --git a/packages/core/src/components/cv-combo-box/cv-combo-box.vue b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
@@ -15,6 +15,7 @@
       :class="{
         'bx--list-box--light': theme === 'light',
         'bx--combo-box--expanded': open,
+        'bx--list-box--expanded': open,
         'bx--combo-box--disabled bx--list-box--disabled': $attrs.disabled,
       }"
       :data-invalid="isInvalid"

diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -9,10 +9,8 @@
       </div>
 
       <section v-if="hasToolbar" class="bx--table-toolbar">
-        <div v-if="batchActive" :style="{ minHeight: '48px', maxWidth: '0' }" />
-
         <div
-          v-if="hasBatchActions"
+          v-show="hasBatchActions"
           class="bx--batch-actions"
           :class="{ 'bx--batch-actions--active': batchActive }"
           :aria-label="actionBarAriaLabel"
@@ -34,7 +32,7 @@
           </div>
         </div>
 
-        <div v-if="(hasActions || $listeners.search) && !batchActive" class="bx--toolbar-content">
+        <div class="bx--toolbar-content">
           <div
             v-if="$listeners.search"
             :class="{

diff --git a/storybook/_storybook/utils/knobs-helper.js b/storybook/_storybook/utils/knobs-helper.js
@@ -62,7 +62,7 @@ const parsePreKnobs = (variant, preKnobs) => {
         } else if (preKnob.slot) {
           // slot
           if (preKnob.slot !== 'default') {
-            knobs.props[`use_${key}`] = { default: boolean(`use-sloted-content:${preKnob.slot}`, true) };
+            knobs.props[`use_${key}`] = { default: boolean(`use-slotted-content:${preKnob.slot}`, true) };
             // knobs.data[key] = boolean(`slot:${preKnob.slot}`, false);
             knobs.group[
               preKnob.group

diff --git a/storybook/stories/cv-data-table-story.js b/storybook/stories/cv-data-table-story.js
@@ -334,6 +334,26 @@ let variants = [
       'hasExpandAll',
     ],
   },
+  {
+    name: 'batch-no-toolbar',
+    excludes: [
+      'actions',
+      'search',
+      'search2',
+      'columns2',
+      'columns3',
+      'slottedHeadings',
+      'slottedData',
+      'htmlData',
+      'helperTextSlot',
+      'basicPagination',
+      'hasExpandingRows',
+      'expandingSlottedData',
+      'rowExpanded',
+      'scopedSlots',
+      'hasExpandAll',
+    ],
+  },
   {
     name: 'name-only-sortable',
     includes: ['columns3', 'data', 'sortable', 'sort'],