Additional updates to list content

[nataliafitzgerald]

Additional updates to list content as detailed here: https://github.com/cfpb/design-manual/issues/357#issuecomment-368171348

Additions

• Nested lists are now within each of the main list sections
• Specs for space above, below, and between list items is more explicit

Removals

-

Changes

-

Testing

-

Review

• @marteki
• @Scotchester

Preview this PR without the whitespace changes

Screenshots

Notes

-

Todos

-

Checklist

• [ ] Changes are limited to a single goal (no scope creep)
• [ ] Code can be automatically merged (no conflicts)
• [ ] Code follows the standards laid out in the front end playbook
• [ ] Passes all existing automated tests
• [ ] New functions include new tests
• [ ] New functions are documented (with a description, list of inputs, and expected output)
• [ ] Placeholder code is flagged
• [ ] Visually tested in supported browsers and devices
• [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[Scotchester]

Sorry to nitpick, but I still think we need a description of how top-level lists (both bulleted and numbered) should be aligned horizontally. Here's a stab at the language:

Bulleted list (new bullet under its "Default" heading):

• Bullets should align flush with the left margin of the column of text they're in.

Numbered list (modified final bullet under its "Default" heading):

• Numbers are right aligned to their associated period, which sits just far enough off the left margin that all single-digit numbers will fit inside the left margin.

[nataliafitzgerald]

@Scotchester I tried out the text you proposed.

Bulleted list (default)

Numbered list (default)

The numbered list text is pretty dense (see below). I tried a shortened option (also below).

Full text

Shortened text

[Scotchester]

I think the shortened one works. This is super minor, but I would lastly suggest removing the parentheses and separating it from the previous statement with a semicolon.

I'm a little bit curious as to why the nested bullets seem to be aligned too far left in your screenshots. What browser are those from?

[nataliafitzgerald]

@Scotchester - Here's the latest tweak:

I'm going to go ahead and push these changes to the branch and then I'll update the screenshot (above) of the full page. I have been working in Google Chrome. Where are you noticing an alignment issue?

[nataliafitzgerald]

@Scotchester I updated the screenshot at the top of this issue. The screenshot is from Google Chrome.

[Scotchester]

I don't know what changed, but in the original screenshot, the nested bullets looked like they were too far to the left. They seem fine now.

[nataliafitzgerald]

Thanks for your approval @Scotchester and @marteki. I will go ahead and merge.