From 8c2e91339616db6c1d3c45519903c0514bc1dc9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Vall=C3=A9?= <fvalle@jahia.com>
Date: Wed, 11 Dec 2024 11:15:36 +0100
Subject: [PATCH] MOON-246: Fix lint error

---
 src/components/Field/Field.tsx                     | 13 ++++++++-----
 src/components/Field/FieldBoolean/FieldBoolean.tsx | 10 ++++++----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index 129fcc6a..ac183b88 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -5,6 +5,7 @@ import type {FieldProps} from './Field.types';
 import {Typography} from '~/components';
 
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(({
+    id,
     label,
     helper,
     chips,
@@ -18,6 +19,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(({
     return (
         <div
             ref={ref}
+            id={id}
             className={clsx(
                 'moonstone-field',
                 'flexCol_nowrap',
@@ -28,7 +30,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(({
         >
             <div className={clsx('flexRow_nowrap', 'flexFluid', 'alignCenter')}>
                 <div className="flexRow_nowrap flexFluid alignCenter">
-                    <Typography component="label" isNowrap weight="bold">{label}</Typography>
+                    <Typography isNowrap component="label" weight="bold">{label}</Typography>
                     {chips &&
                         <div className={clsx('moonstone-field_chips', 'flexRow_nowrap')}>
                             {chips}
@@ -46,11 +48,12 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(({
                                 )) :
                                 (buttons && <buttons.type size="default" {...buttons.props}/>)
                         )}
-                    </div>}
+                    </div>
+                }
             </div>
-
-            <Typography variant="caption" className={clsx('moonstone-field_helper')}>{helper}</Typography>
-
+            {helper &&
+                <Typography variant="caption" className={clsx('moonstone-field_helper')}>{helper}</Typography>
+            }
             <div className={clsx('moonstone-field_children', 'flexCol_nowrap')}>
                 {children}
                 {hasError && errorMessage &&
diff --git a/src/components/Field/FieldBoolean/FieldBoolean.tsx b/src/components/Field/FieldBoolean/FieldBoolean.tsx
index 577f6776..1b2868f5 100644
--- a/src/components/Field/FieldBoolean/FieldBoolean.tsx
+++ b/src/components/Field/FieldBoolean/FieldBoolean.tsx
@@ -20,6 +20,7 @@ export const FieldBoolean = React.forwardRef<HTMLDivElement, FieldBooleanProps>(
     return (
         <div
             ref={ref}
+            id={id}
             className={clsx(
                 'moonstone-field',
                 'moonstone-fieldBoolean',
@@ -31,10 +32,10 @@ export const FieldBoolean = React.forwardRef<HTMLDivElement, FieldBooleanProps>(
         >
             <div className={clsx('flexRow_nowrap', 'flexFluid', 'alignCenter')}>
                 <div className="flexRow_nowrap flexFluid">
-                    <div className='moonstone-fieldBoolean_checkbox'>
+                    <div className="moonstone-fieldBoolean_checkbox">
                         <Checkbox {...checkboxAttributes}/>
                     </div>
-                    <Typography component="label" isNowrap weight="bold">{label}</Typography>
+                    <Typography isNowrap component="label" weight="bold">{label}</Typography>
                     {chips &&
                         <div className={clsx('moonstone-field_chips', 'flexRow_nowrap')}>
                             {chips}
@@ -55,8 +56,9 @@ export const FieldBoolean = React.forwardRef<HTMLDivElement, FieldBooleanProps>(
                     </div>
                 }
             </div>
-
-            <Typography className={clsx('moonstone-field_helper')} variant="caption">{helper}</Typography>
+            {helper &&
+                <Typography className={clsx('moonstone-field_helper')} variant="caption">{helper}</Typography>
+            }
             {hasError && errorMessage &&
                 <Typography className={clsx('moonstome-field_errorMessage')} variant="caption">{errorMessage}</Typography>
             }