PaackEng / paack-ui / UI.Text

UI.Text is a component to specify how text to display text. It applies font size, weight, letter-spacing, and color.

We discourage the usage of Element.text and recommend you to pursuie always using this one instead.

A text can be created and rendered as in the following pipeline:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    |> Text.body1
    |> Text.withColor
        (Palette.color tonePrimary brightnessDarkest)
    |> Text.withOverflow ellipsize
    |> Text.renderElement renderConfig
    |> Element.el [ Element.width (px 200) ]

Note: Don't forget to import "Fira Sans" family, with the weights: 400, 500, 600 and 700.

Building


type alias Text =
UI.Internal.Text.Text

The Text type is used for describing the component for later rendering.

Body text

body1 : String -> Text

The biggest size for paragraphs.

body2 : String -> Text

The smallest size for paragraphs.

Heading

heading1 : String -> Text

The biggest title size.

heading2 : String -> Text

A size for titles.

heading3 : String -> Text

A size for titles.

heading4 : String -> Text

A size for titles.

heading5 : String -> Text

A size for titles.

heading6 : String -> Text

A size for titles.

Subtitle

subtitle1 : String -> Text

The biggest size for subtitles.

subtitle2 : String -> Text

The smallest size for subtitles.

Other

caption : String -> Text

For writing captions.

overline : String -> Text

For writing labels.

Combine

multiline : (String -> Text) -> List String -> Text

Combines lines of text with the same styling.

[ "First line of text."
, "Second line."
, "Last line."
]
    |> Text.multiline Text.body1
    |> Text.renderElement renderConfig

combination : List Text -> Text

Combines lines of text with the different styling.

[ Text.heading6 "First line of text."
, Text.body1 "Second line."
, Text.caption "Last line."
]
    |> Text.combination
    |> Text.renderElement renderConfig

Color

withColor : UI.Palette.Color -> Text -> Text

Text colors can variate to varite context or contrast with a background. See Palette.color and Palette.setContrasting for how to compose a valid color value.

"Action completed with success!"
    |> Text.body1
    |> Text.withColor
        (Palette.color Palette.toneSuccess Palette.brightnessMiddle)
    |> Text.renderElement renderConfig

Overflow

withOverflow : UI.Internal.Text.TextOverflow -> Text -> Text

Determines how the text overflow is handled.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    |> Text.heading3
    |> Text.withOverflow ellipsize
    |> Text.renderElement renderConfig
    |> Element.el [ Element.width (px 42) ]

ellipsize : UI.Internal.Text.TextOverflow

Truncates the text and adds the ellipsis.

ellipsizeWithTooltip : UI.Internal.Text.TextOverflow

Truncates the text, adds the ellipsis and displays a tooltip with the whole content.

wrap : UI.Internal.Text.TextOverflow

Lets the text break lines to prevent overflow. Default behavior.

Rendering

renderElement : UI.RenderConfig.RenderConfig -> Text -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.