bento-design-system

What’s Changed

• Allow control of Select open-on-focus behavior (#824) @federico-ercoles

What’s Changed

• Add vertical dividers to Table columns (#823) @federico-ercoles

What’s Changed

• Add clearable prop to single-select SelectField (#822) @gabro

What’s Changed

• Change BaseTextInput width to full (#818) @federico-ercoles

🐞 Bug fixes

• Re-add export of type SelectOption (#817) @federico-ercoles

What’s Changed

💥 Breaking changes

• Add text and select input (#814) @federico-ercoles

Migration guide

New versions of input components have been added.

• NumberInput has been renamed to BaseNumberInput.
• New NumberInput, TextInput and SelectInput components have been added, providing the same functionality as the *Field component, but without automatically having a label or support for error and descriptive messages.
• New BaseTextInput and BaseSelect components have been added, which include only the graphical part of the previous components, allowing the user to manually control the input functionality (similarly to BaseNumberInput).

🐞 Bug fixes

• Bugfix: TextField discards type other than "text" or "password" (#815) @gabro

🔧 Dependency updates

• Update dependency @fontsource/lexend to v5.0.17 (#806) @renovate-bot

What’s Changed

🐞 Bug fixes

• Fix withBentoTheme types (#810) @gabro
• Fix config types for navigation.activeNavigation (#809) @gabro

What’s Changed

• Allow Table columns to have footers (#804) @federico-ercoles

🔧 Dependency updates

• Update dependency @babel/traverse to v7.23.2 [SECURITY] (#803) @renovate-bot
• Update dependency @testing-library/jest-dom to v6.1.4 (#801) @renovate-bot
• Update dependency @tanstack/virtual-core to v3.0.0-beta.65 (#800) @renovate-bot
• Update dependency @tanstack/react-virtual to v3.0.0-beta.65 (#799) @renovate-bot
• Update dependency @storybook/testing-library to v0.2.2 (#797) @renovate-bot
• Update dependency @fontsource/lexend to v5.0.15 (#796) @renovate-bot
• Update dependency postcss to v8.4.31 [SECURITY] (#795) @renovate-bot
• Update dependency @tanstack/react-virtual to v3.0.0-beta.61 (#792) @renovate-bot
• Update dependency @fontsource/lexend to v5.0.13 (#791) @renovate-bot
• Pin dependencies (#790) @renovate-bot

What’s Changed

• Allow virtualizing rows when groupBy is active (#779) @giogonzo

💥 Breaking changes

• Reimplement DateField with react-aria (#696) @veej

Migration guide

The DateField has been rewritten from scratch using react-aria, which greatly improves the accessibility, by better supporting the wide range of possible inputs (mouse, keyboard, touch, screen reader).

We introduced some subtle changes in the UI and UX of the field, to better align with the rest of Bento. These changes are breaking in the sense that there's no way to get the old UI and UX back, but we don't expect to have a disruptive impact, in practice.

From a technical stanpoint, the only breaking change is the value accepted by the DateField when type="range".
Previously, the value (and the matching onChange) would be of type [Date | null, Date | null], meaning each of the ranges could be independently null at any point, to represent a partially selected range. This transient state is now managed internally to the component, and the type of value (and the matching onChange) is now [Date, Date] | null. In other words, DateField will not accept nor return a partial range, when in "range" mode.

Again, we don't expect this to be particularly disruptive, but if this is causing unexpected troubles, let us know by opening an issue.

🐞 Bug fixes

• Correctly re-export Time and CalendarDate (#789) @gabro

🔧 Dependency updates

• Update dependency @testing-library/dom to v9.3.3 (#783) @renovate-bot
• Update dependency @phosphor-icons/react to v2.0.13 (#782) @renovate-bot

⚙️ Configurator

• Implement HomePage and MyTheme page (#732) @veej

What’s Changed

🐞 Bug fixes

• fix using Gruped Headers and virtualization together (#781) @giogonzo

What’s Changed

• add option to virtualize Table rows (#774) @giogonzo
• Allow grouped table headers (#769) @federico-ercoles

🐞 Bug fixes

• Add retrocompatible overload for createBentoProvider (#775) @gabro
• Fix withBentoConfig utility (#776) @federico-ercoles
• Make sure we're passing aria props to InternalCheckbox (#773) @gabro
• Fix error when pressing backspace in TimeField (#768) @gabro
• Fix backgrounds and colors (#766) @federico-ercoles
• Bug: isSelected in List does not have any effect (#759) @federico-ercoles

🔧 Dependency updates

• Update dependency @storybook/testing-library to v0.2.1 (#772) @renovate-bot
• Update dependency @fontsource/lexend to v5.0.12 (#771) @renovate-bot
• Update babel monorepo (#770) @renovate-bot
• Update dependency @types/react-input-mask to v3 (#765) @renovate-bot
• Update dependency @fontsource/lexend to v5.0.11 (#762) @renovate-bot
• Update dependency @types/node to v18.17.14 (#763) @renovate-bot
• Update babel monorepo to v7.22.14 (#761) @renovate-bot
• Update dependency @testing-library/jest-dom to v6 (#756) @renovate-bot

What’s Changed

• Add "use client" directive to index.ts (#758) @gabro
• Include defaultFonts.ts in sideEffects (#710) @gabro
• Add defaultElevation and defaultPadding config to Card (#682) @federico-ercoles
• Add ThemeProvider (#580) @veej

🔧 Dependency updates

• Update dependency @testing-library/react to v14 (#757) @renovate-bot
• Update dependency @testing-library/dom to v9 (#755) @renovate-bot
• Update typescript-eslint monorepo to v6.5.0 (#754) @renovate-bot
• Update dependency postcss to v8.4.29 (#753) @renovate-bot
• Update storybook monorepo to v7.4.0 (#752) @renovate-bot
• Update dependency recharts to v2.8.0 (#750) @renovate-bot
• Update dependency eslint to v8.48.0 (#748) @renovate-bot
• Update dependency chromatic to v6.24.1 (#747) @renovate-bot
• Update dependency @vanilla-extract/webpack-plugin to v2.3.0 (#746) @renovate-bot
• Update dependency @vanilla-extract/vite-plugin to v3.9.0 (#745) @renovate-bot
• Update dependency @vanilla-extract/esbuild-plugin to v2.3.0 (#744) @renovate-bot
• Update dependency @react-aria/numberfield to v3.7.0 (#743) @renovate-bot
• Update dependency vitest to v0.34.3 (#742) @renovate-bot
• Update dependency @floating-ui/react-dom to v2.0.2 (#738) @renovate-bot
• Update babel monorepo to v7.22.13 (#741) @renovate-bot
• Update dependency @types/react-table to v7.7.15 (#735) @renovate-bot
• Update dependency turbo to v1.10.13 (#736) @renovate-bot
• Update dependency @types/react to v18.2.21 (#734) @renovate-bot
• Update dependency @vanilla-extract/css to v1.13.0 (#731) @renovate-bot
• Update babel monorepo (#733) @renovate-bot
• Update dependency @types/node to v18.17.12 (#730) @renovate-bot
• Update typescript-eslint monorepo to v6.4.1 (#729) @renovate-bot
• Update dependency @types/react to v18.2.20 (#728) @renovate-bot
• Pin dependencies (#725) @renovate-bot
• Pin dependencies (#724) @renovate-bot
• Update dependency @floating-ui/react-dom to v2 (#720) @renovate-bot
• Update storybook monorepo to v7.3.2 (#718) @renovate-bot
• Update dependency @fontsource/lexend to v5 (#721) @renovate-bot
• Update actions/setup-node action to v3 (#719) @renovate-bot
• Update pnpm to v7.33.6 (#717) @renovate-bot
• Update dependency webpack to v5.88.2 (#715) @renovate-bot
• Pin dependency @floating-ui/utils to 0.1.1 (#714) @renovate-bot
• Update dependency tsup to v7.2.0 (#711) @renovate-bot
• Update dependency lint-staged to v13.3.0 (#709) @renovate-bot
• Update dependency playroom to v0.32.1 (#691) @renovate-bot
• Update dependency eslint to v8.47.0 (#708) @renovate-bot
• Update dependency @floating-ui/core to v1.4.1 (#703) @renovate-bot
• Update dependency @internationalized/date to v3.4.0 (#706) @renovate-bot
• Update dependency @vanilla-extract/recipes to v0.5.0 (#707) @renovate-bot
• Update dependency @floating-ui/dom to v1.5.1 (#705) @renovate-bot
• Update dependency @types/node to v18.17.6 (#704) @renovate-bot
• Update react-aria monorepo (#702) @renovate-bot
• Update babel monorepo to v7.22.10 (#700) @renovate-bot
• Update dependency @types/testing-library__jest-dom to v5.14.9 (#701) @renovate-bot
• Update react monorepo (#675) @renovate-bot
• Pin dependencies (#699) @renovate-bot
• Update dependency postcss to v8.4.28 (#674) @renovate-bot
• Update dependency @testing-library/jest-dom to v5.17.0 (#683) @renovate-bot
• Update dependency @types/node to v18.17.5 (#684) @renovate-bot
• Update dependency chromatic to v6.22.0 (#685) @renovate-bot
• Update dependency turbo to v1.10.12 (#687) @renovate-bot
• Update dependency typescript to v4.9.5 (#688) @renovate-bot
• Update dependency ts-loader to v9.4.4 (#686) @renovate-bot
• Update dependency vitest to ^0.34.0 (#689) @renovate-bot
• Update storybook monorepo to v7.2.1 (#690) @renovate-bot
• Update babel monorepo to v7.22.9 (#672) @renovate-bot
• Update dependency @floating-ui/dom to v1.4.5 (#673) @renovate-bot
• Update dependency eslint to v8.45.0 (#677) @renovate-bot
• Update dependency playroom to v0.32.0 (#681) @renovate-bot
• Update storybook monorepo to v7.0.27 (#676) @renovate-bot
• Update dependency eslint-plugin-sort-export-all to v1.4.1 (#678) @renovate-bot
• Update dependency lint-staged to v13.2.3 (#679) @renovate-bot
• Update dependency mini-css-extract-plugin to v2.7.6 (#680) @renovate-bot

🧹 Chores

• Use Vite builder in Storybook (#749) @veej
• Change renovate schedule (#751) @gabro
• Try fixing Chromatic flakiness by waiting a bit (#723) @gabro
• Fix chromatic pipeline (#737) @gabro
• Fix onChange arg in Storybook (#713) @gabro
• Improve renovate configuration (#698) @gabro
• Merge bento-design-system and storybook packages (#660) @gabro

📚 Documentation

• Fix docusaurus url config (#697) @gabro

⚙️ Configurator

• Implement new ColorEditor (#726) @veej
• Configurator: colors section (#694) @veej
• Configurator: brand colors section (#693) @veej
• Configurator bootstrap + ColorEditor (#692) @veej

What’s Changed

• Allow config of button size for FileUploaderField (#661) @federico-ercoles

🐞 Bug fixes

• Remove Checkbox bottom padding (#671) @federico-ercoles

🔧 Dependency updates

• Update dependency @vanilla-extract/webpack-plugin to v2.2.0 (#666) @renovate-bot
• Update dependency postcss to v8.4.25 (#664) @renovate-bot
• Update dependency chromatic to v6.19.9 (#667) @renovate-bot
• Update dependency css-loader to v6.8.1 (#668) @renovate-bot
• Update dependency @vanilla-extract/recipes to v0.4.0 (#657) @renovate-bot
• Update dependency @floating-ui/dom to v1.4.4 (#663) @renovate-bot
• Update storybook monorepo to v7.0.26 (#665) @renovate-bot
• Update dependency date-fns to v2.30.0 (#669) @renovate-bot
• Update dependency esbuild-loader to v2.21.0 (#670) @renovate-bot
• Update babel monorepo (#662) @renovate-bot

What’s Changed

💥 Breaking changes

• Improvements to ListItem, Navigation and Pagination (#658) @federico-ercoles
• Remove ssr option from BentoProvider (#646) @gabro
• Drop React 17 (#645) @gabro
• Remove createDefineBentoSprinkles (#642) @gabro

Migration guide

• #658 introduces some minor changes to the DS tokens used for List items when hovered/focused. The changes make the component more consistent with the rest of Bento and do not have a retro-compatible workaround.

• #645 drops the compatibility with React 17. This enables us to leverage some React 18 specific features more easily. React 17 may still work, but it's no longer supported or tested.

• #646 builds on #645: we've upgraded react-aria, which now uses React 18's native useId hook to generate ids (for example, there are the ids generated to match a label to its field in a form). Previously, react-aria used a custom id generator which ultimately required Bento users to pass the ssr={true} prop to BentoProvider if they were using Bento in a SSR app. Thanks to our internal use of useId, this is no longer necessary, so we just dropped the ssr prop from BentoProvider. You can safely remove it without a change in functionality.

• #642 removes createDefineBentoSprinkles. This used to be the primary mechanism for extending Bento with custom tokens, but it turned out to be a TS performance foot gun: using createDefineBentoSprinkles would increase compilation time by an order of magnitude, causing even tsserver to respond very slowly. We now advise using createSprinkles from @vanilla-extract/sprinkles directly, you can read the updated guide for more information: https://developer.bento-ds.com/Customization/atoms-augmentation. The migration from createDefineBentoSprinkles should be relatively straightforward and only require a little more boilerplate. Feel free to reach out in the Discussions on GitHub if you face issues.

🔧 Dependency updates

• Update dependency @vanilla-extract/sprinkles to v1.6.1 (#649) @renovate-bot
• Drop React 17 (#645) @gabro
• Update storybook monorepo to v7.0.25 (#650) @renovate-bot
• Update dependency @types/node to v18.16.19 (#648) @renovate-bot
• Update dependency @floating-ui/dom to v1.4.3 (#652) @renovate-bot
• Update dependency @floating-ui/core to v1.3.1 (#651) @renovate-bot
• Update dependency @floating-ui/react-dom to v1.3.0 (#653) @renovate-bot
• Update dependency @storybook/testing-library to v0.2.0 (#654) @renovate-bot
• Update dependency @types/babel__traverse to v7.20.1 (#655) @renovate-bot
• Update dependency @vanilla-extract/css to v1.12.0 (#656) @renovate-bot

What’s Changed

🔧 Dependency updates

• Upgrade react-aria dependencies (#644) @gabro

🧹 Chores

• Fix release CI (#647) @federico-ercoles

⛔️ This release is broken, please use 0.19.3 instead

What’s Changed

• Make placeholder optional on fields (#463) @gabro

🔧 Dependency updates

• Update dependency @testing-library/dom to v8.20.1 (#629) @renovate-bot

🧹 Chores

• Replace jest with vitest (#636) @gabro
• Upgrade tsup and remove patch-esm-ts script (#637) @gabro

📚 Documentation

• Add Icons guide (#640) @gabro
• Update all zeroheight slugs (#639) @gabro
• Add Pagination docs (#638) @gabro
• Improve doc for LocalizedString + i18next (#632) @veej

What’s Changed

• Implement Pagination component (#633) @federico-ercoles

🔧 Dependency updates

• Update dependency @types/node to v18.16.18 (#634) @renovate-bot
• Update storybook monorepo to v7.0.23 (#635) @renovate-bot
• Update babel monorepo to v7.22.5 (#628) @renovate-bot

📚 Documentation

• Add typography to the dev documentation (#631) @gabro

What’s Changed

• Fix extra paddings in Calendar (#625) @gabro
• Allow setting different label sizes per button size (#617) @gabro
• Allow to configure border radiuses separately for each corner (#605) @veej

💥 Breaking changes

• [Navigation] Allow to configure Destination's borderRadius and activeVisualElement line width (#604) @veej
• Fix default hint icon size (#603) @veej

Migration guide

#603 and #604 introduce changes to the default config, to better align with the new default theme introduced in v0.18.0.
If you want to upgrade without noticeable changes you can reset to the previous defaults by adding

{
	field: {
		tip: {
			iconSize: 12,
		}
	},
	navigation: {
		radius: {
    		medium: 0,
    		large: 0,
  		},
	},
}

to the config override in BentoProvider.

🐞 Bug fixes

• Fix CJS build (#626) @gabro
• Fix icons exported with the wrong viewBox (#606) @veej

🔧 Dependency updates

• Update babel monorepo to v7.22.4 (#618) @renovate-bot
• Update dependency @types/node to v18.16.16 (#619) @renovate-bot
• Update dependency @vanilla-extract/css to v1.11.1 (#620) @renovate-bot
• Update dependency @floating-ui/core to v1.2.6 (#621) @renovate-bot
• Update dependency style-loader to v3.3.3 (#612) @renovate-bot
• Update dependency postcss to v8.4.24 (#611) @renovate-bot
• Update babel monorepo (#613) @renovate-bot

🧹 Chores

• Migrate to Storybook 7 (#623) @gabro
• Patch sprinkles to export SprinklesProperties (#624) @gabro
• Switch from Algolia to local search (#614) @gabro
• Add example code for empty Playroom (#615) @gabro
• Downgrade webpack plugin to fix Playroom (#609) @gabro

📚 Documentation

• Improve documentation website (#608) @veej
• Fix storybook links (#607) @gabro

What’s Changed

🐞 Bug fixes

• Fix CJS build (#627) @gabro

What’s Changed

• fix: export Copy icon (#601) @veej
• Add Cloudflare pages workflow (#596) @gabro

💥 Breaking changes

• Remove illustrations (#599) @veej
• New feedback component (#598) @veej
• Changes to the default theme, config and icons to align them with Figma v2.7 (#597) @veej

Migration guide

In this release, we drastically changed the default appearance of the Bento DS, to provide a more modern look&feel to users who want to use the DS with little or no customizations.
If you were relying on the default Bento settings, you may want to override the changes we applied so that you application will not be impacted.

Default theme

We're providing a completely new default theme. If you were already using your own theme, this change will not affect you. If, instead, you were relying on the defaultTheme.css exported by the library, you may decide to keep the new style or download and use the CSS file attached to this changelog, containing the original default theme.

Icons and illustrations

We decided to completely get rid of Illustrations, since we found they were not so flexible as we thought in the beginning. The Bento DS library is no longer exporting any illustration, and all the props or config entries accepting illustrations have been removed too.
In many cases, you can replace illustrations with icons, or you can work around this limitation by passing the old illustration to the icon prop, as in icon={() => <MyIllustration size={24} kind="outline" />}

Icons have been completely revised too. All the exported icons now include a margin around the actual icon. A few icons have also been renamed:

• IconClose => IconX
• IconCopyLight => IconCopy
• IconEdit => IconPencil
• IconHelp => IconQuestionCircle
• IconIdea => IconLightbulbCircle
• IconInformative => IconInfoCircle
• IconMenu => IconList
• IconPositive => IconPositiveCircle
• IconWarning => IconWarningCircle

Default configuration

We also changed the default configuration for many of the components included in Bento. If you want to keep the same appearance as before, you may want to provide a bento config which overrides the config parameters that have been changed in this version, by setting them to the old value. All the config parameters that changed can be seen in this diff.

Please, note that due to the changes to icons and illustrations, you may not be able to reach the same visual aspect as before, even using the old configurations.
For simplicity, here you can find the config overrides you can apply to reset the configuration to the previous state:

{
  areaLoader: {
    scrimColor: "light",
    readabilityAreaBorderRadius: undefined,
  },
  avatar: {
    width: 40,
    height: 40,
    iconSize: 16,
  },
  banner: {
    titleSize: "small",
    descriptionSize: "small",
    radius: 8,
    closeIconSize: 12,
    semanticIconSize: {
      withoutTitle: 16,
    },
  },
  breadcrumb: {
    separatorSize: 8,
  },
  button: {
    paddingX: {
      small: 8,
      large: 16,
    },
    paddingY: {
      small: 4,
      medium: 8,
    },
    radius: 4,
    internalSpacing: 8,
    iconSize: {
      small: 12,
      medium: 12,
      large: 16,
    },
    uppercaseLabel: true,
  },
  card: {
    defaultRadius: 8,
  },
  chip: {
    paddingX: 8,
    iconSize: 12,
    closeIconSize: 8,
    uppercase: true,
  },
  disclosure: {
    iconSize: {
      1: 16,
    },
  },
  fileUploaderField: {
    buttonKind: "solid",
  },
  input: {
    radius: 4,
    paddingY: 16,
  },
  selectionControl: {
    element: {
      labelPaddingTop: 2,
      checkboxBorderRadius: 4,
    },
  },
  formLayout: {
    form: {
      defaultActionsSize: "large",
    },
  },
  iconButton: {
    radius: 4,
  },
  list: {
    item: {
      borderRadius: 0,
      paddingX: {
        medium: 16,
        large: 16,
      },
      paddingY: {
        large: 16,
      },
      internalSpacing: 16,
      iconSize: {
        trailing: 16,
      },
    },
    spacing: 0,
  },
  menu: {
    paddingX: 0,
    radius: 8,
    headerPaddingX: 16,
    headerPaddingY: 16,
  },
  modal: {
    radius: 8,
    actionsSize: "large",
  },
  navigation: {
    destinationPaddingY: {
      medium: 8,
    },
    iconSize: {
      medium: 16,
      large: 16,
    },
    labelSize: {
      medium: "large",
    },
    activeVisualElement: {
      lineColor: "brandPrimary",
      lineHeight: {
        medium: 2,
        large: 2,
      },
    },
  },
  searchBar: {
    clearIconSize: 12,
    searchIconSize: 16,
  },
  dropdown: {
    radius: 8,
    list: {
      item: {
        borderRadius: 0,
        paddingX: {
          medium: 16,
          large: 16,
        },
        paddingY: {
          large: 16,
        },
        internalSpacing: 16,
        iconSize: {
          trailing: 16,
        },
      },
      spacing: 0,
    },
    defaultMenuSize: "medium",
    openIndicatorIconSize: 16,
    chipColor: "blue",
    chipSpacing: 8,
  },
  table: {
    padding: {
      textCell: undefined,
      textWithIconCell: undefined,
      chipCell: undefined,
      labelCell: undefined,
      linkCell: undefined,
      iconCell: undefined,
      iconButtonCell: undefined,
    },
  },
  toast: {
    paddingX: 16,
    paddingY: 16,
    radius: 8,
    closeIconSize: 12,
  },
  tabs: {
    iconSize: 16,
    notificationSize: 6,
  },
  slider: {
    internalSpacing: 24,
  },
  tooltip: {
    radius: 4,
    labelSize: "medium",
  },
  dateField: {
    radius: 8,
    dayRadius: 4,
  },
}

🔧 Dependency updates

• fix(deps): update dependency prettier to v2.8.8 (#585) @renovate-bot
• fix(deps): update babel monorepo (#584) @renovate-bot
• chore(deps): update dependency @vanilla-extract/css to v1.11.0 (#582) @renovate-bot
• chore(deps): update dependency @types/node to v18.16.14 (#587) @renovate-bot
• chore(deps): update dependency @vanilla-extract/sprinkles to v1.6.0 (#593) @renovate-bot
• chore(deps): update dependency @vanilla-extract/webpack-plugin to v2.2.0 (#594) @renovate-bot
• chore(deps): update dependency css-loader to v6.7.4 (#600) @renovate-bot
• Upgrade sprinkles to 1.6.0 (#595) @gabro

What’s Changed

• add publishing to GitHub registry (#589) @veej

🐞 Bug fixes

• Avoid merging JSX.Elements in config (#592) @veej

🔧 Dependency updates

• chore(deps): update dependency @types/babel__traverse to v7.18.5 (#562) @renovate-bot
• chore(deps): update actions/add-to-project action to v0.5.0 (#574) @renovate-bot
• fix(deps): update dependency react-markdown to v8.0.7 (#576) @renovate-bot
• chore(deps): update dependency postcss to v8.4.23 (#575) @renovate-bot
• chore(deps): update dependency @types/node to v18.16.4 (#563) @renovate-bot