245e5c9a69
* added tool to generate spec files for React components * use typedoc for missing descriptions and types * improvements and fixes * improvements * added doc comments for half of the components * add custom resolver + more doc comments * added all tsdocs * general improvements * add specs to UI docs * added github action * remove unnecessary api route * Added readme for react-docs-generator * remove comment * Update packages/design-system/ui/src/components/currency-input/currency-input.tsx Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> * remove description of aria fields + add generate script --------- Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
60 lines
1.1 KiB
Plaintext
60 lines
1.1 KiB
Plaintext
---
|
|
title: "Focus Modal"
|
|
description: "A modal component that spans the whole screen"
|
|
component: true
|
|
---
|
|
|
|
<ComponentExample name="focus-modal-demo" />
|
|
|
|
## Usage
|
|
|
|
---
|
|
|
|
```tsx
|
|
import { FocusModal } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
<FocusModal>
|
|
<FocusModal.Trigger>Trigger</FocusModal.Trigger>
|
|
<FocusModal.Content>
|
|
<FocusModal.Header>Title</FocusModal.Header>
|
|
<FocusModal.Body>Content</FocusModal.Body>
|
|
</FocusModal.Content>
|
|
</FocusModal>
|
|
```
|
|
|
|
### API Reference
|
|
|
|
---
|
|
|
|
<ComponentReference mainComponent="FocusModal" componentsToShow={[
|
|
"FocusModal",
|
|
"FocusModal.Header",
|
|
"FocusModal.Body",
|
|
]} />
|
|
|
|
## Example: Control Open State
|
|
|
|
---
|
|
|
|
```tsx
|
|
import { useState } from "react"
|
|
|
|
const MyModal = () => {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<FocusModal
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
>
|
|
<FocusModal.Trigger>Trigger</FocusModal.Trigger>
|
|
<FocusModal.Content>
|
|
<FocusModal.Header>Title</FocusModal.Header>
|
|
<FocusModal.Body>Content</FocusModal.Body>
|
|
</FocusModal.Content>
|
|
</FocusModal>
|
|
)
|
|
}
|
|
``` |