v0.14.0

What’s Changed

• Deprecate IllustrationProps "style" in favor of "kind" (#411) @gabro
• Allow customizing Table column header background/foreground (#407) @gabro
• Make it easier to customize the default Navigation active element (#408) @gabro
• Add TimeField component (#391) @gabro
• Add 0 to radius allowed values (#399) @gabro

💥 Breaking changes

• Make sure Toast action Bleed matches the action button size (#406) @gabro
• Remove unused iconSize from InputConfig (#410) @gabro

⏩ Migration strategy

The breaking changes above remove two config options, specifically config.toast.smallButtonPaddingY and config.input.iconSize.

config.toast.smallButtonPaddingY isn't needed anymore since we're now able to infer it from the Button config automatically, you just need to remove it from your custom config, if you were using it.

config.input.iconSize was simply unused, so it wasn't already having any effect and it can be safely removed. If you need to customize the size of icons inside input fields, look for more specific options like passwordIconSize.

🐞 Bug fixes

• Make sure Toast action Bleed matches the action button size (#406) @gabro
• Add Outline/Container border to SelectField Menu (#404) @gabro
• Use sprinkles from context instead of bentoSprinkles (#396) @gabro

🔧 Dependency updates

• Update dependency postcss to v8.4.17 (#392) @renovate-bot
• Update dependency ts-jest to v28.0.8 (#393) @renovate-bot

📚 Documentation

• Fix DisclosureGroup GitHub link (#398) @gabro
• Add DisclosureGroup documentation (#390) @gabro
• Fix playroom deploy (#389) @gabro

v0.13.6

What’s Changed

🐞 Bug fixes

• Make SelectField use its own List config (#387) @gabro
• Fix bug when nesting BentoConfigProvider (#386) @gabro
• Certain navigation components don't trigger their action (#383) @federico-ercoles

🔧 Dependency updates

• Update dependency @floating-ui/dom to v1.0.2 (#384) @renovate-bot
• Update dependency @types/react to v18.0.21 (#385) @renovate-bot

🧹 Chores

• Migrate storybook to new 0.13 API and cleanup formatMessage (#361) @gabro

📚 Documentation

• Improve documentation about tsup config setup (#388) @gabro

v0.13.5

What’s Changed

🐞 Bug fixes

• Make @vanilla-extract/css a dependency (#382) @gabro

v0.13.4

What’s Changed

• Inline props not resolved correctly (#380) @federico-ercoles
• fix import example (#377) @marcopiii
• Menu: allow sub-menus (#359) @federico-ercoles
• Export FieldProps (#369) @federico-ercoles

🔧 Dependency updates

• Update dependency @types/jest to v28.1.8 (#372) @renovate-bot
• Update dependency @types/react to v18.0.20 (#373) @renovate-bot
• Update dependency @vanilla-extract/webpack-plugin to v2.1.12 (#374) @renovate-bot
• Update dependency date-fns to v2.29.3 (#375) @renovate-bot

v0.13.3

What’s Changed

🐞 Bug fixes

• Remove duplicate FieldProps eport (#366) @gabro

v0.13.2

What’s Changed

• Remove ts-toolbelt (#365) @gabro

🔧 Dependency updates

• Update dependency @types/jest to v28.1.7 (#363) @renovate-bot
• Update dependency @testing-library/jest-dom to v5.16.5 (#362) @renovate-bot

v0.13.1

What’s Changed

🐞 Bug fixes

• Add missing ListItem export (#360) @gabro

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.

v0.12.2

What’s Changed

• Autofocus on fields (#329) @marcopiii
• Added show password to password field (#285) @Reggionick

🔧 Dependency updates

• Pin dependencies (#337) @renovate-bot
• Update docusaurus monorepo to v2.0.1 (#338) @renovate-bot
• Update react-aria monorepo (#333) @renovate-bot
• Update pnpm to v7.8.0 (#336) @renovate-bot
• Update docusaurus monorepo to v2.0.0 (#335) @renovate-bot
• Update dependency chromatic to v6.7.2 (#334) @renovate-bot
• Update dependency @react-aria/link to v3.3.2 (#331) @renovate-bot
• Update dependency @react-aria/separator to v3.2.2 (#332) @renovate-bot
• Pin dependencies (#327) @renovate-bot
• Update @react-aria related dependencies (#326) @gabro
• Update jest monorepo (#323) @renovate-bot
• Update dependency ts-jest to v28.0.7 (#303) @renovate-bot
• Update dependency @testing-library/user-event to v14.3.0 (#310) @renovate-bot
• Update pnpm to v7 (#257) @renovate-bot

🧹 Chores

• Allow @types/react 18 as peer dependencies (#325) @gabro
• Add sideEffects field to package.json to allow bundlers to treeshake (#317) @gabro

📚 Documentation

• Improve table sorting example (#313) @marcopiii
• Fix website props generation (#324) @gabro
• Add SelectField to docs, fix storybook links and cleanup unused imports (#322) @gabro

v0.12.1

What’s Changed

• Add optional tooltipContent to textWithIcon and numberWithIcon columns (#316) @gabro

🐞 Bug fixes

• #262: Bug: Tables lose their sorting status when interacting with them (#308) @marcopiii

🔧 Dependency updates

• Update dependency eslint to v8.20.0 (#309) @renovate-bot
• Update dependency date-fns to v2.29.1 (#305) @renovate-bot
• Update dependency chromatic to v6.7.1 (#304) @renovate-bot
• Update babel monorepo to v7.18.9 (#302) @renovate-bot