Styling: Checkbox States (Error/Warning/Success) #1889

shindigira · 2024-01-22T17:03:48Z

Changes

Carried over the error/warning/success state styling from TextInput to Checkboxes
Updated the Checkbox stories to show the new styling

How to Test

Test Link: https://deploy-preview-1889--cfpb-design-system.netlify.app/
Code inspect form-fields.less and ensure no unintended styling changes affect other components
**Navigate to the Checkboxes story section and view the new styles

Screenshot(s)

Added states

Before	After

Changes: - Carried over the error/warning/success state styling from TextInput to Checkboxes - Updated the Checkbox stories to show the new styling

natalia-fitzgerald · 2024-01-22T17:06:50Z

@shindigira
Please present to match the Text inputs page. Sections will be "Status" and "Validation status"

netlify · 2024-01-22T17:07:22Z

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	`dafb2e0`
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/65ae9ff68917040008b6c93d
😎 Deploy Preview	https://deploy-preview-1889--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-01-22T17:12:11Z

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	`2fb4017`
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/65aea07ce4a18a0008f83b22
😎 Deploy Preview	https://deploy-preview-1889--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-01-22T17:16:53Z

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	`bcd2595`
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/65afe9985a5d8f0007d0a9be
😎 Deploy Preview	https://deploy-preview-1889--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

natalia-fitzgerald

@shindigira
I would like to show only the default states for Success, Warning, and Error.

Change "Variation status" (h3) to "Validation status" (h4)
Change "Validation status" to an H4 section
Show only Default state for Success, Warning, Error
- Delete Focus state from live code example
Define success Default as Green (currently shows the Default checkbox style - Gray)
For text inputs we use outline to accomplish the 1px border. It looks like in this implementation we're using box shadow. Should we be consistent?

shindigira · 2024-01-22T17:19:23Z

@shindigira Please present to match the Text inputs page. Sections will be "Status" and "Validation status"

Updated as such! Try the preview link now.

shindigira · 2024-01-22T17:25:23Z

@shindigira I would like to show only the default states for Success, Warning, and Error.

Change "Variation status" (h3) to "Validation status" (h4)

Change "Validation status" to an H4 section

Show only Default state for Success, Warning, Error

Delete Focus state from live code example

Define success Default as Green (currently shows the Default checkbox style - Gray)

For text inputs we use outline to accomplish the 1px border. It looks like in this implementation we're using box shadow. Should we be consistent?

Please check again. The preview link's content was stale; the focus content should not be there.

I am keeping the standard 1px border and 1px box-shadow; same as in TextInputs.

natalia-fitzgerald

@shindigira
I show that Text inputs uses outline instead of box shadow.

It looks like there was an inadvertent change to the "Standard checkbox with helper text" live code example. Instead of "Checkbox label (This is optional helper text)" it is showing "Success". Can you correct?

In current PR:

Currently live on page (correct):

shindigira · 2024-01-22T18:20:10Z

@shindigira I show that Text inputs uses outline instead of box shadow.
It looks like there was an inadvertent change to the "Standard checkbox with helper text" live code example. Instead of "Checkbox label (This is optional helper text)" it is showing "Success". Can you correct?

Thank you for catching those issues. I have corrected the issues.

natalia-fitzgerald

@shindigira
Is it possible to define hover+focus?

Success: Green
Warning: Gold
Error: Red

Currently hover is still Pacific which is what I would expect since we're handling that change separately. But can we define the hover+focus as part of this change (in the image below the solid outline would be Gold)?

shindigira · 2024-01-22T19:43:30Z

@shindigira Is it possible to define hover+focus?

Success: Green

Warning: Gold

Error: Red

Currently hover is still Pacific which is what I would expect since we're handling that change separately. But can we define the hover+focus as part of this change (in the image below the solid outline would be Gold)?

Resolved, please try the preview link again.

natalia-fitzgerald

@shindigira Nice work! This looks good to me.

billhimmelsbach

Great!

anselmbradford

LGTM 👍 !

Styling: Checkbox States (Error/Warning/Success)

dafb2e0

Changes: - Carried over the error/warning/success state styling from TextInput to Checkboxes - Updated the Checkbox stories to show the new styling

shindigira requested review from anselmbradford, billhimmelsbach and natalia-fitzgerald January 22, 2024 17:03

fix: updated documentation variable name

2fb4017

fix: fixed variable name

8926df8

documentation: updated validation status

a85a117

natalia-fitzgerald requested changes Jan 22, 2024

View reviewed changes

shindigira requested a review from natalia-fitzgerald January 22, 2024 17:27

natalia-fitzgerald requested changes Jan 22, 2024

View reviewed changes

shindigira added 2 commits January 22, 2024 13:13

fix: reverted checkbox helper text

008495d

style: updated the Checkbox states to use outline

44261d0

style: hover + focus styling checkboxes

bd07aba

shindigira requested a review from natalia-fitzgerald January 22, 2024 19:06

natalia-fitzgerald requested changes Jan 22, 2024

View reviewed changes

style: checkbox -- hover + focus -- state style

4c04875

shindigira requested a review from natalia-fitzgerald January 22, 2024 19:42

natalia-fitzgerald approved these changes Jan 22, 2024

View reviewed changes

billhimmelsbach approved these changes Jan 22, 2024

View reviewed changes

fix: resolved merge conflict

bcd2595

anselmbradford approved these changes Jan 23, 2024

View reviewed changes

shindigira mentioned this pull request Jan 23, 2024

Checkbox Sidemenu Updated, Checkbox States (Error/Warning/Success) cfpb/design-system-react#287

Merged

shindigira merged commit b6899c3 into main Jan 23, 2024
7 of 8 checks passed

shindigira deleted the 1883-checkbox-default-status-boundaries branch January 23, 2024 18:03

billhimmelsbach added the lerna-changelog/enhancement lerna label. DO NOT MODIFY label Jan 23, 2024

shindigira mentioned this pull request Jan 23, 2024

Package Update: CFPB Design System - 0.35.0 cfpb/design-system-react#289

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styling: Checkbox States (Error/Warning/Success) #1889

Styling: Checkbox States (Error/Warning/Success) #1889

shindigira commented Jan 22, 2024 •

edited

Loading

natalia-fitzgerald commented Jan 22, 2024

netlify bot commented Jan 22, 2024

netlify bot commented Jan 22, 2024

netlify bot commented Jan 22, 2024 •

edited

Loading

natalia-fitzgerald left a comment •

edited

Loading

shindigira commented Jan 22, 2024

shindigira commented Jan 22, 2024 •

edited

Loading

natalia-fitzgerald left a comment •

edited

Loading

shindigira commented Jan 22, 2024

natalia-fitzgerald left a comment •

edited

Loading

shindigira commented Jan 22, 2024

natalia-fitzgerald left a comment

billhimmelsbach left a comment

anselmbradford left a comment

Styling: Checkbox States (Error/Warning/Success) #1889

Styling: Checkbox States (Error/Warning/Success) #1889

Conversation

shindigira commented Jan 22, 2024 • edited Loading

Changes

How to Test

Screenshot(s)

natalia-fitzgerald commented Jan 22, 2024

netlify bot commented Jan 22, 2024

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

netlify bot commented Jan 22, 2024

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

netlify bot commented Jan 22, 2024 • edited Loading

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

natalia-fitzgerald left a comment • edited Loading

Choose a reason for hiding this comment

shindigira commented Jan 22, 2024

shindigira commented Jan 22, 2024 • edited Loading

natalia-fitzgerald left a comment • edited Loading

Choose a reason for hiding this comment

shindigira commented Jan 22, 2024

natalia-fitzgerald left a comment • edited Loading

Choose a reason for hiding this comment

shindigira commented Jan 22, 2024

natalia-fitzgerald left a comment

Choose a reason for hiding this comment

billhimmelsbach left a comment

Choose a reason for hiding this comment

anselmbradford left a comment

Choose a reason for hiding this comment

shindigira commented Jan 22, 2024 •

edited

Loading

netlify bot commented Jan 22, 2024 •

edited

Loading

natalia-fitzgerald left a comment •

edited

Loading

shindigira commented Jan 22, 2024 •

edited

Loading

natalia-fitzgerald left a comment •

edited

Loading

natalia-fitzgerald left a comment •

edited

Loading