docs: add description information for all components

2026-05-16 16:31:00 +08:00 · 2020-04-03 16:43:43 +08:00
parent 2e943d850e
commit f7d85bdc9f
27 changed files with 126 additions and 31 deletions
--- a/pages/docs/components/auto-complete.mdx
+++ b/pages/docs/components/auto-complete.mdx
@@ -9,8 +9,10 @@ export const meta = {

 ## Auto Complete

+AutoComplete control of input field.

 <Playground
+  desc="Basic usage, add auto-complete list for all inputs."
  scope={{ AutoComplete }}
  code={`
 () => {
@@ -24,6 +26,7 @@ export const meta = {
 `} />

 <Playground
+  desc="Disable all."
  title="disabled"
  scope={{ AutoComplete }}
  code={`
@@ -38,6 +41,7 @@ export const meta = {
 `} />

 <Playground
+  desc="Update the contents of drop-down list based on input."
  title="search"
  scope={{ AutoComplete, useState }}
  code={`
@@ -59,6 +63,7 @@ export const meta = {

 <Playground
  title="Waiting in search"
+  desc="Show friendly tips and UI when searching."
  scope={{ AutoComplete, useState, useEffect, useRef }}
  code={`
 () => {
@@ -95,6 +100,7 @@ export const meta = {

 <Playground
  title="custom searching text"
+  desc="You can replace the default waiting text with any components."
  scope={{ AutoComplete }}
  code={`
 <AutoComplete searching placeholder="Enter here" width="100%">
@@ -106,6 +112,7 @@ export const meta = {

 <Playground
  title="custom no options"
+  desc="You can also customize the prompt with no options."
  scope={{ AutoComplete, useState }}
  code={`
 () => {
@@ -132,6 +139,7 @@ export const meta = {

 <Playground
  title="custom option"
+  desc="You can rewrite each item of the `AutoComplete` to express more."
  scope={{ AutoComplete, useState, Spacer, Badge, Row }}
  code={`
 () => {
@@ -169,7 +177,8 @@ export const meta = {
 `} />

 <Playground
-  title="size"
+  title="sizes"
+  desc="Components of different sizes."
  scope={{ AutoComplete, Spacer }}
  code={`
 () => {
@@ -194,6 +203,7 @@ export const meta = {

 <Playground
  title="clearable"
+  desc="Add a clear button in the input box."
  scope={{ AutoComplete }}
  code={`
 () => {
@@ -211,7 +221,7 @@ export const meta = {

 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
-| **options** | options of input | `AutoCompleteOptions` | - | - |
+| **options** | options of input | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
 | **status** | input type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
 | **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
 | **initialValue** | initial value | `string` | - | - |
--- a/pages/docs/components/avatar.mdx
+++ b/pages/docs/components/avatar.mdx
@@ -35,7 +35,7 @@ Avatars represent a user or a team. Stacked avatars represent a group of people.


 <Playground
- title="Size"
+ title="Sizes"
 desc="You can specify different sizes of `Avatar`."
 scope={{ Avatar }}
 code={`
@@ -54,6 +54,7 @@ Avatars represent a user or a team. Stacked avatars represent a group of people.

 <Playground
  title="Text"
+  desc="Display text in the avatar box."
  scope={{ Avatar }}
  code={`
 <>
--- a/pages/docs/components/badge.mdx
+++ b/pages/docs/components/badge.mdx
@@ -12,6 +12,7 @@ Display an indicator that requires attention.

 <Playground
  scope={{ Badge, Spacer }}
+  desc="Show number or text."
  code={`
  <>
    <Badge>1</Badge> <Spacer y={.5} />
@@ -23,6 +24,7 @@ Display an indicator that requires attention.

 <Playground
  title="Type"
+  desc="Express state in different colors."
  scope={{ Badge, Spacer }}
  code={`
  <>
@@ -34,7 +36,8 @@ Display an indicator that requires attention.
 `} />

 <Playground
-  title="Size"
+  title="Sizes"
+  desc="Components of different sizes."
  scope={{ Badge, Spacer }}
  code={`
  <>
--- a/pages/docs/components/button-dropdown.mdx
+++ b/pages/docs/components/button-dropdown.mdx
@@ -27,6 +27,7 @@ Display related but alternate actions for a button.

 <Playground
  title="Disabled"
+  desc="Disable all buttons."
  scope={{ ButtonDropdown }}
  code={`
 <ButtonDropdown disabled>
@@ -38,6 +39,7 @@ Display related but alternate actions for a button.

 <Playground
  title="Loading"
+  desc="Show friendly load indicator."
  scope={{ ButtonDropdown }}
  code={`
 <ButtonDropdown loading>
@@ -71,7 +73,8 @@ Display related but alternate actions for a button.
 `} />

 <Playground
-  title="Size"
+  title="Sizes"
+  desc="Components of different sizes."
  scope={{ ButtonDropdown, Spacer }}
  code={`
 <>
@@ -107,6 +110,7 @@ Display related but alternate actions for a button.

 <Playground
  title="Multiple Type"
+  desc="Specify the status of a button individually."
  scope={{ ButtonDropdown }}
  code={`
 <ButtonDropdown>
--- a/pages/docs/components/button.mdx
+++ b/pages/docs/components/button.mdx
@@ -38,6 +38,7 @@ Used to trigger an operation.

 <Playground
  title="Shadow"
+  desc="The shadow highlights the level of the button."
  scope={{ Button }}
  code={`
 <Button shadow type="secondary">Shadow</Button>
@@ -72,7 +73,7 @@ Used to trigger an operation.


 <Playground
-  title="Size"
+  title="Sizes"
  desc="Buttons of different sizes."
  scope={{ Button, Spacer }}
  code={`
--- a/pages/docs/components/capacity.mdx
+++ b/pages/docs/components/capacity.mdx
@@ -22,6 +22,7 @@ Display an capacity indicator.

 <Playground
  title="Fixed Color"
+  desc="Specify a color to override the default."
  scope={{ Capacity, Spacer, useTheme }}
  code={`
 () => {
--- a/pages/docs/components/code.mdx
+++ b/pages/docs/components/code.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Code } from 'components'
+import { Code, Note, Link } from 'components'

 export const meta = {
  title: 'Code',
@@ -8,9 +8,12 @@ export const meta = {

 ## Code

+Show source code in a standardized way.
+
+<Note>Want to display <Code>shell</Code> code snippets? Try <Link pure color href="/docs/components/snippet">Snippet</Link>.</Note>

 <Playground
-  title="Basic"
+  desc="Basic inline codes."
  scope={{ Code }}
  code={`
 <p>Run <Code>npm i @zeit-ui/react</Code> to install.</p>
@@ -19,6 +22,7 @@ export const meta = {

 <Playground
  title="Code Block"
+  desc="Multi line code display."
  scope={{ Code }}
  code={`
 () => {
@@ -30,6 +34,7 @@ yarn add @zeit-ui/react\`

 <Playground
  title="width"
+  desc="Specify width manually, or other styles."
  scope={{ Code }}
  code={`
 () => {
@@ -41,6 +46,7 @@ yarn add @zeit-ui/react\`

 <Playground
  title="overlong"
+  desc="Out of range presentation."
  scope={{ Code }}
  code={`
 () => {
--- a/pages/docs/components/collapse.mdx
+++ b/pages/docs/components/collapse.mdx
@@ -12,6 +12,7 @@ Display large amounts of text in collapsible sections. Commonly referred to as a

 <Playground
  scope={{ Collapse, Text }}
+  desc="Show title only by default."
  code={`
 <Collapse.Group>
  <Collapse title="Question A">
@@ -29,6 +30,7 @@ Display large amounts of text in collapsible sections. Commonly referred to as a

 <Playground
  title="Expanded"
+  desc="Specify what to display first."
  scope={{ Collapse, Text }}
  code={`
 <Collapse.Group>
@@ -47,6 +49,7 @@ Display large amounts of text in collapsible sections. Commonly referred to as a

 <Playground
  title="Subtitle"
+  desc="Add text or components as subtitle."
  scope={{ Collapse, Text }}
  code={`
 <Collapse.Group>
@@ -55,7 +58,7 @@ Display large amounts of text in collapsible sections. Commonly referred to as a
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
-  <Collapse title="Question B">
+  <Collapse title="Question B" subtitle={<>More description about <Text b>Question A</Text></>}>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
@@ -65,6 +68,7 @@ Display large amounts of text in collapsible sections. Commonly referred to as a

 <Playground
  title="Shadow"
+  desc="Highlight importance at a higher level."
  scope={{ Collapse, Text }}
  code={`
 <Collapse shadow title="Question A" subtitle="More description about Question A">
--- a/pages/docs/components/description.mdx
+++ b/pages/docs/components/description.mdx
@@ -8,9 +8,10 @@ export const meta = {

 ## Description

-A common container component.
+Display brief information with a title and description.

 <Playground
+  desc="`Description` component contains title and content."
  scope={{ Description }}
  code={`
 <Description title="Section Title" content="Data about this section." />
@@ -18,6 +19,7 @@ A common container component.

 <Playground
  title="With Component"
+  desc="Use in combination with other components."
  scope={{ Description, Code }}
  code={`
 <Description title="Section Title" content={<p><Code>code</Code> about this section.</p>} />
--- a/pages/docs/components/display.mdx
+++ b/pages/docs/components/display.mdx
@@ -8,8 +8,11 @@ export const meta = {

 ## Display

+To display important information or images in a central alignment.
+
 <Playground
  title="Basic"
+  desc="Describe the main part with a paragraph."
  scope={{ Display }}
  code={`
  <Display shadow caption="ZEIT Now for GitHub deploying a pull request automatically.">
@@ -20,6 +23,7 @@ export const meta = {

 <Playground
  title="With Code"
+  desc="Show multiline code blocks."
  scope={{ Display, Code }}
  code={`
 () => {
@@ -40,6 +44,7 @@ export const meta = {

 <Playground
  title="With Snippet"
+  desc="Show shell codes."
  scope={{ Display, Snippet }}
  code={`
  <Display width="500px" caption="Run this command to install the library.">
@@ -49,6 +54,7 @@ export const meta = {

 <Playground
  title="Component Caption"
+  desc="Use component on `caption` prop."
  scope={{ Display, Code }}
  code={`
  <Display shadow caption={<p>A domain redirect that redirects requests made to <Code>www.zeit.rocks</Code> to <Code>zeit.rocks</Code>.</p>}>
--- a/pages/docs/components/dot.mdx
+++ b/pages/docs/components/dot.mdx
@@ -8,7 +8,7 @@ export const meta = {

 ## Dot

-Display an indicator of deployment status.
+Display an indicator of standardization status.

 <Playground
  scope={{ Dot }}
--- a/pages/docs/components/fieldset.mdx
+++ b/pages/docs/components/fieldset.mdx
@@ -12,6 +12,7 @@ Display a collection of related information in a single unit.

 <Playground
  title="Basic"
+  desc="Add custom buttons in `Actions`."
  scope={{ Fieldset, Button }}
  code={`
 <Fieldset>
@@ -30,6 +31,7 @@ Display a collection of related information in a single unit.

 <Playground
  title="Custom Text"
+  desc="Representation in different situations."
  scope={{ Fieldset, Button, Text }}
  code={`
 <Fieldset>
@@ -47,7 +49,8 @@ Display a collection of related information in a single unit.
 `} />

 <Playground
-  title="Basic"
+  title="Tabs"
+  desc="Show multiple Fieldset."
  scope={{ Fieldset, Button }}
  code={`
 () => {
--- a/pages/docs/components/input.mdx
+++ b/pages/docs/components/input.mdx
@@ -5,7 +5,6 @@ import { useState, useEffect } from 'react'

 export const meta = {
  title: 'Input',
-  description: 'avatar',
 }

 ## Input
@@ -13,13 +12,15 @@ export const meta = {
 Retrieve text input from a user.

 <Playground
+  desc="Basic input field."
  scope={{ Input }}
  code={`
 <Input placeholder="The Evil Rabbit" />
 `} />

 <Playground
-  title="Size"
+  title="Sizes"
+  desc="Inputs of different sizes."
  scope={{ Input, Spacer }}
  code={`
 <>
@@ -32,6 +33,7 @@ Retrieve text input from a user.

 <Playground
  title="Set width"
+  desc="Specify width or other styles."
  scope={{ Input }}
  code={`
 <Input placeholder="The Evil Rabbit" width="100%" />
@@ -39,6 +41,7 @@ Retrieve text input from a user.

 <Playground
  title="unwritable"
+  desc="Disable interactive inputs."
  scope={{ Input, Spacer }}
  code={`
 <>
@@ -50,6 +53,7 @@ Retrieve text input from a user.

 <Playground
  title="inline label"
+  desc="Show a short label in the line."
  scope={{ Input, Spacer }}
  code={`
 <>
@@ -61,6 +65,7 @@ Retrieve text input from a user.

 <Playground
  title="block label"
+  desc="Labels for custom styles."
  scope={{ Input, Spacer, Text, Code, Dot }}
  code={`
 <>
@@ -82,6 +87,7 @@ Retrieve text input from a user.

 <Playground
  title="status"
+  desc="Differentiate states by color."
  scope={{ Input, Spacer }}
  code={`
 <>
@@ -97,6 +103,7 @@ Retrieve text input from a user.

 <Playground
  title="Icon"
+  desc="Specify an icon component."
  scope={{ Input, GitIcon }}
  code={`
 <>
@@ -106,6 +113,7 @@ Retrieve text input from a user.

 <Playground
  title="Clearable"
+  desc="Add a clear button in the input box."
  scope={{ Input }}
  code={`
 <>
@@ -115,6 +123,7 @@ Retrieve text input from a user.

 <Playground
  title="Get Change"
+  desc="Capture changes in input."
  scope={{ Input, useState }}
  code={`
 () => {
@@ -131,6 +140,7 @@ Retrieve text input from a user.

 <Playground
  title={<>With <Code>useInput</Code></>}
+  desc="Use `hooks` to capture changes."
  scope={{ Input, useInput, useEffect, Button, Spacer }}
  code={`
 () => {
--- a/pages/docs/components/link.mdx
+++ b/pages/docs/components/link.mdx
@@ -12,7 +12,7 @@ export const meta = {
 Hyperlinks between pages.

 <Playground
-  desc="Use `Text` to standardize text content."
+  desc="The default component Link adds an icon to the link."
  scope={{ Link }}
  code={`
 <Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
@@ -20,7 +20,7 @@ Hyperlinks between pages.

 <Playground
  title="highlight"
-  desc="Use `Text` to standardize text content."
+  desc="Distinguish links with different colors."
  scope={{ Link }}
  code={`
 <Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
@@ -28,7 +28,7 @@ Hyperlinks between pages.

 <Playground
  title="variant"
-  desc="Use `Text` to standardize text content."
+  desc="Different styles of links."
  scope={{ Link, Text }}
  code={`
 <>
--- a/pages/docs/components/loading.mdx
+++ b/pages/docs/components/loading.mdx
@@ -20,6 +20,7 @@ Indicate an action running in the background.

 <Playground
  title="with text"
+  desc="Customize text next to icon."
  scope={{ Loading, Row }}
  code={`
 <Row style={{ padding: '10px 0'}}>
@@ -28,7 +29,8 @@ Indicate an action running in the background.
 `} />

 <Playground
-  title="size"
+  title="sizes"
+  desc="Components of different sizes."
  scope={{ Loading, Row, Spacer }}
  code={`
 <>
@@ -53,6 +55,7 @@ Indicate an action running in the background.

 <Playground
  title="type"
+  desc="Loading indicators in different states."
  scope={{ Loading, Row, Spacer }}
  code={`
 <>
--- a/pages/docs/components/modal.mdx
+++ b/pages/docs/components/modal.mdx
@@ -1,18 +1,20 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Modal, Button, Code, useModal } from 'components'
+import { Modal, Button, Code, useModal, Note, Link } from 'components'
 import { useState } from 'react'

 export const meta = {
  title: 'modal',
-  description: 'tenotext',
 }

 ## Modal

 Display popup content that requires attention or provides additional information.

+<Note>Just want a text notification? Try <Link pure color href="/docs/components/toast">Toast component</Link>.</Note>
+
 <Playground
  title="Basic"
+  desc="Use `open` control whether `Modal` is displayed."
  scope={{ Modal, Button, useState }}
  code={`
 () => {
@@ -42,6 +44,7 @@ Display popup content that requires attention or provides additional information

 <Playground
  title={<>With <Code>useModal</Code></>}
+  desc="Use `hooks` for easier control `Modal`."
  scope={{ Modal, Button, useModal }}
  code={`
 () => {
@@ -65,6 +68,7 @@ Display popup content that requires attention or provides additional information

 <Playground
  title="Without Actions"
+  desc="Hide all action buttons."
  scope={{ Modal, Button, useState }}
  code={`
 () => {
@@ -91,6 +95,7 @@ Display popup content that requires attention or provides additional information

 <Playground
  title="Disable Action"
+  desc="Disable one of the buttons."
  scope={{ Modal, Button, useState }}
  code={`
 () => {
@@ -158,7 +163,7 @@ Display popup content that requires attention or provides additional information
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **passive** | display passive mode | `boolean` | - | `false` |
 | **disabled** | disable current action | `boolean` | - | `false` |
-| **onClick** | click handler | `(event: ModalActionEvent) => void` | - | - |
+| **onClick** | click handler | [(event: ModalActionEvent) => void](#modalactionevent) | - | - |
 | ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |

 <Attributes.Title>useModal</Attributes.Title>
@@ -175,6 +180,14 @@ type useModal = (initialVisible: boolean) => {
 }
 ```

+<Attributes.Title>ModalActionEvent</Attributes.Title>
+
+```ts
+type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
+  close: () => void
+}
+```
+
 </Attributes>

 export default ({ children }) => <Layout meta={meta}>{children}</Layout>
--- a/pages/docs/components/note.mdx
+++ b/pages/docs/components/note.mdx
@@ -11,7 +11,7 @@ export const meta = {
 Display text that requires attention or provides additional information.

 <Playground
-  desc="Use `Text` to standardize text content."
+  desc="Show a piece of text or components."
  scope={{ Note }}
  code={`
 <Note>This note details something important.</Note>
--- a/pages/docs/components/progress.mdx
+++ b/pages/docs/components/progress.mdx
@@ -4,7 +4,6 @@ import { useState } from 'react'

 export const meta = {
  title: 'Progress',
-  description: 'Progress',
 }

 ## Progress
@@ -19,6 +18,7 @@ Display progress relative to a limit or related to a task.

 <Playground
  title="Custom Max"
+  desc="Modify the maximum value of progress."
  scope={{ Progress }}
  code={`
 <Progress value={45} max={50} />
@@ -26,6 +26,7 @@ Display progress relative to a limit or related to a task.

 <Playground
  title="Dynamic Colors"
+  desc="You can specify the color of the progress in any range."
  scope={{ Progress, useState, useTheme, Button, Spacer }}
  code={`
 () => {
@@ -51,6 +52,7 @@ Display progress relative to a limit or related to a task.

 <Playground
  title="Type"
+  desc="We prepared some different styles in advance."
  scope={{ Progress, Spacer }}
  code={`
 <>
--- a/pages/docs/components/radio.mdx
+++ b/pages/docs/components/radio.mdx
@@ -19,6 +19,7 @@ Provides single user input from a selection of options.

 <Playground
  title="Group"
+  desc="A group of radio components."
  scope={{ Radio, useState }}
  code={`
 () => {
@@ -40,7 +41,7 @@ Provides single user input from a selection of options.

 <Playground
  title="Description"
-  desc="`Description` can be combined with other `Components`."
+  desc="`Description` can be combined with other components."
  scope={{ Radio, Code }}
  code={`
 <Radio.Group value="1" onChange={val => console.log(val)}>
@@ -58,6 +59,7 @@ Provides single user input from a selection of options.

 <Playground
  title="Disabled"
+  desc="Disable all radios."
  scope={{ Radio, useState, Code }}
  code={`
 <Radio.Group value="1" disabled>
--- a/pages/docs/components/select.mdx
+++ b/pages/docs/components/select.mdx
@@ -11,6 +11,7 @@ export const meta = {
 Display a dropdown list of items.

 <Playground
+  desc="Basic usage."
  scope={{ Select }}
  code={`
 () => {
@@ -26,6 +27,7 @@ Display a dropdown list of items.

 <Playground
  title="Disabled"
+  desc="Disable all options."
  scope={{ Select }}
  code={`
 <Select placeholder="Choose one" disabled>
@@ -36,6 +38,7 @@ Display a dropdown list of items.

 <Playground
  title="Disabled Option"
+  desc="disable specified options."
  scope={{ Select }}
  code={`
 <Select placeholder="Choose one">
@@ -46,6 +49,7 @@ Display a dropdown list of items.

 <Playground
  title="Without Icon"
+  desc="Hide icon on right."
  scope={{ Select }}
  code={`
 <Select placeholder="Choose one" pure>
@@ -56,6 +60,7 @@ Display a dropdown list of items.

 <Playground
  title="Compose"
+  desc="Use with other components."
  scope={{ Select, Code }}
  code={`
 <Select placeholder="Choose one" initialValue="1">
--- a/pages/docs/components/snippet.mdx
+++ b/pages/docs/components/snippet.mdx
@@ -11,6 +11,7 @@ export const meta = {
 Display a snippet of copyable code for the command line.

 <Playground
+  desc="Basic usage."
  scope={{ Snippet }}
  code={`
 <Snippet text="yarn add @zeit-ui/react" width="300px" />
@@ -18,6 +19,7 @@ Display a snippet of copyable code for the command line.

 <Playground
  title="width"
+  desc="Specify width manually."
  scope={{ Snippet }}
  code={`
 <Snippet text="yarn add @zeit-ui/react" width="100%" />
@@ -25,6 +27,7 @@ Display a snippet of copyable code for the command line.

 <Playground
  title="types"
+  desc="Show different states with colors."
  scope={{ Snippet, Spacer }}
  code={`
 <>
@@ -51,6 +54,7 @@ Display a snippet of copyable code for the command line.

 <Playground
  title="without copy"
+  desc="Hide icon for copy. (disable copy)"
  scope={{ Snippet }}
  code={`
 <Snippet copy="prevent" text="yarn add @zeit-ui/react" width="300px" />
@@ -77,10 +81,10 @@ Display a snippet of copyable code for the command line.
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **text** | code snippet | `string` `Array<string>` | - | - |
+| **type** | snippet types | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` |
 | **fill** | filled style | `boolean` | - | `false` |
 | **width** | set CSS string | `string` | - | `initial` |
 | **copy** | function of copy button | `CopyTypes` | `'default', 'slient', 'prevent'` | `default` |
-| **type** | snippet types | `SnippetTypes` | `SnippetTypes` | `default` |
 | ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

 <Attributes.Title>SnippetTypes</Attributes.Title>
--- a/pages/docs/components/spinner.mdx
+++ b/pages/docs/components/spinner.mdx
@@ -20,7 +20,8 @@ Indicate an action running in the background.
 `} />

 <Playground
-  title="Size"
+  title="Sizes"
+  desc="Components of different sizes."
  scope={{ Spinner, Spacer }}
  code={`
 <>
--- a/pages/docs/components/table.mdx
+++ b/pages/docs/components/table.mdx
@@ -3,7 +3,6 @@ import { Table, Spacer, Code, Text, Button } from 'components'

 export const meta = {
  title: 'Table',
-  description: 'Table',
 }

 ## Table
@@ -11,6 +10,7 @@ export const meta = {
 Display tabular data in format.

 <Playground
+  desc="Display formatted data in rows and columns."
  scope={{ Table }}
  code={`
 () => {
@@ -32,6 +32,7 @@ Display tabular data in format.

 <Playground
  title="compose"
+  desc="Show other components in the table."
  scope={{ Table, Code, Text }}
  code={`
 () => {
@@ -75,6 +76,7 @@ Display tabular data in format.

 <Playground
  title="actions"
+  desc="Custom elements can be displayed in the table, and any changes will be immediately rendered."
  scope={{ Table, Text, Button }}
  code={`
 () => {
--- a/pages/docs/components/tabs.mdx
+++ b/pages/docs/components/tabs.mdx
@@ -7,7 +7,6 @@ import ReactIcon from 'lib/components/icons/react'

 export const meta = {
  title: 'tabs',
-  description: 'tabs',
 }

 ## Tabs
@@ -16,6 +15,7 @@ Display tab content.

 <Playground
  scope={{ Tabs }}
+  desc="Toggle display of different templates."
  code={`
 <Tabs initialValue="1">
  <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
@@ -35,6 +35,7 @@ Display tab content.

 <Playground
  title="With Icon"
+  desc="Show icon component on label button."
  scope={{ Tabs, ReactIcon, ZeitIcon, Link, Text }}
  code={`
 <Tabs initialValue="1">
@@ -50,6 +51,7 @@ Display tab content.

 <Playground
  title="Imperatively"
+  desc="Control components with imperatively style."
  scope={{ Tabs, Button, Spacer, Code, Text, useState }}
  code={`
 () => {
@@ -71,6 +73,7 @@ Display tab content.

 <Playground
  title={<>with <Code>useTabs</Code></>}
+  desc="Control components with `hooks`."
  scope={{ Tabs, Button, Spacer, Code, Text, useTabs }}
  code={`
 () => {
--- a/pages/docs/components/textarea.mdx
+++ b/pages/docs/components/textarea.mdx
@@ -4,7 +4,6 @@ import { useState } from 'react'

 export const meta = {
  title: 'textarea',
-  description: 'textarea',
 }

 ## Textarea
@@ -12,6 +11,7 @@ export const meta = {
 Retrieve multi-line user input.

 <Playground
+  desc="Basic usage."
  scope={{ Textarea }}
  code={`
 <Textarea placeholder="Please enter a description." />
@@ -19,6 +19,7 @@ Retrieve multi-line user input.

 <Playground
  title="width"
+  desc="Specify width manually."
  scope={{ Textarea }}
  code={`
 <Textarea width="100%" placeholder="ZEIT Now is the optimal workflow for frontend teams. All-in-one: Static and JAMstack deployment, Serverless Functions, and Global CDN." />
@@ -26,6 +27,7 @@ Retrieve multi-line user input.

 <Playground
  title="disabled"
+  desc="Disable interactive textarea."
  scope={{ Textarea }}
  code={`
 <Textarea width="100%" disabled placeholder="ZEIT Now is the optimal workflow for frontend teams. All-in-one: Static and JAMstack deployment, Serverless Functions, and Global CDN." />
@@ -33,6 +35,7 @@ Retrieve multi-line user input.

 <Playground
  title="status"
+  desc="Differentiate states by color."
  scope={{ Textarea, Spacer }}
  code={`
 <>
@@ -48,6 +51,7 @@ Retrieve multi-line user input.

 <Playground
  title="get change"
+  desc="Capture changes in textarea."
  scope={{ Textarea, useState }}
  code={`
 () => {
@@ -67,6 +71,7 @@ Retrieve multi-line user input.

 <Playground
  title={<>With <Code>useInput</Code></>}
+  desc="Use `hooks` to capture changes."
  scope={{ Textarea, useInput, Button, Spacer }}
  code={`
 () => {
--- a/pages/docs/components/toast.mdx
+++ b/pages/docs/components/toast.mdx
@@ -11,7 +11,7 @@ export const meta = {
 Display an important message globally.

 <Playground
-  title="Basic"
+  desc="Basic usage."
  scope={{ Button, useToasts }}
  code={`
 () => {
@@ -23,6 +23,7 @@ Display an important message globally.

 <Playground
  title="Multiline"
+  desc="Display multiline or overlong text."
  scope={{ Button, useToasts }}
  code={`
 () => {
@@ -34,6 +35,7 @@ Display an important message globally.

 <Playground
  title="Action"
+  desc="Add a custom button to the Toast."
  scope={{ Button, useToasts }}
  code={`
 () => {
@@ -52,6 +54,7 @@ Display an important message globally.

 <Playground
  title="Cancel"
+  desc="Use `passive` to change the style of the button."
  scope={{ Button, useToasts }}
  code={`
 () => {
--- a/pages/docs/components/toggle.mdx
+++ b/pages/docs/components/toggle.mdx
@@ -32,7 +32,8 @@ Displays a boolean value.
 `} />

 <Playground
-  title="size"
+  title="sizes"
+  desc="Components of different sizes."
  scope={{ Toggle, Spacer }}
  code={`
 <>