Migration
Migration Guide ()
3.0.0
3.0.0 is a pretty big new major version with lots of (breaking) changes.
The rename
One of the biggest breaking changes is the renaming of some of our chameleon-theme-* packages. This is the full list of the theme packages that have been renamed.
- chameleon-theme-gva-summer-2020 -> chameleon-theme-gva
- chameleon-theme-hbvl-summer-2020 -> chameleon-theme-hbvl
- chameleon-theme-hmc-ge -> chameleon-theme-ge
- chameleon-theme-hmc-hd -> chameleon-theme-hd
- chameleon-theme-hmc-ld -> chameleon-theme-ld
- chameleon-theme-hmc-nhd -> chameleon-theme-nhd
- chameleon-theme-hmc-yc -> chameleon-theme-yc
- chameleon-theme-nb -> chameleon-theme-nb-legacy
- chameleon-theme-nb-winter-2021 -> chameleon-theme-nb
- chameleon-theme-swcom -> chameleon-theme-sw
- chameleon-theme-wort-de -> chameleon-theme-lw
- chameleon-theme-wort-en -> chameleon-theme-lt
- chameleon-theme-wort-pt -> chameleon-theme-co
- chameleon-theme-wort-tc -> chameleon-theme-tc
To migrate: rename these packages in your dependencies
chameleon-react updates
The breaking changes in our React components are:
AutoComplete
The already deprecated onSuggestionSelected prop is now removed.
To migrate: use the onSelect prop instead
Choice
The caption prop has been renamed to message.
To migrate: Update your implementations from <Choice caption="..." /> to <Choice message="..." />
IconButton
The already deprecated name prop is now removed
To migrate: Update your implementations from <IconButton name="..." /> to <IconButton icon={...} />
Image
The already deprecated <Image /> component is now removed
To migrate: Use the native HTML <img /> tag.
DatePicker
We fixed the readOnly prop on <DatePicker />: it was only limiting the manual input on the input field, but edits made through the picker dialog were still possible. Setting the readOnly prop now creates a 100% read-only input. The previous behavior is moved to a new pickerInputOnly prop.
To migrate: Do nothing, unless you really want the old readOnly behavior. In that case, update your implementations from <DatePicker readOnly /> to <DatePicker pickerInputOnly />
WideList
The clickable prop no longer adds a <ChevronForward /> icon by default to show that it is clickable.
To migrate: Update your implementations from <WideListItem clickable /> to <WideListItem clickable iconRight={ChevronForward} />
The icon prop is removed and 2 new props are added: iconLeft and iconRight.
To migrate: Update your implementations from <WideListItem icon={Add} /> to <WideListItem iconLeft={Add} /> or <WideListItem iconLeft={<Icon as={Add} />} />
The iconColor prop is removed.
To migrate: Update your implementations from <WideListItem icon={Add} iconColor="primaryBase" /> to <WideListItem iconLeft={<Icon as={Add} color="primaryBase" />} />
chameleon-swift updates
Starting with this release, we provide an implementation created specifically for Swift. The lib/ios folder in each chameleon-theme-* NPM package has been deleted.
To migrate: Use the dedicated chameleon-swift package.
2.0.0
We've completely overhauled our CSS architecture in chameleon-react and now use vanilla CSS instead of SCSS. This also means we now use CSS Custom Properties instead of SCSS variables! (An SCSS output of all design tokens still remains available for you to use for the time being.) To be able to use it, you now have to include a little PostCSS configuration to make it work.
Components
- The <Fonts /> component has been removed. Please import @mediahuis/chameleon-theme-wl/lib/web/fonts.css instead of using this component.
- The <Reset /> component has been removed. Please import @mediahuis/chameleon-reset instead of using this component.
1.13.0
Components
- The <Fonts /> component has been removed. Please import @mediahuis/chameleon-theme-wl/lib/web/fonts.css instead of using this component.
- The <Reset /> component has been removed. Please import @mediahuis/chameleon-reset instead of using this component.
1.9.0
Components
Import @mediahuis/chameleon-reset instead of using this component. For more information see: chameleon-reset
1.8.0
Components
Autocomplete
1.7.0
Components
Illustration
Import the used illustration from chameleon-theme-wl/illustration. Replace name with as (the imported illustration).
1.5.0
Components
Icon
Import the used icon from chameleon-theme-wl/icons. Replace name with as (the imported icon).
IconButton
Import the used icon from chameleon-theme-wl/icons. Replace name with icon (the imported icon).
Button
Import the used icon from chameleon-theme-wl/icons. Replace iconLeft and iconRight with the imported icon.
TextField, Select
Import the used icon from chameleon-theme-wl/icons. Replace iconLeft with the imported icon.
AutoComplete, ListItem, WideListItem
Import the used icon from chameleon-theme-wl/icons. Replace icon with the imported icon.
1.0.0
Components
AutoComplete
- Switched to a controlled component. This means that the value prop is now required but can thus be cleared if needed.
- Removed defaultValue prop as this is now controlled by value.
Checkbox
- Removed experimentalLabelProps in favor of labelProps.
Dialog
- Renamed closeButtonLabel to accessibilityLabelCloseButton.
Fieldset
- Removed formId in favor of the native form prop.
IconButton
- Renamed label to accessibilityLabel.
ListItem
- Renamed label to accessibilityLabel.
Loader
- Renamed label to accessibilityLabel.
Radio
- Removed experimentalLabelProps in favor of labelProps.
Stepper
- Renamed activeLabel to accessibilityLabelActive.
- Renamed completedLabel to accessibilityLabelCompleted.
Switch
- Removed experimentalLabelProps in favor of labelProps.
TextField
- Renamed clearButtonLabel to accessibilityLabelClearButton.
Tokens
Most of these tokens were deprecated for a few minor versions already. This release, we're effectively removing them.