Changes from V3:
statusRole
alertDialogRole
Patch changes:
notMobileCss
, mobileCss
, quizEngineMobileCss
hideIconForMobile
and hideIconFor
Shadows
Content
moduleChanges from V2:
- adds helpers: `custom`,`css`,`icon`,`testId`,`id`
somethingWentWrong : String -> Accessibility.Styled.Html msg
Shows an appropriate error message for when something unhandled happened.
view maybeDetailedErrorMessage =
viewMaybe Message.somethingWentWrong maybeDetailedErrorMessage
view : List (Attribute msg) -> Accessibility.Styled.Html msg
view =
Message.view
[ Message.tip
, Message.markdown "Don't tip too much, or your waitress will **fall over**!"
]
Construct an Attribute
using a helper like onDismiss
or alert
.
icon : Nri.Ui.Svg.V1.Svg -> Attribute msg
custom : List (Accessibility.Styled.Attribute Basics.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.
testId : String -> Attribute msg
id : String -> Attribute msg
hideIconForMobile : Attribute msg
hideIconFor : Css.Media.MediaQuery -> Attribute msg
css : List Css.Style -> Attribute msg
notMobileCss : List Css.Style -> Attribute msg
Equivalent to:
Message.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
mobileCss : List Css.Style -> Attribute msg
Equivalent to:
Message.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
quizEngineMobileCss : List Css.Style -> Attribute msg
Equivalent to:
Message.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
tiny : Attribute msg
Shows a tiny alert message. We commonly use these for validation errors and small hints to users.
Message.view [ Message.tiny ]
This is the default size for a Message.
large : Attribute msg
Shows a large alert or callout message. We commonly use these for highlighted tips, instructions, or asides in page copy.
Message.view [ Message.large ]
banner : Attribute msg
Shows a banner alert message. This is even more prominent than Message.large
.
We commonly use these for flash messages at the top of pages.
Message.view [ Message.banner ]
paragraph : String -> Attribute msg
Provide a plain-text string that will be put into a paragraph tag, with the default margin removed.
plaintext : String -> Attribute msg
Provide a plain-text string.
markdown : String -> Attribute msg
Provide a string that will be rendered as markdown.
html : List (Accessibility.Styled.Html msg) -> Attribute msg
Provide a list of custom HTML.
httpError : Http.Error -> Attribute msg
Provide an HTTP error, which will be translated to user-friendly text.
codeDetails : String -> Attribute msg
Details for Engineers
Will be rendered in a closed details box
tip : Attribute msg
This is the default theme for a Message.
error : Attribute msg
alert : Attribute msg
success : Attribute msg
customTheme : { color : Css.Color, backgroundColor : Css.Color } -> Attribute msg
alertRole : Attribute msg
Use this attribute when a user's immediate attention on the Message is required.
For example, use this attribute when:
- An invalid value was entered into a form field
- The user's login session is about to expire
- The connection to the server was lost, local changes will not be saved
-- Excerpted from Using the alert role MDN docs
statusRole : Attribute msg
Use this attribute when a user's immediate attention on the Message is NOT required.
This means that a status
Message has a lower priority than an alert
Message.
onDismiss : msg -> Attribute msg
Adds a dismiss ("X" icon) to a message which will produce the given msg
when clicked.