feat(VIconBtn): create new component

[johnleider]

Motivation and Context

• A new lightweight component (~~50%~~30% faster than VBtn) that will be used to eventually replace VBtn usage throughout
• Currently VBtn is used in a variety of components such as VTreeview, VDataTable, VDatePicker, VCarousel where it contains infinitely more functionality than what will ever be needed
• Wanted to have a way to start bringing back toggle icons rotating for expansion components like VList, VTreeview, VExpansionPanels
• Will also eventually replace closable buttons

TODO: https://m3.material.io/components/icon-buttons

Markup:

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-toolbar class="px-3" title="Toolbar">
          <template #append>
            <div class="d-flex ga-2">
              <v-icon-btn icon="mdi-magnify" :opacity="dialog ? 1 : 0.32">
                <v-icon  />

              <v-dialog v-model="dialog" activator="parent" width="400">
                <v-card title="Find in page">
                  <v-card-text>
                    <v-text-field label="Search" hide-details="auto" />
                  </v-card-text>

                  <template #actions>
                    <v-btn text="Cancel" variant="plain" @click="dialog = false"></v-btn>

                    <v-btn text="Search" @click="dialog = false"></v-btn>
                  </template>
                </v-card>
              </v-dialog>
            </v-icon-btn>
            </div>
          </template>
        </v-toolbar>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'

  const menu = shallowRef(false)
  const dialog = shallowRef(false)
</script>

[oumoussa98]

Missing variant prop?

[ikushum]

Since our button-related components have names such as VBtnToggle, VBtnGroup, it would make more sense to name this component VBtnIcon rather than VIconBtn.

[johnleider]

What does everyone think? I chose the name for 2 reasons:

• VCheckboxBtn
• That's what Google calls it

[eesayas]

I'm okay with VIconBtn. I think the last word should be what it is, a btn.

[KaelWD]

Sample size of 1 but looks like 1000x v-btn = 380ms and 1000x v-icon-btn = 270ms (29% faster)

[KaelWD]

No named sizes?

[johnleider]

It's meant to be more intentional in it's size, it's why I didn't add density either.

[eesayas]

I think it looks good! I don't think a density prop is needed since icon will remain the same size and btn size can be adjusted via size prop.