Wrapper for submit buttons

resources/views/form/submit.blade.php

@@ -1,29 +1,31 @@
 @php $customStyling = $hasCustomStyling($attributes) @endphp
 
-<button {{ $attributes->class([
-    'border rounded-md shadow-sm font-bold py-2 px-4 focus:outline-none focus:ring focus:ring-opacity-50',
-    'bg-indigo-500 hover:bg-indigo-700 text-white border-transparent focus:border-indigo-300 focus:ring-indigo-200' => !$customStyling && $primary,
-    'bg-red-500 hover:bg-red-700 text-white border-transparent focus:border-red-700 focus:ring-red-200' => !$customStyling && $danger,
-    'bg-white hover:bg-gray-100 text-gray-700 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200' => !$customStyling && $secondary,
-])->merge([
-    'type' => $type
-])->when($name, fn($attr) => $attr->merge(['name' => $name, 'value' => $value])) }}
->
-    @if(trim($slot))
-        {{ $slot }}
-    @else
-        <div class="flex flex-row items-center justify-center">
-            <svg
-                v-if="@js($spinner) && form.processing"
-                class="animate-spin mr-3 h-5 w-5 @if($secondary) text-gray-700 @else text-white @endif" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-            >
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
+<div @class($wrapperClass)>
+    <button {{ $attributes->class([
+        'border rounded-md shadow-sm font-bold py-2 px-4 focus:outline-none focus:ring focus:ring-opacity-50',
+        'bg-indigo-500 hover:bg-indigo-700 text-white border-transparent focus:border-indigo-300 focus:ring-indigo-200' => !$customStyling && $primary,
+        'bg-red-500 hover:bg-red-700 text-white border-transparent focus:border-red-700 focus:ring-red-200' => !$customStyling && $danger,
+        'bg-white hover:bg-gray-100 text-gray-700 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200' => !$customStyling && $secondary,
+    ])->merge([
+        'type' => $type
+    ])->when($name, fn($attr) => $attr->merge(['name' => $name, 'value' => $value])) }}
+    >
+        @if(trim($slot))
+            {{ $slot }}
+        @else
+            <div class="flex flex-row items-center justify-center">
+                <svg
+                    v-if="@js($spinner) && form.processing"
+                    class="animate-spin mr-3 h-5 w-5 @if($secondary) text-gray-700 @else text-white @endif" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                >
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
 
-            <span :class="{ 'opacity-50': form.processing || form.$uploading }">
-                {{ $label }}
-            </span>
-        </div>
-    @endif
-</button>
+                <span :class="{ 'opacity-50': form.processing || form.$uploading }">
+                    {{ $label }}
+                </span>
+            </div>
+        @endif
+    </button>
+</div>

src/Components/Form/Submit.php

@@ -27,6 +27,7 @@ public function __construct(
         public $value = null,
         public $danger = false,
         public $secondary = false,
+        public string $wrapperClass = '',
     ) {
         $this->primary = !$this->danger && !$this->secondary;
     }

src/FormBuilder/Button.php

@@ -2,6 +2,7 @@
 
 namespace ProtoneMedia\Splade\FormBuilder;
 
+use Illuminate\Support\Arr;
 use ProtoneMedia\Splade\Components\Form\Submit as SpladeSubmit;
 use ProtoneMedia\Splade\FormBuilder\Concerns\HasValue;
 
@@ -11,14 +12,16 @@ class Button extends Component
 
     protected bool $danger = false;
 
+    protected string $wrapperClass = '';
+
     protected bool $secondary = false;
 
     protected bool $spinner = true;
 
     protected string $type = 'button';
 
     /**
-     * Applies danger-styling to the button
+     * Applies danger-styling to the button.
      *
      * @return $this
      */
@@ -30,9 +33,23 @@ public function danger(bool $danger = true): self
     }
 
     /**
-     * Applies secondary-styling to the button
+     * Add one or more classes to the fields' wrapper.
+     *
+     * @param  array|string  $classes
+     * @return $this
+     */
+    public function wrapperClass(...$classes): self
+    {
+        $classes = Arr::flatten($classes);
+
+        $this->wrapperClass = Arr::toCssClasses($classes);
+
+        return $this;
+    }
+
+    /**
+     * Applies secondary-styling to the button.
      *
-     * @param  bool  $danger
      * @return $this
      */
     public function secondary(bool $secondary = true): self
@@ -56,7 +73,8 @@ public function toSpladeComponent()
             name: $this->name,
             value: $this->value ?? null,
             danger: $this->danger,
-            secondary: $this->secondary
+            secondary: $this->secondary,
+            wrapperClass: $this->wrapperClass
         );
     }
 }