Add classes meta value and helper methods (#12)

Add support for adding extra css classes on action buttons. Closes issue #8

README.md

@@ -136,7 +136,39 @@ You can easily integrate the `DetachedAction` tool with the [Laravel Nova Excel]
  ...
  ```
 
+### Customizing Buttons
 
+The package ships with some common sense default HTML classes that are applied to the action buttons. In the component, we automatically assign the following:
+
+```
+btn btn-default ml-3 btn-detached-action btn-detached-index-action
+```
+
+The action buttons are buttons so it makes sense to assign the `btn` and `btn-default` classes, we also want consistent spacing between buttons so we apply `ml-3` and in order to allow theme developers to set a specific class name to hook into, we apply `btn-detached-action` on both the Index and Detail views.
+
+On top of these classes, the `DetachedAction` class provides `btn-primary` as a default, that will give the buttons the default button color, i.e. blue in the default Nova theme.
+
+Furthermore, a developer can add classes on the fly, using the `extraClassesWithDefault()` and `extraClasses()` methods on the `DetachedAction` class.
+
+### The `extraClassesWithDefault()` method
+
+ If you want to keep all of the other classes but change the background color, then you probably want to use this method. It will maintain the consistent spacing between button, as well as the white text and shadow on the button. You can pass an array of single class names or multiple class names separated by spaces.
+
+```php
+    return [
+        (new ImportUsers)->extraClassesWithDefault('bg-info')
+    ];
+```
+
+### The `extraClasses()` method
+
+If you want to completely restyle the buttons then use this method. You will need to apply margins, background etc. You may want to use this method if you want to have "link style" buttons.
+
+```php
+   return [
+       (new ImportUsers)->extraClasses('no-shadow btn-link px-2')
+   ];
+```
 
 ## License
 

dist/mix-manifest.json

@@ -1,4 +1,3 @@
 {
-    "/js/tool.js": "/js/tool.js",
-    "/css/tool.css": "/css/tool.css"
+    "/js/tool.js": "/js/tool.js"
 }

resources/js/components/CustomDetailToolbar.vue

@@ -4,16 +4,13 @@
             data-testid="import-action-confirm"
             dusk="run-import-action-button"
             @click.prevent="determineActionStrategy(action)"
-            class="btn btn-default btn-detached-action btn-detached-detail-action"
             :title="__(action.label)"
-            v-for="action in detachedActions" 
-            :key="action.uriKey"
-        >
+            class="btn btn-default ml-3 btn-detached-action btn-detached-detail-action"
+            :class="action.classes"
+            v-for="action in detachedActions"
+            :key="action.uriKey">
             <span>{{ __(action.label) }}</span>
         </button>
-
-        <!-- Action Confirmation Modal -->
-        <!-- <portal to="modals"> -->
         <transition name="fade">
             <component
                 :is="selectedAction.component"
@@ -27,7 +24,6 @@
                 @close="confirmActionModalOpened = false"
             />
         </transition>
-        <!-- </portal> -->
     </div>
 </template>
 

resources/js/components/CustomIndexToolbar.vue

@@ -4,8 +4,9 @@
             data-testid="import-action-confirm"
             dusk="run-import-action-button"
             @click.prevent="determineActionStrategy(action)"
-            class="btn btn-default btn-detached-action btn-detached-index-action"
             :title="__(action.label)"
+            class="btn btn-default ml-3 btn-detached-action btn-detached-index-action"
+            :class="action.classes"
             v-for="action in detachedActions"
             :key="action.uriKey">
             <span>{{ __(action.label) }}</span>

src/DetachedAction.php

@@ -2,13 +2,9 @@
 
 namespace Brightspot\Nova\Tools\DetachedActions;
 
-use Throwable;
 use Laravel\Nova\Nova;
+use Illuminate\Support\Arr;
 use Laravel\Nova\Actions\Action;
-use Laravel\Nova\Actions\ActionMethod;
-use Illuminate\Database\Eloquent\Collection;
-use Laravel\Nova\Http\Requests\ActionRequest;
-use Laravel\Nova\Exceptions\MissingActionHandlerException;
 
 abstract class DetachedAction extends Action
 {
@@ -75,6 +71,20 @@ abstract class DetachedAction extends Action
      */
     public $label;
 
+    /**
+     * Extra CSS classes to apply to detached action button.
+     *
+     * @var array
+     */
+    public $extraClasses = [];
+
+    /**
+     * The default CSS classes to apply to detached action button.
+     *
+     * @var array
+     */
+    public $defaultClasses = ['btn-primary'];
+
     /**
      * Get the displayable label of the button.
      *
@@ -223,6 +233,71 @@ public function shownOnDetailToolbar()
         return $this->showOnDetailToolbar;
     }
 
+    /**
+     * The default detached action classes.
+     *
+     * @return mixed
+     */
+    public function defaultClasses()
+    {
+        return $this->defaultClasses;
+    }
+
+    /**
+     * Set the extra CSS classes to be applied to the detached action button.
+     *
+     * @param mixed $classes
+     * @return $this
+     */
+    public function extraClasses($classes)
+    {
+        $this->extraClasses = $this->prepareClasses(Arr::wrap($classes));
+
+        return $this;
+    }
+
+    /**
+     * Set the extra CSS classes to be applied to the detached action button.
+     *
+     * @param mixed $classes
+     * @return $this
+     */
+    public function extraClassesWithDefault($classes)
+    {
+        $this->extraClasses = $this->prepareClasses(array_merge(
+            Arr::wrap($this->defaultClasses),
+            Arr::wrap($classes)
+        ));
+
+        return $this;
+    }
+
+    /**
+     * Get the display classes for the detached action button.
+     *
+     * @return array
+     */
+    public function getClasses()
+    {
+        if (empty($this->extraClasses)) {
+            return $this->prepareClasses($this->defaultClasses);
+        }
+
+        return $this->prepareClasses($this->extraClasses);
+    }
+
+    /**
+     * Prepare the classes so that a string or an array of strings is formatted correctly.
+     *
+     * @param string|array $classes
+     *
+     * @return array
+     */
+    protected function prepareClasses($classes)
+    {
+        return array_filter(array_map('trim', Arr::wrap($classes)));
+    }
+
     /**
      * Prepare the action for JSON serialization.
      *
@@ -235,6 +310,7 @@ public function jsonSerialize()
             'label' => $this->label(),
             'showOnIndexToolbar' => $this->shownOnIndexToolbar(),
             'showOnDetailToolbar' => $this->shownOnDetailToolbar(),
+            'classes' => $this->getClasses(),
         ], parent::jsonSerialize(), $this->meta());
     }
 }

src/ToolServiceProvider.php

@@ -15,7 +15,6 @@ class ToolServiceProvider extends ServiceProvider
     public function boot()
     {
         Nova::script('detached-actions', __DIR__. '/../dist/js/tool.js');
-        Nova::style('detached-actions', __DIR__. '/../dist/css/tool.css');
     }
 
     /**

webpack.mix.js

@@ -2,7 +2,6 @@ let mix = require('laravel-mix')
 
 mix.setPublicPath('dist')
   .js('resources/js/tool.js', 'js')
-  .sass('resources/css/tool.scss', 'css')
   .webpackConfig({
     resolve: {
       alias: {