Error text overflow

change/@ni-nimble-components-1567cff2-165d-405e-9efc-df21a62b3e93.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update error text on components to only show a title when the error text overflows",
+  "packageName": "@ni/nimble-components",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/combobox/index.ts

@@ -143,6 +143,10 @@ export class Combobox
     @observable
     public hasOverflow = false;
 
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
+
     public override get value(): string {
         Observable.track(this, 'value');
         return this._value;

packages/nimble-components/src/number-field/index.ts

@@ -1,4 +1,4 @@
-import { attr, html } from '@microsoft/fast-element';
+import { attr, html, observable } from '@microsoft/fast-element';
 import {
     DesignSystem,
     NumberField as FoundationNumberField,
@@ -44,6 +44,10 @@ export class NumberField extends FoundationNumberField implements ErrorPattern {
     @attr({ attribute: 'error-visible', mode: 'boolean' })
     public errorVisible = false;
 
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
+
     public override connectedCallback(): void {
         super.connectedCallback();
 

packages/nimble-components/src/patterns/error/template.ts

@@ -1,8 +1,14 @@
 import { html } from '@microsoft/fast-element';
 import type { ErrorPattern } from './types';
+import { overflow } from '../../utilities/directive/overflow';
 
 export const errorTextTemplate = html<ErrorPattern>`
-    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+    <div
+        class="error-text"
+        ${overflow('errorHasOverflow')}
+        title="${x => (x.errorHasOverflow && x.errorText ? x.errorText : null)}"
+        aria-live="polite"
+    >
         ${x => x.errorText}
     </div>
 `;

packages/nimble-components/src/patterns/error/types.ts

@@ -11,4 +11,11 @@ export interface ErrorPattern {
      * Show the error appearance of the control
      */
     errorVisible: boolean;
+
+    /* @internal
+     * Indicates if the error text has overflowed its container. The value should not be
+     * set directly. Instead, it is used with the `overflow` directive. When declared in an
+     * implementation of `ErrorPattern`, it must be declared as `@observable`.
+     */
+    errorHasOverflow: boolean;
 }

packages/nimble-components/src/radio-group/index.ts

@@ -3,7 +3,7 @@ import {
     DesignSystem
 } from '@microsoft/fast-foundation';
 import { Orientation } from '@microsoft/fast-web-utilities';
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 import type { ErrorPattern } from '../patterns/error/types';
@@ -25,6 +25,10 @@ export class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
 
     @attr({ attribute: 'error-visible', mode: 'boolean' })
     public errorVisible = false;
+
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
 }
 
 const nimbleRadioGroup = RadioGroup.compose({

packages/nimble-components/src/rich-text/editor/index.ts

@@ -196,6 +196,10 @@ export class RichTextEditor extends RichText implements ErrorPattern {
      */
     public editorContainer!: HTMLDivElement;
 
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
+
     private resizeObserver?: ResizeObserver;
     private updateScrollbarWidthQueued = false;
 

packages/nimble-components/src/select/index.ts

@@ -213,6 +213,10 @@ export class Select
         return slotTextContent(this.labelSlot);
     }
 
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
+
     private _value = '';
     private forcedPosition = false;
     private openActiveIndex?: number;

packages/nimble-components/src/text-area/index.ts

@@ -55,6 +55,10 @@ export class TextArea extends FoundationTextArea implements ErrorPattern {
     @observable
     public scrollbarWidth = -1;
 
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
+
     private resizeObserver?: ResizeObserver;
     private updateScrollbarWidthQueued = false;
 

packages/nimble-components/src/text-field/index.ts

@@ -1,4 +1,4 @@
-import { attr, html } from '@microsoft/fast-element';
+import { attr, html, observable } from '@microsoft/fast-element';
 import {
     DesignSystem,
     TextField as FoundationTextField,
@@ -46,6 +46,10 @@ export class TextField extends FoundationTextField implements ErrorPattern {
 
     @attr({ attribute: 'full-bleed', mode: 'boolean' })
     public fullBleed = false;
+
+    /* @internal */
+    @observable
+    public errorHasOverflow = false;
 }
 
 const nimbleTextField = TextField.compose<TextFieldOptions>({