Checkbox Sidemenu Updated, Checkbox States (Error/Warning/Success)

[shindigira]

Closes #286
Closes #285

Changes

• Checkbox - Storybook Sidemenu Update
• Styling: Checkbox States (Error/Warning/Success)

Screenshots (Updated 01/28/2024)

Sidemenu Updated

Before	After

New Checkbox Status

[netlify]

✅ Deploy Preview for cfpb-design-system-react ready!

Name	Link
🔨 Latest commit	4a3845c
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system-react/deploys/65b94438989f6c00086c9ec1
😎 Deploy Preview	https://deploy-preview-287--cfpb-design-system-react.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
This is looking great! I have a few structural changes and then we should be good to go.

As we discussed I'd like to group this component as follows:

Sidebar menu:

• Checkboxes
  • Checkbox
    • Overview
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/selected
    • Success
    • Warning
    • Error
    • With helper text
  • Large target area
    • Overview
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/selected
    • With helper text

Additional changes:


• Change "Default" to "Enabled" for the base state
• In helper text examples change the label text to "Label"

[shindigira]

@shindigira This is looking great! I have a few structural changes and then we should be good to go.

As we discussed I'd like to group this component as follows:

Sidebar menu:

• Checkboxes

  • Checkbox

    • Overview
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/selected
    • Success
    • Warning
    • Error
    • With helper text

  • Large target area

    • Overview
    • Enabled
    • Hover
    • Focus
    • Selected
    • Disabled
    • Disabled/selected
    • With helper text

Additional changes:


• Change "Default" to "Enabled" for the base state
• In helper text examples change the label text to "Label"

Updated. Please review and provide feedback.

[natalia-fitzgerald]

@shindigira
Nice work! Just a few details and we should be good to go:

• Change "Default" to "Checkbox"
• Is it possible for the page to read "Large target area checkbox" and still have the side menu read "Large target area"? This would match the DS.

[shindigira]

• Large target area checkbox

@natalia-fitzgerald

I changed the 'Default' to Checkbox and pushed it up.

For the last part, it seems Storybook links the two. I'd have to dig-in and see if there is a workaround.

[shindigira]

• Is it possible for the page to read "Large target area checkbox" and still have the side menu read "Large target area"? This would match the DS.

@natalia-fitzgerald As discussed, we decided not to pursue this at the moment.

[shindigira]

@meissadia When reviewing, will need special attention to this autodocs change.

[natalia-fitzgerald]

@shindigira - Great work! This looks good and move to verified.

[meissadia]

Awesome job finding ways to reconfigure in order to achieve the custom Overviews!