Design Systemに則ったTypographyのスタイルを提供

Example#

Props#

NameTypeDefaultDescription
children
required
ReactNode-表示するテキスト pやdivなどを含めないでください(文法的にNGです)
as"object" | "body" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr"pコンポーネントのHTML要素
boldbooleanfalse太字とするかどうか
color"link" | "main" | "sub" | "linkSub" | "disabled" | "primary" | "accent" | "alert" | "white"main文字色の抽象値
id
optional
string-HTMLのid属性
textAlign
optional
"left" | "center" | "right"-テキストの配置。指定しない場合、親要素の配置を継承
noWrap
optional
boolean-領域が狭い場合でも折り返えさない
type"body" | "heading" | "note" | "button" | "tag"bodyテキストの種類
size"xs" | "sm" | "md" | "lg" | "xl"mdフォントサイズの抽象値
leading"default" | "narrow" | "tight"default default default default行送りの抽象値(`line-height`)
data-*
optional
string-Custom data attributes

Feature#

Typography トークンに基づいたスタイルを提供します。

Usage#

  • テキストのスタイルに困った場合、シンプルに<Text>でテキストを囲ってください
    • propsを指定しなくとも、本文で使用するスタイル(type='body'size='md')がデフォルトで適用されています
  • デフォルトでは、<p>要素としてレンダリングされます

<Text>内の一部を装飾したい#

例えば一部の単語を強調したいケースなどがあります。<Text>をネストし、as propでspanを指定、装飾したいpropを追加します。

<Text type="note" size="lg">
  <Text as="span" type="note" size="lg" color="alert" bold>
    Alert:
  </Text>
  Please fill in all fields
</Text>

実際の動作例はtext in textを参照してください。

<p>要素が適さない場合#

  • おおむね<p>要素を使用すれば問題有りません
  • ただし、いくつかのケースで問題があります
    • <p>要素に<p>要素を内包できません
      • ネストした場合、ブラウザの修復により構造が崩れる可能性があります
    • <button>のような、<p>などのフローコンテンツを子に持てない要素が存在します1
    • これらの解決策として、as propでレンダリングされる要素を変更します。spanが良いでしょう

ブロックレベル要素が適さない場合#

  • <p>はブロックレベル要素2のため水平方向の領域を占有します
  • デザイン上、不都合がある可能性があります
  • いくつかの解決策が考えられます
    • aspropでインラインレベルの要素に変更
    • CSSでdisplay: inlineなどを指定
    • <Text>の親要素のdisplayflexgridを指定

「テキスト」に使えるマークアップ#

代表的なもの列挙します。 <div><span>を使う前に、以下のマークアップを検討してください。

  • 見出し
    • <h1><h6>
  • 注釈など
    • <small>(単純に「小さい文字」ではないため注意)
  • 強調
    • <strong>
    • <b>
  • 引用
    • <blockquote>
    • <q>
  • ルビ
    • <ruby>
    • <rt>
    • <rp>
  • 日時
    • <time>
  • 省略
    • <abbr>

Footnotes#

  1. (記述コンテンツ - コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語 | MDN)[https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84]

  2. Block-level content (ブロックレベルコンテンツ) - Block-level content (ブロックレベルコンテンツ) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN | MDN