bento-design-system

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

What’s Changed

🐞 Bug fixes

• Remove duplicate FieldProps eport (#366) @gabro

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

What’s Changed

🐞 Bug fixes

• Add missing ListItem export (#360) @gabro

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.

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

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

What’s Changed

• #293: Add iconSize to Disclosure config (#300) @marcopiii
• Added searchable prop to SelectField (#278) @Reggionick
• Added autofocus prop into Modal (#288) @Reggionick
• Add TextArea component (#273) @Reggionick
• #281: Sticky table header and fixed table height (#282) @gabro
• More flexible createBentoComponents (#160) @gabro

💥 Breaking changes

• #296: Remove ModalContext (#299) @federico-ercoles
• Added required aria props to SearchBar component (#270) @Reggionick

🐞 Bug fixes

• #298: Bug: Radio group control background should be Background/Primary (#301) @marcopiii
• Added check on SelectField's value prop (#295) @Reggionick

🔧 Dependency updates

• Update dependency @mdx-js/react to v1.6.22 (#284) @renovate-bot
• Pin dependency @types/react to 18.0.15 (#283) @renovate-bot
• Update to React 18 and related dependencies (#265) @gabro

📚 Documentation

• Add Governance document (#271) @gabro

What’s Changed

🐞 Bug fixes

• Fix borderStyle atoms (#254) @gabro

🔧 Dependency updates

• Pin dependencies (#252) @renovate-bot
• Update docusaurus (#264) @gabro
• Update several dependencies (#263) @gabro
• Update babel monorepo to v7.18.6 (#259) @renovate-bot
• Update dependency prettier to v2.7.1 (#258) @renovate-bot
• Update dependency typescript to v4.7.4 (#256) @renovate-bot
• Update dependency tsup to v5.12.9 (#246) @renovate-bot
• Update dependency ts-jest to v27.1.5 (#253) @renovate-bot

What’s Changed

• add DataViz colors to foreground/border colors (#250) @veej
• fix print of Table with empty headers (#249) @veej
• add inverse colors to Title (#248) @veej
• Modal: add 'kind', deprecate 'isDestructive', add 'size="wide"' (#244) @gabro

🔧 Dependency updates

• Update dependency mini-css-extract-plugin to v2.6.1 (#242) @renovate-bot

📚 Documentation

• Add documentation for useToast and support showToast in Playroom examples (#245) @gabro

What’s Changed

• Add standalone Checkbox component (#239) @gabro

🔧 Dependency updates

• Update dependency eslint-config-react-app to v7.0.1 (#241) @renovate-bot
• Update dependency @vanilla-extract/webpack-plugin to v2.1.11 (#240) @renovate-bot
• Update dependency @types/react to v17.0.47 (#238) @renovate-bot
• Update dependency @storybook/testing-library to v0.0.13 (#237) @renovate-bot

What’s Changed

🐞 Bug fixes

• Fix Table layout when column is fill-available (#236) @gabro

What’s Changed

💥 Breaking changes

• Add selectAll / clearAll to SelectField (#235) @gabro
  This is breaking because it requires new default messages in DesignSystemProvider

🔧 Dependency updates

• Update dependency @vanilla-extract/babel-plugin to v1.1.7 (#234) @renovate-bot
• Update dependency @storybook/testing-library to v0.0.12 (#233) @renovate-bot
• Update dependency @vanilla-extract/esbuild-plugin to v2.1.0 (#222) @renovate-bot

What’s Changed

🐞 Bug fixes

• Downgrade ts-pattern to fix runtime bug in Table (#232) @gabro

What’s Changed

• Add custom width to Table columns (#231) @gabro

🔧 Dependency updates

• Update dependency @vanilla-extract/webpack-plugin to v2.1.10 (#229) @renovate-bot
• Update dependency @vanilla-extract/sprinkles to v1.4.1 (#228) @renovate-bot

📚 Documentation

• Fix atomic styles example generated css (#230) @giogonzo

What’s Changed

🐞 Bug fixes

• Add explicit grid-auto-rows: max-content to Table rows (#227) @gabro
• Use border instead of outline for Card, Menu, and Toast (#226) @gabro

What’s Changed

• #5211496: Add all Icons and Illustrations (#225) @veej
• allow to pass complex Children to StepperStep label (#220) @veej

🐞 Bug fixes

• #5097621: DateField - date picker grows when there are too many shortcuts (#224) @veej
• #5191301: Disclosure title has the same color in level 1 and 2 (#223) @veej

🔧 Dependency updates

• Update dependency @vanilla-extract/babel-plugin to v1.1.6 (#221) @renovate-bot

What’s Changed

• Add icon to LinkButton + fix onPress type (#219) @veej
• export Stepper Step component (#218) @veej

🔧 Dependency updates

• Update dependency @types/react-table to v7.7.12 (#217) @renovate-bot
• Update dependency @types/react to v17.0.45 (#216) @renovate-bot

What’s Changed

• Allow Children in List labels (#215) @gabro
• #5017558: Remove body default margin (#213) @veej

What’s Changed

• Add rightAccessory to Tabs tab (#211) @gabro
• Add ContentWithSidebar component (#209) @gabro

💥 Breaking changes

• #5014271: Edit breakpoints + add wide (#210) @veej

🔧 Dependency updates

• Update dependency @react-types/button to v3.4.5 (#206) @renovate
• Update dependency @types/lodash.orderby to v4.6.7 (#207) @renovate

📚 Documentation

• Docs: use ReactMarkdown for components description (#203) @veej
• Support stateful components and strip TypeScript syntax in Playroom (#204) @gabro
• Add Algolia search (#208) @gabro
• Add missing imports in MDX (#205) @gabro