mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
feat(ButtonGroup): new component (#88)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
GitHub
47
test/components/ButtonGroup.spec.ts
Normal file
47
test/components/ButtonGroup.spec.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import ButtonGroup, { type ButtonGroupProps, type ButtonGroupSlots } from '../../src/runtime/components/ButtonGroup.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import { UInput, UButton } from '#components'
|
||||
import buttonTheme from '#build/ui/button'
|
||||
|
||||
describe('ButtonGroup', () => {
|
||||
const sizes = Object.keys(buttonTheme.variants.size) as any
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
['with as', { props: { as: 'div' } }],
|
||||
['with class', { props: { class: '' } }],
|
||||
['with ui', { props: { ui: {} } }],
|
||||
// Slots
|
||||
['with default slot', {
|
||||
slots: {
|
||||
default: {
|
||||
components: { UInput, UButton },
|
||||
template: `<UInput /> <UButton> Click me! </UButton>`
|
||||
}
|
||||
}
|
||||
}],
|
||||
['orientation vertical with default slot', {
|
||||
props: { orientation: 'vertical' },
|
||||
slots: {
|
||||
default: {
|
||||
components: { UInput, UButton },
|
||||
template: `<UInput /> <UButton> Click me! </UButton>`
|
||||
}
|
||||
}
|
||||
}],
|
||||
...sizes.map((size: string) =>
|
||||
[`with size ${size}`, { props: { size },
|
||||
slots: {
|
||||
default: {
|
||||
components: { UInput, UButton },
|
||||
template: `<UInput /> <UButton> Click me! </UButton>`
|
||||
}
|
||||
}
|
||||
}]
|
||||
)
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ButtonGroupProps, slots?: Partial<ButtonGroupSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, ButtonGroup)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
91
test/components/__snapshots__/ButtonGroup.spec.ts.snap
Normal file
91
test/components/__snapshots__/ButtonGroup.spec.ts.snap
Normal file
@@ -0,0 +1,91 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
||||
"<div class="relative flex flex-col -space-y-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with as correctly 1`] = `"<div class="relative inline-flex -space-x-px" as="div"></div>"`;
|
||||
|
||||
exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="relative inline-flex -space-x-px"></div>"`;
|
||||
|
||||
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
||||
"<div class="relative inline-flex -space-x-px">
|
||||
<div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
|
||||
<!--v-if--><span class=""> Click me! </span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ButtonGroup > renders with ui correctly 1`] = `"<div class="relative inline-flex -space-x-px"></div>"`;
|
||||
Reference in New Issue
Block a user