Fix inline radio group after PF4 upgrade

openshift · Jul 14, 2020 · b85c7e7 · b85c7e7
1 parent 83648d5
commit b85c7e7
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss
@@ -13,7 +13,7 @@
     display: flex;
     align-items: flex-start;
 
-    > .pf-c-form__label, .pf-c-radio {
+    > .pf-c-form__group-label {
       margin-right: var(--pf-global--spacer--md);
     }
 

diff --git a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx
@@ -12,7 +12,7 @@ const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
   options,
   helpText,
   required,
-  inline,
+  isInline,
   onChange,
   ...props
 }) => {
@@ -22,13 +22,14 @@ const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
   const errorMessage = !isValid ? error : '';
   return (
     <FormGroup
-      className={classNames('ocs-radio-group-field', { 'ocs-radio-group-field--inline': inline })}
+      className={classNames('ocs-radio-group-field', { 'ocs-radio-group-field--inline': isInline })}
       fieldId={fieldId}
       helperText={helpText}
       helperTextInvalid={errorMessage}
       validated={isValid ? 'default' : 'error'}
       isRequired={required}
       label={label}
+      isInline={isInline}
     >
       {options.map((option) => {
         const activeChild = field.value === option.value && option.activeChildren;

diff --git a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx
@@ -99,7 +99,7 @@ const SyncedEditorField: React.FC<SyncedEditorFieldProps> = ({
             },
           ]}
           onChange={(val) => onChangeType(val as EditorType)}
-          inline
+          isInline
         />
       </div>
       {yamlWarning && (

diff --git a/...packages/console-shared/src/components/formik-fields/__tests__/SyncedEditorField.spec.tsx b/...packages/console-shared/src/components/formik-fields/__tests__/SyncedEditorField.spec.tsx
@@ -42,7 +42,7 @@ describe('DropdownField', () => {
       wrapper
         .find(RadioGroupField)
         .first()
-        .props().inline,
+        .props().isInline,
     ).toBe(true);
   });
 

diff --git a/frontend/packages/console-shared/src/components/formik-fields/field-types.ts b/frontend/packages/console-shared/src/components/formik-fields/field-types.ts
@@ -119,7 +119,7 @@ export interface RadioButtonFieldProps extends FieldProps {
 }
 
 export interface RadioGroupFieldProps extends FieldProps {
-  inline?: boolean;
+  isInline?: boolean;
   options: RadioGroupOption[];
   onChange?: (value: React.ReactText) => void;
 }