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:
Breaking Changes
Button Component
The Button component has been split into two components: Button and IconButton.
The Button no longer supports the format property that was previously 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 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 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 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 component is a new component that can be used to render a badge with a status.
IconButton Component
The IconButton 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 component allows you to render a set of tab panels, which are displayed one at a time.
ProgressTabs Component
The ProgressTabs 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.
CurrencyInput Component
The CurrencyInput 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 component is a new component that can be used to render a list of keyboard commands or shortcuts.
ProgressAccordion Component
The ProgressAccordion 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:
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 component now displays the correct number of pages (0) when count is 0.
Calendar Component
The Calendar component's day buttons are now of type button, which prevents them from submitting the form when clicked.