mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 01:40:34 +01:00
feat(Alert/CommandPalette/Modal/Slideover/Toast): handle closeIcon and uniformize close prop
This commit is contained in:
Benjamin Canac
@@ -59,7 +59,7 @@ exports[`Toast > renders with class correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center bg-gray-50 dark:bg-gray-800/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -83,7 +83,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -94,6 +94,30 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with closeIcon correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" 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">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with color green correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
@@ -103,7 +127,7 @@ exports[`Toast > renders with color green correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -127,7 +151,7 @@ exports[`Toast > renders with color primary correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -151,7 +175,7 @@ exports[`Toast > renders with color red correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -201,18 +225,20 @@ exports[`Toast > renders with description correctly 1`] = `
|
||||
<!--teleport end-->
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" 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">
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" 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">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
@@ -228,7 +254,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -274,7 +300,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">Leading slot<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -289,32 +315,6 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with title & description correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" 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">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with title correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
@@ -372,7 +372,7 @@ exports[`Toast > renders with type correctly 1`] = `
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
@@ -424,7 +424,7 @@ exports[`Toast > renders without close correctly 1`] = `
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="flex gap-1.5 shrink-0 items-center"></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
|
||||
Reference in New Issue
Block a user