Blueprint 5.0

Blueprint 5.0 is planned for release in late 2021. It will include fixes and improvements to the JS APIs and only minor changes to styles / CSS APIs. We are aiming to make the upgrade as smooth as possible, avoiding the kinds of conflicts which made the v1 → v3 transition difficult.

To prepare for the 5.0 release, you should check out the Migration guides linked in the wiki sidebar →

Latest 5.0 pre-release documentation here →

Feature overview

• Full compatibility with React strict mode
  • Removed usage of deprecated React context API (#4149)
  • Removed usage of React.findDOMNode (#3979)
• Use Popper.js 2.0 (#4023)
• No more decorator APIs, just components/hooks instead (#3604)
  • @HotkeysTarget -> <HotkeysTarget> / useHotkeys
  • @ContextMenuTarget -> <ContextMenuTarget>
• Icons split into separate modules to allow tree-shaking and/or lazy-loading only the icons you use (#2193)

Breaking changes overview

Major changes

• CSS namespace changed from bp4- to bp5-
• TypeScript interfaces renamed to drop their I prefix (reasons listed here)
  • Blueprint versions released on 2021-04-19 (core v3.44.0, datetime 3.23.0, popover2 0.6.0, select 3.16.0, timezone 3.9.0) and newer contain type aliases for most interface names in the public API without the I prefix, so you may migrate to these symbols in v3.x or v4.x before going to v5.0 directly.
  • There are some minor exceptions / special cases to this, see Toaster 5.0 changes.

Other changes

• Improved <PanelStack> component API (parameterized by its panel data type) (#4272)
• Simpler, more straightforward React ref APIs. elementRef prop has been replaced by the simpler, more straightforward ref prop using React.forwardRef() (see docs). This applies to:
  • Typography HTML components (H1, H2, ... Code, Label, etc.)
  • HTMLSelect, HTMLTable, and Tag (these components are also now function components instead of class components, which is a slight break)
• TypeScript consumers will need to enable allowSyntheticDefaultImports to compile Blueprint library typings

Removal/migration of deprecated APIs

core

• <CollapsibleList> is removed (deprecated since 3.0.0)
  • Use <OverflowList> instead.
• Classes.SELECT is removed (deprecated since 3.0.0)
  • Use <HTMLSelect> or Classes.HTML_SELECT instead.
• AbstractComponent and AbstractPureComponent are replaced by their “v2” counterparts (deprecated since 3.19.0)
  • The new implementations no longer use deprecated React lifecycle methods.
• IControlledProps2 is now ControlledProps (deprecated since 3.37.0)
  • compared to IControlledProps:
    • onChange is removed. We recommend unioning the type with (for example) Pick<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> to achieve the same outcome.
• IConstructor is removed (deprecated since 3.43.0)
• getDisplayName is removed (deprecated since 3.43.0)
• <Icon iconSize> prop is removed (deprecated since 3.47.0)
  • Use the size prop on <Icon> instead.
• IElementRefProps is removed (deprecated since 3.43.0)
  • Components use ref prop name instead

datetime

• <DateTimePicker> is removed (deprecated since 3.4.0)

Miscellaneous improvements & enhancements

• <ResizeSensor> now supports React strict mode, but this means it must be stricter about its children, see ResizeSensor 4.0 changes
• <Portal> has switched to use the stable React context API instead of the legacy API. See Portal 4.0 changes
• <Popover popoverRef> prop now supports ref objects, not just ref callbacks
• ButtonProps / AnchorButtonProps now include HTML attributes for buttons, so you may create reusable components which render <Button> / <AnchorButton> and expose this props type (you no longer have to type union with React.HTMLAttributes, etc.)

Not intended for this major version

• CSS Modules (#248)