NoRedInk / noredink-ui / Nri.Ui.ClickableText.V4

Patch changes

Changes from V3

About:

ClickableText looks different from Nri.Ui.Button in that it displays without margin or padding. ClickableText has the suave, traditional look of a "link"!

For accessibility purposes, buttons that perform an action on the current page should be HTML <button> elements and are created here with *Button functions. Buttons that take the user to a new page should be HTML <a> elements and are created here with *Link functions.

<button> creators

button : String -> List (Attribute msg) -> Html.Styled.Html msg

Creates a <button> element

<a> creators

link : String -> List (Attribute msg) -> Html.Styled.Html msg

Creates a <a> element

Attributes


type Attribute msg

Sizing

small : Attribute msg

medium : Attribute msg

Medium is the default size.

large : Attribute msg

modal : Attribute msg

For use in Modal footers (adds large and Css.marginTop (Css.px 15))

Appearance

appearsInline : Attribute msg

Specifies whether it should have inline appearance.

Behavior

onClick : msg -> Attribute msg

submit : Attribute msg

By default, buttons have type "button". Use this attribute to change the button type to "submit".

Note: this attribute is not supported by links.

opensModal : Attribute msg

Use this attribute when interacting with the button will launch a modal.

href : String -> Attribute msg

linkSpa : String -> Attribute msg

Use this link for routing within a single page app.

This will make a normal tag, but change the Events.onClick behavior to avoid reloading the page.

See https://github.com/elm-lang/html/issues/110 for details on this implementation.

linkExternal : String -> Attribute msg

linkWithMethod : { method : String, url : String } -> Attribute msg

linkWithTracking : { track : msg, url : String } -> Attribute msg

linkExternalWithTracking : { track : msg, url : String } -> Attribute msg

disabled : Basics.Bool -> Attribute msg

Shows inactive styling.

If a button, this attribute will disable it as you'd expect.

If a link, this attribute will follow the pattern laid out in Scott O'Hara's disabled links article, and essentially make the anchor a disabled placeholder.

Caveat!

The Component Catalog example will NOT work correctly because of https://github.com/elm/browser/issues/34, which describes a problem where "a tags without href generate a navigation event".

In most cases, if you're not using Browser.application, disabled links should work just fine.

Icons

icon : Nri.Ui.Svg.V1.Svg -> Attribute msg

rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg

hideIconForMobile : Attribute msg

Hide the left-side icon for the mobile breakpoint.

hideIconFor : Css.Media.MediaQuery -> Attribute msg

Hide the left-side icon for an arbitrary media query.

Customization

custom : List (Html.Styled.Attribute msg) -> 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 Button styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

id : String -> Attribute msg

CSS

hideTextForMobile : Attribute msg

hideTextFor : Css.Media.MediaQuery -> Attribute msg

css : List Css.Style -> Attribute msg

notMobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableText.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

rightIconCss : List Css.Style -> Attribute msg

Specifies custom styles for the rightIcon