Migrating to v3
This guide will show you how to upgrade your codebase.
1Package upgrade
1yarn upgrade @defencedigital/react-component-library
And:
1yarn upgrade @defencedigital/design-tokens2yarn upgrade @defencedigital/eslint-config-react3yarn upgrade @defencedigital/fonts4yarn upgrade @defencedigital/icon-library
2Breaking changes
Components
Autocomplete
Use
Autocomplete
instead ofSelect
for behaviour when the user could type and select an item
Avatar
Replace
initials
by usingchildren
Button
Remove use of
color
Use
COMPONENT_SIZE
forsize
Use
BUTTON_VARIANT.DANGER
forvariant
instead ofcolor={BUTTON_COLOR.DANGER}
Checkbox
Use
checked
instead ofisChecked
Remove use of
isValid
CheckboxEnhanced
Use
Checkbox
instead ofCheckboxEnhanced
ContextMenu
Remove
position
as component is positioned based on available screen real estateUpdate
onHide
callback parametersUpdate
onShow
callback parameters
DataList
Use the replacement
DescriptionList
DatePicker
Use
Placement
from@popperjs
forplacement
Use
initialIsOpen
instead ofisOpen
Use
startDate
andendDate
instead of valueIf
startDate
andendDate
are used, these should now be set from the current form state instead of the initial form values. Alternatively, you can useinitialStartDate
andinitialEndDate
to only set the initial valuesonChange
is now called when an invalid or disabled date is typed. You should ensure these are correctly handled in your form validation logicThe calendar no longer automatically opens when the input is focused. This may affect automated tests
Check presentation as external margins have been removed
Remove use of
isValid
DescriptionList
Use instead of
DataList
Use
description
instead oftitle
onDescriptionList
Use
title
instead ofdescription
onDescriptionListItem
Check presentation as external margins have been removed
DismissibleBanner
Rename to
DismissibleBanner
fromDismissableBanner
Masthead
Update
onSearch
callback parameters
NumberInput
Remove use of
canClear
Use
size={COMPONENT_SIZE.SMALL}
instead ofisCondensed
Update
onChange
callback parametersUse
icon
orprefix
instead ofstartAdornment
Use
suffix
instead ofunit
Use
prefix
orsuffix
instead ofunitPosition
Check presentation as external margins have been removed
Remove use of
isValid
Pagination
Update
onChange
callback parameters
Radio
Use
defaultChecked
instead ofisChecked
Remove use of
isValid
RadioEnhanced
Use
Radio
instead ofRadioEnhanced
RangeSlider
Some of the behaviours associated with this component have fundamentally changed. Refer to the design specification.
Select
Replace instances with
Autocomplete
where autocomplete/typeahead behaviour is requiredRemove use of
isClearable
as the clear button is always presented when an item is selectedSpecify children using
SelectOption
rather than an array of value and label optionsUpdate
onChange
callback parameters to usevalue: string | null
rather thanevent: any
Remove use of
isValid
Sidebar
There is the ability to use the
Sidebar
within a layout by usingSidebarWrapper
As the component is more composable
nav
is no longer a prop.
Refer to Storybook for code examples.
Switch
Specify children using
SwitchOption
rather than an array of value and label optionsUse
COMPONENT_SIZE
forsize
Remove use of
isValid
TabSet
Use
TabSetItem
instead ofTab
Update parameters for use of
onChange
callbackA ResizeObserver polyfill is required in older browsers and in Jest. The CRA template has been updated to reflect this
TextArea
Remove use of
footnote
in favour of using the component in conjunction withField
andhintText
.Remove use of
isValid
TextInput
Add a
label
Remove use of
placeholder
Check presentation as external margins have been removed
Remove use of
footnote
in favour of using the component in conjunction withField
andhintText
.Remove use of
isValid
Timeline
Replace render callback with prop bag in
TimelineDay
,TimelineDays
,TimelineEvent
,TimelineHour
,TimelineHours
,TimelineMonth
,TimelineMonths
,TimelineRow
,TimelineRows
,TimelineTodayMarker
,TimelineWeek
,TimelineWeeks
Use the
hasSide
prop instead ofTimelineSide
Rename use of
renderColumns
to render onTimelineRows
Remove use of
dayWidth
anddaysTotal
inrender
callback ofTimelineWeeks
Remove use of
isAfterEnd
andisBeforeStart
inuseTimelinePosition
in favour ofstartsAfterEnd
andstartsAfterStart
Strict null checks
strictNullChecks
has been enabled. Interfaces are now more accurate about whether props accept null
or undefined
. There are no changes required by consumers.
Root font size
Root font-size breakpoints have been removed so any workarounds to fix this can be safely removed.
To fix a problem with the inconsistent position of bold font compared to other weights, fonts are no longer being loaded from Google CDN. It is worth checking text presentation, in particular where different weights are being used.
Forms
Use Field
, Fieldset
and SectionDivider
to replace withFormik
and FormikGroup
.
Icons (legacy icons are gone)
Replace dependency on legacy icons with
@defencedigital/icon-library
equivalent
Legacy icons that have been removed:
Bell
Graph
House
Logo
RightArrow
Search
Tools
Visibility
VisibilityOff
Design Tokens
Use
ColorGroup
instead ofColourGroup
Eslint config
eslint-config-airbnb
has been upgraded. The new version includes official compatibility with ESLint 8, drops support for ESLint 6 and older and adds a few new rules.
List of rule changes:
https://github.com/airbnb/javascript/commit/f3d3a075cda2acc02011e71991c10bb5b4a15278
https://github.com/airbnb/javascript/commit/1bc8cabd447ef9ce69d27ae70e67eb47daeffc21
react/function-component-definition
has been turned off.
CSS Framework
There is not a 3.x.x of @defencedigital/css-framework
and it is strongly recommended to remove any dependencies on this legacy framework. If a dependency is still required then use 2.x.x of @defencedigital/css-framework
.
The root of your application should now be wrapped with a single instance of the provided GlobalStyleProvider
context provider. (GlobalStyleProvider
applies various global styles, and as such, only one instance of it should be mounted at once.)