From efc230f81e111580f671645fe74d76093a45d169 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 16 Sep 2022 16:47:32 +0200
Subject: [PATCH] #391 - New `description` property

---
 CHANGELOG.md                                  |  1 +
 package.json                                  |  4 +++
 src/models/BaseFieldProps.ts                  |  1 +
 src/models/PanelSettings.ts                   |  1 +
 .../components/DataBlock/DataBlockField.tsx   |  9 ++++-
 .../components/Fields/ChoiceField.tsx         |  6 ++--
 .../components/Fields/DataFileField.tsx       |  7 ++--
 .../components/Fields/DateTimeField.tsx       |  6 ++--
 .../components/Fields/DraftField.tsx          |  4 ++-
 .../components/Fields/FieldMessage.tsx        | 33 +++++++++++++++++++
 .../components/Fields/FileField.tsx           |  6 ++--
 .../components/Fields/ListField.tsx           |  6 ++--
 .../components/Fields/NumberField.tsx         |  6 ++--
 .../components/Fields/PreviewImageField.tsx   |  5 +--
 .../components/Fields/RequiredMessage.tsx     | 19 -----------
 .../components/Fields/SlugField.tsx           |  9 +++--
 .../components/Fields/TextField.tsx           |  9 +++--
 src/panelWebView/components/Fields/Toggle.tsx |  6 ++--
 .../components/Fields/WrapperField.tsx        | 21 ++++++++++++
 src/panelWebView/components/Fields/index.ts   |  2 +-
 src/panelWebView/components/TagPicker.tsx     |  8 ++---
 src/panelWebView/styles.css                   | 28 ++++++++++++++--
 22 files changed, 139 insertions(+), 58 deletions(-)
 create mode 100644 src/panelWebView/components/Fields/FieldMessage.tsx
 delete mode 100644 src/panelWebView/components/Fields/RequiredMessage.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07284237..a99d1084 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - [#376](https://github.com/estruyf/vscode-front-matter/issues/376): Ability to run scripts after content was created
 - [#377](https://github.com/estruyf/vscode-front-matter/issues/377): Git sync actions added on panel and content dashboard (pull and push your changes to remote)
 - [#379](https://github.com/estruyf/vscode-front-matter/issues/377): New `frontMatter.config.reload` command to reload the configuration file + reinitialize its listeners
+- [#391](https://github.com/estruyf/vscode-front-matter/issues/391): New `description` property to show a message underneath the input field
 - [#401](https://github.com/estruyf/vscode-front-matter/issues/401): Content dashboard now has pagination enabled and can be disabled via the `frontMatter.dashboard.content.pagination` setting
 
 ### 🎨 Enhancements
diff --git a/package.json b/package.json
index d048c10a..edac7456 100644
--- a/package.json
+++ b/package.json
@@ -885,6 +885,10 @@
                       "type": "string",
                       "description": "Title to show in the UI"
                     },
+                    "description": {
+                      "type": "string",
+                      "description": "Description to show in the UI"
+                    },
                     "default": {
                       "type": [
                         "string",
diff --git a/src/models/BaseFieldProps.ts b/src/models/BaseFieldProps.ts
index fe7fd2a2..092afd1d 100644
--- a/src/models/BaseFieldProps.ts
+++ b/src/models/BaseFieldProps.ts
@@ -3,5 +3,6 @@
 export interface BaseFieldProps<T> {
   label: string;
   value: T | null;
+  description?: string;
   required?: boolean;
 }
\ No newline at end of file
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 79ec7db8..99f6b13a 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -55,6 +55,7 @@ export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" |
 
 export interface Field {
   title?: string;
+  description?: string;
   name: string;
   type: FieldType;
   choices?: string[] | Choice[];
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 63514928..432fa173 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/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'>
diff --git a/src/panelWebView/components/Fields/ChoiceField.tsx b/src/panelWebView/components/Fields/ChoiceField.tsx
index a5ffdd12..9477669f 100644
--- a/src/panelWebView/components/Fields/ChoiceField.tsx
+++ b/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) => (
diff --git a/src/panelWebView/components/Fields/DataFileField.tsx b/src/panelWebView/components/Fields/DataFileField.tsx
index e33c68a2..d2e81ac9 100644
--- a/src/panelWebView/components/Fields/DataFileField.tsx
+++ b/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) => (
diff --git a/src/panelWebView/components/Fields/DateTimeField.tsx b/src/panelWebView/components/Fields/DateTimeField.tsx
index a76881ab..7251c7d5 100644
--- a/src/panelWebView/components/Fields/DateTimeField.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/DraftField.tsx b/src/panelWebView/components/Fields/DraftField.tsx
index 6569f8ce..9a3fcf6d 100644
--- a/src/panelWebView/components/Fields/DraftField.tsx
+++ b/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}
diff --git a/src/panelWebView/components/Fields/FieldMessage.tsx b/src/panelWebView/components/Fields/FieldMessage.tsx
new file mode 100644
index 00000000..acac8feb
--- /dev/null
+++ b/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;
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/FileField.tsx b/src/panelWebView/components/Fields/FileField.tsx
index e59becfb..16771da1 100644
--- a/src/panelWebView/components/Fields/FileField.tsx
+++ b/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) && (
diff --git a/src/panelWebView/components/Fields/ListField.tsx b/src/panelWebView/components/Fields/ListField.tsx
index 33812a8b..c45a2fd0 100644
--- a/src/panelWebView/components/Fields/ListField.tsx
+++ b/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 
diff --git a/src/panelWebView/components/Fields/NumberField.tsx b/src/panelWebView/components/Fields/NumberField.tsx
index aaa52373..680eb1fc 100644
--- a/src/panelWebView/components/Fields/NumberField.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx
index 12b25113..0001b683 100644
--- a/src/panelWebView/components/Fields/PreviewImageField.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/RequiredMessage.tsx b/src/panelWebView/components/Fields/RequiredMessage.tsx
deleted file mode 100644
index d54a2f3c..00000000
--- a/src/panelWebView/components/Fields/RequiredMessage.tsx
+++ /dev/null
@@ -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>
-  );
-};
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/SlugField.tsx b/src/panelWebView/components/Fields/SlugField.tsx
index e657181f..dd0998ad 100644
--- a/src/panelWebView/components/Fields/SlugField.tsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/TextField.tsx b/src/panelWebView/components/Fields/TextField.tsx
index 51e84c5c..46f064af 100644
--- a/src/panelWebView/components/Fields/TextField.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/Toggle.tsx b/src/panelWebView/components/Fields/Toggle.tsx
index 2a657d23..42691c29 100644
--- a/src/panelWebView/components/Fields/Toggle.tsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
index 1e71b27d..9d8db899 100644
--- a/src/panelWebView/components/Fields/WrapperField.tsx
+++ b/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}
diff --git a/src/panelWebView/components/Fields/index.ts b/src/panelWebView/components/Fields/index.ts
index 60c8f29f..8c862ee8 100644
--- a/src/panelWebView/components/Fields/index.ts
+++ b/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';
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index cef6853f..6d875b66 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/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 )} 
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 8fe6f619..b4520faf 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -61,7 +61,7 @@
   border: 1px dashed var(--vscode-button-secondaryBackground);
   color: var(--vscode--settings-headerForeground);
   padding: .5rem 1rem;
-  margin-bottom: .5rem;
+  margin-bottom: 1rem;
 
   .autoform {
     background-color: transparent;
@@ -319,6 +319,28 @@
   outline: none;
 }
 
+/* Description message */
+.metadata_field__description {
+  color: var(--vscode--settings-headerForeground);
+  opacity: .75;
+  margin-bottom: .5rem;
+}
+
+.metadata_field__description,
+.metadata_field__required__message {
+  padding-top: .5rem;
+  font-size: .9rem;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.block_field > .metadata_field__description,
+.metadata_field__box > .metadata_field__description {
+  margin-left: 0;
+  margin-top: -.5rem;
+  margin-bottom: 1rem;
+}
+
 /* Required field */
 .metadata_field__required__asterix {
   color: var(--vscode-inputValidation-errorBorder);
@@ -326,9 +348,9 @@
 }
 
 .metadata_field__required__message {
-  color: var(--vscode-inputValidation-errorBorder);
   padding-top: .5rem;
   font-size: .9rem;
+  margin-left: .5rem;
 }
 
 /* Text field */
@@ -377,7 +399,7 @@ vscode-divider {
 .metadata_field__box {
   background: rgba(255, 255, 255, 0.1);
   border: 1px dashed rgba(255, 255, 255, 0.2);
-  margin-bottom: .5rem;
+  margin-bottom: 1rem;
   padding: .5rem 1rem;
 }