2009 fix month inputs (#816)

* add back inputmode prop to va-number-input and adjust tests and stories * update month input classes on va-memorable-date * update css for mobile * update tests * fix bug on mobile / input width * update class names * remove new classes * remove extra or in if condition
department-of-veterans-affairs · Aug 29, 2023 · fc38c81 · fc38c81
1 parent 5f0566c
commit fc38c81
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts b/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
@@ -1281,7 +1281,7 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group usa-form-group--month usa-form-group--select">
+            <div class="usa-form-group usa-form-group--select usa-form-group--month">
               <va-select aria-describedby="dateHint" class="hydrated usa-form-group--month-select" uswds="">
                 <option value="1">
                   January
@@ -1369,7 +1369,7 @@ describe('va-memorable-date', () => {
           <slot></slot>
           <span id="error-message" role="alert"></span>
           <div class="usa-memorable-date">
-            <div class="usa-form-group usa-form-group--month usa-form-group--select">
+            <div class="usa-form-group usa-form-group--select usa-form-group--month">
               <va-select aria-describedby="dateHint hint" class="hydrated usa-form-group--month-select" uswds="">
                 <option value="1">
                   January

diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss b/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
@@ -18,12 +18,21 @@
 }
 
 .usa-form-group--month {
-  flex: 0 1 50%;
-  width: 50%;
+  margin-right: 16px;
 }
 
-.usa-form-group--month-select, .usa-form-group--month-input {
-  width: 100%;
+.usa-form-group--month-input {
+  width: 48px;
+}
+
+@media (max-width: 480px) {
+  .usa-form-group--month-select {
+    width: 100%;
+  }
+  .usa-form-group--select {
+    flex: 0 1 50%;
+    width: 50%;
+  }
 }
 
 :host([uswds]) {