Note: There are no breaking code changes here — your existing code should work fine. This change is breaking because the icons have changed visually. When performing this upgrade, please take a close look at your screens and confirm everything looks alright. If you run into any problems adopting the new icons, contact #backpack.
The following changes are only breaking if you are on a version of React lower than 16.3.
bpk-animate-height: 1.2.2 => 2.0.0
bpk-component-accordion: 1.3.2 => 2.0.0
bpk-component-autosuggest: 3.1.2 => 4.0.0
bpk-component-badge: 1.3.2 => 2.0.0
bpk-component-banner-alert: 2.3.2 => 3.0.0
bpk-component-barchart: 2.5.2 => 3.0.0
bpk-component-blockquote: 1.2.2 => 2.0.0
bpk-component-breadcrumb: 1.1.2 => 2.0.0
bpk-component-breakpoint: 1.2.2 => 2.0.0
bpk-component-button: 2.6.2 => 3.0.0
bpk-component-calendar: 5.1.2 => 6.0.0
bpk-component-card: 1.2.2 => 2.0.0
bpk-component-checkbox: 1.6.2 => 2.0.0
bpk-component-chip: 2.1.2 => 3.0.0
bpk-component-close-button: 1.1.2 => 2.0.0
bpk-component-code: 1.2.2 => 2.0.0
bpk-component-content-container: 1.4.2 => 2.0.0
bpk-component-datatable: 0.2.2 => 1.0.0
bpk-component-datepicker: 9.1.2 => 10.0.0
bpk-component-description-list: 1.1.2 => 2.0.0
bpk-component-dialog: 1.2.2 => 2.0.0
bpk-component-drawer: 1.3.2 => 2.0.0
bpk-component-fieldset: 1.3.2 => 2.0.0
bpk-component-form-validation: 2.2.2 => 3.0.0
bpk-component-grid-toggle: 1.2.2 => 2.0.0
bpk-component-grid: 1.2.2 => 2.0.0
bpk-component-heading: 2.2.2 => 3.0.0
bpk-component-horizontal-nav: 2.5.2 => 3.0.0
bpk-component-icon: 4.2.2 => 5.0.0
bpk-component-image: 2.4.2 => 3.0.0
bpk-component-infinite-scroll: 2.3.2 => 3.0.0
bpk-component-input: 4.3.2 => 5.0.0
bpk-component-label: 3.4.2 => 4.0.0
bpk-component-link: 1.3.2 => 2.0.0
bpk-component-list: 1.2.2 => 2.0.0
bpk-component-loading-button: 2.1.2 => 3.0.0
bpk-component-map: 2.6.2 => 3.0.0
bpk-component-mobile-scroll-container: 1.2.2 => 2.0.0
bpk-component-modal: 1.9.2 => 2.0.0
bpk-component-navigation-bar: 1.3.2 => 2.0.0
bpk-component-navigation-stack: 1.1.2 => 2.0.0
bpk-component-nudger: 1.3.2 => 2.0.0
bpk-component-pagination: 1.1.2 => 2.0.0
bpk-component-panel: 1.1.2 => 2.0.0
bpk-component-paragraph: 1.1.2 => 2.0.0
bpk-component-phone-input: 3.2.2 => 4.0.0
bpk-component-popover: 2.3.2 => 3.0.0
bpk-component-progress: 1.1.2 => 2.0.0
bpk-component-radio: 1.5.2 => 2.0.0
bpk-component-rating: 1.4.2 => 2.0.0
bpk-component-router-link: 2.1.2 => 3.0.0
bpk-component-rtl-toggle: 1.2.2 => 2.0.0
bpk-component-scrollable-calendar: 1.1.2 => 2.0.0
bpk-component-section-list: 1.1.2 => 2.0.0
bpk-component-select: 2.5.2 => 3.0.0
bpk-component-slider: 1.2.2 => 2.0.0
bpk-component-spinner: 2.3.2 => 3.0.0
bpk-component-star-rating: 1.2.2 => 2.0.0
bpk-component-table: 1.2.2 => 2.0.0
bpk-component-text: 1.2.2 => 2.0.0
bpk-component-textarea: 1.3.2 => 2.0.0
bpk-component-theme-toggle: 1.3.2 => 2.0.0
bpk-component-ticket: 2.1.2 => 3.0.0
bpk-component-tooltip: 3.2.2 => 4.0.0
bpk-mixins: 18.2.2 => 19.0.0
bpk-scrim-utils: 3.3.2 => 4.0.0
bpk-stylesheets: 3.4.2 => 4.0.0
bpk-svgs: 7.3.2 => 8.0.0
bpk-theming: 1.3.2 => 2.0.0
bpk-tokens: 28.0.1 => 29.0.0
bpk-animate-height: 1.1.136 => 1.2.0
bpk-component-accordion: 1.2.125 => 1.3.0
bpk-component-autosuggest: 3.0.194 => 3.1.0
bpk-component-badge: 1.2.6 => 1.3.0
bpk-component-banner-alert: 2.2.6 => 2.3.0
bpk-component-barchart: 2.4.28 => 2.5.0
bpk-component-blockquote: 1.1.155 => 1.2.0
bpk-component-breadcrumb: 1.0.105 => 1.1.0
bpk-component-breakpoint: 1.1.97 => 1.2.0
bpk-component-button: 2.5.15 => 2.6.0
bpk-component-calendar: 5.0.50 => 5.1.0
bpk-component-card: 1.1.112 => 1.2.0
bpk-component-checkbox: 1.5.8 => 1.6.0
bpk-component-chip: 2.0.117 => 2.1.0
bpk-component-close-button: 1.0.164 => 1.1.0
bpk-component-code: 1.1.102 => 1.2.0
bpk-component-content-container: 1.3.103 => 1.4.0
bpk-component-datatable: 0.1.118 => 0.2.0
bpk-component-datepicker: 9.0.53 => 9.1.0
bpk-component-description-list: 1.0.124 => 1.1.0
bpk-component-dialog: 1.1.97 => 1.2.0
bpk-component-drawer: 1.2.124 => 1.3.0
bpk-component-fieldset: 1.2.6 => 1.3.0
bpk-component-form-validation: 2.1.6 => 2.2.0
bpk-component-grid-toggle: 1.1.117 => 1.2.0
bpk-component-grid: 1.1.168 => 1.2.0
bpk-component-heading: 2.1.168 => 2.2.0
bpk-component-horizontal-nav: 2.4.57 => 2.5.0
bpk-component-icon: 4.1.7 => 4.2.0
bpk-component-image: 2.3.19 => 2.4.0
bpk-component-infinite-scroll: 2.2.65 => 2.3.0
bpk-component-input: 4.2.6 => 4.3.0
bpk-component-label: 3.3.3 => 3.4.0
bpk-component-link: 1.2.98 => 1.3.0
bpk-component-list: 1.1.138 => 1.2.0
bpk-component-loading-button: 2.0.124 => 2.1.0
bpk-component-map: 2.5.43 => 2.6.0
bpk-component-mobile-scroll-container: 1.1.106 => 1.2.0
bpk-component-modal: 1.8.97 => 1.9.0
bpk-component-navigation-bar: 1.2.105 => 1.3.0
bpk-component-navigation-stack: 1.0.110 => 1.1.0
bpk-component-nudger: 1.2.20 => 1.3.0
bpk-component-pagination: 1.0.133 => 1.1.0
bpk-component-panel: 1.0.161 => 1.1.0
bpk-component-paragraph: 1.0.161 => 1.1.0
bpk-component-phone-input: 3.1.38 => 3.2.0
bpk-component-popover: 2.2.73 => 2.3.0
bpk-component-progress: 1.0.169 => 1.1.0
bpk-component-radio: 1.4.8 => 1.5.0
bpk-component-rating: 1.3.3 => 1.4.0
bpk-component-router-link: 2.0.83 => 2.1.0
bpk-component-rtl-toggle: 1.1.117 => 1.2.0
bpk-component-scrollable-calendar: 1.0.50 => 1.1.0
bpk-component-section-list: 1.0.104 => 1.1.0
bpk-component-select: 2.4.6 => 2.5.0
bpk-component-slider: 1.1.131 => 1.2.0
bpk-component-spinner: 2.2.129 => 2.3.0
bpk-component-star-rating: 1.1.10 => 1.2.0
bpk-component-table: 1.1.103 => 1.2.0
bpk-component-text: 1.1.29 => 1.2.0
bpk-component-textarea: 1.2.6 => 1.3.0
bpk-component-theme-toggle: 1.2.6 => 1.3.0
bpk-component-ticket: 2.0.22 => 2.1.0
bpk-component-tooltip: 3.1.116 => 3.2.0
bpk-mixins: 18.1.6 => 18.2.0
bpk-scrim-utils: 3.2.98 => 3.3.0
bpk-stylesheets: 3.3.17 => 3.4.0
bpk-svgs: 7.2.4 => 7.3.0
bpk-theming: 1.2.23 => 1.3.0
bpk-tokens: 27.11.0 => 27.12.0
- Added new brand colours
- Deprecated all the old brand colours