No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

 




Message


Message is a component that displays some information to the user and provide actions to interact with it.


Zoning


TODO : FIGMA TO LINK


Style


Figma is not configured


Text


The text should adapt to the surrounding layout. Depending on the context, if the text is too long it should automatically wrap to the next line.
It's still advise to keep the text short and concise.


Variations


Default


All good
This component is well configured
Learn more
Good Default
Something went wrong
There is an issue with the component configuration
Learn more
Error Default
Type incompatibilities
Maybe resolve this issue before doing anything else
Learn more
Bindings Default
Auto mapping
Some fields has been auto mapped
Learn more
Default


With optional props


This component is well configured
Learn moreBeta
There is an issue with the component configuration
Maybe resolve this issue before doing anything else
Auto mapping
Some fields has been auto mapped


Interactions


The message can have :


    

  • A link to go to the documentation or a specific page
    • 

  • A button linked to the message to allow the user to go further in the message resolution
    • 



Content


Title:


  • The title should contains 2 to 3 word maximum
  • Ideally it should stay in 1 line. Users must be able to zoom in a lot on the text size without
losing content, so the title should be able to reflow nearly at will.
  • Title is a short description of the content (error, warning, info …)


Text:


  • The content should be display on maximum 5 lines
  • Content is a short description of the event which have occured on the page (error, warning, info
…)
  • It should explain briefly the type of error/info etc. contained in the collection


Main action :


  • Main action possible could be "see/select"
  • Main action can also be "delete/dismiss/apply" relying on the context


 Do
  • Titles should be kept short, but to be accessible we understand they can reflow.
  • Description text should also be kept short, but should also reflow at will.
  • Only one dock link per message.
  • Only one main action per message.
 Don't
  • Avoid negative words. For example, say "You need to have enough rights to publish pipelines"
instead of "You don't have enough rights to publish pipelines".


Usage


Information Title
Maybe resolve this issue before doing anything else
Learn more


NameDescriptionDefaultControl 
action
ButtonTertiaryPropsType<"S">
-
RAW
action : {
  • children : "See"
  • onClick : ()=>{}
}
additionalActions
Omit<DropdownPropsType, "children">
-
RAW
additionalActions : {
  • aria-label : "Additional actions"
    • items : [...] 3 items
}
title
-
description*
string
-
link
LinkProps
-
RAW
link : {
  • href : "https://talend.com"
  • children : "Learn more"
}
borderClassname*
string
-
icon
"key""filter""code""table""application""document""group""copy"
-
children
optional
-
-


Message Collection


MessageCollection is used for multiple messages about the same purpose


Variations


Default


Success
Try resolving it this way or consult the documentation for more info.
Error
(n) input fields have been automatically mapped to an output.
Warning
Try resolving it this way or consult the documentation for more info.
Information
(n) input fields have been automatically mapped to an output.


With optional props


Success
(n) input fields have been automatically mapped to an output.
Warning
Try resolving it this way or consult the documentation for more info.


Interactions


The message can have :


    

  • A dropdown button to access more actions
    • 



Content


Title:


  • The title should contains 2 to 3 words maximum
  • Ideally it should stay in 1 line. Users must be able to zoom in a lot on the text size without
losing content, so the title should be able to reflow nearly at will.
  • Title is a short description of the content (error, warning, info …)


Text:


  • The content should be display on maximum 5 lines
  • Content is a short description of the event which have occured on the page (error, warning, info
…)
  • It should explain briefly the type of error/info etc. contains in the collection


Action :


  • Main action possible could be "See all" or "Select all"
  • Other actions can be delete/dismiss/select all/see all


 Do
  • Titles should be kept short, but to be accessible we understand they can reflow.
  • Description text should also be kept short, but should also reflow at will.
  • A main action is required per message collection.
 Don't
  • Avoid negative words. For example, say "You need to have enough rights to publish pipelines"
instead of "You don't have enough rights to publish pipelines".
  • A link to the documentation cannot be provided on this component


Usage


Information Title
Maybe resolve this issue before doing anything else


NameDescriptionDefaultControl 
action
ButtonTertiaryPropsType<"S">
-
RAW
action : {
  • children : "See"
  • onClick : ()=>{}
}
title
-
description*
string
-
additionalActions
Omit<DropdownPropsType, "children">
-
RAW
additionalActions : {
  • aria-label : "Additional actions"
    • items : [...] 3 items
}
link
LinkProps
-
borderClassname*
string
-
icon
"key""filter""code""table""application""document""group""copy"
-


Accessibility


    

  • Press Tab to focus on the the different elements
    •