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.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
The Text component can be used to apply typography styles in a simple way, without the need of extra css.
In this documentation you can find:
variant
prop to modify its style instead.tabular
prop when numbers should have a fixed width, such as in tables.Do not use the element
prop because of its appearance, use it to organize the structure of the page.
Do not use color for emphasis as colors are related to states such as error
, success
, disabled
and so on.
Do not use the code
variant for anything other than code snippets.
The content of the text should be written according to the Grafana writing style guide.
The following is the default behaviour and so, it will be applied according to its type.
The Text component is mainly comprised by itself. In occasions, the Text component can have another Text or TextLink component as a child.
If you need more help of how to write in Grafana you can go to our Writer’s Toolkit
<Text color="primary" element="p"> If you need more help of how to write in Grafana you can go to our <TextLink href="https://grafana.com/docs/writers-toolkit/" external> Writer’s Toolkit </TextLink> </Text>
And Forrest Gump said: Life is like a box of chocolates. You never know what you're gonna get.
<Text color="primary" element="p"> And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you're gonna get.</Text> </Text>
The Text component can be truncated. However, the Text component element rendered by default (no value set in element prop) is a <span>
. As this is an inline container that must have a parent, which can be another Text component or not, the truncation must be applied to this parent element.
And Forrest Gump said: Life is like a box of chocolates. You never know what you are gonna get.
<Text color="primary" element="p" truncate> And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you are gonna get.</Text> </Text>
overflow: hidden
, text-overflow: ellipsis
and whiteSpace: 'nowrap'
to it. In this case, the user should wrap up this container with a Tooltip, so when the text is truncated its content can still be seen hovering on the text.<Tooltip content="This is a example of a span element truncated by its parent container"> <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> <Text color="primary" variant="body"> {'This is a example of a span element truncated by its parent container.'} </Text> </div> </Tooltip>
h1
heading per page.h1
has the rank 1 while h6
heading has the rank 6. For example, h1
can be used in the page heading, h2
for the titles of the sections and h3
for the subsections.h2
should not be followed by an h5
but an h2
can follow an h5
if this is closing the previous section. Skipping heading ranks should be avoided where possible as it can be confusing.Name | Description | Default |
---|---|---|
element | Defines what HTML element is defined underneath. "span" by default "h1""h2""h3""h4""h5""h6""p""span" | "span" |
variant | What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed "body""code""h1""h2""h3""h4""h5""h6" | - |
weight | Override the default weight for the used variant "medium""bold""light""regular" | - |
color | Color to use for text "info""link""primary""secondary""success""error""disabled""warning" | - |
truncate | Use to cut the text off with ellipsis if there isn't space to show all of it. On hover shows the rest of the text boolean | - |
italic | If true, show the text as italic. False by default boolean | - |
tabular | If true, numbers will have fixed width, useful for displaying tabular data. False by default boolean | - |
textAlignment | Whether to align the text to left, center or right "right""left""start""end""center""inherit""-moz-initial""initial" | - |