feat: Update button component (#10362)

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 
-import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
 defineProps({
@@ -29,29 +29,28 @@ const handleAction = (action, value) => {
   <div
     class="bg-n-alpha-3 backdrop-blur-[100px] absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
-    <Button
+    <button
       v-for="item in menuItems"
       :key="item.action"
-      :label="item.label"
-      :icon="item.icon"
-      :emoji="item.emoji"
+      class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+      :class="{
+        'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
+        'text-n-ruby-11': item.action === 'delete',
+        'text-n-slate-12': item.action !== 'delete',
+      }"
       :disabled="item.disabled"
-      variant="ghost"
-      size="sm"
-      class="!justify-start w-full hover:!bg-n-slate-3 dark:hover:!bg-n-slate-4 z-60 px-2 font-normal"
-      :class="item.isSelected ? '!bg-n-alpha-1 dark:!bg-n-solid-active' : ''"
-      :text-variant="item.action === 'delete' ? 'danger' : ''"
       @click="handleAction(item.action, item.value)"
     >
-      <template #leftPrefix>
-        <Thumbnail
-          v-if="item.thumbnail"
-          :author="item.thumbnail"
-          :name="item.thumbnail.name"
-          :size="thumbnailSize"
-          :src="item.thumbnail.src"
-        />
-      </template>
-    </Button>
+      <Thumbnail
+        v-if="item.thumbnail"
+        :author="item.thumbnail"
+        :name="item.thumbnail.name"
+        :size="thumbnailSize"
+        :src="item.thumbnail.src"
+      />
+      <Icon v-if="item.icon" :icon="item.icon" />
+      <span v-if="item.emoji">{{ item.emoji }}</span>
+      <span v-if="item.label" class="text-sm">{{ item.label }}</span>
+    </button>
   </div>
 </template>