Nri.Ui.Text.V6

Patch changes:

use internal Content module

Changes from V5:

adds helpers: custom, nriDescription,testId,id
instead of view helpers that take HTML, offer attribute helpers supporting plaintext, markdown, and html content
:skull: remove noWidow, which is not used
noBreak now takes a bool

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.
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

You're in the wrong place! Headings live in Nri.Ui.Heading.V3.

Paragraph styles

caption : List (Attribute msg) -> Html msg

This is a little note or caption.

mediumBody : List (Attribute msg) -> Html msg

This is some medium body copy.

mediumBodyGray : List (Attribute msg) -> Html msg

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

smallBody : List (Attribute msg) -> Html msg

This is some small body copy.

smallBodyGray : List (Attribute msg) -> Html msg

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

footnote : List (Attribute msg) -> Html msg

This is a little note or footnote. Please be aware that under the hood, this is only a paragraph tag. If you're actually citing a resource, wrap this in the cite HTML element.

User-authored content blocks:

ugMediumBody : List (Attribute msg) -> Html msg

User-generated text.

ugSmallBody : List (Attribute msg) -> Html msg

User-generated text.

Content

plaintext : String -> Attribute msg

Provide a plain-text string.

markdown : String -> Attribute msg

Provide a string that will be rendered as markdown.

html : List (Html msg) -> Attribute msg

Provide a list of custom HTML.

Customizations

type Attribute msg

noBreak : Bool -> Attribute msg

Pass True to prevent text from ever wrapping.

The default Text behavior is noBreak False, which means content will wrap.

css : List Style -> Attribute msg

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

id : String -> Attribute msg

custom : List (Attribute Never) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

NoRedInk/noredink-ui/22.6.0