use built-in carbon options rather than custom classes to style carbon radio buttons (#1195)

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/index.css

@@ -966,23 +966,6 @@ div.onboarding {
   line-height: 48px;
 }
 
-.radio-button-group-column {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-inline-end: 0;
-}
-
-.radio-button-group-column > * {
-  margin-bottom: 0.5rem;
-}
-
-.radio-button-group-row {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
 /* Utility classes to create horizontally centered stacks (to align icons etc) */
 .flex-align-horizontal-center {
   display: flex;

spiffworkflow-frontend/src/rjsf/carbon_theme/RadioWidget/RadioWidget.tsx

@@ -29,7 +29,6 @@ function RadioWidget({
     }
   };
 
-  const column = uiSchema?.['ui:layout']?.toString().toLowerCase() === 'column';
   const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
     onBlur(id, value);
   const _onFocus = ({
@@ -58,19 +57,18 @@ function RadioWidget({
       onChange={_onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
+      orientation={row ? 'horizontal' : 'vertical'}
     >
-      <div className={`radio-button-group-${column ? 'column' : 'row'}`}>
-        {Array.isArray(enumOptions) &&
-          enumOptions.map((option) => {
-            return (
-              <RadioButton
-                id={`${id}-${option.value}`}
-                labelText={option.label}
-                value={`${option.value}`}
-              />
-            );
-          })}
-      </div>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option) => {
+          return (
+            <RadioButton
+              id={`${id}-${option.value}`}
+              labelText={option.label}
+              value={`${option.value}`}
+            />
+          );
+        })}
     </RadioButtonGroup>
   );
 }