Merge pull request #1973 from cfpb/ans_remove_formfield

Remove/update m-form-field modifiers
cfpb · May 7, 2024 · 764e5d3 · 764e5d3
2 parents 352e21a + 4c196d6
commit 764e5d3
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 97 deletions.
diff --git a/docs/pages/alerts.md b/docs/pages/alerts.md
@@ -178,7 +178,7 @@ variation_groups:
       - variation_is_deprecated: false
         variation_name: Success
         variation_code_snippet: >
-          <div class="m-form-field m-form-field__success">
+          <div class="m-form-field">
               <input class="a-text-input a-text-input--success" type="text" placeholder="Input text" id="form-input-success" aria-describedby="form-input-success_message">
               <div class="a-form-alert a-form-alert--success" id="form-input-success_message" role="alert">
                   {% include icons/approved-round.svg %}
@@ -192,8 +192,7 @@ variation_groups:
       - variation_is_deprecated: false
         variation_name: Warning
         variation_code_snippet: >-
-          <div class="m-form-field m-form-field__warning">
-
+          <div class="m-form-field">
               <input class="a-text-input a-text-input--warning" type="text" placeholder="Input text" id="form-input-warning" aria-describedby="form-input-warning_message">
               <div class="a-form-alert a-form-alert--warning" id="form-input-warning_message" role="alert">
                   {% include icons/warning-round.svg %}
@@ -206,7 +205,7 @@ variation_groups:
       - variation_is_deprecated: false
         variation_name: Error
         variation_code_snippet: >-
-          <div class="m-form-field m-form-field__error">
+          <div class="m-form-field">
               <input class="a-text-input a-text-input--error" type="text" placeholder="Input text" id="form-input-error" aria-describedby="form-input-error_message"><div class="a-form-alert a-form-alert--error" id="form-input-error_message" role="alert">
                   {% include icons/error-round.svg %}
                   <span class="a-form-alert__text">

diff --git a/docs/pages/checkboxes.md b/docs/pages/checkboxes.md
@@ -73,7 +73,9 @@ variation_groups:
 
           <!--Success-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--checkbox__success">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--checkbox-success">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_success">
               <label class="a-label" for="test_checkbox_success">Success</label>
           </div>
@@ -82,7 +84,9 @@ variation_groups:
 
           <!--Warning-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--checkbox__warning">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--checkbox-warning">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_warning">
               <label class="a-label" for="test_checkbox_warning">Warning</label>
           </div>
@@ -91,7 +95,9 @@ variation_groups:
 
           <!--Error-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--checkbox__error">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--checkbox-error">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_error">
               <label class="a-label" for="test_checkbox_error">Error</label>
           </div>
@@ -121,8 +127,9 @@ variation_groups:
           example, they may not work well for terms of service agreement
           checkboxes.
         variation_code_snippet: >-
-          <div class="m-form-field m-form-field--checkbox
-          m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default">
               <label class="a-label" for="test_checkbox_lg_default">Enabled</label>
           </div>
@@ -132,7 +139,9 @@ variation_groups:
 
           <!--Hover-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox hover" type="checkbox" id="test_checkbox_lg_hover">
               <label class="a-label" for="test_checkbox_lg_hover">Hover</label>
           </div>
@@ -142,7 +151,9 @@ variation_groups:
 
           <!--Focus-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox focus" type="checkbox" id="test_checkbox_lg_focus">
               <label class="a-label" for="test_checkbox_lg_focus">Focus</label>
           </div>
@@ -153,7 +164,9 @@ variation_groups:
 
           <!--Selected-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_checked" checked>
               <label class="a-label" for="test_checkbox_lg_checked">Selected</label>
           </div>
@@ -163,7 +176,9 @@ variation_groups:
 
           <!--Disabled-->
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_disabled" disabled>
               <label class="a-label" for="test_checkbox_lg_disabled">Disabled</label>
           </div>
@@ -175,7 +190,9 @@ variation_groups:
 
           <!--
 
-          <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox"
                      type="checkbox"
                      id="test_checkbox_lg_disabled"
@@ -189,8 +206,9 @@ variation_groups:
       - variation_is_deprecated: false
         variation_name: Large target area checkbox (with helper text)
         variation_code_snippet: >-
-          <div class="m-form-field m-form-field--checkbox
-          m-form-field--lg-target">
+          <div class="m-form-field
+                      m-form-field--checkbox
+                      m-form-field--lg-target">
               <input class="a-checkbox" type="radio" id="test_checkbox_lg_helper">
               <label class="a-label" for="test_checkbox_lg_helper">
                  Label

diff --git a/docs/pages/fieldsets.md b/docs/pages/fieldsets.md
@@ -78,19 +78,27 @@ variation_groups:
           </legend>
               <div class="o-form__group">
                   <fieldset class="o-form__fieldset">
-                      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+                      <div class="m-form-field
+                                  m-form-field--checkbox
+                                  m-form-field--lg-target">
                           <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_1">
                           <label class="a-label" for="test_checkbox_lg_default_1">Inline label</label>
                       </div>
-                      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+                      <div class="m-form-field
+                                  m-form-field--checkbox
+                                  m-form-field--lg-target">
                           <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_2">
                           <label class="a-label" for="test_checkbox_lg_default_2">Inline label</label>
                       </div>
-                      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+                      <div class="m-form-field
+                                  m-form-field--checkbox
+                                  m-form-field--lg-target">
                           <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_3">
                           <label class="a-label" for="test_checkbox_lg_default_3">Inline label</label>
                       </div>
-                      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
+                      <div class="m-form-field
+                                  m-form-field--checkbox
+                                  m-form-field--lg-target">
                           <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_4">
                           <label class="a-label" for="test_checkbox_lg_default_4">Inline label</label>
                       </div>
@@ -107,25 +115,29 @@ variation_groups:
               <small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
           </legend>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
                                   <label class="a-label" for="is_helpful_1">Inline label
                                   </label>
                           </div>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
                                   <label class="a-label" for="is_helpful_2">Inline label
                                   </label>
                           </div>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_3" type="radio" name="is_helpful" value="0">
                                   <label class="a-label" for="is_helpful_3">Inline label
                                   </label>
                           </div>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_4" type="radio" name="is_helpful" value="0">
                                   <label class="a-label" for="is_helpful_4">Inline label
                                   </label>

diff --git a/docs/pages/labels.md b/docs/pages/labels.md
@@ -25,13 +25,15 @@ variation_groups:
                           <legend class="a-legend">Basic legend
                           </legend>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
                                   <label class="a-label" for="is_helpful_1">Inline label
                                   </label>
                           </div>
 
-                          <div class="m-form-field m-form-field--radio m-form-field--lg-target">
+                          <div class="m-form-field
+                                      m-form-field--radio m-form-field--lg-target">
                               <input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
                                   <label class="a-label" for="is_helpful_2">Inline label
                                   </label>

diff --git a/docs/pages/selects.md b/docs/pages/selects.md
@@ -13,7 +13,7 @@ variation_groups:
           <!--Enabled state-->
 
 
-          <div class="m-form-field m-form-field__select">
+          <div class="m-form-field">
               <label class="a-label a-label--heading" for="test_select_enabled">
                   Enabled
               </label>
@@ -33,7 +33,7 @@ variation_groups:
 
           <!--Hover state-->
 
-          <div class="m-form-field m-form-field__select">
+          <div class="m-form-field">
               <label class="a-label a-label--heading" for="test_select__hover">
                  Hover
               </label>
@@ -54,7 +54,7 @@ variation_groups:
           <!--Focus state-->
 
 
-          <div class="m-form-field m-form-field__select">
+          <div class="m-form-field">
               <label class="a-label a-label--heading" for="test_select__focus">
                   Focus
               </label>
@@ -75,7 +75,7 @@ variation_groups:
           <!--Disabled state-->
 
 
-          <div class="m-form-field m-form-field__select">
+          <div class="m-form-field">
               <label class="a-label a-label--heading" for="test_select__disabled">Disabled</label>
               <div class="a-select a-select--disabled">
                   <select id="test_select__disabled" disabled>
@@ -97,7 +97,7 @@ variation_groups:
           Allows the user to select multiple items from a dropdown
           list of options.
         variation_code_snippet: >-
-          <div class="m-form-field m-form-field__select">
+          <div class="m-form-field">
               <label class="a-label a-label--heading" for="test_select__multiple">
                   Label
               </label>
@@ -127,16 +127,16 @@ use_cases: >-
   Use selects when:
 
 
-  * You have a long list of finite options. 
+  * You have a long list of finite options.
 
-    * If the list is shorter than around six items, [radio buttons](https://cfpb.github.io/design-system/components/radio-buttons) or [checkboxes](https://cfpb.github.io/design-system/components/checkboxes) might work better. 
+    * If the list is shorter than around six items, [radio buttons](https://cfpb.github.io/design-system/components/radio-buttons) or [checkboxes](https://cfpb.github.io/design-system/components/checkboxes) might work better.
     * If the options include something open ended, a [text input](https://cfpb.github.io/design-system/components/text-inputs) field is better.
-  * You need structured data for a long list. 
+  * You need structured data for a long list.
 
     * For instance, an open text field for “state” could be entered as Missouri or MO. So if this needs to be standardized, a select facilitates this standardization.
-  * The list options are familiar to the user. 
+  * The list options are familiar to the user.
 
-    * A select is not a good place to introduce new or complicated terms or concepts. 
+    * A select is not a good place to introduce new or complicated terms or concepts.
     * For instance, if the question is “What’s your favorite color of the rainbow,” a select could be a good choice. The options are familiar and there are more than six.
 accessibility: >-
   ### Selects

diff --git a/packages/cfpb-forms/src/molecules/form-fields.less b/packages/cfpb-forms/src/molecules/form-fields.less
@@ -121,7 +121,7 @@
       }
     }
 
-    &--error {
+    &-error {
       .a-label {
         &::before {
           border-color: @input-border__error;
@@ -157,7 +157,7 @@
       }
     }
 
-    &--warning {
+    &-warning {
       .a-label {
         &::before {
           border-color: @input-border__warning;
@@ -193,7 +193,7 @@
       }
     }
 
-    &--success {
+    &-success {
       .a-label {
         &::before {
           border-color: @input-border__success;