From 31f81911a9799724050acf7ff077526e2f6f1756 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 25 Apr 2024 13:47:08 +0530
Subject: [PATCH] chore: review comments

---
 app/javascript/v3/components/Form/Button.vue | 26 +++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
index 1bfb3a683..04dbb032f 100644
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -12,9 +12,9 @@
       <slot />
     </span>
     <fluent-icon
-      v-if="!$slots.default"
+      v-if="trailingIcon"
       size="1.16em"
-      icon="chevron-right"
+      :icon="trailingIcon"
       class="flex-shrink-0"
     />
   </button>
@@ -25,7 +25,8 @@ import { computed, defineProps, useAttrs } from 'vue';
 const props = defineProps({
   variant: {
     type: String,
-    default: '',
+    default: 'solid',
+    validator: value => ['outline', 'ghost', 'solid'].includes(value),
   },
   size: {
     type: String,
@@ -39,6 +40,11 @@ const props = defineProps({
   colorScheme: {
     type: String,
     default: 'primary',
+    validator: value => ['primary', 'secondary', 'danger'].includes(value),
+  },
+  trailingIcon: {
+    type: String,
+    default: '',
   },
 });
 
@@ -47,7 +53,7 @@ const attrs = useAttrs();
 const baseClasses = {
   outline: 'outline outline-1 -outline-offset-1 focus:ring focus:ring-offset-1',
   ghost: 'hover:text-600 active:text-600 focus:ring focus:ring-offset-1',
-  default: 'hover:bg-700 active:bg-700 focus:ring focus:ring-offset-1',
+  solid: 'hover:bg-700 active:bg-700 focus:ring focus:ring-offset-1',
 };
 
 const colorClass = computed(() => {
@@ -59,24 +65,22 @@ const colorClass = computed(() => {
     primary: {
       outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring-primary-400`,
       ghost: `${baseClasses.ghost} focus:ring-primary-400`,
-      default: `${baseClasses.default} bg-primary-600 text-white focus:ring-primary-400`,
+      solid: `${baseClasses.solid} bg-primary-600 text-white focus:ring-primary-400`,
     },
     secondary: {
       outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring-ash-400`,
       ghost: `${baseClasses.ghost} focus:ring-ash-400`,
-      default: `${baseClasses.default} bg-ash-100 text-ash-900 focus:ring-ash-400`,
+      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:ring-ash-400`,
     },
     danger: {
       outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring-ruby-400`,
       ghost: `${baseClasses.ghost} focus:ring-ruby-400`,
-      default: `${baseClasses.default} bg-ruby-600 text-white focus:ring-ruby-400`,
+      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:ring-ruby-400`,
     },
   };
 
-  const schemeStyles = styleMap[props.colorScheme] || {};
-  const variantStyle = schemeStyles[props.variant] || schemeStyles.default;
-
-  return variantStyle;
+  const schemeStyles = styleMap[props.colorScheme];
+  return schemeStyles[props.variant] || schemeStyles.solid;
 });
 
 const sizeClass = computed(() => {