diff --git a/app/assets/stylesheets/design-system-waiting-room.scss b/app/assets/stylesheets/design-system-waiting-room.scss index 69baa9cde87..2c1d2f191af 100644 --- a/app/assets/stylesheets/design-system-waiting-room.scss +++ b/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; + } +} diff --git a/app/javascript/packages/validated-field/validated-field-element.spec.ts b/app/javascript/packages/validated-field/validated-field-element.spec.ts index 34db70c333b..d3f12ab6a75 100644 --- a/app/javascript/packages/validated-field/validated-field-element.spec.ts +++ b/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', () => { diff --git a/app/javascript/packages/validated-field/validated-field-element.ts b/app/javascript/packages/validated-field/validated-field-element.ts index 212f0fbc2c1..2a74caf9d74 100644 --- a/app/javascript/packages/validated-field/validated-field-element.ts +++ b/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 = {}; @@ -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); } diff --git a/app/views/idv/by_mail/enter_code/_form.html.erb b/app/views/idv/by_mail/enter_code/_form.html.erb index f24d991568a..df8b738cdd2 100644 --- a/app/views/idv/by_mail/enter_code/_form.html.erb +++ b/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| %> -
-
- <%= 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' %> -
+
+ <%= 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' %>
<% end %>