Refactor dropdown to allow button as trigger

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/filament.js": "/js/filament.js",
-    "/css/filament.css": "/css/filament.css"
+    "/js/filament.js": "/js/filament.js?id=a3029b69d87820f78653",
+    "/css/filament.css": "/css/filament.css?id=b514ef6378ee72cfaa5a"
 }

package.json

@@ -12,7 +12,7 @@
     "start": "npm run watch"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.6.0",
+    "@popperjs/core": "^2.7.0",
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.4.0",
     "alpinejs": "^2.8.0",

resources/views/components/button.blade.php

@@ -8,10 +8,10 @@
 @php
 
 $colorClasses = [
-    'danger' => 'border-transparent from-danger-700 to-danger-800 text-white hover:to-danger-700 focus:ring-danger-200',
-    'primary' => 'border-transparent from-primary-700 to-primary-800 text-white hover:to-primary-700 focus:ring-primary-200',
-    'secondary' => 'border-transparent from-secondary-700 to-secondary-800 text-white hover:to-secondary-700 focus:ring-secondary-200',
-    'white' => 'border-gray-300 from-gray-100 to-gray-200 text-gray-800 hover:to-gray-100 focus:ring-primary-200',
+    'danger' => 'border-transparent bg-danger-700 text-white hover:bg-danger-600 focus:ring-danger-200',
+    'primary' => 'border-transparent bg-primary-800 text-white hover:bg-primary-700 focus:ring-primary-200',
+    'secondary' => 'border-transparent bg-secondary-700 text-white hover:bg-secondary-600 focus:ring-secondary-200',
+    'white' => 'border-gray-300 bg-gray-100 text-gray-800 hover:bg-gray-50 focus:ring-primary-200',
 ][$color];
 
 $sizeClasses = [
@@ -19,7 +19,7 @@ $sizeClasses = [
     'small' => 'text-xs py-1 px-3',
 ][$size];
 
-$classes = "cursor-pointer font-medium border rounded transition duration-200 shadow-sm inline-block relative focus:ring focus:ring-opacity-50 bg-gradient-to-b {$colorClasses} {$sizeClasses}"
+$classes = "cursor-pointer font-medium border rounded transition duration-200 shadow-sm focus:ring focus:ring-opacity-50 {$colorClasses} {$sizeClasses}"
 
 @endphp
 

resources/views/components/dropdown-link.blade.php

@@ -1,7 +1,8 @@
 @props([
     'button' => false,
-    'class' => 'w-full flex text-sm leading-tight text-left whitespace-nowrap rounded py-1.5 bg-gradient-to-b px-4 transition-colors duration-200 text-white hover:from-primary-700 hover:to-primary-800',
+    'class' => 'w-full flex text-sm leading-tight text-left whitespace-nowrap rounded py-1.5 px-4 transition-colors duration-200 text-white hover:bg-primary-800',
 ])
+
 @if ($button)
     <button {{ $attributes->merge(['class' => $class]) }}>{{ $slot }}</button>
 @else

resources/views/components/dropdown.blade.php

@@ -1,5 +1,6 @@
 @props([
-'id' => Str::uuid(),
+    'id' => Str::uuid(),
+    'asButton' => false,
 ])
 
 <div
@@ -15,17 +16,31 @@
     @click.away="open = false"
     wire:ignore
 >
-    <button
-        type="button"
-        x-ref="btn"
-        @click="open = !open; $nextTick(() => popper.update())"
-        aria-haspopup="true"
-        aria-controls="{{ $id }}"
-        :aria-expanded="open"
-        {{ $attributes }}
-    >
-        {{ $button }}
-    </button>
+    @if ($asButton)
+        <x-filament::button 
+            x-ref="btn"
+            x-on:click="open = !open; $nextTick(() => popper.update())"
+            aria-haspopup="true"
+            :aria-controls="$id"
+            x-bind:aria-expanded="open"
+            :attributes="$attributes"
+        >
+            {{ $button }}
+        </x-filament::button>
+    @else 
+        <button
+            type="button"
+            aria-haspopup="true"
+            aria-controls="{{ $id }}"
+            x-ref="btn"
+            @click="open = !open; $nextTick(() => popper.update())"
+            :aria-expanded="open"
+            {{ $attributes }}
+        >
+            {{ $button }}
+        </button>
+    @endif
+
     <div
         x-show="open"
         x-ref="menu"

resources/views/dashboard.blade.php

@@ -1,7 +1,10 @@
 <div>
     <x-filament::app-header :title="__('filament::dashboard.title')">
         <x-slot name="actions">
-            <x-filament::dropdown class="cursor-pointer font-medium border rounded transition duration-200 shadow-sm inline-block relative focus:ring focus:ring-opacity-50 border-gray-300 from-gray-100 to-gray-200 text-gray-800 hover:to-gray-100 bg-gradient-to-b focus:ring-secondary-200 text-sm py-2 px-4 flex items-center space-x-1">
+            <x-filament::dropdown 
+                :asButton="true"
+                class="flex items-center space-x-1"
+            >
                 <x-slot name="button">
                     <x-heroicon-o-plus class="w-4 h-4" aria-hidden="true" />
                     <span>{{ __('filament::widgets.add') }}</span>