Use design system styling consistently for form fields

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;
-}

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,

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;

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,

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,14 +38,35 @@
     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
 
   config.wrappers :unwrapped, wrapper: false do |b|
     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' }

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",

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"