Merge pull request #2481 from NDLANO/refactor/version-form

refactor: use form primitives in VersionForm
NDLANO · Oct 8, 2024 · a9fbcb0 · a9fbcb0
2 parents dc4415a + e8b307e
commit a9fbcb0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 40 deletions.
diff --git a/src/containers/TaxonomyVersions/components/VersionForm.tsx b/src/containers/TaxonomyVersions/components/VersionForm.tsx
@@ -21,6 +21,7 @@ import VersionSourceField from "./VersionSourceField";
 import { Row } from "../../../components";
 import AlertModal from "../../../components/AlertModal";
 import Field from "../../../components/Field";
+import { FormikForm } from "../../../components/FormikForm";
 import validateFormik, { RulesType } from "../../../components/formikValidationSchema";
 import SaveButton from "../../../components/SaveButton";
 import Fade from "../../../components/Taxonomy/Fade";
@@ -155,7 +156,7 @@ const VersionForm = ({ version, existingVersions, onClose }: Props) => {
       >
         {({ isSubmitting, isValid, dirty, handleSubmit }) => {
           return (
-            <>
+            <FormikForm>
               <StyledTitle>{t(`taxonomyVersions.${!version ? "newVersionTitle" : "editVersionTitle"}`)}</StyledTitle>
               <VersionNameField />
               {!version && <VersionSourceField existingVersions={existingVersions} />}
@@ -201,7 +202,7 @@ const VersionForm = ({ version, existingVersions, onClose }: Props) => {
                 ]}
                 onCancel={() => setShowAlertModal(false)}
               />
-            </>
+            </FormikForm>
           );
         }}
       </Formik>

diff --git a/src/containers/TaxonomyVersions/components/VersionLockedField.tsx b/src/containers/TaxonomyVersions/components/VersionLockedField.tsx
@@ -7,8 +7,15 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { Label, RadioButtonGroup, RadioButtonItem } from "@ndla/forms";
-import { RadioButtonWrapper, FieldsetRow, LeftLegend, StyledFormControl } from "../../../components/Form/styles";
+import {
+  FieldRoot,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+  RadioGroupLabel,
+  RadioGroupRoot,
+} from "@ndla/primitives";
 import { FormField } from "../../../components/FormField";
 
 const VersionLockedField = () => {
@@ -26,36 +33,23 @@ const VersionLockedField = () => {
   ];
   return (
     <FormField name="locked">
-      {({ field }) => (
-        <StyledFormControl>
-          <RadioButtonGroup
-            onValueChange={(value: string) =>
-              field.onChange({
-                target: {
-                  name: field.name,
-                  value: value,
-                },
-              })
-            }
+      {({ field, helpers }) => (
+        <FieldRoot>
+          <RadioGroupRoot
+            value={field.value.toString()}
             orientation="horizontal"
-            defaultValue={field.value.toString()}
-            asChild
+            onValueChange={(details) => helpers.setValue(details.value)}
           >
-            <FieldsetRow>
-              <LeftLegend margin="none" textStyle="label-small">
-                {t("taxonomyVersions.form.locked.subTitle")}
-              </LeftLegend>
-              {options.map((option) => (
-                <RadioButtonWrapper key={option.value}>
-                  <RadioButtonItem id={`locked-${option.value}`} value={option.value} />
-                  <Label htmlFor={`locked-${option.value}`} margin="none" textStyle="label-small">
-                    {option.title}
-                  </Label>
-                </RadioButtonWrapper>
-              ))}
-            </FieldsetRow>
-          </RadioButtonGroup>
-        </StyledFormControl>
+            <RadioGroupLabel>{t("taxonomyVersions.form.locked.subTitle")}</RadioGroupLabel>
+            {options.map((option) => (
+              <RadioGroupItem key={option.value} value={option.value}>
+                <RadioGroupItemControl />
+                <RadioGroupItemText>{option.title}</RadioGroupItemText>
+                <RadioGroupItemHiddenInput />
+              </RadioGroupItem>
+            ))}
+          </RadioGroupRoot>
+        </FieldRoot>
       )}
     </FormField>
   );

diff --git a/src/containers/TaxonomyVersions/components/VersionNameField.tsx b/src/containers/TaxonomyVersions/components/VersionNameField.tsx
@@ -7,20 +7,19 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { FieldErrorMessage, InputV3, Label } from "@ndla/forms";
-import { FormControl, FormField } from "../../../components/FormField";
+import { FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
+import { FormField } from "../../../components/FormField";
+
 const VersionNameField = () => {
   const { t } = useTranslation();
   return (
     <FormField name="name">
       {({ field, meta }) => (
-        <FormControl isRequired isInvalid={!!meta.error}>
-          <Label textStyle="label-small" margin="none">
-            {t("taxonomyVersions.form.name.label")}
-          </Label>
-          <InputV3 {...field} placeholder={t("taxonomyVersions.form.name.placeholder")} />
+        <FieldRoot required invalid={!!meta.error}>
+          <FieldLabel>{t("taxonomyVersions.form.name.label")}</FieldLabel>
           <FieldErrorMessage>{meta.error}</FieldErrorMessage>
-        </FormControl>
+          <FieldInput {...field} placeholder={t("taxonomyVersions.form.name.placeholder")} />
+        </FieldRoot>
       )}
     </FormField>
   );