-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: document dialog, input and label components (#398)
Issus #390 Finished Dialog Input Label
- Loading branch information
Showing
6 changed files
with
279 additions
and
12 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
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 |
|---|---|---|
| @@ -1,4 +1,103 @@ | ||
| --- | ||
| title: Dialog | ||
| description: A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. | ||
| --- | ||
| --- | ||
|
|
||
| # Imports | ||
|
|
||
| - **Dialog**: The main component to display a dialog. | ||
| - **DialogOverlay**: The overlay component to display a dialog. | ||
| - **DialogPortal**: The portal component to display a dialog. | ||
| - **DialogClose**: The close button component to close a dialog. | ||
| - **DialogDescription**: The description component to display a dialog. | ||
| - **DialogTitle**: The title component to display a dialog. | ||
| - **DialogTrigger**: The trigger component to display a dialog. | ||
| - **DialogHeader**: The header component to display a dialog. | ||
| - **DialogContent**: The content component to display a dialog. | ||
| - **DialogFooter**: The footer component to display a dialog. | ||
|
|
||
| ## Usage | ||
|
|
||
| <Dialog> | ||
| <div className='flex justify-center'> | ||
| <DialogTrigger asChild> | ||
| <Button outline="default" >Edit Profile</Button> | ||
| </DialogTrigger> | ||
| </div> | ||
| <DialogContent className="sm:max-w-[425px]"> | ||
| <DialogHeader> | ||
| <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle> | ||
| <DialogDescription className="font-light"> | ||
| say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className='flex flex-col gap-1'> | ||
| <Label htmlFor="name"> | ||
| Name | ||
| </Label> | ||
| <Input | ||
| id="name" | ||
| defaultValue="Sebastian Garcias" | ||
| className="col-span-3" | ||
| /> | ||
| </div> | ||
| <div className='flex flex-col gap-1'> | ||
| <Label htmlFor="username"> | ||
| Username | ||
| </Label> | ||
| <Input | ||
| id="username" | ||
| defaultValue="@Sebasjs" | ||
| className="col-span-3" | ||
| /> | ||
| </div> | ||
| <DialogFooter> | ||
| <Button type="submit">Confirm</Button> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
|
|
||
| ```jsx | ||
| import { Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <Dialog> | ||
| <DialogTrigger asChild> | ||
| <Button outline="default" >Edit Profile</Button> | ||
| </DialogTrigger> | ||
| <DialogContent className="sm:max-w-[425px]"> | ||
| <DialogHeader> | ||
| <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle> | ||
| <DialogDescription className="font-light"> | ||
| say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className='flex flex-col gap-1'> | ||
| <Label htmlFor="name"> | ||
| Name | ||
| </Label> | ||
| <Input | ||
| id="name" | ||
| defaultValue="Sebastian Garcias" | ||
| className="col-span-3" | ||
| /> | ||
| </div> | ||
| <div className='flex flex-col gap-1'> | ||
| <Label htmlFor="username"> | ||
| Username | ||
| </Label> | ||
| <Input | ||
| id="username" | ||
| defaultValue="@Sebasjs" | ||
| className="col-span-3" | ||
| /> | ||
| </div> | ||
| <DialogFooter> | ||
| <Button type="submit">Confirm</Button> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ) | ||
| } | ||
| ``` |
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 |
|---|---|---|
| @@ -1,4 +1,81 @@ | ||
| --- | ||
| title: Input | ||
| description: An input is a field used to elicit a response from a user. | ||
| --- | ||
| --- | ||
|
|
||
| # Import | ||
|
|
||
| - **Input**: The main component to display an input. | ||
|
|
||
| ## Usage | ||
|
|
||
| <Input placeholder="Email" /> | ||
|
|
||
| ```jsx | ||
| import {Input} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <Input placeholder="Email" /> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Rounded | ||
|
|
||
| <div className='grid grid-cols-2 gap-4'> | ||
| <Input rounded="none" placeholder="Email" /> | ||
| <Input rounded="sm" placeholder="Email" /> | ||
| <Input rounded="md" placeholder="Email" /> | ||
| <Input rounded="lg" placeholder="Email" /> | ||
| </div> | ||
|
|
||
| ```jsx | ||
| import {Input} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <> | ||
| <Input rounded="none" placeholder="Email" /> | ||
| <Input rounded="sm" placeholder="Email" /> | ||
| <Input rounded="md" placeholder="Email" /> | ||
| <Input rounded="lg" placeholder="Email" /> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ### Border | ||
|
|
||
| <div className='grid grid-cols-2 gap-4'> | ||
| <Input border="none" placeholder="Email" /> | ||
| <Input border="sm" placeholder="Email" /> | ||
| <Input border="md" placeholder="Email" /> | ||
| <Input border="lg" placeholder="Email" /> | ||
| </div> | ||
|
|
||
| ```jsx | ||
| import {Input} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <> | ||
| <Input border="none" placeholder="Email" /> | ||
| <Input border="sm" placeholder="Email" /> | ||
| <Input border="md" placeholder="Email" /> | ||
| <Input border="lg" placeholder="Email" /> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### Input Props | ||
|
|
||
| | Props | Type | Description | | ||
| | ----- | ---- | ----------- | | ||
| | rounded | `'none' \| 'sm' \| 'md' \| 'lg' ` | The rounded of the input. | | ||
| | border | `'none' \| 'sm' \| 'md' \| 'lg' ` | The border of the input. | |
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 |
|---|---|---|
| @@ -1,4 +1,83 @@ | ||
| --- | ||
| title: Label | ||
| description: A label is a small piece of UI that communicates the status of an element. | ||
| --- | ||
| --- | ||
|
|
||
| # Import | ||
|
|
||
| - **Label**: The main component to display a label. | ||
|
|
||
| ## Usage | ||
|
|
||
| <Label>Label</Label> | ||
|
|
||
| ```jsx | ||
| import {Label} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <Label>Label</Label> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Variants | ||
|
|
||
| <div className='flex gap-4 flex-wrap'> | ||
| <Label variant="none">Label none</Label> | ||
| <Label variant="default">Label default</Label> | ||
| <Label variant="primary">Label primary</Label> | ||
| <Label variant="success">Label success</Label> | ||
| <Label variant="warn">Label warn</Label> | ||
| <Label variant="error">Label error</Label> | ||
| </div> | ||
|
|
||
| ```jsx | ||
| import {Label} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <> | ||
| <Label variant="none">Label none</Label> | ||
| <Label variant="default">Label default</Label> | ||
| <Label variant="primary">Label primary</Label> | ||
| <Label variant="success">Label success</Label> | ||
| <Label variant="warn">Label warn</Label> | ||
| <Label variant="error">Label error</Label> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ### Size | ||
|
|
||
| <div className='flex gap-4'> | ||
| <Label size="sm">Label</Label> | ||
| <Label size="md">Label</Label> | ||
| <Label size="lg">Label</Label> | ||
| </div> | ||
|
|
||
| ```jsx | ||
| import {Label} from '@openlite/ui' | ||
|
|
||
| function App() { | ||
| return( | ||
| <> | ||
| <Label size="sm">Label</Label> | ||
| <Label size="md">Label</Label> | ||
| <Label size="lg">Label</Label> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### Label Props | ||
|
|
||
| | Props | Type | Description | | ||
| | ----- | ---- | ----------- | | ||
| | variant | `'none' \| 'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the label. | | ||
| | size | `'sm' \| 'md' \| 'lg'` | The size of the label. | |
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