SmartHR Design System

Text

タイポグラフィのデザイントークンを使ってテキストを表示するためのコンポーネントです。本文や説明文、ラベルテキストにデザイントークン準拠のフォントサイズ・ウェイト・色・行送り・見出しスタイルなどを適用するときに使います。

使用上の注意

入れ子にしたときの出力要素に注意する

デフォルトの出力要素は<span>になるため、入れ子にしたときにValidなHTMLになるように注意してください。

省略表示したテキストは隠れたままになることに注意する

maxLinesで省略したテキストの全文表示にはTooltipもしくはDisclosureを利用します。ユーザーが能動的に表示しないと情報は隠れたままであることに注意してください。

省略表示を推奨するケース

次のケースではmaxLinesでの省略表示を推奨します。

  • 付加的な情報を表示する場合
    • ユーザーの操作過程で「確認が必須ではない」程度の情報を表示する目的の場合
  • 全文表示するとレイアウトが崩れて視認性が下がる場合
    • テーブルのセル内やリスト形式のUIにおいて視認性を確保する目的の場合

省略表示を避けるケース

単に情報を省略する目的では使用しないでください。ただし、十分に表示領域を確保したうえでレイアウトが崩れる場合は、前述の「全文表示するとレイアウトが崩れて視認性が下がる場合」が適用されるものとし、maxLinesでの省略表示を推奨します。

また、ユーザーが把握しておかないと操作が進められないような重要な情報は省略せず、常に表示することを検討してください。

重要な情報の具体例は次のとおりです。

  • パスワードに使用できる文字や、エラーになる入力値などの入力要件
  • 入力エラーとなった際のエラーメッセージ
  • 操作補助になる情報（ショートカットなど）
  • ボタンなどの操作UIのラベル

種類

フォントサイズ

size propsで指定できます。値はタイポグラフィのフォントサイズのデザイントークンを参照してください。

ウェイト

weight propsで指定できます。

強調、イタリック体

emphasis props、italic propsで指定できます。

色

color propsで指定できます。値は色の文字のデザイントークンを参照してください。

行送り

leading propsで指定できます。値は行送りのデザイントークンを参照してください。

折り返し

whiteSpace propsで指定できます。

最大行数

maxLines propsで指定できます。1〜6を指定すると、その行数に収まらなかったテキストが「…」で省略されます。

{ max, tooltip }のオブジェクト形式で指定しtooltipをtrueにすると、テキストが省略されたときだけTooltipで全文を表示します。省略表示を使ってよいケースは省略表示したテキストは隠れたままになることに注意するを参照してください。

見出しスタイル

styleType propsで指定できます。

Headingの種類に合わせた見た目（フォントサイズ、ウェイト、色）を提供しますが、見出しとして使う場合はTextではなくHeadingを使用してください。

アイコン

icon propsでテキストの左右にIconを配置できます。

アイコンのみを渡すと、テキストの左（プレフィックス）に配置されます。prefix・suffix・gapを指定すると、左右の配置やテキストとの間隔を制御できます。
アイコンの色や代替テキストの扱いは、Iconを参照してください。

モバイル

タッチデバイスではhover表示を前提としたTooltipは使用せず、Disclosureを使用してください。

使い方チェックリスト

Text
参照元：使用上の注意 > 入れ子にしたときの出力要素に注意する 「使用上の注意 > 入れ子にしたときの出力要素に注意する」の本文へ移動
  • Must
    Text を入れ子にする場合は Valid な HTML になるよう出力要素に注意する
参照元：使用上の注意 > 省略表示したテキストは隠れたままになることに注意する > 省略表示を推奨するケース 「使用上の注意 > 省略表示したテキストは隠れたままになることに注意する > 省略表示を推奨するケース」の本文へ移動
  • Should
    ユーザーの操作過程で「確認が必須ではない」程度の情報を表示する場合は maxLines での省略表示を検討してよい
  • Should
    テーブルのセル内やリスト形式の UI で視認性を確保する場合は maxLines での省略表示を検討してよい
参照元：使用上の注意 > 省略表示したテキストは隠れたままになることに注意する > 省略表示を避けるケース 「使用上の注意 > 省略表示したテキストは隠れたままになることに注意する > 省略表示を避けるケース」の本文へ移動
  • Avoid
    単に情報を省略する目的では maxLines での省略表示を使用しない
  • Avoid
    ユーザーが把握しておかないと操作が進められないような重要な情報は maxLines で省略せず、常に表示することを検討する
    • パスワードに使用できる文字や、エラーになる入力値などの入力要件
    • 入力エラーとなった際のエラーメッセージ
    • 操作補助になる情報（ショートカットなど）
    • ボタンなどの操作 UI のラベル
参照元：モバイル 「モバイル」の本文へ移動
  • Must
    タッチデバイスでは hover 表示を前提とした Tooltip は使用せず、Disclosure を使用する
参照元：種類 > 見出しスタイル 「種類 > 見出しスタイル」の本文へ移動
  • Must
    見出しとして使う場合は Text ではなく Heading を使う

Props

emphasis
falsetrue

強調するかどうかの真偽値。指定すると em 要素になる

styleType
"screenTitle""sectionTitle""blockTitle""subBlockTitle""subSubBlockTitle"

見た目の種類

icon
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ prefix?: ReactNode; suffix?: ReactNode; gap?: 0 | 1 | 2 | 0.25 | 0.5 | 0.75 | 1.25 | 1.5 | 2.5 | 3 | 3.5 | 4 | 8 | keyof CreatedSpacingTheme | ... 11 more ... | -8; }

設置するアイコン

size
"XXS""XS""S""M""L""XL""XXL"
weight
"normal""bold"
italic
falsetrue
color
"inherit""TEXT_BLACK""TEXT_WHITE""TEXT_GREY""TEXT_DISABLED""TEXT_LINK"
leading
"NONE""TIGHT""NORMAL""LOOSE"
whiteSpace
"pre""normal""nowrap""pre-line""pre-wrap"
maxLines
123456{ max: 1 | 2 | 3 | 4 | 5 | 6; tooltip?: boolean; }

最大表示行数。オブジェクト形式で指定すると、省略時に Tooltip で全文を表示するかどうかも指定できる