Blueprint 4.0

Full changelog of v4.0.0-beta.x and v4.0.0-rc.x releases here →

Major changes

• Modernized color palette
  • More "mature" grays, primary colors, and secondary colors
  • Improved component accessibility by meeting color contrast standards in accordance with WCAG 2.0 guidelines (1.4.3 Minimum Contrast)
• React 16.8+ required
• CSS namespace changed from bp3- to bp4-
• Icons build pipeline has been revamped, so icon font support is restored
  • See Icons 4.0 changes for more info

Component visual design changes

Some components have visual design changes which deserve special mention and consideration during the upgrade. If you are applying custom CSS on top of these components, you should revisit those styles and ensure they are adapted for Blueprint v4.

Text inputs

Borders are more prominent to improve contrast.

Before (light/dark):

After (light/dark):

Control group borders

Control groups now have a gap between their child elements.

Before:

After:

This change was necessitated by the updated border styles of text inputs, which make the old approach of placing these inputs directly next to buttons no longer visually coherent.

Button with "warning" intent

Text color is inverted to improve contrast.

Before / After:

MenuItem interactive styles

Background is no longer inverted for hover / selection state.

Before / After:

Removal/migration of deprecated APIs

core

• IKeyWhitelist and IKeyBlacklist are removed (deprecated since 3.30.0)
  • Use KeyAllowlist / KeyDenylist instead.
• Utils.safeInvoke and Utils.safeInvokeOrValue are removed (deprecated since 3.32.0)
  • Use TypeScript optional call operator ?.() instead (available since TS 3.7).
• Utils.createReactRef is removed (deprecated since 3.43.0)
  • Use React.createRef, React.useRef, React.forwardRef() instead
• IDrawerProps.vertical is removed (deprecated since 3.15.0)
  • Use the position prop on <Drawer> instead.
• <HTMLTable> component small prop is removed (deprecated since 3.6.0)
  • Use the condensed prop instead.
• Menu.Item and Menu.Divider are removed (deprecated since 3.38.0, see #3829)
  • Use MenuItem and MenuDivider instead.
• LifecycleCompatPolyfill type is removed (deprecated since 3.43.0)
• Icon.SIZE_*, Drawer.SIZE_*, Spinner.SIZE_* constants removed (deprecated since 3.44.1)
  • Use IconSize, DrawerSize, and SpinnerSize, respectively, instead
• Classes.FIXED_POSITIONING_CONTAINING_BLOCK is removed (deprecated since 3.45.0; this was only required for <ContextMenu2> positioning for a very brief period of time)