Migrating @codedazur/fusion-ui

To v1.0.0

1. ExpansionPanel.body

The ExpansionPanel’s body prop has been removed. You can provide its content as children instead.

2. Separate.Wrapper

The Separate component’s Wrapper prop has been removed. Instead, you can simply wrap the <Separate> inside of whatever JSX you were using as the wrapper component.

3. Breakpoints

The breakpoint strategy has shifted to allow for a fourth display size. Although the current names are retained, their meaning has shifted. What used to be small is now base, and the redundant media query min-width: 0px has been removed. The base styles are now simply applied without a query.

However, this means that all usages of the responsive values have to be updated according to the table below.

4. Text.variant

The Text component’s variant prop has been split into separate variant and size props to provide more granular control over typography. Update your Text components to use both props as needed.

<Text variant="body" size="large">
  Hello, world!
</Text>

5. Hero.parallax

The Hero component’s parallax prop behavior has been inverted - higher values now represent a stronger parallax effect. You’ll need to adjust your parallax values accordingly (e.g., what was 0.2 would now be 0.8).

6. SymbolButton.variant

The SymbolButton’s variant prop has been removed in favor of a simpler, more consistent styling approach. Please remove any usage of the variant prop.

7. App Height

The App component no longer sets the height of the html and body elements. In order for your app to fill the entire height of the viewport, you will need to set the height of the html and body elements to 100%, so that flex elements can fill the remaining space.

8. Token Groups

The global token group has been renamed to primitive and the alias group has been renamed to semantic.

This is also reflected in the App component’s theme prop. You can now provide a primitive, semantic, or component object to the theme prop, or you can still provide a string, which will be interpreted as the semantic theme.

import { primitiveTheme, darkTheme, componentTheme } from "@codedazur/fusion-ui/style";
 
<App theme={{
  primitive: primitiveTheme,
  semantic: darkTheme,
  component: componentTheme,
}}>

9. Color Scale Adjustments

The primitive color scales have been adjusted to provide better range in both light and dark extremes. You may need to review and adjust any custom color usage to ensure proper contrast and visibility.

10. Font Family Tokens

Primitive font family tokens have been restructured to avoid tight coupling to specific typefaces. Update any direct usage of the fontFamily tokens to use the new, more abstract names.

11. Component Tokens

Component tokens have been reorganized to remove nested element structures. Review and update any custom themes or token usage to match the new flat structure. Please refer to the Token Contract documentation for more information.

To v0.87.0

1. ImageSection Props

The ImageSection’s image and caption prop have been replaced with a single figure prop to abstract this pattern. The FigureProps in turn has an image and caption, so this is relatively simple to migrate.