Modals page is broken

[marteki]

Placing this here so I don't forget about it, since I can't address it right now: the Style section of the Modals page is broken, and isn't displaying hexadecimal color codes.

[nataliafitzgerald]

@marteki @anselmbradford is working on bringing this pattern into Capital Framework and we too noticed that the page is in need of some attention. Unfortunately we don't have the bandwidth to take this on right now.

@anselmbradford - In building this pattern could you document the specs here so that someone can easily pick up this task when they have the time?

[anselmbradford]

What should the space between the modal and left/right edge of the window be? I'm using 5% for the top, left, and right. Which means it's narrower when the page is small, and wider when the page is large:

[nataliafitzgerald]

@anselmbradford

• For large screen widths we should be sure that we aren't exceeding 670px for the text block. This is our max width for paragraph text. It looks like the text in the above example is expanding to the full width of the box.
• What padding are you using for the small screen view? Our padding for wells at small screen widths is 15px left and right. It seems like we should use that here too.
• It doesn't look like Avenir Next is loading in the above examples.

I believe @kurzn worked on the development of this pattern. @kurzn - Can you take a look and provide feedback?

[nataliafitzgerald]

Also, it looks like there are some design specs on the design manual page: https://cfpb.github.io/design-manual/page-components/modals.html

If the max width is 630px for large screens that would mean the text block is 570px and there is 30px of padding on the left and right for a total of 630px width. Makes sense.

[anselmbradford]

Heh, yeah, I realized the specs had them after all, sorry about that!

[marteki]

Came across this old, still open bug report I made. It's been fixed! 🎉