Merge pull request #2657 from NDLANO/fix-preview-image-meta-image-che…

…ckbox Wrap checkbox in FieldRoot to not inherit editor field
NDLANO · Dec 13, 2024 · d7d9fb8 · d7d9fb8
2 parents 204c5a6 + 9fbb310
commit d7d9fb8
Showing 1 changed file with 16 additions and 9 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;
@@ -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>