Merge pull request #2121 from cfpb/ans_ios_tweak

Tweak and consolidate date picker
cfpb · Nov 21, 2024 · 4122c62 · 4122c62
2 parents 824e17a + c41101f
commit 4122c62
Show file tree

Hide file tree

Showing 18 changed files with 41 additions and 39 deletions.
diff --git a/docs/pages/date-picker.md b/docs/pages/date-picker.md
@@ -8,14 +8,20 @@ variation_groups:
   - variations:
       - variation_is_deprecated: false
         variation_name: Date picker
+        variation_description:
+          Date inputs use the browser's built-in date picker, where available,
+          otherwise they fall back to a text input.
         variation_code_snippet: |-
-          <div class="m-form-field">
-              <input class="a-text-input"
-                    type="date"
-                    id="datepicker-example"
-                   placeholder="mm/dd/yyyy">
-          </div>
-    variation_group_name: Types
+          <input type="date" class="a-text-input" placeholder="mm/dd/yyyy">
+        variation_group_name: Types
+      - variation_is_deprecated: false
+        variation_name: Date picker (full-width)
+        variation_description:
+          Date inputs may use the `a-text-input--full` modifier to fill their
+          available space.
+        variation_code_snippet: |-
+          <input type="date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy">
+        variation_group_name: Types
 accessibility: >-
   Inputs should always be paired with a `label` for accessibility reasons.
 

diff --git a/docs/pages/text-inputs.md b/docs/pages/text-inputs.md
@@ -125,15 +125,6 @@ variation_groups:
                         id="full-textarea-example"
                      placeholder="Placeholder text">Input text</textarea>
           </div>
-  - variation_group_name: Date input
-    variations:
-      - variation_is_deprecated: false
-        variation_name: Date input
-        variation_description:
-          Date inputs use the browser's built-in date picker, where available,
-          otherwise they fall back to a text input.
-        variation_code_snippet: |-
-          <input type="date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy" data-type="date" id="o-filterable-list-controls_from-date">
 guidelines: >-
   ### Stylistic guidelines
 

diff --git a/packages/cfpb-design-system/dist/base/index.css b/packages/cfpb-design-system/dist/base/index.css
diff --git a/packages/cfpb-design-system/dist/base/index.css.map b/packages/cfpb-design-system/dist/base/index.css.map
diff --git a/packages/cfpb-design-system/dist/base/index.js.map b/packages/cfpb-design-system/dist/base/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map
diff --git a/packages/cfpb-design-system/dist/index.css b/packages/cfpb-design-system/dist/index.css
diff --git a/packages/cfpb-design-system/dist/index.css.map b/packages/cfpb-design-system/dist/index.css.map
diff --git a/packages/cfpb-design-system/dist/index.js.map b/packages/cfpb-design-system/dist/index.js.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.css b/packages/cfpb-design-system/dist/utilities/index.css
diff --git a/packages/cfpb-design-system/dist/utilities/index.css.map b/packages/cfpb-design-system/dist/utilities/index.css.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.js.map b/packages/cfpb-design-system/dist/utilities/index.js.map
diff --git a/packages/cfpb-design-system/src/base/base.scss b/packages/cfpb-design-system/src/base/base.scss
@@ -29,12 +29,17 @@ textarea {
 
 /*
  * On iOS Safari the input is collapsed till it's clicked.
- * This sets the appearance to that of a textfield and then reverts the display
- * to vertically align the date.
+ * This sets the default min width and height to what it would be if the
+ * appearance was a textfield.
  */
 input[type='date'] {
-  appearance: textfield;
   display: revert;
+  min-width: 98px;
+  min-height: 29px;
+
+  &.a-text-input--full {
+    min-width: 100%;
+  }
 }
 
 strong,