-
Notifications
You must be signed in to change notification settings - Fork 2.2k
select component migration
Adi Dahiya edited this page Jun 13, 2022
·
12 revisions
To prepare for the Popover changes coming in Blueprint v5.0, we're providing "v2" variants of @blueprintjs/select components which use Popover2 instead of Popover. Migrate to these now in order to ensure a smooth migration path.
These components are available in the existing @blueprintjs/select package:
Replacement for Select, with notable changes:
- There is no more
.bp4-popover-wrapperelement. - Class names on some rendered elements have changed to their Popover2 replacements:
-
.bp4-popover-target→.bp4-popover2-target -
.bp4-popover-arrow→.bp4-popover2-arrow -
.bp4-popover-content→.bp4-popover2-content - ℹ️ remember to always use the
$bp-nsvariable in Sass and theClassesconstants in TS/JS when referencing Blueprint class names
-
- The type of
popoverPropshas changed toPopover2Props, which means a few properties have changed. See Popover2 migration for more info.- popover positioning may be specified with "placement" or "position"
-
boundaryhas been replaced withrootBoundary, which better matches popper.js' definition of what a "boundary" is -
modifierstype has changed -
targetClassNameandtargetTagNameproperties have been removed
- New prop
popoverContentPropsallows forwarding props to the popover content wrapper element. - New prop
popoverRefallows access to the Popover2 component instance. - In general, accessibility markup has been improved.
- <span class="bp4-popover-wrapper">
- <span aria-haspopup="true" class="bp4-popover-target bp4-popover-open">
- <div>
- <button type="button" class="bp4-button">
- ...
- </button>
- </div>
- </span>
- </span>
+ <div
+ aria-controls="listbox-1"
+ aria-expanded="true"
+ aria-haspopup="listbox"
+ class="bp4-popover2-target bp4-popover2-open"
+ role="combobox"
+ >
+ <button type="button" class="bp4-button">
+ ...
+ </button>
+ </div>Replacement for Suggest.
TODO(adahiya)
Replacement for MultiSelect.
TODO(adahiya)
- FAQ
- 6.x Changelog
- 5.x Changelog
- 5.0 pre-release changelog
- 4.x Changelog
- v4.0 & v5.0 major version semantic swap
- v6.0 changes
- Spacing System Migration: 10px to 4px
- react-day-picker v8 migration
- HotkeysTarget & useHotkeys migration
- PanelStack2 migration
- Table 6.0 changes