Adds date input example and adjusts baseline appearance

cfpb · Nov 15, 2024 · 74d4214 · 74d4214
1 parent 35a6bed
commit 74d4214
Show file tree

Hide file tree

Showing 20 changed files with 42 additions and 23 deletions.
diff --git a/docs/pages/text-inputs.md b/docs/pages/text-inputs.md
@@ -119,12 +119,21 @@ variation_groups:
                     placeholder="Placeholder text">Input text</textarea>
       - variation_is_deprecated: false
         variation_name: Text area input (full width)
-        variation_description: |-
+        variation_code_snippet: |-
           <div class="m-form-field">
               <textarea class="a-text-input a-text-input--full"
                         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 b/packages/cfpb-design-system/dist/base/index.js
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
@@ -27,6 +27,16 @@ textarea {
   font-family: var(--font-stack);
 }
 
+/*
+ * 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.
+ */
+input[type='date'] {
+  appearance: textfield;
+  display: revert;
+}
+
 strong,
 b {
   font-weight: 600;

diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss b/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss
@@ -4,7 +4,6 @@
 
 .m-form-field {
   .a-text-input--full {
-    box-sizing: border-box;
     width: 100%;
   }
 

diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss b/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss
@@ -88,6 +88,7 @@
   border: 1px solid $input-border;
   background: $input-bg;
   color: $input-text;
+  box-sizing: border-box;
 
   &:hover,
   &.hover {