[Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update #169

shindigira · 2024-01-12T06:29:30Z

Closes #177
Closes #190

Follow-up to https://github.com/cfpb/sbl-frontend/pull/146

Changes

Style(fix): Error Message Change - 'You must enter your first name to complete your user profile and access the ~~system~~ platform.'
Style(fix): Accessibility Change - Institution selection well - dotted line goes around the LEI, TIN and RSSD ID fields as well.
Style(fix): Removed interfering styles
Style(feat): Implements the new Checkbox (error/success/warning) and Checkbox Focus from DS/DSR
Feat(fix): 'Clear Form' no longer clears the list of associated financial institutions

Local Dev Testing

yarn up -i design-system-react to update DSR package with Checkbox status styling

Potential Follow-Up PRs

Margin change between the icon and text in Alerts
Vertically centering in Alerts

Screenshots

Focus: Red dotted border

Focus: dotted line around entire label

natalia-fitzgerald

@shindigira - This is looking good! If possible I'd like to see it in live code before approving. Let me know if that's possible. Thanks!

shindigira · 2024-01-18T15:12:11Z

@shindigira - This is looking good! If possible I'd like to see it in live code before approving. Let me know if that's possible. Thanks!

We are pushing up now and will be there in a few min.

natalia-fitzgerald · 2024-01-18T17:21:46Z

@shindigira
For the checkbox alignment can you confirm that what is live in the code (on AWS) pulls from the DS component? It looks like they match but I just wanted to confirm.

shindigira · 2024-01-18T19:32:50Z

@shindigira For the checkbox alignment can you confirm that what is live in the code (on AWS) pulls from the DS component? It looks like they match but I just wanted to confirm.

Confirmed that they match in both markup and css classes used:

natalia-fitzgerald · 2024-01-19T02:41:44Z

@shindigira
When I hover over the links in the form-level alert I'm seeing the cursor instead of the hand. I think it's because it's missing an href. Can we fix?

shindigira · 2024-01-19T07:57:40Z

@shindigira When I hover over the links in the form-level alert I'm seeing the cursor instead of the hand. I think it's because it's missing an href. Can we fix?

Thank you for this catch. And it definitely was the missing href attribute that ties to cursor:pointer.
I pushed the change to this PR.

natalia-fitzgerald · 2024-01-20T04:07:44Z

@shindigira
Can you double check the error content against the Figma file? It looks like there are a number of discrepancies - where the deployed page isn't matching the Figma file. I have not made recent changes to the content so I guess this was missed until now.

Inconsistency between Figma content and deployed page content

Form-level error links content
Field-level error alert - associate financial institution - content

Generally make sure that text content does not exceed 670px in width.

shindigira · 2024-01-22T09:49:49Z

@shindigira Can you double check the error content against the Figma file? It looks like there are a number of discrepancies - where the deployed page isn't matching the Figma file. I have not made recent changes to the content so I guess this was missed until now.

Inconsistency between Figma content and deployed page content

Form-level error links content

Field-level error alert - associate financial institution - content

It was requested to change to what it currently is on AWS to maintain consistency between the error message (Field Level Alert) and the error link content.

I will revert back to match the Figma.

Generally make sure that text content does not exceed 670px in width.

Thanks for that! I made sure to add this around the Field Level Alerts in addition to the Paragraphs too.

shindigira · 2024-01-23T18:24:32Z

Just waiting on the DS and DSR updates for the new Checkbox styling:

cfpb/design-system-react#285
cfpb/design-system#1883

shindigira · 2024-01-24T19:06:21Z

@billhimmelsbach @meissadia Implemented the Updated DSR with Checkbox status stylings. Just need a dev review on this remaining part.

Then can push up to AWS for final @natalia-fitzgerald designer review

natalia-fitzgerald · 2024-01-25T13:00:23Z

@shindigira
I'm having trouble loading this page so that I can review. When I click on the "Sign in with Login.gov" button I am taken to the "personal email domain" notification page.

Once this gets worked out can you confirm which pages I should include in this review? Should it be the "Complete your user profile page, the errors, and the notification page?"

shindigira · 2024-01-25T15:55:05Z

@shindigira I'm having trouble loading this page so that I can review. When I click on the "Sign in with Login.gov" button I am taken to the "personal email domain" notification page.

Once this gets worked out can you confirm which pages I should include in this review? Should it be the "Complete your user profile page, the errors, and the notification page?"

Unless there is a new error (due to backend changes), this requires associating your email domain with an institution on the backend. Will need @billhimmelsbach to reset this as I have yet to be acclimated to accessing the AWS deployment.

billhimmelsbach · 2024-01-25T21:41:35Z

@natalia-fitzgerald @shindigira

Don't know if you saw it on the channel, but the latest of this branch is on AWS now as of 12:30 PT / 3:30 ET. Thanks! 👍

natalia-fitzgerald

@shindigira - This is looking great. I have one small adjustment and then it should be good to go.

Reduce the space between the bottom of the text introduction and the notification to 45px?

billhimmelsbach

I think there's a "Clear form" bug that we'll want to fix, where clicking it removes all financial institution choices.

clear-form-bug.mov

shindigira · 2024-01-26T01:53:49Z

fix: Clear Form no longer unmounts Associated Financial Data

@meissadia @billhimmelsbach Thanks. The fix is in this commit. When testing, please follow the steps:

Associate the user's email domain with more than one financial institution (dbreaver or api).
Navigate to http://localhost:8899/profile-form
Click to check the checkboxes of the institutions
Click 'Clear Form'
Click to check the checkboxes of the institutions again
Hit 'Submit' and check that the request includes the checked institutions
Refresh the app and verify the associated institutions are at: http://localhost:8899/user-profile

src/pages/ProfileForm/Step1Form/Step1Form.tsx

…roduction" This reverts commit 6694cb7.

billhimmelsbach

Looks good! Natalia is going to take a peek at it, then it should be good to go. 👍

natalia-fitzgerald

Great work @shindigira!

shindigira added 4 commits January 12, 2024 01:19

content: Updated Step2 denied domain error message

e16f5fa

content: updated content text regarding input field description text

41c8a69

style: accesibility changed to entirely around FI group

4fe05cd

style: removed interferring styles

5b786c9

shindigira changed the title ~~wip 85 part 2~~ [Update] Complete Your User Profile - Field Inputs - Focus Styling(Error), Checkbox Group Focus Dotted Line Jan 17, 2024

shindigira requested review from billhimmelsbach, meissadia and natalia-fitzgerald January 17, 2024 18:21

shindigira added 4 commits January 17, 2024 13:38

fix: trim leading and trailing white space

cda6a6a

chore: set default string empty

077ff53

chore: created a SectionIntro

c07cc4b

chore: reformatted SectionIntro

864db06

natalia-fitzgerald reviewed Jan 18, 2024

View reviewed changes

Merge branch 'main' of github.com:cfpb/sbl-frontend into 85-part-2

10f64ca

chore: defensive coding

98213e7

chore: removed unused code

42f238e

shindigira requested a review from contolini as a code owner January 18, 2024 19:26

shindigira removed the request for review from contolini January 18, 2024 19:32

style: added href to allow cursor:pointer on error links

f60e46b

shindigira added 2 commits January 19, 2024 02:59

chore: added eslint ignore exception

4bf7005

style: temp red border usage around checkbox

04a86a8

chore: revert step1formerrorheader messages

de6ec46

shindigira changed the title ~~[Update] Complete Your User Profile - Field Inputs - Focus Styling(Error), Checkbox Group Focus Dotted Line~~ [Update] Complete Your User Profile - Field Inputs - Focus Styling(Error/Warning/Success), Checkbox Group Focus Dotted Line Jan 23, 2024

shindigira added 2 commits January 24, 2024 13:33

Merge branch 'main' of github.com:cfpb/sbl-frontend into 85-part-2

7b6e206

feat: Updated DSR with Checkbox status stylings

e447867

shindigira changed the title ~~[Update] Complete Your User Profile - Field Inputs - Focus Styling(Error/Warning/Success), Checkbox Group Focus Dotted Line~~ [Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update Jan 24, 2024

shindigira requested a review from natalia-fitzgerald January 25, 2024 04:01

Merge branch 'main' of github.com:cfpb/sbl-frontend into 85-part-2

201a18b

natalia-fitzgerald requested changes Jan 25, 2024

View reviewed changes

billhimmelsbach requested changes Jan 26, 2024

View reviewed changes

fix: Clear Form no longer unmounts Associated Financial Data

97f5545

shindigira requested a review from billhimmelsbach January 26, 2024 01:54

billhimmelsbach requested changes Jan 26, 2024

View reviewed changes

src/pages/ProfileForm/Step1Form/Step1Form.tsx Outdated Show resolved Hide resolved

shindigira added 3 commits January 25, 2024 21:01

chore: removed comment

b462a63

style(fix): added -15px negative margin -- 45px below TextIntroduction

6694cb7

Revert "style(fix): added -15px negative margin -- 45px below TextInt…

ce661c0

…roduction" This reverts commit 6694cb7.

billhimmelsbach approved these changes Jan 26, 2024

View reviewed changes

billhimmelsbach requested a review from natalia-fitzgerald January 26, 2024 02:39

natalia-fitzgerald approved these changes Jan 26, 2024

View reviewed changes

shindigira merged commit e667aa9 into main Jan 26, 2024

billhimmelsbach deleted the 85-part-2 branch May 31, 2024 14:45

[Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update #169

[Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update #169

Uh oh!

Conversation

shindigira commented Jan 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Local Dev Testing

Potential Follow-Up PRs

Screenshots

Uh oh!

natalia-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

shindigira commented Jan 18, 2024

Uh oh!

natalia-fitzgerald commented Jan 18, 2024

Uh oh!

shindigira commented Jan 18, 2024

Uh oh!

natalia-fitzgerald commented Jan 19, 2024

Uh oh!

shindigira commented Jan 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

natalia-fitzgerald commented Jan 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Inconsistency between Figma content and deployed page content

Uh oh!

shindigira commented Jan 22, 2024

Inconsistency between Figma content and deployed page content

Uh oh!

shindigira commented Jan 23, 2024

Uh oh!

shindigira commented Jan 24, 2024

Uh oh!

natalia-fitzgerald commented Jan 25, 2024

Uh oh!

shindigira commented Jan 25, 2024

Uh oh!

billhimmelsbach commented Jan 25, 2024

Uh oh!

natalia-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

billhimmelsbach left a comment

Choose a reason for hiding this comment

Uh oh!

shindigira commented Jan 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

billhimmelsbach left a comment

Choose a reason for hiding this comment

Uh oh!

natalia-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shindigira commented Jan 12, 2024 •

edited

Loading

shindigira commented Jan 19, 2024 •

edited

Loading

natalia-fitzgerald commented Jan 20, 2024 •

edited

Loading

shindigira commented Jan 26, 2024 •

edited

Loading