-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Blueprint 4.0
Full changelog of v4.0.0-beta.x and v4.0.0-rc.x releases here →
- 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-
tobp4-
- Icons build pipeline has been revamped, so icon font support is restored
- See Icons 4.0 changes for more info
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.
Borders are more prominent to improve contrast.
Before (light/dark):
![Screen Shot 2021-11-05 at 12 11 15 PM](https://user-images.githubusercontent.com/723999/140542489-4a7f99f1-657c-424c-a085-7df4179868bd.png)
![Screen Shot 2021-11-05 at 12 11 20 PM](https://user-images.githubusercontent.com/723999/140542488-1ae429ad-89c3-4538-9a8f-ac6168ea7d2e.png)
After (light/dark):
![image](https://user-images.githubusercontent.com/723999/157273407-582d7795-438f-4617-80ae-7c02a4edc959.png)
![image](https://user-images.githubusercontent.com/723999/157273461-1ece34a0-4a0d-4ae6-807b-5bf6d521e424.png)
Control groups now have a gap between their child elements.
Before:
![image](https://user-images.githubusercontent.com/723999/173837384-1ccd3cd0-d584-46a9-8744-0a789ed4df22.png)
After:
![image](https://user-images.githubusercontent.com/723999/173837338-39c6d3d5-357c-4218-a9f4-1e6101b34737.png)
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.
Text color is inverted to improve contrast.
Before / After:
![Screen Shot 2021-11-05 at 12 05 10 PM](https://user-images.githubusercontent.com/723999/140541672-b697f5e4-4407-4c20-840b-2b72c66cc21b.png)
![Screen Shot 2021-11-05 at 12 05 33 PM](https://user-images.githubusercontent.com/723999/140541670-f697fb75-2db4-4105-8cf4-aeb890eb6cfb.png)
Background is no longer inverted for hover / selection state.
Before / After:
-
IKeyWhitelist
andIKeyBlacklist
are removed (deprecated since 3.30.0)- Use
KeyAllowlist
/KeyDenylist
instead.
- Use
-
Utils.safeInvoke
andUtils.safeInvokeOrValue
are removed (deprecated since 3.32.0)- Use TypeScript optional call operator
?.()
instead (available since TS 3.7).
- Use TypeScript optional call operator
-
Utils.createReactRef
is removed (deprecated since 3.43.0)- Use
React.createRef
,React.useRef
,React.forwardRef()
instead
- Use
-
IDrawerProps.vertical
is removed (deprecated since 3.15.0)- Use the
position
prop on<Drawer>
instead.
- Use the
-
<HTMLTable>
componentsmall
prop is removed (deprecated since 3.6.0)- Use the
condensed
prop instead.
- Use the
-
Menu.Item
andMenu.Divider
are removed (deprecated since 3.38.0, see #3829)- Use
MenuItem
andMenuDivider
instead.
- Use
-
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
, andSpinnerSize
, respectively, instead
- Use
-
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)
- react-day-picker v8 migration
- HotkeysTarget & useHotkeys migration
- PanelStack2 migration
- Table 6.0 changes