v4.5.0

Table.Cell

• [Add] Add arrow keys overrides for table cells #439

v4.4.0

Tab

• [Improvement] Add disabled tabs support #395

v4.3.0

Spinner

• [Add] Add delay property to only show spinner after a certain amount of time #414

Toaster

• [Add] Add ability to show only one toaster with the same ID #419

Combobox

• [Fix] Make Combobox fill the whole parent element #412

SideSheet

• [Add] Add onBeforeClose to SideSheet and Overlay for conditional closing #420

Portal

• [Fix] Fix first render of portals #413

Avatar

• [Fix] Add flexShrink={0} by default #390

Other

• [Improvement] Migrate componentWillReceiveProps to componentDidUpdate
  in <CornerDialog>, <Overlay>, <OptionsList> and <Toast> #416
• [Improvement] Add runtime warnings #415

v4.2.0

TagInput

• [Fix] Remove prop warning for createAppearance #405
• [Improvement] Returning false from onAdd keeps the value in the input field #405
• [Improvement] Add addOnBlur prop. #405
• [Improvement] Introduce event.preventDefault() when pressing enter because we do not want it to submit forms. #405

v4.1.1

TagInput

• [Fix] Fix appearance warning #401

v4.1.0

TagInput [new]

• [New] Added new TagInput component #399

v4.0.2

v4.0.2

SearchInput

• [Fix] Rename disable => disabled prop on Search Input. #373

Switch

• [Fix] Remove extra label prop from Switch. #375

Other

• [Fix] Update fills to refer correct yellow color. #380

v4.0.1

Table, Menu

• Convert NodeList to array with Array.from and prevent XO linter from fixing #370

v4.0.0 (Kauri)

Version	Code name
v4.0.0	Kauri

🎉 This is the biggest major release so far 🎉

High Level Improvements

• Brand new documentation experience available on evergreen.segment.com
• React upgraded to v16.3.
• New Icon component using BlueprintJS icons
  • All legacy icons deprecated.
• Intent API added to Button, IconButton, Alert, InlineAlert, Dialog, CornerDialog, Table.Row and Menu.Item.
  • intent property that accepts: none, success, danger, warning
  • appearance property changed to accept: default, minimal, primary
• Pane APIs changed.
  • appearance is deprecated for background.
• Improvements to z-index management with the new Stack component.
• Improvement and additions to the Table component
  • Components are exported from Table directly. Table.TextCell, Table.Row etc.
  • Height is now managed by the Table.Row and default is 48
  • New Table.EditableCell component.
  • New Table.SelectMenuCell component.
  • New Table.VirtualBody component.
• minorScale and majorScale exported.
• New Menu component
• Theming support with React.createContext.
  • New color system.
  • Updated typography system.
  • Themer object for help with generating styles.

Deprecated Components and Styles

• Theme related
  • colors
  • TextStyles,
  • FontFamilies,
  • TextColors,
  • ButtonAppearances
  • BadgeAppearances
  • LinkAppearances
  • TextInputAppearances
  • CheckboxAppearances,
  • controlBaseStyle,
  • FillAppearances,
  • InputAppearances,
  • selectableRowStyle,
  • selectableTabStyle,
  • getBorderRadiusForControlHeight,
  • getBorderRadiusForTextSize,
  • getIconSizeForControlHeight,
  • getTextSizeForControlHeight,
  • getTextStyleForControlHeight
  • SegmentedControlAppearances
  • SelectAppearances
  • ElevationStyles,
  • BorderColors,
  • LayerAppearances
• icon related
  • IconAim
  • IconColors
  • IconMap
  • AddIcon
  • ArrowIcon
  • CheckCircleIcon
  • CogIcon
  • DangerIcon
  • QuestionIcon
  • SearchIcon
  • TriangleIcon
  • WarningIcon
  • Icon (is now a completely different component with the same name)

Components with Breaking Changes

• Button
  • IconButton
  • BackButton
• Pane
• Card
• Avatar
• Badge
• Pill
• Dialog
• Alert
• SelectMenu
• Typography
  • Link
  • Heading
  • Text
• Table
  • TableBody
  • TableCell
  • TableHead
  • TableHeaderCell
  • TableRow
  • TextTableCell
  • TextTableHeaderCell
  • SearchTableHeaderCell

Upgrade Guide

Theme

One of the biggest changes in Evergreen v4 is the addition of a theming layer. The goal of this theming layer in this version is not to offer a simple theming mechanism, but rather create a flexible foundational API we can simplify in the future. Although Evergreen exposes theming capabilities. It's still considered a private API. Breaking changes may occur in minor releases.

Theme Utilities

The theming API uses the React.createContext API added in React v16.3.0. Evergreen exports the following utilities for theming:

• ThemeProvider
• ThemeConsumer
• withTheme
• defaultTheme

ThemeProvider

The ThemeProvider is used to provide a new theme to all child ThemeConsumers. Please refer to the code to learn how this works.

ThemeConsumer

The ThemeConsumer is the best way to access the current theme object. This is primarily useful for documentation. To create components that rely on the theme object, the withTheme HoC is the preferred method to access the theme object.

 <ThemeConsumer>
    {theme => (
      ...
    )}
</ThemeConsumer>

withTheme

To create components that rely on the theme object, use the withTheme HoC. You will see the following pattern being used within Evergreen:

import React from 'react'
import PropTypes from 'prop-types'
import { withTheme } from 'evergreen-ui' // Within Evergreen this is relative.

class Alert extends React.Component {
  static propTypes = {
    /**
     * Theme provided by ThemeProvider.
     */
    theme: PropTypes.object.isRequired
  }
  
  // Component definition...
}

// Export the component with the withTheme HoC
export default withTheme(Alert)

defaultTheme

The recommended way to access the theme should be through the ThemeConsumer. However, the default theme is also directly exported to help with migration from v3 to v4. The main use case is to migrate places in which you import colors and TextStyles directly.

Colors

The color system in Evergreen is located in the theme and is used throughout the theme. There is no real dependency on any of the colors directly within components. Components always access a theme color or property through a get function. For example, theme.getTextColor is a required function in the Evergreen theme, theme.colors is not a required property and not directly used.

Colors are no longer directly exported from Evergreen. They are available on the defaultTheme or through a ThemeConsumer preferably.

To help with the upgrade process, some useful variables are available on the defaultTheme:

import { defaultTheme } from 'evergreen-ui'

• defaultTheme.colors — functional theme colors.
• defaultTheme.palette — palette colors. Each color group has 4 variations: lightest, light, base, dark.
• defaultTheme.scales — blue and neutral have a more advanced scale of 10 colors.
• defaultTheme.fills — colors used for Avatars, Badges, Pills.

Palette

Mapping old colors

• turquoise is renamed to teal.
• pink colors is deprecated.
• orange color is added
• v4 no longer uses yellow for the warning intent. Please use the orange warning color instead.

Mapping base 500 colors to the defaultTheme.palette

The easiest colors to map to the new colors are base colors. Which previously were labeled as 500.

v3	v4
colors.turquoise['500']	defaultTheme.teal.base
colors.red['500']	defaultTheme.red.base
colors.yellow['500']	defaultTheme.yellow.base
colors.red['500']	defaultTheme.red.base
colors.blue['500']	defaultTheme.blue.base
colors.neutral['500']	defaultTheme.neutral.base
colors.green['500']	defaultTheme.green.base
colors.purple['500']	defaultTheme.purple.base
colors.pink['500']	defaultTheme.orange.base

Mapping dark 1000 colors to the defaultTheme.palette

You can map any color that is 900 or 1000 to the dark variant.

v3	v4
colors.turquoise['1000']	defaultTheme.teal.dark
colors.red['1000']	defaultTheme.red.dark
colors.yellow['1000']	defaultTheme.yellow.dark
colors.red['1000']	defaultTheme.red.dark
colors.blue['1000']	defaultTheme.blue.dark
colors.neutral['1000']	defaultTheme.neutral.dark
colors.green['1000']	defaultTheme.green.dark
colors.purple['1000']	defaultTheme.purple.dark
colors.pink['1000']	defaultTheme.orange.dark

Mapping light 30 colors to the defaultTheme.palette

You can colors that are around 30 to the light variant.
If you need different colors for different states use a lighten/darken function.

v3	v4
colors.turquoise['30']	defaultTheme.teal.light
colors.red['30']	defaultTheme.red.light
colors.yellow['30']	defaultTheme.yellow.light
colors.red['30']	defaultTheme.red.light
colors.blue['30']	defaultTheme.blue.light
colors.neutral['30']	defaultTheme.neutral.light
colors.green['30']	defaultTheme.green.light
colors.purple['30']	defaultTheme.purple.light
colors.pink['30']	defaultTheme.orange.light

Mapping lightest 5 colors to the defaultTheme.palette

You can map colors that are around 5 to the lightest variant.
If you need different colors for different states use a lighten/darken function.

v3	v4
colors.turquoise['5']	defaultTheme.teal.lightest
colors.red['5']	defaultTheme.red.lightest
colors.yellow['5']	defaultTheme.yellow.lightest
colors.red['5']	defaultTheme.red.lightest
colors.blue['5']	defaultTheme.blue.lightest
colors.neutral['5']	defaultTheme.neutral.lightest
colors.green['5']	defaultTheme.green.lightest
colors.purple['5']	defaultTheme.purple.lightest
colors.pink['5']	defaultTheme.orange.lightest

Exact Mapping 3A–400A colors with tinycolor2

v3	v4
color['3A']	tinycolor(color).setAlpha(0.025).toString()
color['5A']	tinycolor(color).setAlpha(0.041).toString()
color['7A']	tinycolor(color).setAlpha(0.057).toString()
color['10A']	tinycolor(color).setAlpha(0.079).toString()
color['15A']	tinycolor(color).setAlpha(0.114).toString()
color['20A']	tinycolor(color).setAlpha(0.146).toString()
color['30A']	tinycolor(color).setAlpha(0.204).toString()
color['40A']	tinycolor(color).setAlpha(0.255).toString()
color['50A']	tinycolor(color).setAlpha(0.301).toString()
color['60A']	tinycolor(color).setAlpha(0.342).toString()
color['70A']	tinycolor(color).setAlpha(0.38).toString()
color['80A']	tinycolor(color).setAlpha(0.415).toString()
color['90A']	tinycolor(color).setAlpha(0.447).toString()
color['100A']	tinycolor(color).setAlpha(0.477).toString()
color['125A']	tinycolor(color).setAlpha(0.544).toString()
color['150A']	tinycolor(color).setAlpha(0.602).toString()
color['175A']	tinycolor(color).setAlpha(0.653).toString()
`c...

v4.0.0-45

Radio

• [Improvement] BREAKING: bubble event in radio onChange #341

Dependencies

• Upgrade most of the dependencies #344