fix: radio button issues resolved

Author: vip-git

src/fields/ConfiguredField.tsx

@@ -19,6 +19,7 @@ const classNames = require('classnames');
 
 // for unit testing only
 export const RawConfiguredField = ({
+  widget,
   data,
   type,
   descriptionText,
@@ -40,6 +41,7 @@ export const RawConfiguredField = ({
   const isCustomComponent = type === 'null' || hasCustomComponent;
   const classes = fieldStyles();
   const FormRoot = isCustomComponent ? FormGroup : FormControl;
+  const newLabel = widget === 'radio' ? classes.radioLabel : classes.normalLabel
   return (
 	<FormRoot
 		id={`${htmlid}-formControl`}
@@ -50,7 +52,7 @@ export const RawConfiguredField = ({
 			LabelComponent && title && !isCustomComponent && (
 				<LabelComponent
 					id={`${htmlid}-labelControl`}
-					className={descriptionText ? classes.customLabel : classes.normalLabel}
+					className={descriptionText ? classes.customLabel : newLabel}
 					style={activeCompColor ? { left: 41, top: -8 } : {}}
 					{...labelComponentProps}
 				>
@@ -88,6 +90,7 @@ export const RawConfiguredField = ({
 			<FormHelperText 
 				error={!isEmpty(hasInlineError) || undefined} 
 				id={`${id}-help`}
+				style={{ marginLeft: 0, marginRight: 0 }}
 			>
 				{helpText}
 			</FormHelperText>

src/fields/Field.tsx

@@ -23,6 +23,7 @@ export default (props: FieldProps) => {
     isCustomComponent,
   } = configureComponent({ ...props, htmlid });
 
+  const widget = uiSchema['ui:widget'];
   const options = uiSchema['ui:options'] || uiSchema['ui:props'];
   const descriptionText = uiSchema && uiSchema['ui:description'];
   const activeCompColor = uiSchema && uiSchema['ui:activeCompColor'];
@@ -62,6 +63,7 @@ export default (props: FieldProps) => {
       isCustomComponent={isCustomComponent}
       hasError={validation && validation.length}
       hasInlineError={hasInlineError}
+      widget={widget}
 		/>
   );
 };

src/fields/field-styles.ts

@@ -26,6 +26,10 @@ export default makeStyles((theme: Theme) => createStyles({
     left: 8,
     top: 8,
   },
+  radioLabel: {
+    left: 1,
+    top: 8,
+  },
   customLabel: {
     'left': 10,
     'transform': 'translate(0, 31px) scale(1)',

src/types/ConfiguredField.type.tsx

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 
 export type ConfiguredFieldProps = {
+    widget: string;
     data: any;
     type: string;
     descriptionText: string;