Adds date input example and adjusts baseline appearance

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
 

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;

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

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 {