[5.x] Radio Fieldtype gets custom button icons (#10453)

Radio Fieldtype gets custom button icons

This gives us better control over contrast, dark/light, and disabled states — something native HTML cannot do, sadly. Closes #10427.

resources/css/components/fieldtypes/radio.css

@@ -0,0 +1,21 @@
+.radio-fieldtype label {
+    @apply flex;
+}
+
+.radio-fieldtype input[type="radio"] {
+    @apply m-0 min-w-0 absolute opacity-0 -z-1 w-1 h-px w-px overflow-hidden;
+}
+
+.radio-fieldtype .radio-icon {
+    @apply cursor-pointer h-4 w-4 ltr:mr-2 rtl:ml-2 block;
+}
+
+.radio-fieldtype .option.disabled {
+    .radio-icon {
+        @apply cursor-not-allowed opacity-25;
+    }
+    label {
+        @apply cursor-text;
+    }
+}
+

resources/css/cp.css

@@ -63,6 +63,7 @@
 @import "components/fieldtypes/hidden";
 @import "components/fieldtypes/markdown";
 @import "components/fieldtypes/partial";
+@import "components/fieldtypes/radio";
 @import "components/fieldtypes/relationship";
 @import "components/fieldtypes/replicator";
 @import "components/fieldtypes/section";

resources/js/components/fieldtypes/RadioFieldtype.vue

@@ -4,8 +4,28 @@
             v-for="(option, $index) in options"
             :key="$index"
             class="option"
+            :class="{
+                'selected': value === option.value,
+                'disabled': isReadOnly
+            }"
         >
             <label>
+                <svg-icon
+                    name="regular/radio-deselected"
+                    class="radio-icon"
+                    :aria-hidden="value === option.value"
+                    @click="update($event.target.value)"
+                    v-show="value !== option.value"
+                    v-cloak
+                />
+                <svg-icon
+                    name="regular/radio-selected"
+                    class="radio-icon"
+                    :aria-hidden="value !== option.value"
+                    @click="update($event.target.value)"
+                    v-show="value === option.value"
+                    v-cloak
+                />
                 <input type="radio"
                     ref="radio"
                     :name="name"