Custom Applications v19
The Application Kit packages have been released with a new major version v19.
This release contains breaking changes.
This version does not contain explicit changes in our packages but mainly updates to major versions of some of the depended upon libraries. For instance:
@commercetools-frontend/ui-kitand all@commercetools-uikit/*packages have been updated tov12.reactandreact-domhave been updated tov17.graphqlhas been updated tov15.webpackhas been updated tov5
Furthermore, some peer dependencies have been updated to only require more recent versions. Please refer to each specific package's CHANGELOG.md.
Migrating UI Kit packages
Constraints
For the <Constraints.Horizontal /> component, the deprecated constraint prop has been removed. Now only the max prop can be used instead.
- <Constraints.Horizontal constraint="m" />+ <Constraints.Horizontal max={7} />
The equivalent mapping from constraint to max is as following:
contraint | max |
|---|---|
xs (50px) | 1 (42px) |
s (132px) | 3 (142px) |
m (355px) | 7 (342px) |
l (496px) | 10 (484px) |
xl (768px) | 16 (784px) |
Text
{/ /}
For the <Text.Headline> and <Text.Subheadline> components, the deprecated elementType prop has been removed. Now only the as prop is used instead.
{/ /}
- <Text.Headline elementType="h2" intlMessage={message} />+ <Text.Headline as="h2" intlMessage={message} />
{/ /}
For the <Text.Body> and <Text.Detail> components, the deprecated isInline prop has been removed. Now only the as prop can be used instead.
{/ /}
- <Text.Body isInline={true} intlMessage={message} />+ <Text.Body as="span" intlMessage={message} />
Link
For the <Link> component, the deprecated hasUnderline prop has been removed. Links now always have an underline style applied.
When the prop isExternal is used and the to prop is not a string but a location object, an error is thrown.
Tag
For the <Tag> component, the deprecated linkTo prop has been removed. Now only the to prop can be used instead.