v4-v5.md

Upgrading wix-style-react from v4.0.0 to v5.0.0

<Heading/>

Typography styles and semantics were changed.

Needed action TL;DR

You should change the appearance values according to these rules:

• H2 --> H3
• H3 --> H5
• H4 --> H6

See the full migration doc here

<Checkbox/>

prop active was removed, please use checked instead

-<Checkbox active/>
+<Checkbox checked/>

---

value large for prop size was removed, please use medium.

-<Checkbox size="large"/>
+<Checkbox size="medium"/>

<Icons/>

Old icons were deprecated for a long time and are no longer available. Consult migration doc here

<Button/>

A temporary withNewIcons prop was removed, it is now the default.

-<Button withNewIcons/>
+<Button/>

<LanguagePicker/>

This component was deprecated for a long time and is no longer available. Instead of <LanguagePicker/> please use <IconWithOptions/>

<SideBar/>

For a long time this component was undershadowed by <SideMenu/>. [email protected] no longer provides <SideBar/> please instead use <SideMenu/>

Grid

1. Alongside <Row/> & <Col/> grid also used to export Card. Please import Card separately:

   -import {Row, Col, Card} from 'wix-style-react/Grid'
   +import {Row, Col} from 'wix-style-react/Grid'
   +import Card from 'wix-style-react/Card'

2. <Row/> & <Col/> components had the following css:

   > * { box-sizing: border-box; }

   it meant that all child components would receive such box-sizing which was not always desired.

   since [email protected] css was changed to:

   .row,
   .col { box-sizing: border-box; }

   This now means that only <Row/> and <Col/> have this but none of this children.

   It should not be a breaking change but it's worth mentioning because some projects may have box-sizing overwritten.