Tweak and consolidate date picker

cfpb · Nov 20, 2024 · c77b2b9 · c77b2b9
1 parent 3f56fdc
commit c77b2b9
Show file tree

Hide file tree

Showing 19 changed files with 38 additions and 37 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 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">
+        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 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
@@ -35,6 +35,10 @@ textarea {
 input[type='date'] {
   appearance: textfield;
   display: revert;
+
+  &.a-text-input--full {
+    -webkit-min-logical-width: calc(100% - 16px);
+  }
 }
 
 strong,