feat: no options text readonly style

Author: gjulivan

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

@@ -28,14 +28,6 @@
                         <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">
@@ -214,6 +206,14 @@
                     <caption>Custom content</caption>
                     <description />
                 </property>
+                <property key="controlType" type="enumeration" defaultValue="checkbox" required="true">
+                    <caption>Render type</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="checkbox">Checkbox</enumerationValue>
+                        <enumerationValue key="radio">Radio button</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <!-- END MISC PROPS -->
             </propertyGroup>
             <!-- END GENERAL -->

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

@@ -3,6 +3,7 @@ import { ChangeEvent, ReactElement, createElement, MouseEvent } from "react";
 import { SelectionBaseProps, SingleSelector } from "../../helpers/types";
 import { CaptionContent } from "../CaptionContent";
 import { Placeholder } from "../Placeholder";
+import { If } from "@mendix/widget-plugin-component-kit/If";
 
 export function RadioSelection({
     selector,
@@ -48,6 +49,9 @@ export function RadioSelection({
             {options.map((optionId, index) => {
                 const isSelected = currentId === optionId;
                 const controlId = `${inputId}-${selector.controlType}-${index}`;
+                if (isReadOnly && !isSelected && readOnlyStyle === "text") {
+                    return null;
+                }
 
                 return (
                     <div
@@ -56,16 +60,18 @@ export function RadioSelection({
                             "widget-checkbox-radio-selection-item-selected": isSelected
                         })}
                     >
-                        <input
-                            type={selector.controlType}
-                            id={controlId}
-                            name={name}
-                            value={optionId}
-                            checked={isSelected}
-                            disabled={isReadOnly}
-                            tabIndex={tabIndex}
-                            onChange={handleChange}
-                        />
+                        <If condition={!isReadOnly || readOnlyStyle !== "text"}>
+                            <input
+                                type={selector.controlType}
+                                id={controlId}
+                                name={name}
+                                value={optionId}
+                                checked={isSelected}
+                                disabled={isReadOnly}
+                                tabIndex={tabIndex}
+                                onChange={handleChange}
+                            />
+                        </If>
                         <CaptionContent
                             onClick={(e: MouseEvent<HTMLDivElement>) => {
                                 e.preventDefault();

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

@@ -59,7 +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;
+        this.controlType = this.isBoolean ? props.controlType : "radio";
     }
 
     setValue(value: string | null): void {

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

@@ -8,7 +8,7 @@
             .radio-item {
                 display: none;
 
-                &.widget-checkbox-radio-selection-radio-item-selected {
+                &.widget-checkbox-radio-selection-item-selected {
                     display: block;
 
                     input {

packages/pluggableWidgets/checkbox-radio-selection-web/typings/CheckboxRadioSelectionProps.d.ts

@@ -11,8 +11,6 @@ export type SourceEnum = "context" | "database" | "static";
 
 export type OptionsSourceTypeEnum = "association" | "enumeration" | "boolean";
 
-export type ControlTypeEnum = "checkbox" | "radio";
-
 export type OptionsSourceAssociationCaptionTypeEnum = "attribute" | "expression";
 
 export type OptionsSourceDatabaseCaptionTypeEnum = "attribute" | "expression";
@@ -25,6 +23,8 @@ export interface OptionsSourceStaticDataSourceType {
 
 export type OptionsSourceCustomContentTypeEnum = "yes" | "no";
 
+export type ControlTypeEnum = "checkbox" | "radio";
+
 export type CustomEditabilityEnum = "default" | "never" | "conditionally";
 
 export type ReadOnlyStyleEnum = "bordered" | "text";
@@ -41,7 +41,6 @@ export interface CheckboxRadioSelectionContainerProps {
     id: string;
     source: SourceEnum;
     optionsSourceType: OptionsSourceTypeEnum;
-    controlType: ControlTypeEnum;
     attributeEnumeration: EditableValue<string>;
     attributeBoolean: EditableValue<boolean>;
     optionsSourceDatabaseDataSource?: ListValue;
@@ -62,6 +61,7 @@ export interface CheckboxRadioSelectionContainerProps {
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent?: ListWidgetValue;
     optionsSourceDatabaseCustomContent?: ListWidgetValue;
+    controlType: ControlTypeEnum;
     customEditability: CustomEditabilityEnum;
     customEditabilityExpression: DynamicValue<boolean>;
     readOnlyStyle: ReadOnlyStyleEnum;
@@ -76,7 +76,6 @@ export interface CheckboxRadioSelectionPreviewProps {
     translate: (text: string) => string;
     source: SourceEnum;
     optionsSourceType: OptionsSourceTypeEnum;
-    controlType: ControlTypeEnum;
     attributeEnumeration: string;
     attributeBoolean: string;
     optionsSourceDatabaseDataSource: {} | { caption: string } | { type: string } | null;
@@ -97,6 +96,7 @@ export interface CheckboxRadioSelectionPreviewProps {
     optionsSourceCustomContentType: OptionsSourceCustomContentTypeEnum;
     optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    controlType: ControlTypeEnum;
     customEditability: CustomEditabilityEnum;
     customEditabilityExpression: string;
     readOnlyStyle: ReadOnlyStyleEnum;