chore(app): rename Alert variants

This pull request aims to standardize naming conventions by renaming Alert variants.
selemondev · Aug 1, 2023 · 71b4760 · 71b4760
1 parent 89c8180
commit 71b4760
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 43 deletions.
diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
@@ -10,11 +10,12 @@ function handleOpen() {
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <button @click="handleOpen">
-      Open Modal
-    </button>
-    <WModal v-model="isActive">
-      hello there
-    </WModal>
+    <div class="w-96">
+      <WAlert :is-visible="true" title="Critical Error" closable variant="primary-light">
+        <WDescription>
+          <p>Hello there my friends how are you</p>
+        </WDescription>
+      </WAlert>
+    </div>
   </div>
 </template>
diff --git a/packages/windi/src/components/Alert/WAlert.vue b/packages/windi/src/components/Alert/WAlert.vue
@@ -117,17 +117,17 @@ export default defineComponent({
 <template>
   <Transition v-bind="transition" mode="out-in">
     <div v-if="props.isVisible" :class="variant.root">
-      <div :class="variant.flexBetween">
-        <div :class="[$slots.leading || isLeading ? variant.isLeading : variant.isNotLeading]" class="flex items-center">
+      <div :class="variant.alertFlexBetween">
+        <div :class="[$slots.leading || isLeading ? variant.alertIsLeading : variant.alertIsNotLeading]" class="flex items-center">
           <div class="shrink-0">
-            <span v-if="(isLeading && leadingIconName) || $slots.leading" class="px-2">
+            <p v-if="(isLeading && leadingIconName) || $slots.leading" class="pr-1.5">
               <slot name="leading">
                 <Icon :icon="leadingIconName" class="text-2xl" />
               </slot>
-            </span>
+            </p>
           </div>
           <div>
-            <h2 v-if="props.title" :class="variant.title">
+            <h2 v-if="props.title" :class="variant.alertTitle">
               {{ props.title }}
             </h2>
             <div class="text-sm">
@@ -140,14 +140,14 @@ export default defineComponent({
           <div class="shrink-0">
             <button
               v-if="props.closable && !isTrailing && !$slots.trailing" :title="dismissLabel"
-              :aria-label="dismissLabel" :class="variant.closeButtonClass" @click="onDismiss()"
+              :aria-label="dismissLabel" :class="variant.alertCloseButtonClass" @click="onDismiss()"
             >
-              <XMarkIcon class="w-6 h-6 hover:text-white" :class="variant.closeIcon" />
+              <XMarkIcon class="w-6 h-6 hover:text-white" :class="variant.alertCloseIcon" />
             </button>
 
             <button
               v-if="props.trailing || isTrailing || $slots.trailing" :title="dismissLabel"
-              :aria-label="dismissLabel" :class="variant.trailingClass" @click="onDismiss()"
+              :aria-label="dismissLabel" :class="variant.alertTrailingClass" @click="onDismiss()"
             >
               <span v-if="(isTrailing && trailingIconName) || $slots.trailing">
                 <slot name="trailing">

diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
@@ -2,131 +2,131 @@ export default {
   WAlert: {
     base: {
       root: 'w-full relative overflow-hidden rounded-md px-3 py-2.5',
-      title: 'text-lg font-semibold',
-      flexBetween: 'flex justify-between items-center w-full',
-      body: 'text-sm leading-none mt-2.5',
-      closeIcon: 'w-6 h-6 block',
-      isLeading: 'space-x-2.5',
-      isNotLeading: 'space-x-2',
-      closeButtonClass: 'p-0.5 rounded-md -m-1 block transition duration-200 ease-in',
-      leadingClass: 'absolute left-2.5 cursor-pointer flex items-center overflow-hidden',
-      trailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden',
+      alertTitle: 'text-lg font-semibold',
+      alertFlexBetween: 'flex justify-between items-center w-full',
+      alertBody: 'text-sm leading-none mt-2.5',
+      alertCloseIcon: 'w-6 h-6 block',
+      alertIsLeading: 'space-x-1',
+      alertIsNotLeading: 'space-x-2',
+      alertCloseButtonClass: 'p-0.5 rounded-md -m-1 block transition duration-200 ease-in',
+      alertLeadingClass: 'absolute left-2.5 inset-y-0 cursor-pointer flex items-center overflow-hidden',
+      alertTrailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden',
     },
     variants: {
       'default': {
         root: 'bg-yellow-500 text-white w-full',
-        closeButtonClass: 'text-white py-1 px-1 hover:bg-yellow-800',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-yellow-800',
       },
       'default-light': {
         root: [
           'border border-yellow-500 bg-yellow-100 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: 'hover:text-white py-1 px-1 hover:bg-yellow-900 !active:text-white',
+        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-yellow-900 !active:text-white',
       },
       'default-dashed': {
         root: [
           'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
       },
       'default-outline': {
         root: [
           'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
       },
       'primary': {
         root: 'bg-blue-500 text-white',
-        closeButtonClass: 'text-white py-1 px-1 hover:bg-blue-800',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-blue-800',
       },
       'primary-light': {
         root: [
           'border border-blue-500 bg-blue-100 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: 'hover:text-white py-1 px-1 hover:bg-blue-900 !active:text-white',
+        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-blue-900 !active:text-white',
       },
 
       'primary-outline': {
         root: [
           'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
       },
 
       'primary-dashed': {
         root: [
           'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
       },
       'success': {
         root: 'bg-green-500 text-white',
-        closeButtonClass: 'text-white py-1 px-1 hover:bg-green-800',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-green-800',
       },
 
       'success-light': {
         root: [
           'border border-green-500 bg-green-100 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
       },
 
       'success-outline': {
         root: [
           'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
       },
 
       'success-dashed': {
         root: [
           'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
       },
       'warning': {
         root: 'bg-orange-500 text-white',
-        closeButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-orange-800',
+        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-orange-800',
       },
       'warning-light': {
         root: [
           'border border-orange-500 bg-orange-100 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
       },
       'warning-outline': {
         root: [
           'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
       },
       'warning-dashed': {
         root: [
           'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
       },
       'danger': {
         root: 'bg-red-500 text-white',
-        closeButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-red-800',
+        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-red-800',
       },
       'danger-light': {
         root: [
           'border border-red-500 bg-red-100 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
       },
       'danger-outline': {
         root: [
           'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
       },
       'danger-dashed': {
         root: [
           'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
         ],
-        closeButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
       },
     },
   },