LG-13259: Input field error message should be the width of the app

app/assets/stylesheets/design-system-waiting-room.scss

@@ -1,5 +1,7 @@
 // To be removed once design system incorporates styles included below.
 
+@use 'uswds-core' as *;
+
 // basscss-base-typography
 // ------------------------------------------------
 h1,
@@ -29,3 +31,9 @@ ul {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.usa-input--wide {
+  @include at-media('tablet') {
+    max-width: 14rem;
+  }
+}

app/javascript/packages/validated-field/validated-field-element.spec.ts

@@ -202,37 +202,6 @@ describe('ValidatedFieldElement', () => {
     });
   });
 
-  context('text-like input', () => {
-    it('sets max width on error message to match input', () => {
-      const inputWidth = 280;
-      const element = createAndConnectElement();
-
-      const input = getByRole(element, 'textbox') as HTMLInputElement;
-      sinon.stub(input, 'offsetWidth').value(inputWidth);
-
-      const form = element.parentNode as HTMLFormElement;
-      form.checkValidity();
-
-      const message = getByText(element, 'This field is required');
-      expect(message.style.maxWidth).to.equal(`${inputWidth}px`);
-    });
-  });
-
-  context('non-text-like input', () => {
-    it('does not set max width on error message', () => {
-      const element = createAndConnectElement();
-
-      const input = getByRole(element, 'textbox') as HTMLInputElement;
-      input.type = 'checkbox';
-
-      const form = element.parentNode as HTMLFormElement;
-      form.checkValidity();
-
-      const message = getByText(element, 'This field is required');
-      expect(message.style.maxWidth).to.equal('');
-    });
-  });
-
   describe('#isValid', () => {
     context('without initial error', () => {
       it('is true', () => {

app/javascript/packages/validated-field/validated-field-element.ts

@@ -1,21 +1,3 @@
-/**
- * Set of text-like input types, used in determining whether the width of the error message should
- * be constrained to match the width of the input.
- */
-const TEXT_LIKE_INPUT_TYPES = new Set([
-  'date',
-  'datetime-local',
-  'email',
-  'month',
-  'number',
-  'password',
-  'search',
-  'tel',
-  'text',
-  'time',
-  'url',
-]);
-
 class ValidatedFieldElement extends HTMLElement {
   errorStrings: Partial<ValidityState> = {};
 
@@ -139,11 +121,6 @@ class ValidatedFieldElement extends HTMLElement {
       this.errorMessage = this.ownerDocument.createElement('div');
       this.errorMessage.classList.add('usa-error-message');
       this.errorMessage.id = this.errorId;
-
-      if (this.input && TEXT_LIKE_INPUT_TYPES.has(this.input.type)) {
-        this.errorMessage.style.maxWidth = `${this.input.offsetWidth}px`;
-      }
-
       this.inputWrapper?.appendChild(this.errorMessage);
     }
 

app/views/idv/by_mail/enter_code/_form.html.erb

@@ -1,16 +1,15 @@
 <%= simple_form_for(@gpo_verify_form, url: idv_verify_by_mail_enter_code_path) do |f| %>
-  <div class="grid-row margin-top-neg-2 margin-bottom-5">
-    <div class="grid-col-12 tablet:grid-col-6">
-      <%= render ValidatedFieldComponent.new(
-            form: f,
-            name: :otp,
-            maxlength: 10,
-            required: true,
-            autofocus: true,
-            label: t('idv.gpo.form.otp_label'),
-          ) %>
-      <%= hidden_field_tag :did_not_receive_letter, @user_did_not_receive_letter ? '1' : nil %>
-      <%= f.submit t('idv.gpo.form.submit'), full_width: true, wide: false, class: 'display-block margin-top-5' %>
-    </div>
+  <div class="margin-top-neg-2 margin-bottom-5">
+    <%= render ValidatedFieldComponent.new(
+          form: f,
+          name: :otp,
+          maxlength: 10,
+          required: true,
+          autofocus: true,
+          label: t('idv.gpo.form.otp_label'),
+          input_html: { class: 'usa-input--wide' },
+        ) %>
+    <%= hidden_field_tag :did_not_receive_letter, @user_did_not_receive_letter ? '1' : nil %>
+    <%= f.submit t('idv.gpo.form.submit'), class: 'display-block margin-top-5' %>
   </div>
 <% end %>