feat: allow boolean to choose for checkbox type

Author: gjulivan

packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorConfig.ts

@@ -43,6 +43,10 @@ export function getProperties(
         hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
     }
 
+    if (values.optionsSourceType !== "boolean") {
+        hidePropertiesIn(defaultProperties, values, ["controlType"]);
+    }
+
     if (values.source === "context") {
         hidePropertiesIn(defaultProperties, values, [
             "staticAttribute",
@@ -197,7 +201,9 @@ export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMod
                 borderRadius: 2,
                 backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
             })(
-                getIconPreview(isMultiSelect),
+                getIconPreview(
+                    isMultiSelect || (values.optionsSourceType === "boolean" && values.controlType === "checkbox")
+                ),
                 container()(container({ padding: 3 })(), text()(getCustomCaption(values)))
             )
         );

packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <widget id="com.mendix.widget.web.checkboxradioselection.CheckboxRadioSelection" pluginWidget="true" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
-    <name>Checkbox Radio Selection</name>
+    <name>Check box / Radio button</name>
     <description />
     <studioProCategory>Input elements</studioProCategory>
     <studioCategory>Display</studioCategory>
@@ -28,6 +28,14 @@
                         <enumerationValue key="boolean">Boolean</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="controlType" type="enumeration" defaultValue="checkbox" required="true">
+                    <caption>Component</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="checkbox">Checkbox</enumerationValue>
+                        <enumerationValue key="radio">Radio button</enumerationValue>
+                    </enumerationValues>
+                </property>
 
                 <!-- ENUM & BOOLEAN-->
                 <property key="attributeEnumeration" type="attribute" required="true" setLabel="true">

packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx

@@ -47,7 +47,7 @@ export function RadioSelection({
                             })}
                         >
                             <input
-                                type="radio"
+                                type={selector.controlType}
                                 id={radioId}
                                 name={name}
                                 value={optionId}

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationSingleSelector.ts

@@ -8,6 +8,7 @@ export class AssociationSingleSelector
     implements SingleSelector
 {
     type = "single" as const;
+    controlType: "checkbox" | "radio" = "radio";
 
     updateProps(props: CheckboxRadioSelectionContainerProps): void {
         super.updateProps(props);

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/Preview/AssociationPreviewSelector.ts

@@ -13,7 +13,7 @@ export class AssociationPreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
-    // type: "single";
+    controlType: "checkbox" | "radio" = "radio";
     readOnly: boolean;
     validation?: string | undefined;
     clearable: boolean = false;
@@ -27,6 +27,7 @@ export class AssociationPreviewSelector implements SingleSelector {
         this.currentId = `single-${generateUUID()}`;
         this.customContentType = props.optionsSourceCustomContentType;
         this.readOnly = props.readOnly;
+        this.controlType = props.controlType;
         this.caption = new PreviewCaptionsProvider(new Map(), getCustomCaption(props));
         this.options = new PreviewOptionsProvider(this.caption, new Map());
         (this.caption as PreviewCaptionsProvider).updatePreviewProps({

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/DatabaseSingleSelector.ts

@@ -16,6 +16,7 @@ export class DatabaseSingleSelector<T extends string | Big, R extends EditableVa
     attributeType: "string" | "big" | "boolean" | "date" = "string";
     selectorType: "context" | "database" | "static" = "database";
     status: Status = "unavailable";
+    controlType: "checkbox" | "radio" = "radio";
     options: DatabaseOptionsProvider;
     caption: DatabaseCaptionsProvider;
     clearable = false;

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts

@@ -13,7 +13,7 @@ export class DatabasePreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
-    // type: "single";
+    controlType: "checkbox" | "radio" = "radio";
     readOnly: boolean;
     validation?: string | undefined;
     clearable: boolean = false;

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/EnumBool/EnumBooleanSingleSelector.ts

@@ -12,6 +12,7 @@ import { extractEnumerationProps } from "./utils";
 export class EnumBooleanSingleSelector implements SingleSelector {
     status: Status = "unavailable";
     type = "single" as const;
+    controlType: "checkbox" | "radio" = "radio";
     validation?: string = undefined;
     private isBoolean = false;
     private _attr: EditableValue<string | boolean> | undefined;
@@ -58,6 +59,7 @@ export class EnumBooleanSingleSelector implements SingleSelector {
         this.currentId = attr.value?.toString() ?? null;
         this.readOnly = attr.readOnly;
         this.validation = attr.validation;
+        this.controlType = props.controlType;
     }
 
     setValue(value: string | null): void {

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/Preview/StaticPreviewSelector.ts

@@ -13,7 +13,7 @@ export class StaticPreviewSelector implements SingleSelector {
     status: Status = "available";
     attributeType?: "string" | "boolean" | "big" | "date" | undefined;
     selectorType?: "context" | "database" | "static" | undefined;
-    // type: "single";
+    controlType: "checkbox" | "radio" = "radio";
     readOnly: boolean;
     validation?: string | undefined;
     clearable: boolean = false;

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Static/StaticSingleSelector.ts

@@ -17,6 +17,7 @@ export class StaticSingleSelector implements SingleSelector {
     attributeType: "string" | "big" | "boolean" | "date" = "string";
     selectorType: "context" | "database" | "static" = "static";
     status: Status = "unavailable";
+    controlType: "checkbox" | "radio" = "radio";
     options: StaticOptionsProvider;
     caption: StaticCaptionsProvider;
     clearable = false;