Nri.Ui.Text.V4

Post-release patches

adjusts link styles

Changes from V3:

Removes Headings (they now live in Nri.Ui.Heading.V2)

Understanding spacing

All text styles have a specific line-height. This is set so that when text in the given style is long enough to wrap, the spacing between wrapped lines looks good.
No text styles have padding.
Heading styles do not have margin. It is up to the caller to add appropriate margin to the layout.
Paragraph styles only have bottom margin, but with :last-child bottom margin set to zero. This bottom margin is set to look good when multiple paragraphs of the same style follow one another.
- If you want content after the paragraph and don't want the margin, put the paragraph in a div so that it will be the last-child, which will get rid of the bottom margin.
User-authored content blocks preserve line breaks and do not have margin.

Headings

Headings now live in Nri.Ui.Heading.V2. Here's a mapping to help with upgrades:

| Nri.Ui.Text.V3    | Nri.Ui.Heading.V2 |
|===================|===================|
| Text.heading      | Heading.h1        |
| Text.tagline      | Heading.h2        |
| Text.subHeading   | Heading.h3        |
| Text.smallHeading | Heading.h4        |

If you look at your new code and go "hmm, those shouldn't be at this level of heading" then you can customize the tag apart from the style using the new API. See the Nri.Ui.Heading.V2 docs for details.

Paragraph styles

caption : List (Html msg) -> Html msg

This is a little note or caption.

mediumBody : List (Html msg) -> Html msg

This is some medium body copy.

smallBody : List (Html msg) -> Html msg

This is some small body copy.

smallBodyGray : List (Html msg) -> Html msg

This is some small body copy but it's gray.

User-authored content blocks:

ugMediumBody : List (Html msg) -> Html msg

User-generated text.

ugSmallBody : List (Html msg) -> Html msg

User-generated text.

Modifying strings to display nicely:

noWidow : String -> String

Eliminate widows (single words on their own line caused by wrapping) by inserting a non-breaking space if there are at least two words.

NoRedInk/noredink-ui/9.0.1