arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 01:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Alert/CommandPalette/Modal/Slideover/Toast): handle closeIcon and uniformize close prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-11 15:48:45 +02:00
parent d160278283
commit e4eef89767
17 changed files with 574 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
test/components/__snapshots__/Alert.spec.ts.snap
View File

@@ -4,7 +4,7 @@ exports[`Alert > renders with as correctly 1`] = `
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title</div>
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -15,7 +15,7 @@ exports[`Alert > renders with as correctly 1`] = `
exports[`Alert > renders with avatar correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title</div>
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -27,7 +27,7 @@ exports[`Alert > renders with class correctly 1`] = `
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900 w-48">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -35,23 +35,53 @@ exports[`Alert > renders with class correctly 1`] = `
</div>"
`;
exports[`Alert > renders with close correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
</div>"
`;
exports[`Alert > renders with close slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">Close slot</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
</div>"
`;
exports[`Alert > renders with color black correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-white dark:text-gray-900 bg-gray-900 dark:bg-white" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-white dark:text-gray-900 bg-gray-900 dark:bg-white">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -60,10 +90,10 @@ exports[`Alert > renders with color black correctly 1`] = `
`;
exports[`Alert > renders with color gray correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -72,10 +102,10 @@ exports[`Alert > renders with color gray correctly 1`] = `
`;
exports[`Alert > renders with color green correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-green-500 dark:bg-green-400 text-white dark:text-gray-900" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -84,10 +114,10 @@ exports[`Alert > renders with color green correctly 1`] = `
`;
exports[`Alert > renders with color primary correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -96,10 +126,10 @@ exports[`Alert > renders with color primary correctly 1`] = `
`;
exports[`Alert > renders with color red correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-red-500 dark:bg-red-400 text-white dark:text-gray-900" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-red-500 dark:bg-red-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -108,10 +138,10 @@ exports[`Alert > renders with color red correctly 1`] = `
`;
exports[`Alert > renders with color white correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -123,7 +153,7 @@ exports[`Alert > renders with description correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title</div>
<div class="text-sm font-medium">Alert</div>
<div class="text-sm">Description</div>
<!--v-if-->
</div>
@@ -135,7 +165,7 @@ exports[`Alert > renders with description slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<div class="text-sm">Description slot</div>
<!--v-if-->
</div>
@@ -146,7 +176,7 @@ exports[`Alert > renders with description slot correctly 1`] = `
exports[`Alert > renders with icon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><span class="iconify i-heroicons:light-bulb shrink-0 size-5" aria-hidden="true"></span>
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title</div>
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -170,7 +200,7 @@ exports[`Alert > renders with title correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title</div>
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -194,7 +224,7 @@ exports[`Alert > renders with ui correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-bold">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -203,10 +233,10 @@ exports[`Alert > renders with ui correctly 1`] = `
`;
exports[`Alert > renders with variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -215,10 +245,10 @@ exports[`Alert > renders with variant outline correctly 1`] = `
`;
exports[`Alert > renders with variant soft correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -227,10 +257,10 @@ exports[`Alert > renders with variant soft correctly 1`] = `
`;
exports[`Alert > renders with variant solid correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
@@ -239,10 +269,10 @@ exports[`Alert > renders with variant solid correctly 1`] = `
`;
exports[`Alert > renders with variant subtle correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25" label="Badge">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>