Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button group borders not squared when used with a tooltip #1008

Closed
rigtigeEmil opened this issue Nov 21, 2023 · 6 comments
Closed

Button group borders not squared when used with a tooltip #1008

rigtigeEmil opened this issue Nov 21, 2023 · 6 comments
Labels
bug Something isn't working

Comments

@rigtigeEmil
Copy link
Contributor

Environment


  • Operating System: Windows_NT
  • Node Version: v19.8.1
  • Nuxt Version: 3.8.1
  • CLI Version: 3.10.0
  • Nitro Version: 2.8.0
  • Package Manager: [email protected]
  • Builder: -
  • User Config: ssr, typescript, devtools, vue, runtimeConfig, modules, extends, app
  • Runtime Modules: @nuxt/[email protected], @pinia/[email protected]
  • Build Modules: -

Version

2.10.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-2qtg4j?file=app.vue

Description

A button group where one element includes a tooltip as a wrapper causes the element to not have its borders squared

Additional context

No response

Logs

No response

@rigtigeEmil rigtigeEmil added the bug Something isn't working label Nov 21, 2023
@rigtigeEmil rigtigeEmil changed the title Button group does not work with tooltips Button group borders not squared when used with a tooltip Nov 21, 2023
Copy link
Member

This should have been fixed by #999 already, can you try with the latest edge version? https://ui.nuxt.com/getting-started/installation#edge

@rigtigeEmil
Copy link
Contributor Author

rigtigeEmil commented Nov 21, 2023

I've just tried, and that does not fix it. In my case I end up with a backwards(?) result:
image
I've updated the stackblitz link to use the edge version, where it also seems to not be working

edit:
My code for the first screenshot looks like this:

  <UButtonGroup>
    <USelectMenu option-attribute="name" searchable v-if="showSelectMenu" :loading="loading" v-model="currentMerchant"
      :options="merchants">
      <template #label>
        <UIcon name="i-heroicons-building-storefront-solid" />
        {{ currentMerchant?.name ?? 'Select merchant' }}
      </template>
    </USelectMenu>

    <UTooltip text="Create a new merchant">
      <UButton color="white" icon="i-heroicons-plus-20-solid" @click="navigateTo('/welcome')" />
    </UTooltip>
  </UButtonGroup>

Copy link
Member

The package-lock.json still points out to 2.10.0.

@rigtigeEmil
Copy link
Contributor Author

Fixed

@connerblanton
Copy link
Contributor

That link still didn't work for me. I had to kill the server, run npm install and restart the dev server. The fix was working as expected after that. Working Stackblitz

@rigtigeEmil
Copy link
Contributor Author

Oh wow, you're right, I wasn't on the edge version correctly. Works great for me locally as well, thanks a bunch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants