TextCompact

import { Divider, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex direction="column" gap={{ column: 4, row: 0 }} width={200}>
        <TextCompact align="start">Start (default)</TextCompact>
        <Divider />
        <TextCompact align="end">End</TextCompact>
        <Divider />
        <TextCompact align="center">Center</TextCompact>
        <Divider />
        <TextCompact align="forceLeft">Force left</TextCompact>
        <Divider />
        <TextCompact align="forceRight">Force right</TextCompact>
      </Flex>
    </Flex>
  );
}

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={{ column: 4, row: 0 }}>
        <TextCompact>
          Some content in a default block element. (default)
        </TextCompact>
        <Box>
          <TextCompact inline>Inline text with the inline prop.</TextCompact>{' '}
          <TextCompact inline>More inline text.</TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={{ column: 3, row: 0 }}>
        <TextCompact color="default">Default</TextCompact>
        <TextCompact color="subtle">Subtle</TextCompact>
        <Box color="inverse" padding={1}>
          <TextCompact color="inverse">Inverse</TextCompact>
        </Box>
        <TextCompact color="disabled">Disabled</TextCompact>
        <TextCompact color="error">Error</TextCompact>
        <TextCompact color="success">Success</TextCompact>
        <TextCompact color="warning">Warning</TextCompact>
        <TextCompact color="recommendation">Recommendation</TextCompact>
        <TextCompact color="link">Link</TextCompact>
        <TextCompact color="shopping">Shopping</TextCompact>
        <Box color="primary" padding={1}>
          <TextCompact color="light">Light</TextCompact>
        </Box>
        <Box color="infoWeak" padding={1}>
          <TextCompact color="dark">Dark</TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex height="100%" justifyContent="center" width="100%">
      <Flex direction="column" gap={{ column: 2, row: 0 }} width={200}>
        <TextCompact>breakWord (default):</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact>
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>normal:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact overflow="normal">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>breakAll:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact overflow="breakAll">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>lineClamp:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact lineClamp={2}>
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

import { Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={2}>
        <TextCompact weight="default">Default</TextCompact>
        <TextCompact weight="emphasis">Emphasis</TextCompact>
        <TextCompact italic>Italic</TextCompact>
      </Flex>
    </Flex>
  );
}

import { Box, Flex, Link, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={2}>
        <Flex alignItems="center" direction="column" gap={2}>
          <TextCompact weight="emphasis">
            Hover over the examples below for a few seconds to see the title
            text:
          </TextCompact>

          <Box borderStyle="sm" maxWidth={400} padding={1}>
            <Flex direction="column" gap={3}>
              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This title attribute is automatically added because lineClamp
                  is used and children is a string.
                </TextCompact>
                <TextCompact lineClamp={1}>
                  This is a long and Supercalifragilisticexpialidocious
                  sentence.
                  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                </TextCompact>
              </Flex>

              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This example uses lineClamp but has no title attribute,
                  because children is a React.Node.
                </TextCompact>
                <TextCompact lineClamp={1}>
                  <Link href="#">
                    This is a long and Supercalifragilisticexpialidocious
                    sentence.
                    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                  </Link>
                </TextCompact>
              </Flex>

              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This example uses lineClamp and children is a React.Node, but
                  uses the title prop.
                </TextCompact>
                <TextCompact
                  lineClamp={1}
                  title="This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉"
                >
                  <Link href="#">
                    This is a long and Supercalifragilisticexpialidocious
                    sentence.
                    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                  </Link>
                </TextCompact>
              </Flex>
            </Flex>
          </Box>
        </Flex>
      </Flex>
    </Flex>
  );
}

import { useEffect, useRef, useState } from 'react';
import { Box, Flex, Label, Link, Switch, TextCompact } from 'gestalt';

export default function Example() {
  const [showLongText, setShowLongText] = useState(false);
  const [applyTruncationDetection, setApplyTruncationDetection] =
    useState(false);

  const text =
    'Tag brand partners in your Idea Pins with the paid partnership tool.';

  const veryLongText =
    'Tag brand partners in your Idea Pins with the paid partnership tool. Just make an Idea Pin in the app, add the paid partnership label and tag your partner brand. Once they approve the request, their brand name will show up on your Idea Pin. Brands can also choose to promote your Idea Pins as ads, boosting your reach to even more people. When you use the paid partnership tool, you work directly with brands to define the payment terms and process. Pinterest will not be directly involved in payment.';

  const textRef = useRef(null);
  const [ellipsisActive, setEllipsisActive] = useState(false);

  const isEllipsisActive = (element) =>
    element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth;

  useEffect(() => {
    const checkEllipsisActive = () => {
      if (textRef.current) {
        if (!ellipsisActive && isEllipsisActive(textRef.current)) {
          setEllipsisActive(true);
        } else if (ellipsisActive && !isEllipsisActive(textRef.current)) {
          setEllipsisActive(false);
        }
      }
    };
    checkEllipsisActive();
    window.addEventListener('resize', checkEllipsisActive);
    return () => {
      window.removeEventListener('resize', checkEllipsisActive);
    };
  });

  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex direction="column" gap={8} width="90%">
        <Flex direction="column" gap={2}>
          <Box alignItems="center" display="flex">
            <Box paddingX={2}>
              <Label htmlFor="longText">
                <TextCompact>Show long text</TextCompact>
              </Label>
            </Box>
            <Switch
              id="longText"
              onChange={() => setShowLongText(!showLongText)}
              switched={showLongText}
            />
          </Box>
          <Box alignItems="center" display="flex">
            <Box paddingX={2}>
              <Label htmlFor="truncation">
                <TextCompact>Apply truncation detection</TextCompact>
              </Label>
            </Box>
            <Switch
              id="truncation"
              onChange={() =>
                setApplyTruncationDetection(!applyTruncationDetection)
              }
              switched={applyTruncationDetection}
            />
          </Box>
        </Flex>
        <Flex direction="column">
          <TextCompact
            ref={textRef}
            align="start"
            inline
            lineClamp={2}
            title={
              ellipsisActive && typeof veryLongText === 'string'
                ? veryLongText
                : undefined
            }
          >
            {showLongText ? veryLongText : text}{' '}
            <TextCompact inline>
              <Link
                accessibilityLabel="Visit our Help Site"
                display="inline"
                href="#"
              >
                Visit our Help Site
              </Link>
            </TextCompact>
          </TextCompact>
          {ellipsisActive && applyTruncationDetection ? (
            <TextCompact>
              <Link
                accessibilityLabel="Visit our Help Site"
                display="inline"
                href="#"
              >
                Visit our Help Site
              </Link>
            </TextCompact>
          ) : null}
        </Flex>
      </Flex>
    </Flex>
  );
}