The main update in this release are improvements and API consistency across interaction patterns as well as documentation for the affected components.

High Level Improvements

• Documentation for Side Sheet, Popover, Corner Dialog, Combobox and Tooltip
• Popover/Positioner now has configurable positions with newly exported Position object.
• Popover positioning now auto updates with requestAnimationFrame.
• Positioner now uses <React.Fragment> instead of arrays and keys.
• Improved design and API for Corner Dialog
• Improved focus management and keyboard accessibility for Overlay and Popover.
• Consistent show API for interaction patterns isShown, onCloseComplete and onOpenComplete.
• Documented prop types for Positioner

Components with Breaking Changes

• Side Sheet
• Popover
• Corner Dialog
• Radio Group
• Overlay (see code)
• Positioner (see code)

No Breaking Changes

• Combobox
• Tooltip

Upgrade Notes

Link

• Link is now green by default
• Link has a underline by default
• Link has focus styles

Side Sheet

Side Sheet doesn't spread Overlay.propTypes anymore, and instead offers a simpler API for the transition lifecycle. Instead of relying on the onExited and onEntered API from Overlay — the Side Sheet now implemented onCloseComplete and onOpenComplete instead. This change in API is in line with the Dialog API and the updated Popover API.

• Removed spread of Overlay.propTypes (onHide, onExit, onExiting, onExited, onEnter, onEntering, onEntered props).
• Added onCloseComplete prop. Function that will be called when the exit transition is complete.
• Added onOpenComplete prop. Function that will be called when the enter transition is complete.

Before

<SideSheet
  isShown={state.isShown}
  onExited={() => setState({ isShown: false })}
  onEntered={() => console.log('entered')}
>{...}</SideSheet>

After

<SideSheet
  isShown={state.isShown}
  onCloseComplete={() => setState({ isShown: false })}
  onOpenComplete={() => console.log('entered')}
>{...}</SideSheet>

Positioner

The Positioner is a mainly private component within Evergreen and is used in Popover — which is used in Select Menu.

• Removed array returns with keys in favor of <React.Fragment/>
• The key is no longer passed down in the children.
• Positioner now auto updates, which means it is more reliable when resizing and inside scrollable containers.
• Positioner now allows for more positions. (see Position Object)
• useSmartPositioning prop is deprecated. Smart positioning is not opt-out anymore.

Position Object

Evergreen now exports a Position object that is used for the Positioner (and Popover/Select Menu) to have more flexibility.

import { Position } from 'evergreen-ui'

// Available positions
Position.TOP
Position.TOP_LEFT
Position.TOP_RIGHT
Position.BOTTOM
Position.BOTTOM_LEFT
Position.BOTTOM_RIGHT

This would be used as such:

<Popover content={<PopoverContent />} position={Position.TOP_LEFT}>
  <Button>TOP_LEFT</Button>
</Popover>

Popover

The API for the Popover has breaking changes in normal usage.

• Renamed isOpen into isShown.
• Deprecated side prop in favor of position prop
• Added position prop using the Position object.
• Added onCloseComplete and onOpenComplete transition lifecycle props.
• onOpen and onClose props still exist.
• Added bringFocusInside prop with default `true.
• Popover no longer spread the Positioner props.

Focus Management Improved

The Popover previously didn't have any focus management build in, in this release the Popover adds better focus handling.

When opening the Popover, focus will be brought inside the Popover by looking for elements with [autofocus] first, [tabindex] second and for button elements last.

When passing a node as the Popover children, the Popover will handle focus management automatically when closing the Popover. When closing, it will return back focus on the target if nothing else has focus.

Corner Dialog

This component has changed drastically from it's previous usage. It is almost the same as the Dialog component at this point.

• Design is updated.
• onCloseComplete and onOpenComplete transition lifecycle events added.
• Removed onHide, onExit, onExiting, onExited, onEnter, onEntering, onEntered props.
• Removed height prop.
• Removed hasCloseIcon prop.
• Added hasFooter prop.
• Added hasHeader prop.
• Added onConfirm prop.
• Added confirmLabel prop.
• Added hasCancel prop.
• Added onCancel prop.
• Added cancelLabel prop.

New Design

Simple Usage Example

<CornerDialog
  title="Welcome to This New Feature"
  isShown={state.isShown}
  onCloseComplete={() => setState({ isShown: false })}
>
  The Corner Dialog component is used for new feature announcements
  and feedback requests from the user.
</CornerDialog>

Radio + Radio Group

The Radio Group has been dramatically changed. The Radio is pretty much the same.

Radio Group

The Radio Group component is now similar to the API of the Segmented Control.

• Removed items prop in favor of options prop.
• Added defaultValue prop.
• Added value prop.
• label prop now adds a label to the group.
• Tweaks to the spacing.
• When using size={16} the text size is now 400 instead of 300.
• Added isRequired prop.
• Added size prop.

Radio

• Added isRequired prop.
• Removed appearance prop. There is currently only one appearance.

Overlay

The Overlay is mainly a private component, but has some improvements in functionality — it is most visibly seen in the Side Sheet and the Dialog in terms of focus management.

• Overlay brings in focus inside of the overlay on open.
• Overlay brings back focus to the last item that was active when triggering the Overlay.

Autocomplete

• No longer requires a key to work because of the updated Positioner.

Tooltip

Most basic usage shouldn't be affected by these changes.

• Removed tooltipProps.
• Added position prop, default is Position.BOTTOM.
• Added hideDelay prop. Time in ms before hiding the Tooltip.
• TooltipStateless now uses Paragraph instead of Text.

Combobox

• Changed default width from 224 to 240
• Added placeholder prop. The placeholder text when there is no value present.