p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(docs/Dialog): update prop section following latest version

Browse Source
This commit is contained in:
p-sw 2024-07-12 18:49:53 +09:00
parent bc6533bf01
commit 24260fe375
1 changed files with 133 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/docs/components/Dialog.mdx
View File

@ -1,10 +1,16 @@
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">
@ -26,11 +32,12 @@ A modal window that prompts the user to take an action or provides critical info
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`
- `index.ts`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
* `Context.ts`
- `Context.ts`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
* `Component.tsx`
- `Component.tsx`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
## Usage
@ -52,7 +59,7 @@ import {
```html
<DialogRoot>
<DialogTrigger>
<Button>Open Dialog</Button>
<button>Open Dialog</button>
</DialogTrigger>
<DialogOverlay>
<DialogContent>
@ -63,7 +70,7 @@ import {
{/* Main Contents */}
<DialogFooter>
<DialogClose>
<Button>Close</Button>
<button>Close</button>
</DialogClose>
</DialogFooter>
</DialogContent>
@ -83,66 +90,12 @@ 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
@ -178,4 +131,3 @@ import {
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
</TabContent>
</TabProvider>