refactor(docs/Dialog): update prop section following latest version
This commit is contained in:
parent
bc6533bf01
commit
24260fe375
@ -1,73 +1,80 @@
|
||||
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
||||
import { Story } from "@/components/Story";
|
||||
import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
|
||||
import {
|
||||
LoadedCode,
|
||||
GITHUB_DIR_COMP,
|
||||
GITHUB_COMP_PREVIEW,
|
||||
GITHUB_STORY,
|
||||
} from "@/components/LoadedCode";
|
||||
import { DialogDemo } from "./DialogBlocks/Preview";
|
||||
import Examples from "./DialogBlocks/Examples";
|
||||
|
||||
# Dialog
|
||||
|
||||
A modal window that prompts the user to take an action or provides critical information.
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<DialogDemo />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
|
||||
</TabContent>
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<DialogDemo />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
## Installation
|
||||
|
||||
1. Create a new directory named `Dialog` in your component folder.
|
||||
2. Create following files in the folder, and paste the code into the file.
|
||||
* `index.ts`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
|
||||
* `Context.ts`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
|
||||
* `Component.tsx`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
|
||||
|
||||
- `index.ts`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
|
||||
- `Context.ts`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
|
||||
- `Component.tsx`
|
||||
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import {
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
DialogOverlay,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogSubtitle,
|
||||
DialogFooter,
|
||||
DialogClose,
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
DialogOverlay,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogSubtitle,
|
||||
DialogFooter,
|
||||
DialogClose,
|
||||
} from "@components/Dialog";
|
||||
```
|
||||
|
||||
```html
|
||||
<DialogRoot>
|
||||
<DialogTrigger>
|
||||
<Button>Open Dialog</Button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Dialog Title</DialogTitle>
|
||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||
</DialogHeader>
|
||||
{/* Main Contents */}
|
||||
<DialogFooter>
|
||||
<DialogClose>
|
||||
<Button>Close</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
<DialogTrigger>
|
||||
<button>Open Dialog</button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Dialog Title</DialogTitle>
|
||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||
</DialogHeader>
|
||||
{/* Main Contents */}
|
||||
<DialogFooter>
|
||||
<DialogClose>
|
||||
<button>Close</button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</DialogRoot>
|
||||
```
|
||||
|
||||
@ -83,99 +90,44 @@ import {
|
||||
|
||||
### DialogOverlay
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:----------|:-----------------------|:--------|:---------------------------------------------|
|
||||
| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
|
||||
| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
|
||||
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
|
||||
|
||||
#### Special
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:---------------|:----------|:--------|:-----------------------------------------------|
|
||||
| :------------- | :-------- | :------ | :--------------------------------------------- |
|
||||
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
|
||||
|
||||
### DialogContent
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
|
||||
| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
|
||||
| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
|
||||
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
|
||||
| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
|
||||
|
||||
### DialogHeader
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:------|:-----------------------|:--------|:----------------------------------------------|
|
||||
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
|
||||
|
||||
### DialogTitle
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:---------|:-----------------------|:--------|:--------------------|
|
||||
| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
|
||||
| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
|
||||
|
||||
### DialogSubtitle
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:----------|:-----------------------|:--------|:------------------------|
|
||||
| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
|
||||
| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
|
||||
| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
|
||||
|
||||
### DialogFooter
|
||||
|
||||
#### Variants
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|:------|:-----------------------|:--------|:-------------------------|
|
||||
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Informational Dialog
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.BasicInformationalDialog />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
|
||||
</TabContent>
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.BasicInformationalDialog />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
### Deleting Item
|
||||
|
||||
<TabProvider defaultName="preview">
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.DeletingItem />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
|
||||
</TabContent>
|
||||
<TabList>
|
||||
<TabTrigger name="preview">Preview</TabTrigger>
|
||||
<TabTrigger name="code">Code</TabTrigger>
|
||||
</TabList>
|
||||
<TabContent name="preview">
|
||||
<Story layout="centered">
|
||||
<Examples.DeletingItem />
|
||||
</Story>
|
||||
</TabContent>
|
||||
<TabContent name="code">
|
||||
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
|
||||
</TabContent>
|
||||
</TabProvider>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user