MOON-246: Fix lint error

Jahia · Dec 11, 2024 · 8c2e913 · 8c2e913
1 parent 0604e0f
commit 8c2e913
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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>
             }