Update Modal design: Reduce the padding on mobile to make content more readable

[babsdenney]

Description

Update the modal component in Figma to reduce the space on the sides of the modal on mobile.

Details

We got this message in Slack about buttons that kind of pointed out some issues with the Modal on mobile. The modals have an excessive amount of unused space on the sides causing the important content in the modal to be squished and unreadable.

We talked this over with @humancompanion-usds and have some direction on design options.

1. Change line height for the buttons after the typography changes have settled (ticket #2963 )
2. Experiment with the padding in the content and the button but keep the title the same
3. Experiment with the x (close button) padding.

Overall, we need to make modals more readable on mobile.

• Slack thread with visual of buttons being squished
• VA Modals
• USWDS Modals
• Figma Modals

Tasks

• [ ] Update designs for component in Figma
• [ ] Review designs with PO and/or other DST designers
• [ ] Review designs with an accessibility specialist
• [ ] Review designs with DST members
• [ ] Address any comments from reviews, if necessary
• [ ] Comment on this ticket with any accessibility considerations engineers may need to know
• [ ] Comment on this ticket with content specifications (e.g. labels and error messages)
• [ ] Comment on this ticket with a link to the designs and post in DST Slack channel

Acceptance Criteria

Styles & Variables/Token

• [ ] All components should be connected to VADS Component Library styles & Variables
• [ ] All components should be connected to the proper style or variable/token
  • [ ] Colors: connected to the correct color token (not primitive!) - can be found in local variables library
  • [ ] Typography: connected to the correct text style - under local styles
  • [ ] Spacing: connected to the correct spacing token or primitive
  • [ ] Icons: connected to correct icon - can be found on foundation page

Auto layout

• [ ] Components should be as reactive as possible. Most, if not all, components should be able to be resize for either mobile, tablet, or desktop sizes
• [ ] The correct spacing should be applied to auto layout

Properties

[!NOTE]

Not all components need every property. It will differ component to component

• [ ] Variants: Should be used when the component has several states i.e primary, secondary, error
• [ ] Boolean: Should be used if the component has a part that does not always need to be shown i.e icons, nested components and mobile view
• [ ] Text: Should be used when the test on a component needs to be changed. There are some exceptions to this if the component has several variants that need to have different/specific text. When you change the text on the parent component it will change all of the variants
• [ ] Instance Swap
  • [ ] Should be used if there is a part of the component that needs to be switched out but nothing else needs to change i.e. icons Color contrast (Pro Tip: The plugin “Contrast” can help with this.)
• [ ] Test as a DS library user
  • [ ] Connect your Figma design file to the DS library found in the Assets panel, Team Library (open book icon)
  • [ ] After connecting to the library, use the Assets panel to view all components
  • [ ] Does the component naming make sense and follow storybook?
  • [ ] Try to break the component! Test on asset NOT parent component
  • [ ] Expand/shrink the asset and put into containers
  • [ ] change body text and/or header from a sentence to paragraph
  • [ ] make sure text wraps correctly
  • [ ] the component should expand or shrink with text
  • [ ] Test all combinations of properties

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @babsdenney @danbrady @LWWright7

[humancompanion-usds]

Yay! Thanks for picking up this work.