diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss index f866ac87831..8c2e7599494 100644 --- a/app/assets/stylesheets/components/_form.scss +++ b/app/assets/stylesheets/components/_form.scss @@ -1,38 +1,3 @@ -$radio-checkbox-space: 1.5rem; - -@include at-media('tablet') { - input, - select { - font-size: $form-field-font-size-sm; - } -} - -.field { - background-color: #f2f9ff; - border-style: solid; - border-width: $border-width; - border-color: $border-color; - border-radius: $border-radius; - color: color('ink'); - font-weight: $bold-font-weight; - margin-top: units(0.5); - - &[type='number'], - &.phone { - @include u-font-family('mono'); - } - - &:focus { - border-color: color('primary'); - box-shadow: 0 0 0 2px rgba(color('primary'), 0.5); - outline: none; - } - - &.usa-input--error { - @include u-border($theme-input-state-border-width, 'error'); - } -} - input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* stylelint-disable-next-line property-no-vendor-prefix */ @@ -53,13 +18,3 @@ input::-webkit-inner-spin-button { margin-left: 0; } } - -// Upstream: https://github.com/18F/identity-style-guide/pull/325 -.usa-input { - margin-top: units(0.5); -} - -// Upstream: https://github.com/18F/identity-style-guide/pull/325 -.usa-hint { - margin: 0; -} diff --git a/app/assets/stylesheets/design-system-waiting-room.scss b/app/assets/stylesheets/design-system-waiting-room.scss index 1d32b635ab5..a6881403d82 100644 --- a/app/assets/stylesheets/design-system-waiting-room.scss +++ b/app/assets/stylesheets/design-system-waiting-room.scss @@ -1,65 +1,5 @@ // To be removed once design system incorporates styles included below. -// basscss-base-forms -//------------------------------------------------ -@mixin input-styles() { - height: 3rem; - padding: 0.5rem 1rem; - vertical-align: middle; -} - -input[type='text'], -input[type='date'], -input[type='datetime'], -input[type='datetime-local'], -input[type='email'], -input[type='month'], -input[type='number'], -input[type='password'], -input[type='search'], -input[type='tel'], -input[type='time'], -input[type='url'], -input[type='week'] { - @include input-styles; - -webkit-appearance: none; -} - -select { - @include input-styles; - - // all below displays custom arrow and is pulled from: - // https://github.com/uswds/uswds/blob/develop/packages/usa-select/src/styles/_usa-select.scss - @include add-background-svg('usa-icons/unfold_more'); - appearance: none; - background-color: color('white'); - background-position: right units(1) center; - background-size: units(2.5); - padding-right: units(4); - - &::-ms-expand { - display: none; - } - - // Show default webkit style on select element when autofilled to show icon - &:-webkit-autofill { - appearance: menulist; - } - - // Remove dotted outline from select element on focus in Firefox - &:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 color('black'); - } - - // Necessary to show chevron in forced colors mode in modern browsers - @media (forced-colors: active) { - appearance: listbox; - background-image: none; - padding-right: 0; - } -} - //basscss-base-typography //------------------------------------------------ h1, diff --git a/app/assets/stylesheets/variables/_app.scss b/app/assets/stylesheets/variables/_app.scss index 7420909d84c..973d39c59cf 100644 --- a/app/assets/stylesheets/variables/_app.scss +++ b/app/assets/stylesheets/variables/_app.scss @@ -1,5 +1,4 @@ $line-height: 1.5 !default; -$bold-font-weight: bold !default; $h1: 1.5rem !default; $h2: 1.25rem !default; @@ -15,14 +14,9 @@ $sm-h4: 1rem !default; $sm-h5: 0.875rem !default; $sm-h6: 0.75rem !default; -$form-field-font-size-sm: 1.25rem !default; - -$border-width: 1px !default; -$border-radius: 3px !default; $border-radius-md: 6px !default; $border-radius-xl: 16px !default; $border-radius-xxl: 24px !default; -$border-color: #cedced !default; $container-skinny-width: 620px !default; $container-xskinny-width: 416px !default; diff --git a/app/views/users/webauthn_setup/new.html.erb b/app/views/users/webauthn_setup/new.html.erb index f36c677f45c..e5b741968b1 100644 --- a/app/views/users/webauthn_setup/new.html.erb +++ b/app/views/users/webauthn_setup/new.html.erb @@ -30,16 +30,17 @@ <%= hidden_field_tag :attestation_object, '', id: 'attestation_object' %> <%= hidden_field_tag :client_data_json, '', id: 'client_data_json' %> <%= hidden_field_tag :platform_authenticator, @platform_authenticator, id: 'platform_authenticator' %> - <%= label_tag 'code', @presenter.nickname_label, class: 'display-block text-bold', for: 'nickname' %> - <%= text_field_tag( - :name, - '', + <%= render ValidatedFieldComponent.new( + form: f, + name: :name, required: true, - aria: { invalid: false }, - id: 'nickname', - class: 'display-block width-full field font-family-mono', - size: 16, - maxlength: 20, + label: @presenter.nickname_label, + input_html: { + id: 'nickname', + class: 'font-family-mono', + size: 16, + maxlength: 20, + }, ) %> <%= f.input( :remember_device, diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb index 80ed9f1772f..06c02d9ec19 100644 --- a/config/initializers/simple_form.rb +++ b/config/initializers/simple_form.rb @@ -8,8 +8,14 @@ config.boolean_style = :inline config.default_form_class = 'margin-top-4' config.wrapper_mappings = { + text: :uswds_text_input, + string: :uswds_text_input, + password: :uswds_text_input, + tel: :uswds_text_input, + email: :uswds_text_input, boolean: :uswds_checkbox, radio_buttons: :uswds_bordered_radio_buttons, + select: :uswds_select, hidden: :unwrapped, } @@ -18,7 +24,7 @@ b.optional :label b.optional :placeholder b.use :html5 - b.use :input, class: 'field' + b.use :input end config.wrappers :vertical_form, @@ -32,7 +38,7 @@ b.optional :readonly b.optional :label, class: 'usa-label' b.optional :hint, wrap_with: { tag: 'div', class: 'usa-hint' } - b.use :input, class: 'display-block width-full field', error_class: 'usa-input--error' + b.use :input, error_class: 'usa-input--error' b.use :error, wrap_with: { tag: 'div', class: 'usa-error-message' } end @@ -40,6 +46,27 @@ b.use :input end + config.wrappers :uswds_text_input, class: 'margin-bottom-4' do |b| + b.use :html5 + b.optional :placeholder + b.optional :maxlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + b.optional :label, class: 'usa-label' + b.optional :hint, wrap_with: { tag: 'div', class: 'usa-hint' } + b.use :input, class: 'usa-input usa-input--big', error_class: 'usa-input--error' + b.use :error, wrap_with: { tag: 'div', class: 'usa-error-message' } + end + + config.wrappers :uswds_select do |b| + b.use :html5 + b.optional :label, class: 'usa-label' + b.optional :hint, wrap_with: { tag: 'div', class: 'usa-hint' } + b.use :input, class: 'usa-select usa-select--big', error_class: 'usa-input--error' + b.use :error, wrap_with: { tag: 'div', class: 'usa-error-message' } + end + config.wrappers :uswds_checkbox do |b| b.use :html5 b.optional :hint, wrap_with: { tag: 'div', class: 'usa-hint' } diff --git a/package.json b/package.json index 57ffc02643e..b5bfba8e247 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "core-js": "^3.21.1", "fast-glob": "^3.2.7", "foundation-emails": "^2.3.1", - "identity-style-guide": "^6.5.0", + "identity-style-guide": "^6.7.0", "intl-tel-input": "^17.0.8", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/yarn.lock b/yarn.lock index cb8cab1187b..a85288c398c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3913,10 +3913,10 @@ iconv-lite@0.6.3, iconv-lite@^0.6.3: dependencies: safer-buffer ">= 2.1.2 < 3.0.0" -identity-style-guide@^6.5.0: - version "6.5.0" - resolved "https://registry.yarnpkg.com/identity-style-guide/-/identity-style-guide-6.5.0.tgz#41c869c2540faa22f80ad89ae9e0c1753e8940df" - integrity sha512-P/ZsOodZn3XyX6LYgrtDKzWe447rPkTUxAYADIGAcl13wv7ghQZJjaL1g1PySzG5PAvxeeoyOJYfRW58NRMUCw== +identity-style-guide@^6.7.0: + version "6.7.0" + resolved "https://registry.yarnpkg.com/identity-style-guide/-/identity-style-guide-6.7.0.tgz#2901c72deee7e1f30c4a784b0f07b12b9cd6a1de" + integrity sha512-kXITvbEJWlj7fjSLVbeqZ7hnQ20RL51VFFoANojbVChVeVebOeyb3NIAX9mQ1sIVS34ycnKypM/jdoHmj4Dh/g== dependencies: domready "1.0.8" uswds "^2.13.3"