feat(inputs): add description text below the inputs

fix gravitee-io/issue/2298

src/atoms/gv-autocomplete.js

@@ -18,6 +18,7 @@ import { html } from 'lit-html';
 import { dispatchCustomEvent } from '../lib/events';
 import { repeat } from 'lit-html/directives/repeat';
 import { classMap } from 'lit-html/directives/class-map';
+import { styleMap } from 'lit-html/directives/style-map';
 
 const ENTER_KEY_CODE = 13;
 const DOWN_ARROW_KEY_CODE = 40;
@@ -257,14 +258,20 @@ export class GvAutocomplete extends LitElement {
       open = this.minChars === 0 || this.value.trim().length >= this.minChars;
     }
 
+    const input = this._getInput();
+    let top = 0;
+    if (input != null) {
+      top = input.offsetHeight;
+    }
+
     const classes = {
       options: true,
       open,
     };
     return html` <div class="container">
       ${this._renderStyle()}
       <slot></slot>
-      <div class="${classMap(classes)}" @mouseleave="${this._onMouseLeave}">
+      <div class="${classMap(classes)}" @mouseleave="${this._onMouseLeave}" style="${styleMap({ top: `${top}px` })}">
         <slot name="noOption" class="${!options || options.length === 0 ? 'show' : 'hide'}"></slot>
         ${repeat(
           options,

src/atoms/gv-input.js

@@ -42,6 +42,7 @@ import { shapeClipboard, shapeCopied } from '../styles/shapes';
  * @attr {String} title - title of the input
  * @attr {String} name - name of the input
  * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {String} description - a description
  * @attr {String} type - type of the input, can be text (Default), password, email, search, number, url.
  * @attr {Boolean} clipboard - for readonly input with clipboard
  * @attr {Boolean} large - for a large input
@@ -83,6 +84,7 @@ export class GvInput extends InputElement(LitElement) {
       clearable: { type: Boolean },
       noSubmit: { type: Boolean, attribute: 'no-submit' },
       pattern: { type: String, reflect: true },
+      description: { type: String },
       _type: { type: String, attribute: false },
     };
   }
@@ -545,6 +547,7 @@ export class GvInput extends InputElement(LitElement) {
         <slot></slot>
         ${this._renderClearIcon()} ${this._renderIcon()} ${this._renderPasswordIcon()}
       </div>
+      ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
   }
 }

src/atoms/gv-select.js

@@ -44,6 +44,7 @@ import { withResizeObserver } from '../mixins/with-resize-observer';
  * @attr {String} title - title of the select
  * @attr {String} name - name of the select
  * @attr {String} placeholder - an example value to display in the select when empty
+ * @attr {String} description - a description
  * @attr {Boolean} multiple - enable multiple selection
  *
  * @cssprop {Color} [--gv-select--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
@@ -67,6 +68,7 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
       title: { type: String },
       name: { type: String },
       placeholder: { type: String },
+      description: { type: String },
       multiple: { type: Boolean, reflect: true },
       _isClosed: { type: Boolean, attribute: false },
     };
@@ -432,6 +434,7 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
               )}
             </ul>`}
       </div>
+      ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
   }
 

src/mixins/input-element.js

@@ -31,6 +31,7 @@ export function InputElement(ParentClass) {
         title: { type: String },
         name: { type: String },
         placeholder: { type: String },
+        description: { type: String },
         autofocus: { type: Boolean },
         invalid: { type: Boolean, reflect: true },
         valid: { type: Boolean, reflect: true },
@@ -113,6 +114,16 @@ export function InputElement(ParentClass) {
       return this.shadowRoot.querySelector('input');
     }
 
+    get offsetHeight() {
+      if (this.description != null) {
+        const element = this.shadowRoot.querySelector('.description');
+        if (element != null) {
+          return super.offsetHeight - element.offsetHeight;
+        }
+      }
+      return super.offsetHeight;
+    }
+
     renderLabel() {
       if (this.label) {
         return html`<label for=${this.id} title="${this.label}">${this.label}</label> `;

src/molecules/gv-code.js

@@ -160,6 +160,7 @@ export class GvCode extends InputElement(LitElement) {
           ${this.skeleton ? html`<div class="skeleton"></div>` : ''}
         </div>
       </div>
+      ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
   }
 

src/molecules/gv-expression-language.js

@@ -31,6 +31,7 @@ import { dispatchCustomEvent } from '../lib/events';
  * @attr {String} value - the value of the input
  * @attr {String} label - label of the input
  * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {String} description - a description
  * @attr {Object} grammar - Grammar for expression languages
  * @attr {Number} rows - Number of rows, if rows=1 the field will look like an input text
  * @attr {Object} options -  options based on codemirror https://codemirror.net/doc/manual.html#config
@@ -40,6 +41,7 @@ export class GvExpressionLanguage extends LitElement {
     return {
       label: { type: String },
       placeholder: { type: String },
+      description: { type: String },
       value: { type: String, reflect: true },
       grammar: { type: Object },
       rows: { type: Number },
@@ -440,6 +442,7 @@ export class GvExpressionLanguage extends LitElement {
         ?readonly="${this.readonly}"
         ?required="${this.required}"
         .placeholder="${this.placeholder}"
+        .description="${this.description}"
       ></gv-code>
       <div id="hint"></div>
     </div>`;

src/organisms/gv-schema-form-control.js

@@ -164,24 +164,20 @@ export class GvSchemaFormControl extends LitElement {
         element.options.value = this.control.default;
       }
       if (this.control.description != null) {
-        element.options.placeholder = this.control.description;
+        // element.options.placeholder = this.control.description;
       }
     } else if (this.isExpressionLanguage()) {
       element.options = {};
       element.rows = 1;
       if (this.control.description != null) {
-        element.options.placeholder = this.control.description;
+        // element.options.placeholder = this.control.description;
       }
     } else if (this.isPassword()) {
       element.type = 'password';
     }
 
     if (this.control.description) {
-      if (this.control.type === 'boolean') {
-        element.description = this.control.description;
-      } else {
-        element.placeholder = this.control.description;
-      }
+      element.description = this.control.description;
     }
 
     element.addEventListener(`${elementName}:input`, this._onInput.bind(this));
@@ -307,7 +303,7 @@ export class GvSchemaFormControl extends LitElement {
         }
 
         .form__control-description {
-          margin: 0 0.5rem;
+          opacity: 0.8;
         }
 
         .form__control-label {

src/styles/input.js

@@ -245,4 +245,9 @@ export const input = css`
     line-height: 15px;
     padding: 0 0 0.2rem 0;
   }
+
+  .description {
+    opacity: 0.6;
+    font-size: var(--gv-theme-font-size-s, 12px);
+  }
 `;

stories/atoms/gv-autocomplete.stories.js

@@ -48,7 +48,7 @@ const conf = {
 export const BasicUsage = makeStory(conf, {
   items: [
     {
-      innerHTML: '<gv-input placeholder="Type something..."></gv-input>',
+      innerHTML: '<gv-input placeholder="Type something..." description="Try to type something"></gv-input>',
       '@gv-autocomplete:search': (event) => {
         const detail = event.detail;
         const component = event.target;

stories/atoms/gv-input.stories.js

@@ -68,6 +68,10 @@ export const IconLeft = makeStory(conf, {
   items: items.map((p) => ({ ...p, 'icon-left': 'general:search' })),
 });
 
+export const Description = makeStory(conf, {
+  items: items.map((p) => ({ ...p, description: 'This is an awesome description' })),
+});
+
 export const Disabled = makeStory(conf, {
   items: items.map((p) => ({ ...p, disabled: true })),
 });

stories/resources/schemas/mixed.json

@@ -21,6 +21,7 @@
     "el": {
       "title": "EL input",
       "type": "string",
+      "description": "Add an Expression Language",
       "x-schema-form": {
         "expression-language": true
       }