monday-ui-react-core/src/components/Text/__stories__/Text.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import { Tip } from "vibe-storybook-components";
import Text from "../Text";
import Flex from "../../Flex/Flex";
import Button from "../../Button/Button";
import Icon from "../../Icon/Icon";
import { Link } from "../../Icon/Icons";
import {
  EDITABLE_HEADING,
  HEADING,
  LINK
} from "../../../storybook/components/related-components/component-description-map";
import { TipHeading, TipLink } from "./Text.stories.helpers";
import * as TextStories from "./Text.stories";
import styles from "./Text.stories.module.scss";

<Meta of={TextStories} />

# Text

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

The text component serves as a wrapper for applying typography styles to the text it contains.

<Canvas of={TextStories.Overview} />

<TipHeading />

## Props

<PropsTable />

## Usage

<UsageGuidelines guidelines={["Use it to display text formed from a single sentence, or multiple sentences."]} />
<UsageGuidelines
  guidelines={[
    "Use Text3 for short caption text, label or as explanation text in menus. In any other case, use Text1 or Text 2."
  ]}
/>

## Variants

### Sizes and weights

Text component comes in three sizes: text1 (16px), text2 (14px), text3 (12px) , and in three weights: bold (700), medium (600) and normal (400)

<Canvas of={TextStories.SizesAndWeights} />

### Colors

Text component comes in four colors: primary, secondary, on-primary and on-inverted

<Canvas of={TextStories.Colors} />

### Overflow

Our Text component supports overflow state.
When the text is longer than its container and the ellipsis flag is on, the end of the text will be truncated and will display "..."

We support two kinds of ellipsis: single-line ellipsis with a tooltip displayed in hover or ellipsis after multiple lines. You can see examples for both use cases below.

<Canvas of={TextStories.Overflow} />

<Tip>Ellipsis prop is true by default. If you wish to turn off ellipsis you can change the prop to false.</Tip>

### Paragraph

To use the Text component for a paragraph, utilize the element prop with value of `"p"`.
This changes the text wrapper element to `p`, enabling the creation of paragraph-style text without ellipsis by default.
The paragraph will receive default top and bottom margins based on browser settings for `p` elements.
Customize ellipsis behavior using the "ellipsis" prop or override default margins with a custom class name.

<Canvas of={TextStories.Paragraph} />

### Links

A Text component with a link skin can be used to create a link within running text that redirects to an external webpage, as demonstrated in the following example.

<Canvas of={TextStories.LinksInsideRunningText} />

<TipLink />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <Text type={Text.types.TEXT1} element="span">
            The quick brown fox jumps over the{" "}
            <Text type={Text.types.TEXT1} weight={Text.weights.BOLD} element="span">
              lazy dog
            </Text>
          </Text>
        ),
        description: "You can combine two font weights in one sentence to create an emphasis."
      },
      negative: {
        component: (
          <Text type={Text.types.TEXT2} element="span">
            The quick brown fox jumps over the{" "}
            <Text type={Text.types.TEXT1} element="span">
              lazy dog
            </Text>
          </Text>
        ),
        description: "Don't use more then one font size in a sentence."
      }
    },
    {
      positive: {
        component: (
          <Flex
            style={{ width: "70%" }}
            direction={Flex.directions.COLUMN}
            justify={Flex.justify.CENTER}
            align={Flex.align.CENTER}
            gap={Flex.gaps.SMALL}
          >
            <Text maxLines={3}>
              monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work
              and streamline sales activities from start to finish. Explore monday sales CRM templates
            </Text>
            <Button kind={Button.kinds.TERTIARY}>Read more</Button>
          </Flex>
        ),
        description: "If ellipses are used in a paragraph, always use a CTA to reveal more information."
      },
      negative: {
        component: (
          <Text maxLines={3} style={{ width: "70%" }}>
            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and
            streamline sales activities from start to finish. Explore monday sales CRM templates
          </Text>
        ),
        description: "Don't use ellipsis without providing a way for the user to read the full text."
      }
    },
    {
      positive: {
        component: (
          <Flex
            direction={Flex.directions.COLUMN}
            align={Flex.align.START}
            gap={Flex.gaps.XS}
            className={styles.textBoxContainer}
          >
            <Flex style={{ width: "90%" }} gap={Flex.gaps.SMALL}>
              <Icon icon={Link} />
              <Text color="secondary" maxLines={3} type={Text.types.TEXT3}>
                Section title in text3
              </Text>
            </Flex>
            <Text className={styles.textBoxContent} maxLines={3} type={Text.types.TEXT1}>
              Short info explanation about the feature will come here.
            </Text>
          </Flex>
        ),
        description: "Use text3 for section titles, short captions, and labels."
      },
      negative: {
        component: (
          <Text maxLines={5} type={Text.types.TEXT3} style={{ width: "70%" }}>
            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and
            streamline sales activities from start to finish. Explore monday sales CRM templates
          </Text>
        ),
        description: "Don't use text3 as body text."
      }
    },
    {
      positive: {
        component: (
          <Flex
            direction={Flex.directions.COLUMN}
            align={Flex.align.START}
            gap={Flex.gaps.XS}
            className={styles.textBoxContainer}
          >
            <Flex style={{ width: "90%" }} gap={Flex.gaps.SMALL}>
              <Icon icon={Link} />
              <Text color="secondary" maxLines={3} type={Text.types.TEXT3}>
                Section title in text3
              </Text>
            </Flex>
            <Text className={styles.textBoxContent} maxLines={3} type={Text.types.TEXT1}>
              Short info explanation about the feature will come here.
            </Text>
          </Flex>
        ),
        description: "Use only normal and medium weights for text3."
      },
      negative: {
        component: (
          <Text maxLines={5} weight={Text.weights.BOLD} type={Text.types.TEXT3} style={{ width: "70%" }}>
            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and
            streamline sales activities from start to finish. Explore monday sales CRM templates
          </Text>
        ),
        description: "Don't use bold weight for text3, to ensure optimal readability."
      }
    }
  ]}
/>

## Related components

<RelatedComponents componentsNames={[HEADING, EDITABLE_HEADING, LINK]} />