fix(VTabs): indent tabs on the correct with the right prop

fixes #8294
vuetifyjs · Apr 21, 2020 · 68a49c3 · 68a49c3
1 parent ed42480
commit 68a49c3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VChipGroup/__tests__/__snapshots__/VChipGroup.spec.ts.snap b/packages/vuetify/src/components/VChipGroup/__tests__/__snapshots__/VChipGroup.spec.ts.snap
@@ -8,6 +8,8 @@ exports[`VChipGroup.ts should have a v-chip-group class 1`] = `
     <div class="v-slide-group__content">
     </div>
   </div>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+  </div>
 </div>
 `;
 
@@ -19,6 +21,8 @@ exports[`VChipGroup.ts should render column 1`] = `
     <div class="v-slide-group__content">
     </div>
   </div>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+  </div>
 </div>
 `;
 
@@ -30,6 +34,8 @@ exports[`VChipGroup.ts should switch to column 1`] = `
     <div class="v-slide-group__content">
     </div>
   </div>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+  </div>
 </div>
 `;
 
@@ -41,5 +47,7 @@ exports[`VChipGroup.ts should switch to column 2`] = `
     <div class="v-slide-group__content">
     </div>
   </div>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+  </div>
 </div>
 `;
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
@@ -143,9 +143,8 @@ export const BaseSlideGroup = mixins<options &
   },
 
   methods: {
+    // Always generate next for scrollable hint
     genNext (): VNode | null {
-      if (!this.hasAffixes) return null
-
       const slot = this.$scopedSlots.next
         ? this.$scopedSlots.next({})
         : this.$slots.next || this.__cachedNext

diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass
@@ -40,17 +40,25 @@
     .v-tab
       white-space: normal
 
+    // https://github.com/vuetifyjs/vuetify/issues/8294
+    &.v-tabs--right
+      > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows):not(.v-slide-group--has-affixes)
+        .v-slide-group__next
+          display: initial
+          visibility: hidden
+
+    // https://github.com/vuetifyjs/vuetify/issues/6932
+    &:not(.v-tabs--right)
+      > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows):not(.v-slide-group--has-affixes)
+        .v-slide-group__prev
+          display: initial
+          visibility: hidden
+
 // Element
 .v-tabs-bar
   border-radius: inherit
   height: $tabs-bar-height
 
-  // https://github.com/vuetifyjs/vuetify/issues/6932
-  &.v-slide-group--is-overflowing.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows):not(.v-slide-group--has-affixes)
-    .v-slide-group__prev
-      display: initial
-      visibility: hidden
-
   &.v-item-group > *
     cursor: initial
 

diff --git a/packages/vuetify/src/components/VTabs/__tests__/__snapshots__/VTabs.spec.ts.snap b/packages/vuetify/src/components/VTabs/__tests__/__snapshots__/VTabs.spec.ts.snap
@@ -14,6 +14,8 @@ exports[`VTabs.ts should render generic elements in the tab container 1`] = `
         </div>
       </div>
     </div>
+    <div class="v-slide-group__next v-slide-group__next--disabled">
+    </div>
   </div>
 </div>
 `;