fix(Alert): default variant to solid for consistency

nuxt · Oct 7, 2024 · 3a7c5c2 · 3a7c5c2
1 parent 9368c6a
commit 3a7c5c2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/docs/content/3.components/alert.md b/docs/content/3.components/alert.md
@@ -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
 ---

diff --git a/playground/app/pages/components/alert.vue b/playground/app/pages/components/alert.vue
@@ -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>

diff --git a/src/theme/alert.ts b/src/theme/alert.ts
@@ -85,6 +85,6 @@ export default (options: Required<ModuleOptions>) => ({
   }],
   defaultVariants: {
     color: 'primary',
-    variant: 'outline'
+    variant: 'solid'
   }
 })
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -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>