Add labels and icons to toggle field

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=210c4f5bc98fdf1aa267",
-    "/css/filament.css": "/css/filament.css?id=8efc876eb25ed3f4b6ba"
+    "/css/filament.css": "/css/filament.css?id=fa9ff3e596c7b80b2260"
 }

packages/forms/resources/views/components/toggle.blade.php

@@ -17,13 +17,33 @@
         class="relative inline-flex flex-shrink-0 h-[30px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
         role="switch"
         tabindex="0"
-        :class="enabled ? 'bg-primary-600' : 'bg-gray-300'"
+        :class="enabled ? 'bg-primary-600 hover:bg-primary-700' : 'bg-gray-400 hover:bg-gray-500'"
         :aria-checked="enabled ? 'true' : 'false'"
     >
+        @if ($formComponent->getOnLabel())
+            <span class="absolute left-3 text-white" :class="{ 'hidden': !enabled }">
+                {{ $formComponent->getOnLabel() }}
+            </span>
+        @endif
+
+        @if ($formComponent->getOffLabel())
+            <span class="absolute right-3 text-white" :class="{ 'hidden': enabled }">
+                {{ $formComponent->getOffLabel() }}
+            </span>
+        @endif
+
         <span
-            class="pointer-events-none inline-block h-[26px] w-[26px] rounded-full bg-white shadow-lg ring-0 transform transition ease-in-out duration-200"
+            class="pointer-events-none inline-flex justify-center items-center h-[26px] w-[26px] rounded-full bg-white shadow-lg ring-0 transform transition ease-in-out duration-200"
             :class="enabled ? 'translate-x-11' : 'translate-x-0'"
-            aria-hidden="true">
+            aria-hidden="true"
+        >
+            @if ($formComponent->getOnIcon())
+                <x-dynamic-component :component="$formComponent->getOnIcon()" class="flex-shrink-0 w-5 h-5" x-bind:class="{ 'hidden': !enabled }" />
+            @endif
+
+            @if ($formComponent->getOffIcon())
+                <x-dynamic-component :component="$formComponent->getOffIcon()" class="flex-shrink-0 w-5 h-5" x-bind:class="{ 'hidden': enabled }" />
+            @endif
         </span>
     </button>
 </x-forms::field-group>

packages/forms/src/Components/Toggle.php

@@ -9,8 +9,72 @@ class Toggle extends Field
 {
     use Concerns\CanBeAutofocused;
 
+    protected $onLabel;
+
+    protected $offLabel;
+
+    protected $onIcon;
+
+    protected $offIcon;
+
     protected function setUp()
     {
         $this->default(false);
     }
+
+    public function onLabel($label)
+    {
+        $this->configure(function () use ($label) {
+            $this->onLabel = $label;
+        });
+
+        return $this;
+    }
+
+    public function offLabel($label)
+    {
+        $this->configure(function () use ($label) {
+            $this->offLabel = $label;
+        });
+
+        return $this;
+    }
+
+    public function onIcon($icon)
+    {
+        $this->configure(function () use ($icon) {
+            $this->onIcon = $icon;
+        });
+
+        return $this;
+    }
+
+    public function offIcon($icon)
+    {
+        $this->configure(function () use ($icon) {
+            $this->offIcon = $icon;
+        });
+
+        return $this;
+    }
+
+    public function getOnLabel()
+    {
+        return $this->onLabel;
+    }
+
+    public function getOffLabel()
+    {
+        return $this->offLabel;
+    }
+
+    public function getOnIcon()
+    {
+        return $this->onIcon;
+    }
+
+    public function getOffIcon()
+    {
+        return $this->offIcon;
+    }
 }