updated craco config so less file builds.

fixing search bar text area fixing z-index of spyglass icon getting typeahead to work correctly with styling. move button around, fix date filter async typeahead text fix update some stuff update filter and snapshot hide cancel button if no value
cfpb · Jun 5, 2024 · 73ac7bb · 73ac7bb
1 parent 61388d2
commit 73ac7bb
Show file tree

Hide file tree

Showing 14 changed files with 574 additions and 511 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -94,6 +94,9 @@ module.exports = {
             },
             javascriptEnabled: true,
             math: 'always',
+            paths: [
+              path.resolve(__dirname, 'node_modules/@cfpb/cfpb-core/src'),
+            ],
           },
         },
       },

diff --git a/package.json b/package.json
@@ -39,18 +39,18 @@
     "@babel/runtime": "^7.24.5",
     "@cfpb/browserslist-config": "0.0.2",
     "@cfpb/cfpb-atomic-component": "1.2.0",
-    "@cfpb/cfpb-buttons": "1.2.0",
+    "@cfpb/cfpb-buttons": "1.3.0",
     "@cfpb/cfpb-core": "1.2.0",
     "@cfpb/cfpb-design-system": "^1.2.0",
     "@cfpb/cfpb-expandables": "^1.2.0",
-    "@cfpb/cfpb-forms": "1.2.0",
+    "@cfpb/cfpb-forms": "1.3.0",
     "@cfpb/cfpb-grid": "1.2.0",
     "@cfpb/cfpb-icons": "^1.2.0",
-    "@cfpb/cfpb-layout": "1.2.0",
-    "@cfpb/cfpb-notifications": "1.2.0",
-    "@cfpb/cfpb-pagination": "1.2.0",
+    "@cfpb/cfpb-layout": "1.3.0",
+    "@cfpb/cfpb-notifications": "1.3.0",
+    "@cfpb/cfpb-pagination": "1.3.0",
     "@cfpb/cfpb-tables": "1.2.0",
-    "@cfpb/cfpb-typography": "1.2.0",
+    "@cfpb/cfpb-typography": "1.3.1",
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/cypress": "^10.0.1",

diff --git a/src/components/Filters/CompanyReceivedFilter.js b/src/components/Filters/CompanyReceivedFilter.js
@@ -142,29 +142,35 @@ export const CompanyReceivedFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received from date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setFromDate(evt.target.value)}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+                {!!fromDate && (
+                  <button
+                    type="reset"
+                    onClick={() => handleClear('from')}
+                    aria-label="Clear company received from date"
+                    title="Clear company received from date"
+                  >
+                    {getIcon('delete')}
+                    <span className="u-visually-hidden">
+                      Clear company received from date filter
+                    </span>
+                  </button>
+                )}
+              </div>
             </div>
           </li>
           <li>
@@ -174,29 +180,35 @@ export const CompanyReceivedFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received through date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setThroughDate(evt.target.value)}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+                {!!throughDate && (
+                  <button
+                    type="reset"
+                    onClick={() => handleClear('through')}
+                    aria-label="Clear company received through date"
+                    title="Clear company received through date"
+                  >
+                    {getIcon('delete')}
+                    <span className="u-visually-hidden">
+                      Clear company received through date filter
+                    </span>
+                  </button>
+                )}
+              </div>
             </div>
           </li>
         </ul>

diff --git a/src/components/Filters/DateFilter.js b/src/components/Filters/DateFilter.js
@@ -159,29 +159,33 @@ export const DateFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received from filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setFromDate(evt.target.value)}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+                <button
+                  type="reset"
+                  onClick={() => handleClear('from')}
+                  aria-label="Clear from date"
+                  title="Clear from date"
+                >
+                  {getIcon('delete')}
+                  <span className="u-visually-hidden">
+                    Clear date received from filter
+                  </span>
+                </button>
+              </div>
             </div>
           </li>
           <li>
@@ -191,29 +195,33 @@ export const DateFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received through filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setThroughDate(evt.target.value)}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+                <button
+                  type="reset"
+                  onClick={() => handleClear('through')}
+                  aria-label="Clear through date"
+                  title="Clear through date"
+                >
+                  {getIcon('delete')}
+                  <span className="u-visually-hidden">
+                    Clear date received through filter
+                  </span>
+                </button>
+              </div>
             </div>
           </li>
         </ul>

diff --git a/src/components/Filters/DateFilter.less b/src/components/Filters/DateFilter.less
@@ -16,13 +16,12 @@
         margin-right: @gutter-normal;
       }
 
-      .m-btn-inside-input {
-        .a-text-input {
-          padding-right: @grid_gutter-width;
-        }
-        .a-btn {
-          color: var(--gray);
-        }
+      input {
+        width:100%;
+        padding-right: 35px;
+      }
+      button {
+        padding-right: 5px;
       }
     }
   }