-
Notifications
You must be signed in to change notification settings - Fork 307
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Primitive props documentation (#241)
* docs: Primitive props documentation * Add a composition guide
- Loading branch information
Showing
16 changed files
with
1,889 additions
and
467 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Box, Code, Table, Text } from "@radix-ui/themes"; | ||
| import React from "react"; | ||
|
|
||
| type KeyboardDef = { | ||
| attribute: string; | ||
| values: string; | ||
| }; | ||
|
|
||
| export function DataAttributesTable({ data }: { data: KeyboardDef[] }) { | ||
| return ( | ||
| <Box my="5" asChild> | ||
| <Table.Root variant="surface"> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.ColumnHeaderCell style={{ width: "37%" }}> | ||
| Data attribute | ||
| </Table.ColumnHeaderCell> | ||
| <Table.ColumnHeaderCell>Values</Table.ColumnHeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
|
|
||
| <Table.Body> | ||
| {data.map(({ attribute, values }, i) => { | ||
| const key = `${attribute}-${i}`; | ||
| return ( | ||
| <Table.Row key={key}> | ||
| <Table.RowHeaderCell> | ||
| <Code size="2">{attribute}</Code> | ||
| </Table.RowHeaderCell> | ||
|
|
||
| <Table.Cell> | ||
| {Array.isArray(values) ? ( | ||
| <Code size="2" color="gray"> | ||
| {values.map( | ||
| (value, index) => | ||
| `"${value}" ${values.length !== index + 1 ? " | " : ""}`, | ||
| )} | ||
| </Code> | ||
| ) : ( | ||
| <Text as="p" size="2"> | ||
| {values} | ||
| </Text> | ||
| )} | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| })} | ||
| </Table.Body> | ||
| </Table.Root> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Box, Flex, Kbd, Table } from "@radix-ui/themes"; | ||
| import type React from "react"; | ||
|
|
||
| type KeyboardDef = { | ||
| keys: string[]; | ||
| description: React.ReactNode; | ||
| }; | ||
|
|
||
| export function KeyboardTable({ data }: { data: KeyboardDef[] }) { | ||
| return ( | ||
| <Box my="5" asChild> | ||
| <Table.Root variant="surface"> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.ColumnHeaderCell style={{ width: "37%" }}> | ||
| Key | ||
| </Table.ColumnHeaderCell> | ||
| <Table.ColumnHeaderCell>Description</Table.ColumnHeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
|
|
||
| <Table.Body> | ||
| {data.map(({ keys, description }, i) => { | ||
| const key = `${description}-${i}`; | ||
| return ( | ||
| <Table.Row key={key}> | ||
| <Table.Cell> | ||
| <Flex gap="2"> | ||
| {keys.map((k) => ( | ||
| <Kbd key={k}>{k}</Kbd> | ||
| ))} | ||
| </Flex> | ||
| </Table.Cell> | ||
|
|
||
| <Table.Cell>{description}</Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| })} | ||
| </Table.Body> | ||
| </Table.Root> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| import { AccessibleIcon } from "@radix-ui/react-accessible-icon"; | ||
| import { DividerHorizontalIcon, InfoCircledIcon } from "@radix-ui/react-icons"; | ||
| import { | ||
| Box, | ||
| Code, | ||
| Flex, | ||
| IconButton, | ||
| Inset, | ||
| Popover, | ||
| ScrollArea, | ||
| Table, | ||
| } from "@radix-ui/themes"; | ||
| import type React from "react"; | ||
|
|
||
| export type PropDef = { | ||
| name: string; | ||
| required?: boolean; | ||
| default?: string | boolean; | ||
| type?: string; | ||
| typeSimple: string; | ||
| description?: string | React.ReactNode; | ||
| }; | ||
|
|
||
| export function PropsTable({ | ||
| data, | ||
| propHeaderFixedWidth = true, | ||
| }: { | ||
| data: PropDef[]; | ||
| propHeaderFixedWidth?: boolean; | ||
| }) { | ||
| return ( | ||
| <Box my="5" asChild> | ||
| <Table.Root variant="surface"> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.ColumnHeaderCell | ||
| style={{ width: propHeaderFixedWidth ? "37%" : "auto" }} | ||
| > | ||
| Prop | ||
| </Table.ColumnHeaderCell> | ||
| <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell> | ||
| <Table.ColumnHeaderCell>Default</Table.ColumnHeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
|
|
||
| <Table.Body> | ||
| {data.map( | ||
| ( | ||
| { | ||
| name, | ||
| type, | ||
| typeSimple, | ||
| required, | ||
| default: defaultValue, | ||
| description, | ||
| }, | ||
| i, | ||
| ) => { | ||
| const key = `${name}-${i}`; | ||
| return ( | ||
| <Table.Row key={key} style={{ whiteSpace: "nowrap" }}> | ||
| <Table.RowHeaderCell> | ||
| <Flex display="inline-flex" align="center" gap="2"> | ||
| <Box> | ||
| <Code size="2"> | ||
| {name} | ||
| {required ? "*" : null} | ||
| </Code> | ||
| </Box> | ||
| {description && ( | ||
| <Popover.Root> | ||
| <Popover.Trigger> | ||
| <IconButton variant="ghost" size="1" color="gray"> | ||
| <AccessibleIcon label="Prop description"> | ||
| <InfoCircledIcon /> | ||
| </AccessibleIcon> | ||
| </IconButton> | ||
| </Popover.Trigger> | ||
| <Popover.Content | ||
| side="top" | ||
| align="center" | ||
| style={{ maxWidth: 350 }} | ||
| className="radix-themes-custom-fonts" | ||
| onOpenAutoFocus={(event) => { | ||
| event.preventDefault(); | ||
| (event.currentTarget as HTMLElement)?.focus(); | ||
| }} | ||
| > | ||
| <div className="text-sm">{description}</div> | ||
| </Popover.Content> | ||
| </Popover.Root> | ||
| )} | ||
| </Flex> | ||
| </Table.RowHeaderCell> | ||
| <Table.Cell> | ||
| <Flex display="inline-flex" align="center" gap="2"> | ||
| <Box> | ||
| <Code color="gray" size="2"> | ||
| {typeSimple ? typeSimple : type} | ||
| </Code> | ||
| </Box> | ||
| {Boolean(typeSimple) && Boolean(type) && ( | ||
| <Popover.Root> | ||
| <Popover.Trigger> | ||
| <IconButton variant="ghost" color="gray" size="1"> | ||
| <AccessibleIcon label="See full type"> | ||
| <InfoCircledIcon /> | ||
| </AccessibleIcon> | ||
| </IconButton> | ||
| </Popover.Trigger> | ||
| <Popover.Content | ||
| side="top" | ||
| align="center" | ||
| style={{ maxWidth: "min(1240px, 95vw)" }} | ||
| > | ||
| <Inset> | ||
| <ScrollArea type="auto"> | ||
| <Box | ||
| style={{ | ||
| paddingTop: "var(--inset-padding-top)", | ||
| paddingRight: "var(--inset-padding-right)", | ||
| paddingBottom: | ||
| "var(--inset-padding-bottom)", | ||
| paddingLeft: "var(--inset-padding-left)", | ||
| }} | ||
| > | ||
| <Code | ||
| color="gray" | ||
| variant="ghost" | ||
| size="2" | ||
| style={{ | ||
| whiteSpace: "pre", | ||
| display: "block", | ||
| }} | ||
| > | ||
| {type} | ||
| </Code> | ||
| </Box> | ||
| </ScrollArea> | ||
| </Inset> | ||
| </Popover.Content> | ||
| </Popover.Root> | ||
| )} | ||
| </Flex> | ||
| </Table.Cell> | ||
|
|
||
| <Table.Cell> | ||
| {defaultValue ? ( | ||
| <Code size="2" color="gray"> | ||
| {defaultValue} | ||
| </Code> | ||
| ) : ( | ||
| <AccessibleIcon label="No default value"> | ||
| <DividerHorizontalIcon | ||
| style={{ color: "var(--gray-8)" }} | ||
| /> | ||
| </AccessibleIcon> | ||
| )} | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| }, | ||
| )} | ||
| </Table.Body> | ||
| </Table.Root> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { PropsTable } from "./PropsTable"; | ||
| export { KeyboardTable } from "./KeyboardTable"; | ||
| export { DataAttributesTable } from "./DataAttributesTable"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.