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

fix(Alert): default variant to solid for consistency

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:57:46 +02:00
parent 9368c6a639
commit 3a7c5c2601
4 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/content/3.components/alert.md
View File

@@ -98,7 +98,7 @@ ignore:
- icon
props:
color: neutral
variant: solid
variant: subtle
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: 'i-heroicons-command-line'
@@ -120,9 +120,13 @@ ignore:
- title
- description
- close
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
close: true
---
::
@@ -137,9 +141,13 @@ ignore:
- description
- close.color
- close.variant
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
close:
color: primary
variant: outline
@@ -158,9 +166,13 @@ ignore:
- title
- description
- close
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
close: true
closeIcon: 'i-heroicons-arrow-right'
---
@@ -180,9 +192,13 @@ prettier: true
ignore:
- title
- actions
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
actions:
- label: Action 1
- label: Action 2
@@ -199,7 +215,7 @@ Actions renders differently when the description is not set. You can try to remo
### `class` prop
Use the `class` prop to override the base styles of the Button.
Use the `class` prop to override the base styles of the Alert.
::component-code
---
@@ -216,7 +232,7 @@ props:
### `ui` prop
Use the `ui` prop to override the slots styles of the Button.
Use the `ui` prop to override the slots styles of the Alert.
::component-code
---

2
playground/app/pages/components/alert.vue
View File

@@ -25,7 +25,7 @@ const data = {
<UAlert :title="data.title" />
<UAlert :title="data.title" :icon="data.icon" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('primary')" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
</div>

2
src/theme/alert.ts
View File

@@ -85,6 +85,6 @@ export default (options: Required<ModuleOptions>) => ({
}],
defaultVariants: {
color: 'primary',
variant: 'outline'
variant: 'solid'
}
})

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

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Alert > renders with as correctly 1`] = `
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -13,7 +13,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 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] truncate"></span></span>
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] truncate"></span></span>
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
@@ -24,7 +24,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
`;
exports[`Alert > renders with class correctly 1`] = `
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25 w-48">
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg] w-48">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -36,7 +36,7 @@ exports[`Alert > renders with class correctly 1`] = `
`;
exports[`Alert > renders with close correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -51,7 +51,7 @@ exports[`Alert > renders with close correctly 1`] = `
`;
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 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -63,7 +63,7 @@ exports[`Alert > renders with close slot correctly 1`] = `
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -78,7 +78,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
`;
exports[`Alert > renders with description correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -90,7 +90,7 @@ exports[`Alert > renders with description correctly 1`] = `
`;
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 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -102,7 +102,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 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25"><span class="iconify i-heroicons:light-bulb shrink-0 size-5" aria-hidden="true"></span>
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]"><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">Alert</div>
<!--v-if-->
@@ -113,7 +113,7 @@ exports[`Alert > renders with icon correctly 1`] = `
`;
exports[`Alert > renders with leading slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Leading slot</div>
@@ -221,7 +221,7 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
`;
exports[`Alert > renders with title correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -233,7 +233,7 @@ exports[`Alert > renders with title correctly 1`] = `
`;
exports[`Alert > renders with title slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title slot</div>
@@ -245,7 +245,7 @@ exports[`Alert > renders with title slot correctly 1`] = `
`;
exports[`Alert > renders with ui correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-bold">Alert</div>