chore(#2756): Added an example limited helptext width

.vscode/settings.json

@@ -2,5 +2,6 @@
   "editor.formatOnSave": true,
   "editor.trimAutoWhitespace": true,
   "editor.tabSize": 2,
-  "files.trimTrailingWhitespace": true
+  "files.trimTrailingWhitespace": true,
+  "angular.enable-strict-mode-prompt": false
 }

docs/src/content/examples/limit-the-width-of-helper-text/angular.html

@@ -0,0 +1,9 @@
+<goab-form-item label="Legal name" [formGroup]="form" [helpText]="helpTextTemplate">
+  <goab-input name="legalName" formControlName="legalName"></goab-input>
+  <ng-template #helpTextTemplate>
+    <goab-text maxWidth="30ch" mt="none" mb="none">
+      Enter your full legal name exactly as it appears on your government-issued
+      identification.
+    </goab-text>
+  </ng-template>
+</goab-form-item>

docs/src/content/examples/limit-the-width-of-helper-text/angular.ts

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+
+@Component({
+  selector: "app-limit-the-width-of-helper-text",
+  templateUrl: "./angular.html",
+})
+export class LimitTheWidthOfHelperTextComponent {
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      legalName: [""],
+    });
+  }
+}

docs/src/content/examples/limit-the-width-of-helper-text/index.mdx

@@ -0,0 +1,29 @@
+---
+id: limit-the-width-of-helper-text
+title: Limit the width of helper text
+size: interaction
+tags:
+  - form
+  - form-item
+  - helper-text
+  - text
+components:
+  - form-item
+  - input
+  - text
+status: published
+previewImage: /images/examples/limit-the-width-of-helper-text.webp
+---
+
+Use the Text component in the Form item help text slot to limit the line length of helper text.
+
+## When to use
+
+Use this pattern when longer helper text stretches too far across the page and becomes difficult to read.
+
+## Considerations
+
+- Set the Text component's `maxWidth` property with a valid CSS width, such as `40ch`
+- Use a character-based width such as `ch` to keep lines at a readable length
+- Keep helper text concise and relevant to the field
+- Make sure the helper text remains available to assistive technologies through the Form item help text slot

docs/src/content/examples/limit-the-width-of-helper-text/react.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { GoabFormItem, GoabInput, GoabText } from "@abgov/react-components";
+import type { GoabInputOnChangeDetail } from "@abgov/ui-components-common";
+
+export function LimitTheWidthOfHelperText() {
+  const [value, setValue] = useState("");
+
+  const helpText = (
+    <GoabText maxWidth="30ch" mt="none" mb="none">
+      Enter your full legal name exactly as it appears on your government-issued
+      identification.
+    </GoabText>
+  );
+
+  return (
+    <GoabFormItem label="Legal name" helpText={helpText}>
+      <GoabInput
+        name="legalName"
+        value={value}
+        onChange={(detail: GoabInputOnChangeDetail) => setValue(detail.value)}
+      />
+    </GoabFormItem>
+  );
+}

docs/src/content/examples/limit-the-width-of-helper-text/web-components.html

@@ -0,0 +1,7 @@
+<goa-form-item version="2" label="Legal name">
+  <goa-input version="2" name="legalName"></goa-input>
+  <goa-text slot="helptext" maxwidth="30ch" mt="none" mb="none">
+    Enter your full legal name exactly as it appears on your government-issued
+    identification.
+  </goa-text>
+</goa-form-item>