* Form - Added description option for select

* `Form` - Added error description option for select * `Form` - Added error description option for datepicker
digipolisantwerp · Jun 30, 2022 · b5d1581 · b5d1581
1 parent 081beb4
commit b5d1581
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 ### Added
 - Added support for React 18
 - `Form` - Added placeholder option for datepicker
+- `Form` - Added description option for select
+- `Form` - Added error description option for select
+- `Form` - Added error description option for datepicker
 
 ### Fixed
 - Made sure no extra space is created when flyout is closed

diff --git a/packages/form/Readme.md b/packages/form/Readme.md
@@ -323,6 +323,7 @@ const optionsDistrict = [
 <div>
   <Select label="District"
     id={"select-1"}
+    description={"A brief description about districts"}
     label={"Districts"}
     name={"select-name"}
     value={"2030 Antwerpen"}

diff --git a/packages/form/src/Datepicker/Datepicker.js b/packages/form/src/Datepicker/Datepicker.js
@@ -54,6 +54,8 @@ type
   state?: InputStates,
   /** Description to be shown under input. */
   description?: string,
+  /** Error description to be shown under input. */
+  errorDescription?: string,
   /** Every date greater than this date will be disabled. */
   maxDate?: string,
   /** Event for when the date changes. */
@@ -189,6 +191,7 @@ class Datepicker extends Component<Props> {
       id,
       state,
       description,
+      errorDescription,
       mask,
       required,
       disabled,
@@ -264,6 +267,7 @@ class Datepicker extends Component<Props> {
         }
       </div>
       {description && <small>{description}</small>}
+      {errorDescription && <small className="u-text-danger">{errorDescription}</small>}
     </div>
     ;
   }

diff --git a/packages/form/src/Select/Select.js b/packages/form/src/Select/Select.js
@@ -31,6 +31,8 @@ type Props = {
   required?: boolean,
   loading?: boolean,
   placeholder?: string,
+  description?: string,
+  errorDescription?: string,
   options?: Array<SelectOption>,
   onChange?: (e: object) => void,
   value?: string,
@@ -51,6 +53,8 @@ class Select extends Component<Props> {
       id,
       label,
       name,
+      description,
+      errorDescription,
       inline,
       className,
       state,
@@ -103,6 +107,8 @@ class Select extends Component<Props> {
               </Option>
             ))}
           </select>
+          {description ? <small>{description}</small> : null}
+          {errorDescription && <small className="u-text-danger">{errorDescription}</small>}
           {loading ? <Spinner size="small" className="ai" /> : <Icon name="ai-arrow-down-1" />}
         </div>
       </div>