feat(VBtnGroup): add direction prop

[prashantsinghb]

fixes #17492

Description

Added direction prop (allowed values: 'horizontal' | 'vertical')

Markup:

<template>
  <v-container>
    <v-btn-toggle
      v-model="toggle"
      color="primary"
      direction="vertical"
      variant="outlined"
    >
      <v-btn icon="mdi-format-align-left"></v-btn>
      <v-btn icon="mdi-format-align-center"></v-btn>
      <v-btn icon="mdi-format-align-right"></v-btn>
      <v-btn icon="mdi-format-align-justify"></v-btn>
    </v-btn-toggle>
  </v-container>
</template>

<script>
export default {
    data: () => ({
      toggle: null,
    }),
  }
</script>

[nekosaur]

The buttons are too squished in vertical mode

It looks like it's caused by VBtnGroup setting VBtn default height prop value to auto. Not sure why that is done @johnleider, I couldn't see a difference without it?

[prashantsinghb]

@nekosaur - I concur with your observation.
If the VBtn default height prop is set to auto in VBtnGroup for any specific use case, I remove it conditionally when direction prop is set to vertical. Otherwise, I can remove default height prop for VBtn from VBtnGroup to resolve your observation.

Please suggest.

[jtrimm007]

This might be have a better dev experience if vertical was a boolean. Spelling out props and attributes ripe for spelling bugs; thoughts?

[prashantsinghb]

I see your point. But for the sake of uniformity, have implemented direction prop as utilized in VTimeline, VWindow, VSlideGroup and other Vuetify components.

[johnleider]

This might be have a better dev experience if vertical was a boolean. Spelling out props and attributes ripe for spelling bugs; thoughts?

I'd normally agree with you but it's too far out for that type of change. With that being said, I'm not sure why we didn't make it boolean.

[3elDU]

Any progress on this?

[adrian-burlacu-software]

Also need this. Using this hack:

<style>
.v-btn-toggle {
  flex-direction: column;
}
</style>