Merge pull request #13 from CornellCustomDev/form-cxbx-slect-edit-updates

Form cxbx slect edit updates

Author: msc18-cornell

resources/css/app.css

@@ -30,6 +30,14 @@
     --color-cds-medium-gray: #808080;
 }
 
+@utility default-focus-ring {
+    outline: -webkit-focus-ring-color auto 1px;
+}
+
+@utility focus-ring {
+    @apply focus:default-focus-ring focus:shadow-none;
+}
+
 /* Form fields */
 [data-flux-field] {
     @apply max-w-[600px];
@@ -63,34 +71,36 @@
     }
 
     [data-flux-description] {
-        @apply mb-5;
+        @apply mb-1;
         @apply text-base text-cds-dark-silver dark:text-neutral-400;
     }
 
     /* Checkboxes */
-    [data-flux-checkbox] {
-        @apply ml-[10px];
-        @apply cursor-pointer;
-        [data-flux-checkbox-indicator] {
-            @apply mt-[1px];
-            @apply w-[18px] h-[18px];
-            @apply border border-gray-600 dark:border-white/50 rounded-xs;
-            @apply bg-gray-300/20 bg-no-repeat bg-center;
-
-            [data-checked] & {
+    [data-flux-checkbox-group] {
+        [data-flux-field] {
+            @apply mb-0;
+        }
+        [data-flux-checkbox] {
+            @apply ml-0;
+            @apply cursor-pointer;
+            [data-flux-checkbox-indicator] {
+                @apply mt-[1px] ml-0 mr-0;
                 @apply w-[18px] h-[18px];
-                @apply rounded-xs;
-                @apply bg-cds-blue dark:bg-transparent;
-                @apply text-white;
-                svg {
-                    @apply dark:text-white;
+                @apply border border-gray-600 dark:border-white/50 rounded-xs;
+                @apply bg-gray-300/20 bg-no-repeat bg-center;
+
+                [data-checked] & {
+                    @apply rounded-xs;
+                    @apply bg-cds-blue dark:bg-transparent;
+                    @apply text-white;
+                    svg {
+                        @apply dark:text-white;
+                    }
                 }
             }
         }
-    }
-    [data-flux-checkbox-group] {
-        [data-flux-field] {
-            @apply mb-0;
+        [data-flux-label] {
+            @apply ml-2;
         }
         + [data-flux-error] {
             margin-top: calc(var(--spacing) * 0) !important;
@@ -133,9 +143,9 @@
         + [data-flux-error] {
             margin-top: calc(var(--spacing) * 1) !important;
         }
-        /* .ProseMirror-focused {
+        .ProseMirror-focused {
             @apply focus:default-focus-ring;
-        } */
+        }
     }
 }
 

resources/views/components/cds/checkbox.blade.php

@@ -2,11 +2,14 @@
     'label',   // group label OR single checkbox label
     'name' => $attributes->whereStartsWith('wire:model')->first(),
     'options' => null,  // if array → group mode; if null → single mode
+    'value' => null,
+    'text' => null,
     'badge' => null,
 ])
 
 @php
 $badge ??= $attributes->whereStartsWith('required')->isNotEmpty() ? 'Required' : null;
+$text ??= $value;
 @endphp
 
 {{-- Group Mode (options array is passed) --}}
@@ -22,11 +25,10 @@
 
 {{-- Single Checkbox Mode --}}
 @else
-    <flux:field variant="inline">
-        <flux:checkbox :$attributes />
-
-        <flux:label :$badge>{{ $label }}</flux:label>
-
-        <flux:error :$name />
-    </flux:field>
+    <flux:checkbox.group :$label :$badge :$attributes >
+        <flux:checkbox
+            :value="$value"
+            :label="$text"
+        />
+    </flux:checkbox.group>
 @endif

resources/views/examples/form.blade.php

@@ -13,7 +13,7 @@
                 </div>
             </div>
         </div>
-        <div class="region padded-small tint">
+        <div class="region padded tint">
             <div class="container container-full">
                 <div class="section">
                     <h2>Basic Text</h2>
@@ -101,7 +101,9 @@ class="native-size"
                     <form>
                         <x-cds.checkbox
                             name="terms"
-                            label="I agree to the terms and conditions"
+                            label="Terms and Conditions"
+                            description="Please review our terms and conditions before proceeding."
+                            value="I agree to the terms and conditions"
                             required
                             error:message="This field has an error."
 
@@ -139,6 +141,8 @@ class="native-size"
                             error:message="This field has an error."
 
                         />
+                        <flux:separator class="mb-4" />
+
                         <x-cds.button type="submit">Submit</x-cds.button>
                         <x-cds.button type="reset">Reset</x-cds.button>
                     </form>