fix: allow group name and fix onclick label

Author: gjulivan

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

@@ -147,7 +147,7 @@ function getIconPreview(isMultiSelect: boolean): ContainerProps {
 export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const structurePreviewChildren: StructurePreviewProps[] = [];
-    // let readOnly = values.readOnly;
+    let readOnly = values.readOnly;
 
     // Handle custom content dropzones when enabled
     if (values.optionsSourceCustomContentType !== "no") {
@@ -165,6 +165,10 @@ export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMod
                     dropzone.hideDataSourceHeaderIf(false)
                 )(values.optionsSourceDatabaseCustomContent)
             );
+
+            if (values.databaseAttributeString.length === 0) {
+                readOnly = values.customEditability === "never";
+            }
         } else if (values.source === "static") {
             values.optionsSourceStaticDataSource.forEach(value => {
                 structurePreviewChildren.push(
@@ -196,7 +200,8 @@ export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMod
         return container()(
             rowLayout({
                 columnSize: "grow",
-                backgroundColor: palette.background.container
+                borderRadius: 2,
+                backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
             })(
                 getIconPreview(isMultiSelect),
                 container()(container({ padding: 3 })(), text()(getCustomCaption(values)))
@@ -210,7 +215,8 @@ export function getPreview(values: CheckboxRadioSelectionPreviewProps, isDarkMod
             columnSize: "grow",
             borders: true,
             borderWidth: 1,
-            borderRadius: 2
+            borderRadius: 2,
+            backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
         })(container({ grow: 1, padding: 4 })(...structurePreviewChildren))
     );
 }

packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.editorPreview.tsx

@@ -11,6 +11,7 @@ import {
 } from "./helpers/Database/Preview/DatabasePreviewSelector";
 import { AssociationPreviewSelector } from "./helpers/Association/Preview/AssociationPreviewSelector";
 import "./ui/CheckboxRadioSelection.scss";
+import "./ui/CheckboxRadioSelectionPreview.scss";
 import { CheckboxSelection } from "./components/CheckboxSelection/CheckboxSelection";
 
 export const preview = (props: CheckboxRadioSelectionPreviewProps): ReactElement => {
@@ -20,7 +21,8 @@ export const preview = (props: CheckboxRadioSelectionPreviewProps): ReactElement
         inputId: id,
         labelId: `${id}-label`,
         readOnlyStyle: props.readOnlyStyle,
-        ariaRequired: dynamic(false)
+        ariaRequired: dynamic(false),
+        groupName: dynamic(`${id}-group`)
     };
 
     // eslint-disable-next-line react-hooks/rules-of-hooks

packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.icon.png

@@ -17,7 +17,8 @@ export default function CheckboxRadioSelection(props: CheckboxRadioSelectionCont
         inputId: props.id,
         labelId: `${props.id}-label`,
         readOnlyStyle: props.readOnlyStyle,
-        ariaRequired: props.ariaRequired
+        ariaRequired: props.ariaRequired,
+        groupName: props.groupName
     };
 
     return (

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

@@ -228,7 +228,7 @@
                 </property>
                 <property key="readOnlyStyle" type="enumeration" defaultValue="text">
                     <caption>Read-only style</caption>
-                    <description>How the combo box will appear in read-only mode.</description>
+                    <description>How the checkbox radio selection will appear in read-only mode.</description>
                     <enumerationValues>
                         <enumerationValue key="bordered">Control</enumerationValue>
                         <enumerationValue key="text">Content only</enumerationValue>
@@ -255,6 +255,11 @@
                     <description />
                     <returnType type="Boolean" />
                 </property>
+                <property key="groupName" type="expression" required="false">
+                    <caption>Group name</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>

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

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, createElement } from "react";
+import { ReactElement, createElement, MouseEvent } from "react";
 import { SelectionBaseProps, MultiSelector } from "../../helpers/types";
 import { CaptionContent } from "../CaptionContent";
 
@@ -8,11 +8,13 @@ export function CheckboxSelection({
     tabIndex = 0,
     inputId,
     ariaRequired,
-    readOnlyStyle
+    readOnlyStyle,
+    groupName
 }: SelectionBaseProps<MultiSelector>): ReactElement {
     const options = selector.getOptions();
     const currentIds = selector.currentId || [];
     const isReadOnly = selector.readOnly;
+    const name = groupName?.value ?? inputId;
 
     const handleChange = (optionId: string, checked: boolean): void => {
         if (!isReadOnly) {
@@ -37,7 +39,6 @@ export function CheckboxSelection({
                 {options.map((optionId, index) => {
                     const isSelected = currentIds.includes(optionId);
                     const checkboxId = `${inputId}-checkbox-${index}`;
-                    const name = selector.caption.get(optionId);
 
                     return (
                         <div
@@ -49,14 +50,24 @@ export function CheckboxSelection({
                             <input
                                 type="checkbox"
                                 id={checkboxId}
-                                name={name && name.length > 0 ? name : inputId}
+                                name={name}
                                 value={optionId}
                                 checked={isSelected}
                                 disabled={isReadOnly}
                                 tabIndex={tabIndex}
                                 onChange={e => handleChange(optionId, e.target.checked)}
                             />
-                            <CaptionContent htmlFor={checkboxId}>{selector.caption.render(optionId)}</CaptionContent>
+                            <CaptionContent
+                                onClick={(e: MouseEvent<HTMLDivElement>) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.nativeEvent.stopImmediatePropagation();
+                                    handleChange(optionId, !isSelected);
+                                }}
+                                htmlFor={checkboxId}
+                            >
+                                {selector.caption.render(optionId)}
+                            </CaptionContent>
                         </div>
                     );
                 })}

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

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, createElement } from "react";
+import { ChangeEvent, ReactElement, createElement, MouseEvent } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { CaptionContent } from "../CaptionContent";
 
@@ -8,15 +8,18 @@ export function RadioSelection({
     tabIndex = 0,
     inputId,
     ariaRequired,
-    readOnlyStyle
+    readOnlyStyle,
+    groupName
 }: SelectionBaseProps<SingleSelector>): ReactElement {
     const options = selector.options.getAll();
     const currentId = selector.currentId;
     const isReadOnly = selector.readOnly;
+    const name = groupName?.value ?? inputId;
 
-    const handleChange = (optionId: string): void => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        const selectedItem = e.target.value;
         if (!isReadOnly) {
-            selector.setValue(optionId);
+            selector.setValue(selectedItem);
         }
     };
 
@@ -36,8 +39,6 @@ export function RadioSelection({
                 {options.map((optionId, index) => {
                     const isSelected = currentId === optionId;
                     const radioId = `${inputId}-radio-${index}`;
-                    const name = selector.caption.get(optionId);
-
                     return (
                         <div
                             key={optionId}
@@ -48,14 +49,26 @@ export function RadioSelection({
                             <input
                                 type="radio"
                                 id={radioId}
-                                name={name && name.length > 0 ? name : inputId}
+                                name={name}
                                 value={optionId}
                                 checked={isSelected}
                                 disabled={isReadOnly}
                                 tabIndex={tabIndex}
-                                onChange={() => handleChange(optionId)}
+                                onChange={handleChange}
                             />
-                            <CaptionContent htmlFor={radioId}>{selector.caption.render(optionId)}</CaptionContent>
+                            <CaptionContent
+                                onClick={(e: MouseEvent<HTMLDivElement>) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    e.nativeEvent.stopImmediatePropagation();
+                                    if (!isReadOnly) {
+                                        selector.setValue(optionId);
+                                    }
+                                }}
+                                htmlFor={radioId}
+                            >
+                                {selector.caption.render(optionId)}
+                            </CaptionContent>
                         </div>
                     );
                 })}

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

@@ -83,4 +83,5 @@ export interface SelectionBaseProps<Selector> {
     selector: Selector;
     tabIndex: number;
     ariaRequired: DynamicValue<boolean>;
+    groupName: DynamicValue<string> | undefined;
 }

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

@@ -2,4 +2,32 @@
 .widget-checkbox-radio-selection {
     display: block;
     position: relative;
+
+    &-readonly {
+        &.widget-checkbox-radio-selection-readonly-text {
+            .widget-checkbox-radio-selection-radio-item {
+                display: none;
+
+                &.widget-checkbox-radio-selection-radio-item-selected {
+                    display: block;
+
+                    input {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    label {
+        font-weight: inherit;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+        & + label {
+            cursor: pointer;
+            margin-left: var(--spacing-small, 8px);
+        }
+    }
 }

packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss

@@ -0,0 +1,16 @@
+// Checkbox Radio Selection Widget Styles
+.widget-checkbox-radio-selection.widget-checkbox-radio-selection-editor-preview {
+    .widget-checkbox-radio-selection-readonly {
+        &.widget-checkbox-radio-selection-readonly-text {
+            .widget-checkbox-radio-selection-radio-item {
+                display: block;
+
+                &.widget-checkbox-radio-selection-radio-item {
+                    input {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}