Nri.Ui.Text.V5

Post-release patches

adjusts link styles

Changes from V3:

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

Changes from V4:

Added Attribute for customizing styles

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 Attribute -> List (Html msg) -> Html msg

This is a little note or caption.

mediumBody : List Attribute -> List (Html msg) -> Html msg

This is some medium body copy.

mediumBodyGray : List Attribute -> List (Html msg) -> Html msg

mediumBody, but with a lighter gray color than the default.

smallBody : List Attribute -> List (Html msg) -> Html msg

This is some small body copy.

smallBodyGray : List Attribute -> List (Html msg) -> Html msg

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

User-authored content blocks:

ugMediumBody : List Attribute -> List (Html msg) -> Html msg

User-generated text.

ugSmallBody : List Attribute -> List (Html msg) -> Html msg

User-generated text.

Customizations

type Attribute

noBreak : Attribute

Text with this attribute will never wrap.

css : List Style -> Attribute

Add some custom CSS to the text. If you find yourself using this a lot, please add a stricter attribute to noredink-ui!

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/12.22.0