v0.13.0

What’s Changed

• Improve Actions error (impacts also Form and Modal) (#214) @veej

💥 Breaking changes

• Replace constructor approach with context + module augmentation (#358) @gabro
• SelectionControlGroup: remove paddingY config (#351) @marcopiii
• Use { custom: number } convention for Illustration size (#330) @marcopiii

🔧 Dependency updates

• Update dependency @floating-ui/core to v1.0.1 (#356) @renovate-bot
• Update dependency @floating-ui/dom to v1.0.1 (#357) @renovate-bot
• Update dependency @testing-library/dom to v8.16.1 (#353) @renovate-bot
• Update babel monorepo (#352) @renovate-bot
• Update dependency webpack to v5.74.0 (#339) @renovate-bot
• Use official floating-ui dependency instead of fork (#340) @marcopiii

Migration guide

#358 changes how to consume Bento components. Users would previously had to invoke the createBentoComponents function to configure components and pass in custom sprinkles; the function would then return the configured components to use.
This approach had the benefit of making some customizations preserved in the component types (like custom sprinkles, or custom chip colors), but it would also mean components can't be just "used" right away.

#358 changes this by allowing components to be used right away:

import { Button } from "@buildo/bento-design-system";

// This now just works, no need to "create" the component first!
<Button  kind="solid" hierarchy="primary" onClick={() => window.alert("Hi!")} label="Hello!"/>

Customization is now done via BentoProvider (which already existed for passing down useful context to the components), so you can just do:

import { Button, BentoProvider } from "@buildo/bento-design-system";

// Customizing the button config
<BentoProvider defaultMessages={defaultMessages} config={{ button: { radius: 16 }}>
  <Button  kind="solid" hierarchy="primary" onClick={() => window.alert("Hi!")} label="Hello!"/>
</BentoProvider

The minor downside to this refactor is if you change something that you want reflected in the types (like in case of custom sprinkles), you now need to separately set the correct type via module augmentation. This is covered by the documentation, but it basically means that if you want to use custom sprinkles you need to add:

import { sprinkles } from "./sprinkles";

declare module "@buildo/bento-design-system" {
  interface TypeOverrides {
    // inform TypeScript about your own sprinkles function
    SprinklesFn: typeof sprinkles;
  }
}

Ok so how do I migrate?

In order to ease the transition we've kept createBentoComponents around.

If you are invoking createBentoComponents once and just exporting the components, then good news: you don't have to do anything! Components will just work as before.

Regardless, we recommend to do this refactor anyway, when you have the time, since we'll eventually remove createBentoComponents in future releases.

In case you are invoking createBentoComponents more than once, possibly in order to create multiple versions of a component (e.g. a RoundedChip and a SquaredChip) then this won't work as expected anymore, since the config is not attached anymore to the components, but it's passed down via BentoProvider, so components will inherit the config from the BentoProvider created by the first createBentoComponents call.

Additionally, if you were using custom sprinkles or custom Chip colors, you then need to add the module augmentation snippet we've talked about above.

Here's a few migration examples:

Basic config

- import { createBentoComponents } from "@buildo/bento-design-system";
+ import { createBentoProvider } from "@buildo/bento-design-system";

- const { BentoProvider, Button } = createBentoComponents({ button: { radius: 16 } });
+ const BentoProvider = createBentoProvider({ button: { radius: 16 } });
+ export { Button } from "@buildo/bento-design-system";

Custom sprinkles and custom chip colors

- import { createBentoComponents } from "@buildo/bento-design-system";
+ import { createBentoProvider } from "@buildo/bento-design-system";
import { sprinkles } from "./sprinkles.css";

-const { BentoProvider, Button } = createBentoComponents({
+const BentoProvider = createBentoProvider({
   button: { radius: 16 },
   chip: { customColors: { custom: "customColor1" }
 }, sprinkles);
+export { Button } from "@buildo/bento-design-system";
+
+declare module "@buildo/bento-design-system" {
+  interface TypeOverrides {
+    SprinklesFn: typeof sprinkles;
+    ChipCustomColors: "custom";
+  }
+}

NOTE: The createBentoProvider function is helpful to create a "pre-configured" BentoProvider holding your config and sprinkles. You also have the option of just exporting BentoProvider from @buildo/bento-design-system and passing config and sprinkles via props.

Multiple variants of a component

- import { createBentoComponents } from "@buildo/bento-design-system";
+ import { createBentoProvider, Chip } from "@buildo/bento-design-system";

- const { BentoProvider, Chip: PillChip } = createBentoComponents({ chip: { radius: "circledX" } });
- const { Chip: SquaredChip } = createBentoComponents({ chip: { radius: 0 } });
+ const BentoProvider = createBentoProvider({ chip: { radius: "circledX" } });
+ export const SquaredChip = withConfig(Chip, { chip: { radius: 0 } })
+ export { Chip as PillChip };
+ export { Button } from "@buildo/bento-design-system";

The withConfig function wraps a component with a specific config, so that it takes precedence of the one set in BentoProvider.