elyra-ai#1635 Radioset-replace custom grouping with RadioButtonGroup

Signed-off-by: Veena S <[email protected]>
veenas1 · Apr 2, 2024 · ff466fd · ff466fd
1 parent 029d8d7
commit ff466fd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 21 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
@@ -21,10 +21,9 @@ import { isEqual } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
 import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js";
 import ValidationMessage from "./../../components/validation-message";
-import { RadioButton } from "@carbon/react";
+import { RadioButton, RadioButtonGroup } from "@carbon/react";
 import classNames from "classnames";
 import { STATES, UPDATE_TYPE } from "./../../constants/constants.js";
-import { ORIENTATIONS } from "./../../constants/form-constants.js";
 import { v4 as uuid4 } from "uuid";
 import { Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
@@ -223,12 +222,13 @@ class RadiosetControl extends React.Component {
 			<div data-id={ControlUtils.getDataId(this.props.control, this.props.propertyId)}
 				className={classNames("properties-radioset ", { "hide": this.props.state === STATES.HIDDEN })}
 			>
-				<div
-					className={classNames("properties-radio-button-group", this.props.messageInfo ? this.props.messageInfo.type : null,
-						{ "horizontal": this.props.control.orientation !== ORIENTATIONS.VERTICAL })} disabled={this.props.state === STATES.DISABLED}
+				<RadioButtonGroup className={classNames("properties-radio-button-group", this.props.messageInfo ? this.props.messageInfo.type : null)}
+					disabled={this.props.state === STATES.DISABLED}
+					name="radio-button-group"
+					orientation={this.props.control.orientation}
 				>
 					{buttons}
-				</div>
+				</RadioButtonGroup>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>
 		);

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.scss b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.scss
@@ -26,24 +26,12 @@
 
 .properties-radio-button-group {
 	display: block;
-	&.horizontal {
+	.cds--radio-button-group--label-right { // Horizontal-long labels to wrap properly
 		display: inline-flex;
-		flex-wrap: wrap;
-		.properties-radioset-panel {
-			display: flex;
-			height: auto;
-			align-items: center;
-			margin-bottom: 0;
-		}
+		flex-wrap: wrap; 
 	}
 	.properties-radioset-panel {
-		margin-bottom: $spacing-02;
-		margin-right: $spacing-04;
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		flex-wrap: wrap;
-		overflow: hidden;
+		 margin-right: $spacing-04;
 		.cds--radio-button-wrapper{
 			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
 		}