#391 - New description property

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -10,6 +10,7 @@ import { FieldTitle } from '../Fields/FieldTitle';
 
 export interface IDataBlockFieldProps {
   label: string;
+  description?: string;
   settings: PanelSettings;
   field: Field;
   parentFields: string[];
@@ -28,7 +29,7 @@ export interface IDataBlockFieldProps {
   required?: boolean;
 }
 
-export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit, parentBlock, required }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, description, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit, parentBlock, required }: React.PropsWithChildren<IDataBlockFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
   const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
   const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
@@ -235,6 +236,12 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
         icon={<PencilIcon />}
         required={required} />
 
+      { description && (
+        <div className={`metadata_field__description`}>
+          {description}
+        </div>
+      )}
+
       {
         (!hideSubBlock) ? (
           <div className='block_field__form'>

src/panelWebView/components/Fields/ChoiceField.tsx

@@ -6,7 +6,7 @@ import { BaseFieldProps } from '../../../models';
 import { Choice } from '../../../models/Choice';
 import { ChoiceButton } from './ChoiceButton';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface IChoiceFieldProps extends BaseFieldProps<string | string[]> {
   choices: string[] | Choice[];
@@ -14,7 +14,7 @@ export interface IChoiceFieldProps extends BaseFieldProps<string | string[]> {
   onChange: (value: string | string[]) => void;
 }
 
-export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label, value, choices, multiSelect, onChange, required }: React.PropsWithChildren<IChoiceFieldProps>) => {
+export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label, description, value, choices, multiSelect, onChange, required }: React.PropsWithChildren<IChoiceFieldProps>) => {
   const [ crntSelected, setCrntSelected ] = React.useState<string | string[] | null>(value);
   const dsRef = React.useRef<Downshift<string> | null>(null);
 
@@ -116,7 +116,7 @@ export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({ label,
         )}
       </Downshift>
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
 
       {
         crntSelected instanceof Array ? crntSelected.map((value: string) => (

src/panelWebView/components/Fields/DataFileField.tsx

@@ -8,10 +8,11 @@ import { CommandToCode } from '../../CommandToCode';
 import Downshift from 'downshift';
 import { ChoiceButton } from './ChoiceButton';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface IDataFileFieldProps {
   label: string;
+  description?: string;
   dataFileId?: string;
   dataFileKey?: string;
   dataFileValue?: string;
@@ -21,7 +22,7 @@ export interface IDataFileFieldProps {
   onChange: (value: string | string[]) => void;
 }
 
-export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ label, dataFileId, dataFileKey, dataFileValue, selected, multiSelect, onChange, required }: React.PropsWithChildren<IDataFileFieldProps>) => {
+export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ label, description, dataFileId, dataFileKey, dataFileValue, selected, multiSelect, onChange, required }: React.PropsWithChildren<IDataFileFieldProps>) => {
   const [ dataEntries, setDataEntries ] = useState<string[] | null>(null);
   const [ crntSelected, setCrntSelected ] = React.useState<string | string[] | null>();
   const dsRef = React.useRef<Downshift<string> | null>(null);
@@ -164,7 +165,7 @@ export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({ la
         )}
       </Downshift>
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
 
       {
         crntSelected instanceof Array ? crntSelected.map((value: string) => (

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker';
 import { forwardRef, useEffect, useMemo } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
 import { BaseFieldProps } from '../../../models';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 import { FieldTitle } from './FieldTitle';
 
 export interface IDateTimeFieldProps extends BaseFieldProps<Date | null> {
@@ -22,7 +22,7 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
   )
 });
 
-export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, value, required, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
+export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, description, value, required, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<Date | null>(null);
   
   const onDateChange = (date: Date) => {
@@ -65,7 +65,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
         </button>
       </div>
 
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
     </div>
   );
 };

src/panelWebView/components/Fields/DraftField.tsx

@@ -11,12 +11,13 @@ export interface IDraftFieldProps extends BaseFieldProps<boolean | string | null
   onChanged: (value: string | boolean) => void;
 }
 
-export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, type, value, choices, onChanged, required }: React.PropsWithChildren<IDraftFieldProps>) => {
+export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, description, type, value, choices, onChanged, required }: React.PropsWithChildren<IDraftFieldProps>) => {
 
   if (type === "boolean") {
     return (
       <Toggle 
         label={label}
+        description={description}
         value={!!value}
         required={required}
         onChanged={(checked) => onChanged(checked)} />
@@ -27,6 +28,7 @@ export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, t
     return (
       <ChoiceField
         label={label}
+        description={description}
         value={value as string}
         choices={choices as string[]}
         multiSelect={false}

src/panelWebView/components/Fields/FieldMessage.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+export interface IFieldMessageProps {
+  name: string;
+  description?: string;
+  showRequired?: boolean;
+}
+
+export const FieldMessage: React.FunctionComponent<IFieldMessageProps> = ({ name, description, showRequired }: React.PropsWithChildren<IFieldMessageProps>) => {
+
+  console.log(description, showRequired);
+  if (!showRequired && !description) {
+    return null;
+  }
+
+  if (showRequired) {
+    return (
+      <div className={`metadata_field__required__message`}>
+        The {name} field is required.
+      </div>
+    );
+  }
+
+  if (description) {
+    return (
+      <div className={`metadata_field__description`}>
+        {description}
+      </div>
+    );
+  }
+
+  return null;
+};

src/panelWebView/components/Fields/FileField.tsx

@@ -6,7 +6,7 @@ import { useCallback, useMemo } from 'react';
 import { BaseFieldProps, BlockFieldData } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface IFileFieldProps extends BaseFieldProps<string | string[] | null> {
   fieldName: string;
@@ -34,7 +34,7 @@ const File = ({ value, onRemove }: { value: string, onRemove: (value: string) =>
   )
 }
 
-export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange, required }: React.PropsWithChildren<IFileFieldProps>) => {
+export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, description, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange, required }: React.PropsWithChildren<IFileFieldProps>) => {
 
   const selectFile = useCallback(() => {
     Messenger.send(CommandToCode.selectFile, { 
@@ -79,7 +79,7 @@ export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, mul
           )
         }
       
-        <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+        <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
 
         {
           value && !Array.isArray(value) && (

src/panelWebView/components/Fields/ListField.tsx

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { BaseFieldProps } from '../../../models';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface IListFieldProps extends BaseFieldProps<string[] | null> {
   onChange: (value: string | string[]) => void;
 }
 
-export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, value, required, onChange }: React.PropsWithChildren<IListFieldProps>) => {
+export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, description, value, required, onChange }: React.PropsWithChildren<IListFieldProps>) => {
   const [ text, setText ] = React.useState<string | null>("");
   const [ list, setList ] = React.useState<string[] | null>(null);
   const [ itemToEdit, setItemToEdit ] = React.useState<number | null>(null);
@@ -90,7 +90,7 @@ export const ListField: React.FunctionComponent<IListFieldProps> = ({ label, val
           }
         }} />
 
-      <RequiredMessage name={label} show={showRequiredState} />
+      <FieldMessage name={label} description={description} showRequired={showRequiredState} />
 
       <div className={`list_field__form__buttons`}>
         <button 

src/panelWebView/components/Fields/NumberField.tsx

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { useEffect, useMemo } from 'react';
 import { BaseFieldProps } from '../../../models';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface INumberFieldProps extends BaseFieldProps<number | null> {
   onChange: (nrValue: number | null) => void;
 }
 
-export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label, value, required, onChange}: React.PropsWithChildren<INumberFieldProps>) => {
+export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label, description, value, required, onChange}: React.PropsWithChildren<INumberFieldProps>) => {
   const [ nrValue, setNrValue ] = React.useState<number | null>(value);
 
   const onValueChange = (txtValue: string) => {
@@ -41,7 +41,7 @@ export const NumberField: React.FunctionComponent<INumberFieldProps> = ({label,
       
       <input type={`number`} className={`metadata_field__number`} value={`${nrValue}`} onChange={(e) => onValueChange(e.target.value)} />
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
     </div>
   );
 };

src/panelWebView/components/Fields/PreviewImageField.tsx

@@ -7,7 +7,7 @@ import { BaseFieldProps, BlockFieldData } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { FieldTitle } from './FieldTitle';
 import { PreviewImage } from './PreviewImage';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface PreviewImageValue {
   original: string;
@@ -25,6 +25,7 @@ export interface IPreviewImageFieldProps extends BaseFieldProps<PreviewImageValu
 
 export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps> = ({
   label, 
+  description,
   fieldName, 
   blockData, 
   onChange, 
@@ -93,7 +94,7 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
         }
       </div>
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
     </div>
   );
 };

src/panelWebView/components/Fields/RequiredMessage.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-export interface IRequiredMessageProps {
-  name: string;
-  show?: boolean;
-}
-
-export const RequiredMessage: React.FunctionComponent<IRequiredMessageProps> = ({ name, show }: React.PropsWithChildren<IRequiredMessageProps>) => {
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <div className={`metadata_field__required__message`}>
-      The {name} field is required.
-    </div>
-  );
-};

src/panelWebView/components/Fields/SlugField.tsx

@@ -7,7 +7,7 @@ import { BaseFieldProps } from '../../../models';
 import { Command } from '../../Command';
 import { CommandToCode } from '../../CommandToCode';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface ISlugFieldProps extends BaseFieldProps<string> {
   titleValue: string | null;
@@ -15,7 +15,7 @@ export interface ISlugFieldProps extends BaseFieldProps<string> {
   onChange: (txtValue: string) => void;
 }
 
-export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, editable, value, titleValue, onChange, required }: React.PropsWithChildren<ISlugFieldProps>) => {
+export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, description, editable, value, titleValue, onChange, required }: React.PropsWithChildren<ISlugFieldProps>) => {
   const [ text, setText ] = React.useState<string | null>(value);
   const [ slug, setSlug ] = React.useState<string | null>(value);
   
@@ -84,7 +84,10 @@ export const SlugField: React.FunctionComponent<ISlugFieldProps> = ({ label, edi
         </button>
       </div>
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage 
+        name={label.toLowerCase()} 
+        description={description} 
+        showRequired={showRequiredState} />
     </div>
   );
 }

src/panelWebView/components/Fields/TextField.tsx

@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { BaseFieldProps } from '../../../models';
 import { RequiredFieldsAtom } from '../../state';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface ITextFieldProps extends BaseFieldProps<string> {
   singleLine: boolean | undefined;
@@ -17,7 +17,7 @@ export interface ITextFieldProps extends BaseFieldProps<string> {
 
 const WysiwygField = React.lazy(() => import('./WysiwygField'));
 
-export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, wysiwyg, limit, label, value, rows, onChange, required}: React.PropsWithChildren<ITextFieldProps>) => {
+export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, wysiwyg, limit, label, description, value, rows, onChange, required}: React.PropsWithChildren<ITextFieldProps>) => {
   const [ requiredFields, setRequiredFields ] = useRecoilState(RequiredFieldsAtom);
   const [ text, setText ] = React.useState<string | null>(value);
   
@@ -110,7 +110,10 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine,
         )
       }
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage 
+        description={description}
+        name={label.toLowerCase()} 
+        showRequired={showRequiredState} />
     </div>
   );
 };

src/panelWebView/components/Fields/Toggle.tsx

@@ -3,13 +3,13 @@ import { useEffect, useMemo } from 'react';
 import { BaseFieldProps } from '../../../models';
 import { ToggleIcon } from '../Icons/ToggleIcon';
 import { FieldTitle } from './FieldTitle';
-import { RequiredMessage } from './RequiredMessage';
+import { FieldMessage } from './FieldMessage';
 
 export interface IToggleProps extends BaseFieldProps<boolean> {
   onChanged: (checked: boolean) => void;
 }
 
-export const Toggle: React.FunctionComponent<IToggleProps> = ({label, value, required, onChanged}: React.PropsWithChildren<IToggleProps>) => {
+export const Toggle: React.FunctionComponent<IToggleProps> = ({label, description, value, required, onChanged}: React.PropsWithChildren<IToggleProps>) => {
   const [ isChecked, setIsChecked ] = React.useState(value);
   
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -40,7 +40,7 @@ export const Toggle: React.FunctionComponent<IToggleProps> = ({label, value, req
         <span className="field__toggle__slider"></span>
       </label>
       
-      <RequiredMessage name={label.toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={label.toLowerCase()} description={description} showRequired={showRequiredState} />
     </div>
   );
 };

src/panelWebView/components/Fields/WrapperField.tsx

@@ -116,6 +116,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <DateTimeField
           label={field.title || field.name}
+          description={field.description}
           value={fieldValue}
           required={!!field.required}
           format={settings?.date?.format}
@@ -128,6 +129,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <Toggle 
           key={field.name}
           label={field.title || field.name}
+          description={field.description}
           value={fieldValue}
           required={!!field.required}
           onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
@@ -146,6 +148,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <TextField 
           label={field.title || field.name}
+          description={field.description}
           singleLine={field.single}
           limit={limit}
           wysiwyg={field.wysiwyg}
@@ -166,6 +169,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <NumberField 
           key={field.name}
           label={field.title || field.name}
+          description={field.description}
           onChange={(value) => onSendUpdate(field.name, value, parentFields)}
           value={nrValue}
           required={!!field.required} />
@@ -176,6 +180,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <PreviewImageField 
           label={field.title || field.name}
+          description={field.description}
           fieldName={field.name}
           filePath={metadata.filePath as string}
           parents={parentFields}
@@ -191,6 +196,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <FileField 
           label={field.title || field.name}
+          description={field.description}
           fieldName={field.name}
           multiple={field.multiple}
           fileExtensions={field.fileExtensions}
@@ -209,6 +215,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <ChoiceField
           label={field.title || field.name}
+          description={field.description}
           value={fieldValue as string}
           required={!!field.required}
           choices={choices}
@@ -222,6 +229,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.tags} 
           label={field.title || field.name}
+          description={field.description}
           fieldName={field.name}
           icon={<TagIcon />}
           crntSelected={fieldValue as string[] || []} 
@@ -243,6 +251,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.custom}
           label={field.title || field.name}
+          description={field.description}
           icon={<ListUnorderedIcon />}
           crntSelected={fieldValue as string[] || []} 
           options={taxonomyData?.options || []} 
@@ -263,6 +272,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.categories}
           label={field.title || field.name}
+          description={field.description}
           fieldName={field.name}
           icon={<ListUnorderedIcon />}
           crntSelected={fieldValue as string[] || []} 
@@ -289,6 +299,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <DraftField
           label={field.title || field.name}
+          description={field.description}
           type={draftField?.type || "boolean"}
           choices={draftField?.choices || []}
           value={draftValue as boolean | string | null | undefined}
@@ -311,6 +322,12 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
               label={field.title || field.name}
               icon={undefined}
               required={field.required} />
+            
+            { field.description && (
+              <div className={`metadata_field__description`}>
+                {field.description}
+              </div>
+            )}
 
             { renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onSendUpdate) }
           </div>
@@ -339,6 +356,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <DataBlockField
           label={field.title || field.name}
+          description={field.description}
           settings={settings}
           field={field}
           value={blockData}
@@ -355,6 +373,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <DataFileField
           label={field.title || field.name}
+          description={field.description}
           dataFileId={field.dataFileId}
           dataFileKey={field.dataFileKey}
           dataFileValue={field.dataFileValue}
@@ -369,6 +388,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <ListField
           label={field.title || field.name}
+          description={field.description}
           value={fieldValue}
           required={!!field.required}
           onChange={(value => onSendUpdate(field.name, value, parentFields))} />
@@ -379,6 +399,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <SlugField
           label={field.title || field.name}
+          description={field.description}
           titleValue={metadata.title as string}
           value={fieldValue}
           required={!!field.required}

src/panelWebView/components/Fields/index.ts

@@ -11,7 +11,7 @@ export * from './NumberField';
 export * from './PreviewImage';
 export * from './PreviewImageField';
 export * from './RequiredAsterix';
-export * from './RequiredMessage';
+export * from './FieldMessage';
 export * from './SlugField';
 export * from './TextField';
 export * from './Toggle';

src/panelWebView/components/TagPicker.tsx

@@ -8,7 +8,7 @@ import { AddIcon } from './Icons/AddIcon';
 import { BlockFieldData, CustomTaxonomyData } from '../../models';
 import { useCallback, useEffect, useMemo } from 'react';
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { RequiredMessage } from './Fields/RequiredMessage';
+import { FieldMessage } from './Fields/FieldMessage';
 import { FieldTitle } from './Fields/FieldTitle';
 
 export interface ITagPickerProps {
@@ -23,6 +23,7 @@ export interface ITagPickerProps {
   parents?: string[];
   blockData?: BlockFieldData;
   label?: string;
+  description?: string;
   disableConfigurable?: boolean;
   fieldName?: string;
   taxonomyId?: string;
@@ -30,8 +31,7 @@ export interface ITagPickerProps {
   required?: boolean;
 }
 
-const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
-  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData, limit, required } = props;
+const TagPicker: React.FunctionComponent<ITagPickerProps> = ({ label, description, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData, limit, required }: React.PropsWithChildren<ITagPickerProps>) => {
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
   const prevSelected = usePrevious(crntSelected);
@@ -280,7 +280,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
         }
       </Downshift>
       
-      <RequiredMessage name={(label || type).toLowerCase()} show={showRequiredState} />
+      <FieldMessage name={(label || type).toLowerCase()} description={description} showRequired={showRequiredState} />
 
       <Tags 
         values={(selected || []).sort((a: string, b: string) => a?.toLowerCase() < b?.toLowerCase() ? -1 : 1 )}