Vuetify: [Bug Report] v-tabs show-arrows

[sfraire]

Environment

Vuetify Version: 2.3.0
Vue Version: 2.6.11
Browsers: Safari 13.1.1
OS: Mac OS 10.15.5

Steps to reproduce

add show-arrows prop

Expected Behavior

not to give a warning on the console

Actual Behavior

gives this warning on the console

[UPGRADE] 'true' is deprecated, use 'mobile' instead.

Reproduction Link

https://codepen.io/sfraire/pen/xxZVBMZ

[sINusBob]

Yes ... in fact, I also observed this behavior, but I had to test it with each prop to see that it was exactly what caused. I solved with "show-arrows="mobile"

[Vercadium]

On a related note, the behaviour seems to have changed with this prop also - with show-arrows set to true or 'mobile' the arrows are always present; in 2.2.x, with show-arrows set to true, the arrows appeared on mobile only when the tab items would have overflowed.

[MohawkMan]

On a related note, the behaviour seems to have changed with this prop also - with show-arrows set to true or 'mobile' the arrows are always present; in 2.2.x, with show-arrows set to true, the arrows would have appeared on mobile only when the tab items would have overflowed.

The arrows are correctly still getting the v-icon--disabled class when not overflowed.
This is what I did as a quick fix:
.v-slide-group .v-icon--disabled { opacity: 0 !important; }

[johnleider]

@Vercadium It will always show when overflowed on desktop, regardless of what you do.

show-arrows === show-arrows="mobile"

[Vercadium]

@Vercadium It will always show when overflowed on desktop, regardless of what you do.

show-arrows === show-arrows="mobile"

@johnleider I wasn't referring to desktop; on the contrary, it's the behaviour on small breakpoints that I miss, but either way they do not behave the same - think this calls for a reproduction! 😃

Vuetify 2.2 - https://jsfiddle.net/seopa/39c874zn
Vuetify 2.3 - https://jsfiddle.net/seopa/coj4xv6L

It occurs both with and without grow, but this prop illustrates the difference best.

Note that on small viewport widths (for example 400px - refresh once you have set the viewport to avoid weirdness) in Vuetify 2.2 the device would fit all tabs with an edge-to-edge experience but still show arrows when it couldn't fit them (very small devices). In my opinion, this was both the expectation and a desirable result. In Vuetify 2.3 this does not happen and no prop/value combination appears to match this.

[KaelWD]

Tabs look like they've been messed up since the slide-group refactor. The arrows are only supposed to be visible on desktop and only when there's items hidden in that direction. show-arrows was added just to override the desktop requirement and be visible on mobile too, but still only when there's actually overflow available. I don't really understand what the show-arrows="desktop" addition in #11480 is supposed to be, that sounds like what the tabs should do by default.

[johnleider]

After reviewing this I think that true should not be deprecated. Here are the permutations of what each value means:

• By default, arrows will only show on Desktop when overflowing
• Using show-arrows="true" will show on Mobile only when overflowing
• Using show-arrows="mobile" will show on Mobile always
• Using show-arrows="desktop" will show on Desktop always
• Using show-arrows="always" will show on Desktop and Mobile always

Basically, removing it as a deprecated value, it resolves this issue.

[johnleider]

... what the show-arrows="desktop" addition in #11480 is supposed to be, that sounds like what the tabs should do by default.

I could have split it into 2 separate PR's, and probably should have. However, with adding the new features to the slide-group, it and since the changes were affected by the mobile-breakpoint, I did them together.

[johnleider]

The commit for this fix moved to 1085c02

If you have any additional questions, please reach out to us in our Discord community.