docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)

* add docs for medusa ui 2.0.0

* fix: copy as child example

* fix: dropdown menu example

* add accordion examples

* fix lint issues

* fix apos in progress tabs demo

* resolve comments

* add icon

* bump z-index on modals to prevent clashing with navbar

* add sidebar item and card

* undo modal z index changes

* add links to updated and new components

* update version

* rm inline code formatting on links

---------

Co-authored-by: Shahed Nasser <shahednasser@gmail.com>
This commit is contained in:
Kasper Fabricius Kristensen
2023-09-27 17:56:25 +02:00
committed by GitHub
parent f5a698ad6f
commit 4e3f3b54cb
79 changed files with 1689 additions and 295 deletions

View File

@@ -0,0 +1,63 @@
---
title: "Command Bar"
description: "Display a command bar with a list of commands"
component: true
---
<ComponentExample name="command-bar-demo" />
## Usage
---
```tsx
import { CommandBar } from "@medusajs/ui"
```
```tsx
<CommandBar open={open}>
<CommandBar.Bar>
<CommandBar.Value>{count} selected</CommandBar.Value>
<CommandBar.Seperator />
<CommandBar.Command
action={onDelete}
label="Delete"
shortcut="d"
/>
<CommandBar.Seperator />
<CommandBar.Command
action={onEdit}
label="Edit"
shortcut="e"
/>
</CommandBar.Bar>
</CommandBar>
```
## API Reference
---
### CommandBar
The root component of the command bar. This component manages the state of the command bar.
<ComponentProps component="command-bar" />
### CommandBar.Bar
The bar component of the command bar. This component is used to display the commands.
### CommandBar.Value
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
### CommandBar.Seperator
The seperator component of the command bar. This component is used to display a seperator between commands.
### CommandBar.Command
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
<ComponentProps component="command-bar-command" />