arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
057e86cfda1ef5c7a370c99ef409d22e48772ca7
ui/test/components/__snapshots__/ButtonGroup.spec.ts.snap
Sandro Circi 057e86cfda feat(module): implement --ui-radius CSS variable (#2341) 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2024-10-09 14:28:29 +02:00

90 lines
9.8 KiB
Plaintext
Raw Blame History

// 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 inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with as correctly 1`] = `"<section class="relative inline-flex -space-x-px"></section>"`;
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 inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with size lg correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-2 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with size md correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with size sm correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with size xl correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-2 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
exports[`ButtonGroup > renders with size xs correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors 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 gap-1 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors 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 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
<!--v-if--> Click me!
<!--v-if-->
</button>
</div>"
`;
Reference in New Issue View Git Blame Copy Permalink