DATAP-1392 - update dependencies, update markup for text inputs and search inputs #514

flacoman91 · 2024-05-17T22:06:21Z

Addresses: DATAP-1392
Addresses: DATAP-1429

This PR:

Updates dependencies to the latest where applicable
Adds less loader config option to craco to search the correct node_modules path for cf-base.less
Rewrites markup for inputs, date inputs. Greatly simplified date picker logic by using native JS date picker's cancel
Fixes visual bugs with error styling not appearing in date filters
Fixes typeahead bug not showing the matched text in the typeahead options
Fixes styling in mobile search bar with new input markup

flacoman91 · 2024-05-31T17:24:37Z

I added a less loader path option so the cf-forms error doesn't appear anymore, but the buttons inside of the inputs appear broken.

@anselmbradford if you get a chance, could you take a look at these?

anselmbradford · 2024-05-31T19:31:41Z

@flacoman91 Hmm I suspect cfpb/design-system#1979

flacoman91 · 2024-06-05T19:10:14Z

Screenshots of fixes:

anselmbradford · 2024-06-06T15:04:45Z

If it makes it easier, the date inputs technically don't need a clear since they have it in the default calendar UI. See https://cfpb.github.io/design-system/components/date-picker

flacoman91 · 2024-06-06T15:17:16Z

@anselmbradford

We'll need to rethink that.
If we use the native clear button, it clears it out, but what we really want is to set it to the MinDate of 12/01/2011 which is what happens when you click the X.

anselmbradford · 2024-06-06T15:25:46Z

We'll need to rethink that.
If we use the native clear button, it clears it out, but what we really want is to set it to the MinDate of 12/01/2011 which is what happens when you click the X.

Gotcha! That's great feedback. Yeah use what you need and I'll bring this example up when we revisit the date input in the DS.

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 update more deps, fixing cypress tests fix warnings and nags fix error styles, remove clear button, fixing styles in mobile view.

flacoman91 · 2024-06-06T16:38:14Z

@anselmbradford i figured it out. We can set the min/max values if the value is empty in the onChange handler.

flacoman91 · 2024-06-06T16:39:12Z

Fixes for mobile view,
Missed markup during design system 1.0 migration

flacoman91 · 2024-06-06T17:22:08Z

Sorry for the rapid fire commits. This is ready now.

anselmbradford · 2024-06-14T13:59:41Z

src/components/Filters/CompanyReceivedFilter.js

-        {errors.length
-          ? errors.map((message, key) => (
+        {errors.length ? (
+          <div className="a-form-alert a-form-alert__error" role="alert">


Update a-form-alert__error to a-form-alert--error

anselmbradford · 2024-06-14T14:01:12Z

src/components/Filters/CompanyReceivedFilter.js

-        {errors.length
-          ? errors.map((message, key) => (
+        {errors.length ? (
+          <div className="a-form-alert a-form-alert__error" role="alert">


Suggested change

<div className="a-form-alert a-form-alert__error" role="alert">

<div className="a-form-alert a-form-alert--error" role="alert">

anselmbradford · 2024-06-14T14:03:27Z

src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap

-          <svg
-            className="cf-icon-svg cf-icon-delete-round"
+      <div
+        className="a-form-alert a-form-alert__error"


Suggested change

className="a-form-alert a-form-alert__error"

className="a-form-alert a-form-alert--error"

anselmbradford · 2024-06-14T14:04:40Z

src/components/Typeahead/AsyncTypeahead/AsyncTypeahead.js

+            disabled={isDisabled}
+            inputProps={{
+              id: htmlId,
+              className: 'a-text-input a-text-input__full',


Suggested change

className: 'a-text-input a-text-input__full',

className: 'a-text-input a-text-input--full',

anselmbradford · 2024-06-14T14:05:33Z

src/components/Typeahead/Input/Input.js

          onChange={handleChange}
          onKeyDown={handlePressEnter}
+          className={'a-text-input a-text-input__full ' + className}


Suggested change

className={'a-text-input a-text-input__full ' + className}

className={'a-text-input a-text-input--full ' + className}

anselmbradford · 2024-06-14T14:06:02Z

src/components/Typeahead/Typeahead.less

@@ -100,6 +89,13 @@
      background-color: var(--gray-10);
    }
  }
+
+  .o-search-input__input {
+    //display: block;


Can this be deleted?

anselmbradford · 2024-06-14T14:06:51Z

src/components/Typeahead/Typeahead.less

+  .o-search-input__input {
+    //display: block;
+    &-label {
+      z-index: 1;


Why's this necessary? Maybe add a code comment. Is it possible to put the z-index on the parent o-search-input, so that you're not customizing the component internals?

without the z-index, the spyglass is appearing under the input box.

I think this is due to how the typeahead works.
With the code it looks like:

without this code:

anselmbradford · 2024-06-14T14:07:09Z

src/components/Typeahead/Typeahead/Typeahead.js

+            )}
+            inputProps={{
+              id: htmlId,
+              className: 'a-text-input a-text-input__full',


Suggested change

className: 'a-text-input a-text-input__full',

className: 'a-text-input a-text-input--full',

anselmbradford

A couple modifiers that need updating from old BEM to new BEM, but otherwise GTG.

anselmbradford · 2024-06-14T14:09:09Z

Whoops, looks like this may have auto gone in without the BEM updates

flacoman91 · 2024-06-14T14:13:51Z

Whoops, looks like this may have auto gone in without the BEM updates

I'll take care of it

update deps

9cfed16

flacoman91 force-pushed the DATAP-1392-update-dependencies branch from 34752d4 to 9cfed16 Compare May 20, 2024 14:38

Merge branch 'main' into DATAP-1392-update-dependencies

61388d2

flacoman91 force-pushed the DATAP-1392-update-dependencies branch 3 times, most recently from 1a9da9b to 73ac7bb Compare June 5, 2024 19:09

flacoman91 changed the title ~~DATAP-1392 - update dependencies~~ DATAP-1392 - update dependencies, update markup for text inputs and search inputs Jun 5, 2024

flacoman91 marked this pull request as ready for review June 5, 2024 19:17

flacoman91 force-pushed the DATAP-1392-update-dependencies branch from 73ac7bb to b264d9f Compare June 5, 2024 19:39

flacoman91 enabled auto-merge June 5, 2024 19:43

flacoman91 requested a review from anselmbradford June 5, 2024 19:43

flacoman91 force-pushed the DATAP-1392-update-dependencies branch from 514a54d to 3099ac7 Compare June 6, 2024 16:37

Update cypress test

b376de9

anselmbradford reviewed Jun 14, 2024

View reviewed changes

flacoman91 added this pull request to the merge queue Jun 14, 2024

anselmbradford approved these changes Jun 14, 2024

View reviewed changes

Merged via the queue into main with commit 25f8d2a Jun 14, 2024
2 checks passed

flacoman91 deleted the DATAP-1392-update-dependencies branch June 14, 2024 14:08

This was referenced Jun 14, 2024

Migrate to new search-input component #512

Closed

Fix class BEM issues | Update release-it, lint-staged. #516

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DATAP-1392 - update dependencies, update markup for text inputs and search inputs #514

DATAP-1392 - update dependencies, update markup for text inputs and search inputs #514

flacoman91 commented May 17, 2024 •

edited

Loading

flacoman91 commented May 31, 2024

anselmbradford commented May 31, 2024

flacoman91 commented Jun 5, 2024

anselmbradford commented Jun 6, 2024

flacoman91 commented Jun 6, 2024

anselmbradford commented Jun 6, 2024

flacoman91 commented Jun 6, 2024

flacoman91 commented Jun 6, 2024 •

edited

Loading

flacoman91 commented Jun 6, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford Jun 14, 2024

flacoman91 Jun 14, 2024

anselmbradford Jun 14, 2024

anselmbradford left a comment

anselmbradford commented Jun 14, 2024

flacoman91 commented Jun 14, 2024

	<div className="a-form-alert a-form-alert__error" role="alert">
	<div className="a-form-alert a-form-alert--error" role="alert">

	className="a-form-alert a-form-alert__error"
	className="a-form-alert a-form-alert--error"

	className: 'a-text-input a-text-input__full',
	className: 'a-text-input a-text-input--full',

	className={'a-text-input a-text-input__full ' + className}
	className={'a-text-input a-text-input--full ' + className}

DATAP-1392 - update dependencies, update markup for text inputs and search inputs #514

DATAP-1392 - update dependencies, update markup for text inputs and search inputs #514

Conversation

flacoman91 commented May 17, 2024 • edited Loading

flacoman91 commented May 31, 2024

anselmbradford commented May 31, 2024

flacoman91 commented Jun 5, 2024

anselmbradford commented Jun 6, 2024

flacoman91 commented Jun 6, 2024

anselmbradford commented Jun 6, 2024

flacoman91 commented Jun 6, 2024

flacoman91 commented Jun 6, 2024 • edited Loading

flacoman91 commented Jun 6, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anselmbradford left a comment

Choose a reason for hiding this comment

anselmbradford commented Jun 14, 2024

flacoman91 commented Jun 14, 2024

flacoman91 commented May 17, 2024 •

edited

Loading

flacoman91 commented Jun 6, 2024 •

edited

Loading