-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Blueprint 5.0
Adi Dahiya edited this page Jul 6, 2023
·
25 revisions
Blueprint 5.0 is now available (as of May 2023). It includes 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 →
Check out the latest documentation here →
- Updated popover component which has a simpler DOM structure (no more wrapper element) and uses Popper.js 2.0 for better positioning behavior (#4023).
- Icons are split into separate modules to allow tree-shaking and/or lazy-loading only the icons you use (#2193)
- CSS namespace changed from
bp4-
tobp5-
- All components which render popovers now use the updated version of
<Popover>
with popper.js v2.x (previously available as{ Popover2 } from "@blueprintjs/popover2"
)- Breadcrumbs
- CollapsibleList
- ContextMenu
- MenuItem
- Popover
- Tooltip
- DateInput
- DateRangeInput
- MultiSelect
- Select
- Suggest
- JSONFormat
- TruncatedFormat
- TimezonePicker (now TimezoneSelect)
- Removed support for IE11
- You can now remove
dom4
and variouscore-js
polyfills you may have been applying to support Blueprint in IE11
- You can now remove
- 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.
- 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
-
<Portal>
now has support for the stable React context API in addition to the legacy API. See Portal 5.0 changes. - Simpler, more straightforward React ref APIs. The
elementRef
prop is be replaced by the simpler, more straightforwardref
prop usingReact.forwardRef()
(see docs). This applies to:- Typography HTML components (
H1
,H2
, ...Code
,Label
, etc.) -
ButtonGroup
,Card
,ControlGroup
,Button
,AnchorButton
,MenuItem
,HTMLSelect
,HTMLTable
, andTag
(these components are now function components instead of class components, which is a slight break)
- Typography HTML components (
- Removed usage of
React.findDOMNode
in Table and Draggable components (#6137) - As a result of the
<Icon>
component changes, someIconProps
customizations are no longer supported:-
<HTMLSelect iconProps={{ icon }} />
is no longer available; use<HTMLSelect iconName="..." />
with one of the supported icon option values instead (available since @blueprintjs/core v4.20.0)
-
-
<CollapsibleList>
is removed (deprecated since 3.0.0)- Use
<OverflowList>
instead.
- Use
-
Classes.SELECT
is removed (deprecated since 3.0.0)- Use
<HTMLSelect>
orClasses.HTML_SELECT
instead.
- Use
-
AbstractComponent
andAbstractPureComponent
are replaced by their “v2” counterparts (deprecated since 3.19.0)- The new implementations no longer use deprecated React lifecycle methods.
-
IControlledProps2
is nowControlledProps
(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.
-
- compared to
-
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.
- Use the
-
IElementRefProps
is removed (deprecated since 3.43.0)- Components use
ref
prop name instead
- Components use
-
IRef
,IRefObject
, andIRefCallback
types are removed- Use
React.Ref
,React.RefObject
, andReact.RefCallback
instead
- Use
-
<HTMLTable condensed>
prop is removed (deprecated since 4.14.0)- Use
<HTMLTable compact>
instead
- Use
- Removed I-prefixed interfaces (
IProps
,IToastOptions
, etc.): see full list here
- Removed I-prefixed interfaces (
IDateInputProps
, etc.): see full list here
- Removed I-prefixed interfaces (
IExampleProps
,IDocumentationProps
, etc.): see full list here
- Removed I-prefixed interfaces (
ICreateNewItem
,IListItemsProps
, etc.): see full list here
- Removed I-prefixed interfaces (
IMenuContext
,IContextMenuRenderer
,IFocusedCellCoordinates
, etc.): see full list here
-
<ResizeSensor>
now supports React strict mode, but this means it must be stricter about its children, see ResizeSensor 5.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 withReact.HTMLAttributes
, etc.)
Note: v5.0 change list was reduced in scope in August 2022, and some of the following items were punted to future major versions.
- Full compatibility with React strict mode
- Remove remaining decorator APIs, migrate to components/hooks instead (#3604)
-
@HotkeysTarget
-><HotkeysTarget>
/useHotkeys
- N.B.
@ContextMenuTarget
-><ContextMenuTarget>
breaking change was already included in v5.0
-
- Improved
<PanelStack>
component API (parameterized by its panel data type) (#4272)
- CSS Modules (#248)
- react-day-picker v8 migration
- HotkeysTarget & useHotkeys migration
- PanelStack2 migration
- Table 6.0 changes