Merge pull request #145 from flowforge/radio-group-updates

Radio group updates
FlowFuse · Jul 4, 2023 · a0de33d · a0de33d
2 parents 74d2994 + ca950ce
commit a0de33d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 16 deletions.
diff --git a/docs/DesignLanguage.vue b/docs/DesignLanguage.vue
@@ -508,16 +508,22 @@
                         <code>{{ cGroups['input'].components[3].examples[0].code }}</code>
                     </div>
                     <div class="example">
-                        <h5>Example 2: Vertical &amp; Descriptions</h5>
-                        <ff-radio-group v-model="models.radio1" label="We can also provide a label here" :options="[{label: 'Option 1', value: 1, checked: false, description: 'This is a description of this particular option'}, {label: 'Option 2', value: 2, description: 'Another description'}]" orientation="vertical"></ff-radio-group>
+                        <h5>Example 2: Grid &amp; Label</h5>
+                        <ff-radio-group v-model="models.radio1" label="We can also provide a label here" :options="[{label: 'Option 1', value: 1, checked: false}, {label: 'Option 2', value: 2}, {label: 'Option 3', value: 3}, {label: 'Option 4', value: 4}]" orientation="grid" :columns="3"></ff-radio-group>
                         {{ models.radio1 }}
                         <code>{{ cGroups['input'].components[3].examples[1].code }}</code>
                     </div>
                     <div class="example">
-                        <h5>Example 3: Disabled Option</h5>
+                        <h5>Example 3: Vertical &amp; Descriptions</h5>
+                        <ff-radio-group v-model="models.radio1" label="We can also provide a label here" :options="[{label: 'Option 1', value: 1, checked: false, description: 'This is a description of this particular option'}, {label: 'Option 2', value: 2, description: 'Another description'}]" orientation="vertical"></ff-radio-group>
+                        {{ models.radio1 }}
+                        <code>{{ cGroups['input'].components[3].examples[2].code }}</code>
+                    </div>
+                    <div class="example">
+                        <h5>Example 4: Disabled Option</h5>
                         <ff-radio-group v-model="models.radio2" label="We can also provide a label here" :options="[{label: 'Option 1', value: 1, checked: false, description: 'This is a description of this particular option'}, {label: 'Disabled Option', value: 2, description: 'Another description', disabled: true}]" orientation="vertical"></ff-radio-group>
                         {{ models.radio2 }}
-                        <code>{{ cGroups['input'].components[3].examples[2].code }}</code>
+                        <code>{{ cGroups['input'].components[3].examples[3].code }}</code>
                     </div>
                 </div>
                 <!-- Tile Selection -->

diff --git a/docs/data/input.docs.json b/docs/data/input.docs.json
@@ -106,6 +106,8 @@
         "examples": [{
             "code": "<ff-radio-group v-model=\"myVar\" :options=\"[{label: 'Option 1', value: 1, checked: false}, {label: 'Option 2', value: 2}]\"></ff-radio-group>"
         }, {
+            "code": "<ff-radio-group label=\"We can also provide a label here\" v-model=\"myVar\" orientation=\"grid\" :columns=\"3\" :options=\"[{label: 'Option 1', value: 1, checked: false}, {label: 'Option 2', value: 2}, {label: 'Option 3', value: 3, checked: false}, {label: 'Option 4', value: 4}]\"></ff-radio-group>"
+        },  {
             "code": "<ff-radio-group label=\"We can also provide a label here\" v-model=\"myVar\" orientation=\"vertical\" :options=\"[{label: 'Option 1', value: 1, checked: false, description: 'This is a description of this particular option'}, {label: 'Option 2', value: 2, description: 'Another description'}]\"></ff-radio-group>"
         }, {
             "code": "<ff-radio-group label=\"We can also provide a label here\" v-model=\"myVar\" orientation=\"vertical\" :options=\"[{label: 'Option 1', value: 1, checked: false, description: 'This is a description of this particular option'}, {label: 'Disabled Options', disabled: true, value: 2, description: 'Another description'}]\"></ff-radio-group>"
@@ -121,7 +123,11 @@
         }, {
             "key": "orientation",
             "default": "horizontal",
-            "description": "(optional) The direction that the radio group renders."
+            "description": "(optional) The direction that the radio group renders, can also be 'vertical' or 'grid'"
+        }, {
+            "key": "columns",
+            "default": "2",
+            "description": "(optional) With 'orientation: grid', this is used to define the number of columns in the display grid."
         }],
         "methods": [{
             "name": "focus",

diff --git a/src/components/form/RadioGroup.vue b/src/components/form/RadioGroup.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="ff-radio-group" :class="'ff-radio-group--' + orientation">
+    <div class="ff-radio-group">
         <label v-if="label" class="ff-radio-group-label">{{ label }}</label>
-        <ff-radio-button v-for="option in internalOptions" :key="option.label" ref="inputs"
-            :value="option.value" :label="option.label" :checked="option.checked"
-            :description="option.description"
-            :disabled="option.disabled"
-            :hide-description="orientation === 'horizontal'"
-            @select="select"
-        ></ff-radio-button>
+        <div class="ff-radio-group-options" :class="'ff-radio-group--' + orientation" :style="orientation === 'grid' ? {'grid-template-columns': `repeat(${columns}, 1fr)`} : ''">
+            <ff-radio-button v-for="option in internalOptions" :key="option.label" ref="inputs"
+                :value="option.value" :label="option.label" :checked="option.checked"
+                :description="option.description"
+                :disabled="option.disabled"
+                :hide-description="orientation === 'horizontal'"
+                @select="select"
+            ></ff-radio-button>
+        </div>
     </div>
 </template>
 
@@ -27,6 +29,10 @@ export default {
             default: 'horizontal',
             type: String
         },
+        columns: {
+            default: 2,
+            type: Number
+        },
         options: {
             default: null,
             type: Array

diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
@@ -412,15 +412,25 @@ li.ff-list-item {
 .ff-radio-group {
   .ff-radio-group-label {
     display: block;
-    margin-bottom: 1rem;
   }
-  &.ff-radio-group--horizontal {
+  .ff-radio-group-options {
+    display: block;
+    margin-top: 1rem;
+  }
+  .ff-radio-group--horizontal {
     display: flex;
     .ff-radio-btn {
       margin-right: $ff-funit-lg;
     }
   }
-  &.ff-radio-group--vertical {
+  .ff-radio-group--vertical {
+    .ff-radio-btn {
+      display: block;
+      margin-bottom: $ff-funit-md;
+    }
+  }
+  .ff-radio-group--grid {
+    display: grid;
     .ff-radio-btn {
       display: block;
       margin-bottom: $ff-funit-md;

diff --git a/src/stylesheets/ff-theme-dark.scss b/src/stylesheets/ff-theme-dark.scss
@@ -47,4 +47,21 @@
           border-color: $ff-white;
         }
     }
+
+    .ff-radio-btn {
+      .checkbox {
+        border: 1px solid $ff-grey-600;
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231F2937' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e")    
+      }
+    }
+
+    .checkbox {
+        &[checked=true] {
+            background-color: $ff-white;
+            border-color: $ff-grey-700;
+        }
+        &[checked=true]:after {
+            display: block;
+        }
+    }
 }