@xh/hoist 80.0.0-SNAPSHOT.1768323341476 → 80.0.0-SNAPSHOT.1768415875152

package/desktop/cmp/form/FormField.ts

@@ -19,6 +19,7 @@ import {
 } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {instanceManager} from '@xh/hoist/core/impl/InstanceManager';
+import {maxSeverity, ValidationResult} from '@xh/hoist/data';
 import {fmtDate, fmtDateTime, fmtJson, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {tooltip} from '@xh/hoist/kit/blueprint';
@@ -26,7 +27,7 @@ import {isLocalDate} from '@xh/hoist/utils/datetime';
 import {errorIf, getTestId, logWarn, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps, getReactElementName, useOnMount, useOnUnmount} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {isBoolean, isDate, isEmpty, isFinite, isNil, isUndefined, kebabCase} from 'lodash';
+import {first, isBoolean, isDate, isEmpty, isFinite, isNil, isUndefined, kebabCase} from 'lodash';
 import {Children, cloneElement, ReactElement, ReactNode, useContext, useState} from 'react';
 import './FormField.scss';
 
@@ -122,16 +123,19 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         const isRequired = model?.isRequired || false,
             readonly = model?.readonly || false,
             disabled = props.disabled || model?.disabled,
-            validationDisplayed = model?.validationDisplayed || false,
-            notValid = model?.isNotValid || false,
-            displayNotValid = validationDisplayed && notValid,
-            errors = model?.errors || [],
+            severityToDisplay = model?.validationDisplayed
+                ? maxSeverity(model.validationResults)
+                : null,
+            displayInvalid = severityToDisplay === 'error',
+            validationResultsToDisplay = severityToDisplay
+                ? model.validationResults.filter(v => v.severity === severityToDisplay)
+                : [],
             requiredStr = defaultProp('requiredIndicator', props, formContext, '*'),
             requiredIndicator =
                 isRequired && !readonly && requiredStr
                     ? span({
                           item: ' ' + requiredStr,
-                          className: 'xh-form-field-required-indicator'
+                          className: 'xh-form-field__required-indicator'
                       })
                     : null;
 
@@ -163,19 +167,24 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
 
         // Styles
         const classes = [];
-        if (childElementName) classes.push(`xh-form-field-${kebabCase(childElementName)}`);
-        if (isRequired) classes.push('xh-form-field-required');
-        if (inline) classes.push('xh-form-field-inline');
-        if (minimal) classes.push('xh-form-field-minimal');
-        if (readonly) classes.push('xh-form-field-readonly');
-        if (disabled) classes.push('xh-form-field-disabled');
-        if (displayNotValid) classes.push('xh-form-field-invalid');
+        if (childElementName) classes.push(`xh-form-field--${kebabCase(childElementName)}`);
+        if (isRequired) classes.push('xh-form-field--required');
+        if (inline) classes.push('xh-form-field--inline');
+        if (minimal) classes.push('xh-form-field--minimal');
+        if (readonly) classes.push('xh-form-field--readonly');
+        if (disabled) classes.push('xh-form-field--disabled');
+
+        if (severityToDisplay) {
+            classes.push(`xh-form-field--${severityToDisplay}`);
+            if (displayInvalid) classes.push('xh-form-field--invalid');
+        }
 
+        // Test ID handling
         const testId = getFormFieldTestId(props, formContext, model?.name);
         useOnMount(() => instanceManager.registerModelWithTestId(testId, model));
         useOnUnmount(() => instanceManager.unregisterModelWithTestId(testId));
 
-        // generate actual element child to render
+        // Generate actual element child to render
         let childEl: ReactElement =
             !child || readonly
                 ? readonlyChild({
@@ -189,7 +198,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
                       childIsSizeable,
                       childId,
                       disabled,
-                      displayNotValid,
+                      displayNotValid: severityToDisplay === 'error',
                       leftErrorIcon,
                       commitOnChange,
                       testId: getTestId(testId, 'input')
@@ -198,16 +207,42 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         if (minimal) {
             childEl = tooltip({
                 item: childEl,
-                className: `xh-input ${displayNotValid ? 'xh-input-invalid' : ''}`,
+                className: classNames(
+                    'xh-input',
+                    severityToDisplay && `xh-input--${severityToDisplay}`,
+                    displayInvalid && 'xh-input--invalid'
+                ),
                 targetTagName:
                     !blockChildren.includes(childElementName) || childWidth ? 'span' : 'div',
                 position: tooltipPosition,
                 boundary: tooltipBoundary,
-                disabled: !displayNotValid,
-                content: getErrorTooltipContent(errors)
+                disabled: !severityToDisplay,
+                content: getValidationTooltipContent(validationResultsToDisplay)
             });
         }
 
+        // Generate inlined validation messages, if any to show and not rendering in minimal mode.
+        let validationMsgEl: ReactElement = null;
+        if (severityToDisplay && !minimal) {
+            const validationMsgCls = `xh-form-field__inner__validation-msg xh-form-field__inner__validation-msg--${severityToDisplay}`,
+                firstMsg = first(validationResultsToDisplay)?.message;
+
+            validationMsgEl =
+                validationResultsToDisplay.length > 1
+                    ? tooltip({
+                          openOnTargetFocus: false,
+                          className: validationMsgCls,
+                          item: firstMsg + ' (...)',
+                          content: getValidationTooltipContent(
+                              validationResultsToDisplay
+                          ) as ReactElement
+                      })
+                    : div({
+                          className: validationMsgCls,
+                          item: firstMsg
+                      });
+        }
+
         return box({
             ref,
             key: model?.xhId,
@@ -217,7 +252,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
             items: [
                 labelEl({
                     omit: !label,
-                    className: 'xh-form-field-label',
+                    className: 'xh-form-field__label',
                     items: [label, requiredIndicator],
                     htmlFor: clickableLabel ? childId : null,
                     style: {
@@ -228,23 +263,19 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
                 }),
                 div({
                     className: classNames(
-                        'xh-form-field-inner',
-                        childIsSizeable ? 'xh-form-field-inner--flex' : 'xh-form-field-inner--block'
+                        'xh-form-field__inner',
+                        childIsSizeable
+                            ? 'xh-form-field__inner--flex'
+                            : 'xh-form-field__inner--block'
                     ),
                     items: [
                         childEl,
                         div({
-                            className: 'xh-form-field-info',
+                            className: 'xh-form-field__inner__info-msg',
                             omit: !info,
                             item: info
                         }),
-                        tooltip({
-                            omit: minimal || !displayNotValid,
-                            openOnTargetFocus: false,
-                            className: 'xh-form-field-error-msg',
-                            item: errors ? errors[0] : null,
-                            content: getErrorTooltipContent(errors) as ReactElement
-                        })
+                        validationMsgEl
                     ]
                 })
             ]
@@ -262,7 +293,7 @@ const readonlyChild = hoistCmp.factory<ReadonlyChildProps>({
     render({model, readonlyRenderer, testId}) {
         const value = model ? model['value'] : null;
         return div({
-            className: 'xh-form-field-readonly-display',
+            className: 'xh-form-field__readonly-display',
             [TEST_ID]: testId,
             item: readonlyRenderer(value, model)
         });
@@ -323,7 +354,6 @@ const editableChild = hoistCmp.factory<FieldModel>({
 //--------------------------------
 // Helper Functions
 //---------------------------------
-
 export function defaultReadonlyRenderer(value: any): ReactNode {
     if (isLocalDate(value)) return fmtDate(value);
     if (isDate(value)) return fmtDateTime(value);
@@ -359,21 +389,25 @@ function getValidChild(children) {
     return child;
 }
 
-function getErrorTooltipContent(errors: string[]): ReactElement | string {
-    // If no errors, something other than null must be returned.
+function getValidationTooltipContent(validationResults: ValidationResult[]): ReactElement | string {
+    // If no ValidationResults, something other than null must be returned.
     // If null is returned, as of Blueprint v5, the Blueprint Tooltip component causes deep re-renders of its target
     // when content changes from null <-> not null.
     // In `formField` `minimal:true` mode with `commitonchange:true`, this causes the
     // TextInput component to lose focus when its validation state changes, which is undesirable.
     // It is not clear if this is a bug or intended behavior in BP v5, but this workaround prevents the issue.
     // `Tooltip:content` has been a required prop since at least BP v4, but something about the way it is used in BP v5 changed.
-    if (isEmpty(errors)) return 'Is Valid';
-
-    if (errors.length === 1) return errors[0];
-    return ul({
-        className: 'xh-form-field-error-tooltip',
-        items: errors.map((it, idx) => li({key: idx, item: it}))
-    });
+    if (isEmpty(validationResults)) {
+        return 'Is Valid';
+    } else if (validationResults.length === 1) {
+        return first(validationResults).message;
+    } else {
+        const severity = first(validationResults).severity;
+        return ul({
+            className: `xh-form-field__validation-tooltip xh-form-field__validation-tooltip--${severity}`,
+            items: validationResults.map((it, idx) => li({key: idx, item: it.message}))
+        });
+    }
 }
 
 function defaultProp<N extends keyof Partial<FormFieldProps>>(

package/desktop/cmp/input/CodeInput.scss

@@ -29,12 +29,24 @@
 .xh-code-input {
   height: 100px;
 
-  &.xh-input-invalid {
+  &.xh-input--invalid {
     div.CodeMirror {
       border: var(--xh-form-field-invalid-border);
     }
   }
 
+  &.xh-input--warning {
+    div.CodeMirror {
+      border: var(--xh-form-field-warning-border);
+    }
+  }
+
+  &.xh-input--info {
+    div.CodeMirror {
+      border: var(--xh-form-field-info-border);
+    }
+  }
+
   &.xh-input-disabled {
     .CodeMirror {
       background-color: var(--xh-input-disabled-bg);

package/desktop/cmp/input/RadioInput.scss

@@ -10,13 +10,25 @@
     margin-right: var(--xh-pad-double-px);
   }
 
-  &.xh-input-invalid .xh-radio-input-option .bp6-control-indicator {
-    border: var(--xh-form-field-invalid-border);
-
-    &::before {
+  &.xh-input--invalid,
+  &.xh-input--warning,
+  &.xh-input--info {
+    .xh-radio-input-option .bp6-control-indicator::before {
       margin: -1px;
     }
   }
+
+  &.xh-input--invalid .xh-radio-input-option .bp6-control-indicator {
+    border: var(--xh-form-field-invalid-border);
+  }
+
+  &.xh-input--warning .xh-radio-input-option .bp6-control-indicator {
+    border: var(--xh-form-field-warning-border);
+  }
+
+  &.xh-input--info .xh-radio-input-option .bp6-control-indicator {
+    border: var(--xh-form-field-info-border);
+  }
 }
 
 // Toolbar specific style

package/desktop/cmp/input/SwitchInput.scss

@@ -5,12 +5,30 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
-.xh-switch-input.xh-input-invalid {
-  .bp6-control-indicator {
-    border: var(--xh-form-field-invalid-border);
-
-    &::before {
+.xh-switch-input {
+  &.xh-input--invalid,
+  &.xh-input--warning,
+  &.xh-input--info {
+    .bp6-control-indicator::before {
       margin: 1px;
     }
   }
+
+  &.xh-input--invalid {
+    .bp6-control-indicator {
+      border: var(--xh-form-field-invalid-border);
+    }
+  }
+
+  &.xh-input--warning {
+    .bp6-control-indicator {
+      border: var(--xh-form-field-warning-border);
+    }
+  }
+
+  &.xh-input--info {
+    .bp6-control-indicator {
+      border: var(--xh-form-field-info-border);
+    }
+  }
 }

package/desktop/cmp/input/TextArea.scss

@@ -12,7 +12,15 @@
   // Suppress resize handles added by browser - we want to manage the size more closely.
   resize: none;
 
-  &.xh-input-invalid {
+  &.xh-input--invalid {
     border: var(--xh-form-field-invalid-border);
   }
+
+  &.xh-input--warning {
+    border: var(--xh-form-field-warning-border);
+  }
+
+  &.xh-input--info {
+    border: var(--xh-form-field-info-border);
+  }
 }

package/desktop/cmp/rest/impl/RestForm.scss

@@ -18,7 +18,7 @@
     border: 1px solid var(--xh-form-field-box-shadow-color-top);
   }
 
-  .xh-form-field-label {
+  .xh-form-field__label {
     margin-right: var(--xh-pad-px);
     font-weight: bold;
   }

package/desktop/cmp/viewmanager/ViewManager.scss

@@ -9,27 +9,19 @@
     &__form {
       padding: var(--xh-pad-px);
 
-      .xh-form-field.xh-form-field-readonly {
-        &:not(.xh-form-field-inline) {
-          .xh-form-field-label {
-            border-bottom: var(--xh-border-solid);
+      .xh-form-field {
+        &--readonly {
+          &:not(.xh-form-field--inline) {
+            .xh-form-field__label {
+              border-bottom: var(--xh-border-solid);
+            }
           }
         }
 
-        .xh-form-field-readonly-display {
+        &__readonly-display {
           padding: 0;
         }
       }
-
-      .xh-form-field .xh-form-field-info {
-        line-height: 1.5em;
-        margin-top: var(--xh-pad-half-px);
-        white-space: unset;
-
-        .xh-icon {
-          margin-right: 2px;
-        }
-      }
     }
 
     &__metadata {

package/kit/blueprint/styles.scss

@@ -350,15 +350,15 @@ textarea.bp6-input,
   z-index: 16;
 }
 
-// Controls ship with default bottom and (inline) right margins. We expose variables
-// to customize and default those to 0 to avoid adding margins by default.
+// Controls ship with default bottom and (inline) right margins.
+// We zero those out here so padding can be re-applied at HoistInput or FormField layer.
 // Hoist theme text-color applied to elements not styled with a more specific selector.
 .bp6-control {
   color: var(--xh-text-color);
-  margin-bottom: var(--xh-form-field-margin-bottom);
+  margin-bottom: 0;
 
   &.bp6-inline {
-    margin-right: var(--xh-form-field-margin-right);
+    margin-inline-end: 0;
   }
 }
 

package/kit/onsen/styles.scss

@@ -24,13 +24,21 @@
     border: var(--xh-border-solid);
     border-radius: var(--xh-border-radius-px);
 
-    &:not(.xh-input-invalid):focus-within {
+    &:not(.xh-input--invalid):not(.xh-input--warning):not(.xh-input--info):focus-within {
       border-color: var(--xh-focus-outline-color);
     }
 
-    &.xh-input-invalid {
+    &.xh-input--invalid {
       border: var(--xh-form-field-invalid-border);
     }
+
+    &.xh-input--warning {
+      border: var(--xh-form-field-warning-border);
+    }
+
+    &.xh-input--info {
+      border: var(--xh-form-field-info-border);
+    }
   }
 }
 

package/mobile/cmp/form/FormField.scss

@@ -1,12 +1,30 @@
 .xh-form-field {
   display: flex;
   flex-direction: column;
+  padding: var(--xh-form-field-padding);
+  margin: var(--xh-form-field-margin);
 
-  .xh-form-field-label {
-    padding: 0 0 3px;
+  &__label {
+    color: var(--xh-form-field-label-color);
+    font-size: var(--xh-form-field-label-font-size);
+    font-style: var(--xh-form-field-label-font-style);
+    font-weight: var(--xh-form-field-label-font-weight);
+    text-transform: var(--xh-form-field-label-text-transform);
+
+    // Borders + padding (not inline)
+    border-bottom: var(--xh-form-field-label-border-bottom);
+    margin: var(--xh-form-field-label-margin);
+    padding: var(--xh-form-field-label-padding);
+
+    // Borders + padding (inline)
+    .xh-form-field--inline & {
+      border-bottom: var(--xh-form-field-label-inline-border-bottom);
+      margin: var(--xh-form-field-label-inline-margin);
+      padding: var(--xh-form-field-label-inline-padding);
+    }
   }
 
-  .xh-form-field-inner {
+  &__inner {
     // Used for unsizeable children
     &--block {
       display: block;
@@ -21,31 +39,46 @@
     }
   }
 
-  .xh-form-field-info,
-  .xh-form-field-error-msg,
-  .xh-form-field-pending-msg {
-    font-size: var(--xh-font-size-small-px);
-    line-height: calc(var(--xh-font-size-small-px) + var(--xh-pad-px));
-    color: var(--xh-text-color-muted);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  &__info-msg,
+  &__validation-msg {
+    font-size: var(--xh-form-field-msg-font-size);
+    line-height: var(--xh-form-field-msg-line-height);
+    margin: var(--xh-form-field-msg-margin);
+    text-transform: var(--xh-form-field-msg-text-transform);
+  }
+
+  &__validation-msg {
+    &--error {
+      color: var(--xh-form-field-invalid-color);
+    }
+
+    &--info {
+      color: var(--xh-form-field-info-color);
+    }
+
+    &--warning {
+      color: var(--xh-form-field-warning-color);
+    }
+  }
+
+  &--invalid .xh-form-field__label {
+    color: var(--xh-form-field-invalid-color);
   }
 
-  .xh-form-field-error-msg {
-    color: var(--xh-red);
+  &--warning .xh-form-field__label {
+    color: var(--xh-form-field-warning-color);
   }
 
-  &.xh-form-field-invalid .xh-form-field-label {
-    color: var(--xh-red);
+  &--info .xh-form-field__label {
+    color: var(--xh-form-field-info-color);
   }
 
-  &.xh-form-field-readonly {
-    .xh-form-field-error-msg {
+  &.xh-form-field--readonly {
+    .xh-form-field__validation-msg {
       display: none;
     }
 
-    .xh-form-field-readonly-display {
+    .xh-form-field__readonly-display {
       padding: var(--xh-pad-px) 0;
     }
   }

package/mobile/cmp/form/FormField.ts

@@ -8,6 +8,7 @@ import composeRefs from '@seznam/compose-react-refs/composeRefs';
 import {FieldModel, FormContext, FormContextType, BaseFormFieldProps} from '@xh/hoist/cmp/form';
 import {box, div, span} from '@xh/hoist/cmp/layout';
 import {DefaultHoistProps, hoistCmp, HoistProps, TestSupportProps, uses, XH} from '@xh/hoist/core';
+import {maxSeverity} from '@xh/hoist/data';
 import {fmtDate, fmtDateTime, fmtNumber} from '@xh/hoist/format';
 import {label as labelCmp} from '@xh/hoist/mobile/cmp/input';
 import '@xh/hoist/mobile/register';
@@ -15,7 +16,7 @@ import {isLocalDate} from '@xh/hoist/utils/datetime';
 import {errorIf, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {isBoolean, isDate, isEmpty, isFinite, isUndefined} from 'lodash';
+import {first, isBoolean, isDate, isEmpty, isFinite, isUndefined} from 'lodash';
 import {Children, cloneElement, ReactNode, useContext} from 'react';
 import './FormField.scss';
 
@@ -65,16 +66,19 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         const isRequired = model?.isRequired || false,
             readonly = model?.readonly || false,
             disabled = props.disabled || model?.disabled,
-            validationDisplayed = model?.validationDisplayed || false,
-            notValid = model?.isNotValid || false,
-            displayNotValid = validationDisplayed && notValid,
-            errors = model?.errors || [],
+            severityToDisplay = model?.validationDisplayed
+                ? maxSeverity(model.validationResults)
+                : null,
+            displayInvalid = severityToDisplay === 'error',
+            validationResultsToDisplay = severityToDisplay
+                ? model.validationResults.filter(v => v.severity === severityToDisplay)
+                : [],
             requiredStr = defaultProp('requiredIndicator', props, formContext, '*'),
             requiredIndicator =
                 isRequired && !readonly && requiredStr
                     ? span({
                           item: ' ' + requiredStr,
-                          className: 'xh-form-field-required-indicator'
+                          className: 'xh-form-field__required-indicator'
                       })
                     : null,
             isPending = model && model.isValidationPending;
@@ -97,11 +101,14 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
 
         // Styles
         const classes = [];
-        if (isRequired) classes.push('xh-form-field-required');
-        if (minimal) classes.push('xh-form-field-minimal');
-        if (readonly) classes.push('xh-form-field-readonly');
-        if (disabled) classes.push('xh-form-field-disabled');
-        if (displayNotValid) classes.push('xh-form-field-invalid');
+        if (isRequired) classes.push('xh-form-field--required');
+        if (minimal) classes.push('xh-form-field--minimal');
+        if (readonly) classes.push('xh-form-field--readonly');
+        if (disabled) classes.push('xh-form-field--disabled');
+        if (severityToDisplay) {
+            classes.push(`xh-form-field--${severityToDisplay}`);
+            if (displayInvalid) classes.push('xh-form-field--invalid');
+        }
 
         let childEl =
             readonly || !child
@@ -124,30 +131,32 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
             items: [
                 labelCmp({
                     omit: !label,
-                    className: 'xh-form-field-label',
+                    className: 'xh-form-field__label',
                     items: [label, requiredIndicator]
                 }),
                 div({
                     className: classNames(
-                        'xh-form-field-inner',
-                        childIsSizeable ? 'xh-form-field-inner--flex' : 'xh-form-field-inner--block'
+                        'xh-form-field__inner',
+                        childIsSizeable
+                            ? 'xh-form-field__inner--flex'
+                            : 'xh-form-field__inner--block'
                     ),
                     items: [
                         childEl,
                         div({
                             omit: !info,
-                            className: 'xh-form-field-info',
+                            className: 'xh-form-field__info-msg',
                             item: info
                         }),
                         div({
-                            omit: minimal || !isPending || !validationDisplayed,
-                            className: 'xh-form-field-pending-msg',
+                            omit: minimal || !isPending || !severityToDisplay,
+                            className: `xh-form-field__validation-msg xh-form-field__validation-msg--pending`,
                             item: 'Validating...'
                         }),
                         div({
-                            omit: minimal || !displayNotValid,
-                            className: 'xh-form-field-error-msg',
-                            items: notValid ? errors[0] : null
+                            omit: minimal || !severityToDisplay,
+                            className: `xh-form-field__validation-msg xh-form-field__validation-msg--${severityToDisplay}`,
+                            item: first(validationResultsToDisplay)?.message
                         })
                     ]
                 })
@@ -166,7 +175,7 @@ const readonlyChild = hoistCmp.factory<ReadonlyChildProps>({
     render({model, readonlyRenderer}) {
         const value = model ? model['value'] : null;
         return div({
-            className: 'xh-form-field-readonly-display',
+            className: 'xh-form-field__readonly-display',
             item: readonlyRenderer(value, model)
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1768323341476",
+  "version": "80.0.0-SNAPSHOT.1768415875152",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/styles/XH.scss

@@ -19,6 +19,7 @@ body.xh-app {
   border-color: var(--xh-border-color);
   color: var(--xh-text-color);
   font-family: var(--xh-font-family);
+  font-feature-settings: var(--xh-font-feature-settings);
   // Important for default Inter font to ensure numbers are constant-width and line up properly.
   font-variant-numeric: tabular-nums;
   font-size: var(--xh-font-size-px);