Wrap checkbox in FieldRoot to not inherit editor field

NDLANO · Dec 13, 2024 · 6b228c2 · 6b228c2
1 parent 578d74d
commit 6b228c2
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/packages/ndla-image-search/src/PreviewImage.tsx b/packages/ndla-image-search/src/PreviewImage.tsx
@@ -19,6 +19,7 @@ import {
   Text,
   Image,
   IconButton,
+  FieldRoot,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
@@ -107,6 +108,10 @@ const ActionsWrapper = styled("div", {
   },
 });
 
+const StyledFieldRoot = styled(FieldRoot, {
+  base: { alignSelf: "center" },
+});
+
 interface Props {
   id: string;
   image: IImageMetaInformationV3DTO;
@@ -135,7 +140,7 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
         <StyledImageMetadata>
           <StyledTopRow>
             <Text textStyle="title.medium">
-              {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}
+              {image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`}
             </Text>
             <IconButton
               variant="tertiary"
@@ -202,15 +207,17 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
             {translations.useImageTitle}
           </Button>
           {!!showCheckbox && (
-            <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>
-              <CheckboxControl>
-                <CheckboxIndicator asChild>
-                  <CheckLine />
-                </CheckboxIndicator>
-              </CheckboxControl>
-              <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>
-              <CheckboxHiddenInput />
-            </CheckboxRoot>
+            <StyledFieldRoot>
+              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>
+                <CheckboxControl>
+                  <CheckboxIndicator asChild>
+                    <CheckLine />
+                  </CheckboxIndicator>
+                </CheckboxControl>
+                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>
+                <CheckboxHiddenInput />
+              </CheckboxRoot>
+            </StyledFieldRoot>
           )}
         </ActionsWrapper>
       </ContentWrapper>