Merge pull request #10819 from Budibase/budi-6945/display_indeterminate

Display indeterminate when few checkbox selected

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -10,6 +10,7 @@
   export let validate = null
   export let compress = false
   export let lighter = false
+  export let indeterminate = false
 
   const dispatch = createEventDispatcher()
 
@@ -34,7 +35,7 @@
   on:click={onChange}
 >
   <span>
-    <Checkbox {disabled} {value} />
+    <Checkbox {disabled} {value} {indeterminate} />
   </span>
   <div class="text">
     {#if text}

packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte

@@ -14,6 +14,7 @@
   $: updateSelected(selectedBooleans)
   $: dispatch("change", selected)
   $: allSelected = selected?.length === options.length
+  $: noneSelected = !selected?.length
 
   function reset() {
     return Array(options.length).fill(true)
@@ -48,6 +49,7 @@
           text={selectAllText}
           compress
           lighter
+          indeterminate={!allSelected && !noneSelected}
         />
       </div>
     {/if}

packages/bbui/src/Form/Core/Checkbox.svelte

@@ -9,6 +9,7 @@
   export let text = null
   export let disabled = false
   export let size
+  export let indeterminate = false
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -22,6 +23,7 @@
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
   class:is-invalid={!!error}
   class:checked={value}
+  class:is-indeterminate={indeterminate}
 >
   <input
     checked={value}