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>
2023-09-27 18:56:25 +03:00
parent f5a698ad6f
commit 4e3f3b54cb
79 changed files with 1689 additions and 295 deletions
@@ -26,4 +26,10 @@ Find in this page the upgrade guides that require necessary steps when upgrading

 <DocCard
  item={getFirstCategoryItem('Medusa React')}
-/>
+/>
+
+## Medusa UI
+
+<DocCard
+  item={getFirstCategoryItem('Medusa UI')}
+/>
@@ -0,0 +1,105 @@
+---
+description: "Actions Required for v.2.0.0"
+sidebar_custom_props:
+  iconName: "component-solid"
+---
+
+# v2.0.0
+
+Version 2.0.0 of Medusa UI introduces a set of new components, and breaking changes to some of the existing components.
+
+## How to Update
+
+Run the following command in your project:
+
+```bash npm2yarn
+npm install @medusajs/ui@2.0.0
+```
+
+---
+
+## Breaking Changes
+
+### `Button` Component
+
+The [Button](https://docs.medusajs.com/ui/components/button) component has been split into two components: `Button` and `IconButton`.
+
+The `Button` no longer supports the `format` property that was periously used to specify if a button should be styled as a icon button.
+
+Instead, use the `IconButton` component for this purpose.
+
+### `Badge` Component
+
+The [Badge](https://docs.medusajs.com/ui/components/badge) component has been split into two components: `Badge` and `IconBadge`.
+
+The `Badge` component no longer supports the `format` property that was previously used to specify if a badge should be styled as a tag. Also, the border-radius of the `Badge` component is now controlled by the `rounded` property.
+
+Instead, use the `IconBadge` component for this purpose.
+
+### `CodeBlock` Component
+
+The [CodeBlock](https://docs.medusajs.com/ui/components/code-block) component no longer accepts the `hideLineNumbers` property. Instead, the property should be passed directly to the `snippets` property.
+
+This change was made to make the component more flexible, allowing users to specify whether to show line numbers for each snippet individually.
+
+---
+
+## New Components
+
+### `IconBadge` Component
+
+The [IconBadge](https://docs.medusajs.com/ui/components/icon-badge) component is a new component that can be used to render a badge with an icon. It is a replacement for the `Badge` component with the `format` property set to `icon`.
+
+### `StatusBadge` Component
+
+The [StatusBadge](https://docs.medusajs.com/ui/components/status-badge) component is a new component that can be used to render a badge with a status.
+
+### `IconButton` Component
+
+The [IconButton](https://docs.medusajs.com/ui/components/icon-button) component is a new component that can be used to render a button with an icon. It is a replacement for the `Button` component with the `format` property set to `icon`.
+
+### `Tabs` Component
+
+The [Tabs](https://docs.medusajs.com/ui/components/tabs) component allows you to render a set of tab panels, which are displayed one at a time.
+
+### `ProgressTabs` Component
+
+The [ProgressTabs](https://docs.medusajs.com/ui/components/progress-tabs) component is a new component that can be used to render a set of tab panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.
+
+### `CurrencyInpput` Component
+
+The [CurrencyInput](https://docs.medusajs.com/ui/components/currency-input) component is a new component that can be used to render a currency input field. It is specifically designed to be used for implementing currency inputs, such as money amounts.
+
+### `CommandBar` Component
+
+The [CommandBar](https://docs.medusajs.com/ui/components/command-bar) component is a new component that can be used to render a list of keyboard commands or shortcuts.
+
+### `ProgressAccordion` Component
+
+The [ProgressAccordion](https://docs.medusajs.com/ui/components/progress-accordion) component is a new component that can be used to render a list of accordion panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.
+
+The `ProgressAccordion` component requires animations that have been introduced in the latest version of `@medusajs/ui-preset`, so make sure to update this package as well:
+
+```bash npm2yarn
+npm install @medusajs/ui-preset@1.0.1
+```
+
+---
+
+## Other Changes
+
+### Cleanup of `z-index`'s across all components
+
+The `z-index`'s of all components have been cleaned up to ensure that components are layered correctly, out of the box. Components now have a maximum `z-index` of `1`, with the exception of the `Toaster` component.
+
+This prevents issues such as the `Select.Content` component being layered behind the `FocusModal` component.
+
+While this is meant to make it easier to use the components, be aware that if your application uses custom `z-index`'s, you may need to update them, or override the `z-index` of the components from Medusa UI.
+
+### `Table.Pagination` Component
+
+The [Table.Pagination](https://docs.medusajs.com/ui/components/table) component now displays the correct number of pages (`0`) when `count` is `0`.
+
+### `Calendar` Component
+
+The [Calendar](https://docs.medusajs.com/ui/components/calendar) component's day buttons are now of type `button`, which prevents them from submitting the form when clicked.
@@ -0,0 +1,6 @@
+{
+  "position": 5,
+  "collapsed": true,
+  "link": null,
+  "label": "Medusa UI"
+}