Application-level changes

• Importing components:

  If you are using babel-plugin-grommet you can safely do:

  import { Button } from 'grommet';

  Otherwise import the component from its folder:

  import Button from 'grommet/components/button';

• Dependencies

  If you are using react-intl, you will need to add a dependency for it. Grommet 2.0 does not include react-intl.

Removed components

We will slowly add these as codesandbox references, and/or add the backward compatible component to grommet-v1 repo.

• Article
• Card
• Columns
• Footer
• Header
• Hero
• Section
• Sidebar
• Value
• Headline
• Label
• Quote
• Timestamp
• Title
• Pulse
• Legend
• Spinner - WIP, in the meanwhile you can use the svg example under Highlights
• Tiles, Tile

For more technical step by step examples of migrating components from v1 to v2 use this blog: Technical migration from grommet-v1 to grommet-v2 – grommet.io – Medium

Co-existing versions

Note that it's possible to run v1 and v2 side by side, and migrate the v1 components gradually while running v2.

Use v2 package.json file to get the latest version numbers on the following versions:

• Run yarn add grommetv2@npm:[email protected] [email protected] [email protected] [email protected]
• Manually update the pacakge.json in your v1 project to use the react and react-dom versions as mentioned on v2 package.json.
• Fix "import {PropTypes} from React" statements since it is not part of the React library.

Removed utilities

• Rest -> use fetch() directly

Component-level changes

App

• App component has been renamed to Grommet
• inline prop has been removed
• centered prop has been removed

Box

• appCentered prop has been removed
• colorIndex prop has been replaced with background
• focusable prop has been removed
• onClick prop has been removed. Use Button instead
• separator prop has been replaced with border
• size prop has been removed. Use width or height
• texture prop has been replaced with background
• textAlign prop has been removed
• primary prop has been removed
• full prop has been removed. Use basis

Button

• The default button now does not include react-router capabilities, you need to use RoutedButton if you were using Button with path prop.

    import { Button, RoutedButton } from 'grommet';
    
    <Button label='Box' href='/box' plain={true} />
    <RoutedButton label='Box' path='/box' plain={true} />
  

Layer

• closer has been removed. Now you should add your own close control in the body of the Layer.
• flush has been removed. Layer now is always flushed.
• hidden has been removed. Do not include Layer in your virtual DOM if you don't want it to show.
• peek has been removed.
• onClose has been renamed to onEsc. This callback will only be invoked if the user presses the escape key.

Text Input

• placeHolder has been replaced with placeholder

Video

• showControls has been replaced by controls, which now allows placing controls over or below the player.
• align, colorIndex, full, and size have all been removed. Use fit and put inside a Box.
• poster, shareLink, shareHeadline, shareText, title have all been removed. Instead, use a Stack component and the onEnded property to control any before and after play content. We have an example of this in the next-sample repository.
• allowFullScreen has been removed, if controls are shown, it is always available.
• muted has been renamed mute.