field descriptions between name and input

Author: NoelKova

packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx

@@ -2,7 +2,6 @@ import {
   ClickAwayListener,
   createStyles,
   FormGroup,
-  FormHelperText,
   IconButton,
   List,
   ListItem,
@@ -246,6 +245,8 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
               name={props.settings.Name}
               displayName={props.settings.DisplayName}
               highlighted={props.settings.Customization?.Highlighted}
+              description={props.settings.Description}
+              showDescription={!props.hideDescription}
             />
             <List dense={true} className={classes.container}>
               {selected.map((item, index) => (
@@ -299,7 +300,6 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
                   )}
                 </List>
               </Paper>
-              {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
             </div>
           </div>
         </ClickAwayListener>

packages/sn-controls-react/src/fieldcontrols/auto-complete.tsx

@@ -58,6 +58,8 @@ export const AutoComplete: React.FC<ReactClientFieldSetting<ReferenceFieldSettin
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <Typography variant="body1" gutterBottom={true}>
             {props.fieldValue ? (props.fieldValue as any)[0].DisplayName : localization.noValue}

packages/sn-controls-react/src/fieldcontrols/checkbox-group.tsx

@@ -7,7 +7,6 @@ import {
   FormControl,
   FormControlLabel,
   FormGroup,
-  FormHelperText,
   makeStyles,
   TextField,
   Typography,
@@ -98,6 +97,8 @@ export const CheckboxGroup: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <FormGroup className={classes.groupCont}>
             {props.settings.Options?.map((option) => {
@@ -117,7 +118,6 @@ export const CheckboxGroup: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>
             })}
           </FormGroup>
           {props.settings.AllowExtraValue ? <TextField placeholder="Extra value" /> : null}
-          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
         </FormControl>
       )
     case 'browse':

packages/sn-controls-react/src/fieldcontrols/checkbox.tsx

@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { FormControl, FormHelperText, Checkbox as MuiCheckbox } from '@material-ui/core'
+import { FormControl, Checkbox as MuiCheckbox } from '@material-ui/core'
 import { deepMerge } from '@sensenet/client-utils'
 import { FieldSetting } from '@sensenet/default-content-types'
 import React, { useState } from 'react'
@@ -37,9 +37,10 @@ export const Checkbox: React.FC<ReactClientFieldSetting<FieldSetting>> = (props)
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <MuiCheckbox name={props.settings.Name} checked={value} onChange={handleChange} />
-          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
         </FormControl>
       )
     case 'browse':

packages/sn-controls-react/src/fieldcontrols/color-picker.tsx

@@ -51,6 +51,8 @@ export const ColorPicker: React.FC<ReactClientFieldSetting<ColorFieldSetting>> =
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <TextField
             variant="outlined"
@@ -63,7 +65,6 @@ export const ColorPicker: React.FC<ReactClientFieldSetting<ColorFieldSetting>> =
             disabled={props.settings.ReadOnly}
             value={value}
             onClick={() => setIsPickerOpen(true)}
-            helperText={props.hideDescription ? undefined : props.settings.Description}
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">

packages/sn-controls-react/src/fieldcontrols/date-picker.tsx

@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { createStyles, FormHelperText, makeStyles, Theme, Tooltip, Typography } from '@material-ui/core'
+import { createStyles, makeStyles, Theme, Tooltip, Typography } from '@material-ui/core'
 import { deepMerge } from '@sensenet/client-utils'
 import { DateTimeFieldSetting, DateTimeMode } from '@sensenet/default-content-types'
 import intlFormatDistance from 'date-fns/intlFormatDistance'
@@ -100,6 +100,8 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!hideDescription}
           />
           <div style={{ maxWidth: '420px' }}>
             <DatePickerLib
@@ -117,7 +119,6 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
               isClearable
             />
           </div>
-          {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}
         </div>
       )
     default:

packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx

@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { FormControl, FormGroup, FormHelperText, MenuItem, Select, Typography } from '@material-ui/core'
+import { FormControl, FormGroup, MenuItem, Select, Typography } from '@material-ui/core'
 import { deepMerge } from '@sensenet/client-utils'
 import { ChoiceFieldSetting } from '@sensenet/default-content-types'
 import React, { useState } from 'react'
@@ -57,16 +57,16 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
     case 'edit':
     case 'new':
       return (
-        <FormControl
-          style={{ maxWidth: '420px', width: '100%' }}
-          required={props.settings.Compulsory}
-          disabled={props.settings.ReadOnly}>
+        <FormControl style={{ width: '100%' }} required={props.settings.Compulsory} disabled={props.settings.ReadOnly}>
           <CustomLabel
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <Select
+            style={{ maxWidth: '420px', width: '100%' }}
             variant="outlined"
             onChange={handleChange}
             inputProps={
@@ -88,7 +88,6 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
               )
             })}
           </Select>
-          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
         </FormControl>
       )
     case 'browse':

packages/sn-controls-react/src/fieldcontrols/file-name.tsx

@@ -50,6 +50,8 @@ export const FileName: React.FC<ReactClientFieldSetting> = (props) => {
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <TextField
             variant="outlined"
@@ -70,7 +72,6 @@ export const FileName: React.FC<ReactClientFieldSetting> = (props) => {
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}
             fullWidth={true}
-            helperText={props.hideDescription ? undefined : props.settings.Description}
           />
         </>
       )

packages/sn-controls-react/src/fieldcontrols/file-size.tsx

@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { FormHelperText, InputAdornment, TextField, Typography } from '@material-ui/core'
+import { InputAdornment, TextField, Typography } from '@material-ui/core'
 import { deepMerge, toNumber } from '@sensenet/client-utils'
 import { NumberFieldSetting } from '@sensenet/default-content-types'
 import React, { useState } from 'react'
@@ -52,6 +52,8 @@ export const FileSizeField: React.FC<ReactClientFieldSetting<NumberFieldSetting>
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <TextField
             variant="outlined"
@@ -75,7 +77,6 @@ export const FileSizeField: React.FC<ReactClientFieldSetting<NumberFieldSetting>
             fullWidth={true}
             onChange={handleChange}
           />
-          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
         </>
       )
     case 'browse':

packages/sn-controls-react/src/fieldcontrols/file-upload.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   createStyles,
   FormControl,
-  FormHelperText,
   Input,
   InputLabel,
   makeStyles,
@@ -183,6 +182,8 @@ export const FileUpload: React.FC<ReactClientFieldSetting<BinaryFieldSetting>> =
             name={props.settings.Name}
             displayName={props.settings.DisplayName}
             highlighted={props.settings.Customization?.Highlighted}
+            description={props.settings.Description}
+            showDescription={!props.hideDescription}
           />
           <Typography variant="body1" gutterBottom={true}>
             {fileName}
@@ -192,7 +193,6 @@ export const FileUpload: React.FC<ReactClientFieldSetting<BinaryFieldSetting>> =
               {localization.buttonText}
             </Button>
           </InputLabel>
-          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
           <Input
             style={{ display: 'none' }}
             id={`raised-button-file-${props.settings.Name}`}