Evergreen v6 is one of the biggest releases of Evergreen yet. We've spent a lot of timing thinking about how to let consumers extend Evergreen, and as a result have made quite a few changes to how you might use it. Please follow the list of breaking API changes below, and reach out via GitHub Issues if there's anything that you're seeing that we might have missed!

Previously, <Pane /> and <Text /> had a css prop, which allowed consumers to write arbitrary css styles (including composing pseudoselectors) and pass those through to the underlying <Pane /> and <Text /> components.

With this removed, we encourage either using the standard Evergreen components directly, or taking a CSS-in-JS route to adding those styles (via className for instance).

const MyComponent = () => {
-  return <Pane css={ {':hover': { backgroundColor: 'red' }}} />
+  return <Pane className={backgroundRedClass} />
 }

Previously, <Alert /> had a hasTrim boolean prop to control the left border appearance (which was provided by default). Now you can override this directly through props or via theming instead, if you so choose:

-<Alert hasTrim={false} />
+<Alert border="none" />

Previously, <Badge />, <Pill />, and <Avatar /> had an isSolid boolean prop to control the color appearance (which was false by default).

For <Badge /> and <Pill /> you can use appearance="solid" or appearance="subtle" (default) instead. Note that the defaultTheme in v6 does not have a solid appearance included, so you'll have to style that yourself via theming if you want it! The classicTheme will include both appearances out of the box.

-<Badge isSolid />
+<Badge appearance="solid" />

For <Avatar /> you can supplement this behavior through custom theming.

For v6, we decided to remove the <BackButton /> component as it expanded our surface area without adding a ton of value under the hood.

If you consume <BackButton /> in your own application, please feel free to re-consume <BackButton /> and its types as following:

+import React, { forwardRef, memo } from 'react'
+import { ArrowLeftIcon, Button } from 'evergreen-ui'
+
+const BackButton = memo(
+  forwardRef(function BackButton({ children = 'Back', ...props }, ref) {
+    return (
+      <Button iconBefore={ArrowLeftIcon} {...props} ref={ref}>
+        {children}
+      </Button>
+    )
+  })
+)

+BackButton.propTypes = {
+  /** Composes the Button component as the base. */
+  ...Button.propTypes
+}
+
+export default BackButton

The default theme (and even classic themes) exported by Evergreen no longer support marginTop="default" as a "special" property. We recommend defining your own margin and applying that as standard in your codebase.

- <Heading marginTop="default"> ... </Heading>
+ <Heading marginTop={majorScale(3)}> ... </Heading>

We're deprecating the SegmentedControl in the next major version of Evergreen as we've seen it cause confusion for when to use it instead of other form controls or navigation components.

The internals have been slightly modified to make use of the new low-level Group component that implements the WAI-ARIA Group role.

This means that each option is represented as Button. If you were extracting values from form submission that included this component you may have changes to make.

Additionally, we've unified the sizing API so SegmentedControl also accepts a size prop just like Button, TextInput, Group, etc.

onKeyPress is no longer recommended and should be subbed out with onKeyDown.

Previously, Table.Row accepted and bubbled the onKeyPress even during onKeyDown – this behavior has now been normalized to do the expected thing. If you pass onKeyPress it will only be invoked during onKeyPress (it's passed down to the container component blindly). This may result in a behavior change if you were previously using onKeyPress on table rows.

- <Table.Row onKeyPress={() => {}} />
+ <Table.Row onKeyDown={() => {}} />