genesys-spark-components 3.32.2 → 3.33.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.js

@@ -9,32 +9,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onRequiredChange } from '@utils/dom/on-attribute-change';
+import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
+import { getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { getComputedLabelPosition, hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldColor {
   constructor() {
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -48,7 +51,7 @@ export class GuxFormFieldColor {
       } }, h("div", { class: {
         'gux-input-container': true,
         'gux-disabled': this.disabled
-      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -113,7 +116,8 @@ export class GuxFormFieldColor {
       "computedLabelPosition": {},
       "disabled": {},
       "required": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js

@@ -9,24 +9,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onRequiredChange } from '@utils/dom/on-attribute-change';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
+import { getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldDropdown {
   constructor() {
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   watchValue(hasError) {
     const dropdownSlot = this.root.querySelector('gux-dropdown') ||
@@ -36,12 +37,14 @@ export class GuxFormFieldDropdown {
     }
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -53,7 +56,7 @@ export class GuxFormFieldDropdown {
         'gux-input': true,
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("slot", null)), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", null)), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -126,7 +129,8 @@ export class GuxFormFieldDropdown {
       "computedLabelPosition": {},
       "disabled": {},
       "required": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.css

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -10,23 +10,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { forceUpdate, h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../../i18n';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onRequiredChange } from '@utils/dom/on-attribute-change';
+import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
+import setInputValue from '@utils/dom/set-input-value';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
+import { clearInput, getComputedLabelPosition, hasContent, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import setInputValue from '../../../../../utils/dom/set-input-value';
-import simulateNativeEvent from '../../../../../utils/dom/simulate-native-event';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { clearInput, getComputedLabelPosition, hasContent, hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 import componentResources from './i18n/en.json';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  * @part input-section - Style input container
  */
 export class GuxFormFieldNumber {
@@ -34,21 +34,25 @@ export class GuxFormFieldNumber {
     this.computedLabelPosition = 'above';
     this.hasContent = false;
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxForceUpdate() {
     this.hasContent = hasContent(this.input);
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     forceUpdate(this.root);
   }
   async componentWillLoad() {
     this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -64,7 +68,7 @@ export class GuxFormFieldNumber {
         'gux-input-container': true,
         'gux-disabled': this.disabled,
         'gux-clear': showClearButton
-      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("slot", { name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -180,7 +184,8 @@ export class GuxFormFieldNumber {
       "disabled": {},
       "required": {},
       "hasContent": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get methods() {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.css

@@ -27,6 +27,27 @@
   align-self: auto;
   order: 0;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -9,28 +9,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host } from '@stencil/core';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldError, GuxFormFieldHelp } from '../../functional-components/functional-components';
+import { validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldRadio {
   constructor() {
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root);
   }
   disconnectedCallback() {
@@ -40,7 +45,7 @@ export class GuxFormFieldRadio {
     return (h(Host, { class: {
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))))));
+      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
   }
   setInput() {
     this.input = this.root.querySelector('input[type="radio"][slot="input"]');
@@ -66,7 +71,8 @@ export class GuxFormFieldRadio {
   static get states() {
     return {
       "disabled": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.css

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -9,25 +9,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h, Host } from '@stencil/core';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onRequiredChange } from '@utils/dom/on-attribute-change';
+import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
+import { getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormField {
   constructor() {
     this.computedLabelPosition = 'above';
     this.hasError = false;
+    this.hasHelp = false;
   }
   onInput(e) {
     const input = e.target;
@@ -42,12 +43,14 @@ export class GuxFormField {
     this.active = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   componentDidLoad() {
@@ -61,7 +64,7 @@ export class GuxFormField {
   render() {
     return (h(Host, { class: {
         'gux-active': this.active
-      } }, h(GuxFormFieldContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() })), h("div", { class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" }))))));
+      } }, h(GuxFormFieldContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() })), h("div", { class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" }))))));
   }
   get variant() {
     return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -202,6 +205,7 @@ export class GuxFormField {
       "disabled": {},
       "required": {},
       "hasError": {},
+      "hasHelp": {},
       "value": {},
       "active": {},
       "valueWatcherId": {}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.css

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -9,20 +9,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { calculateInputDisabledState } from '../../../../../utils/dom/calculate-input-disabled-state';
-import { onInputDisabledStateChange } from '../../../../../utils/dom/on-input-disabled-state-change';
-import { OnMutation } from '../../../../../utils/decorator/on-mutation';
-import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
-import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
+import { calculateInputDisabledState } from '@utils/dom/calculate-input-disabled-state';
+import { onInputDisabledStateChange } from '@utils/dom/on-input-disabled-state-change';
+import { OnMutation } from '@utils/decorator/on-mutation';
+import { onRequiredChange } from '@utils/dom/on-attribute-change';
+import { preventBrowserValidationStyling } from '@utils/dom/prevent-browser-validation-styling';
+import { hasSlot } from '@utils/dom/has-slot';
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from '../../functional-components/functional-components';
+import { clearInput, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import { trackComponent } from '../../../../../usage-tracking';
-import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
-import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
  */
 export class GuxFormFieldSearch {
   constructor() {
@@ -30,14 +30,17 @@ export class GuxFormFieldSearch {
     this.clearable = true;
     this.hasContent = false;
     this.hasError = false;
+    this.hasHelp = false;
   }
   onMutation() {
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
   }
   componentWillLoad() {
     this.setInput();
     this.setLabel();
-    this.hasError = hasErrorSlot(this.root);
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
     trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
@@ -51,7 +54,7 @@ export class GuxFormFieldSearch {
       } }, h("div", { class: {
         'gux-input-container': true,
         'gux-disabled': this.disabled
-      } }, h("gux-icon", { "icon-name": "search", decorative: true }), h("slot", { name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { hasError: this.hasError }, h("slot", { name: "error" })))));
+      } }, h("gux-icon", { "icon-name": "search", decorative: true }), h("slot", { name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
   }
   get variant() {
     const labelPositionVariant = this.labelPosition
@@ -126,7 +129,8 @@ export class GuxFormFieldSearch {
       "disabled": {},
       "required": {},
       "hasContent": {},
-      "hasError": {}
+      "hasError": {},
+      "hasHelp": {}
     };
   }
   static get elementRef() { return "root"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css

@@ -57,6 +57,27 @@
   height: 1px;
   overflow: hidden;
 }
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #6b7585;
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
 :host {
   display: block;
   color: #2e394c;