NoRedInk/noredink-ui/13.1.1

NOTE: the latest version is 35.9.3

Nri.Ui.Text.V5

Post-release patches

  • adjusts link styles

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

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

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

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.