Skip to content

V4 (Kauri) #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jeroenransijn merged 174 commits into from
Oct 16, 2018
Merged

V4 (Kauri) #200

jeroenransijn merged 174 commits into from
Oct 16, 2018

Conversation

@jeroenransijn
Copy link
Contributor

@jeroenransijn jeroenransijn commented Jun 12, 2018 •
edited
Loading

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

image

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()
color['200A'] tinycolor(color).setAlpha(0.699).toString()
color['300A'] tinycolor(color).setAlpha(0.845).toString()
color['400A'] tinycolor(color).setAlpha(0.954).toString()

Exact Mapping 3–400 colors with tinycolor2

v3 v4
color['3A'] tinycolor.mix('white', color, 0.025 * 100).toString()
color['5A'] tinycolor.mix('white', color, 0.041 * 100).toString()
color['7A'] tinycolor.mix('white', color, 0.057 * 100).toString()
color['10A'] tinycolor.mix('white', color, 0.079 * 100).toString()
color['15A'] tinycolor.mix('white', color, 0.114 * 100).toString()
color['20A'] tinycolor.mix('white', color, 0.146 * 100).toString()
color['30A'] tinycolor.mix('white', color, 0.204 * 100).toString()
color['40A'] tinycolor.mix('white', color, 0.255 * 100).toString()
color['50A'] tinycolor.mix('white', color, 0.301 * 100).toString()
color['60A'] tinycolor.mix('white', color, 0.342 * 100).toString()
color['70A'] tinycolor.mix('white', color, 0.38 * 100).toString()
color['80A'] tinycolor.mix('white', color, 0.415 * 100).toString()
color['90A'] tinycolor.mix('white', color, 0.447 * 100).toString()
color['100A'] tinycolor.mix('white', color, 0.477 * 100).toString()
color['125A'] tinycolor.mix('white', color, 0.544 * 100).toString()
color['150A'] tinycolor.mix('white', color, 0.602 * 100).toString()
color['175A'] tinycolor.mix('white', color, 0.653 * 100).toString()
color['200A'] tinycolor.mix('white', color, 0.699 * 100).toString()
color['300A'] tinycolor.mix('white', color, 0.845 * 100).toString()
color['400A'] tinycolor.mix('white', color, 0.954 * 100).toString()

Almost Exact Mapping 600–1000 colors with tinycolor2

There is currently no longer any colors for 600, 700, 800, 900 colors for palette colors.
We do export a new defaultTheme.scales property that exports some extra shades for blue and neutral. However, if you need a almost exact match to the old colors use tinycolor2.

v3 v4
colors.green['600'] tinycolor(palette.green.base).darken(3).toString()
colors.green['700'] tinycolor(palette.green.base).darken(5).toString()
colors.green['800'] tinycolor(palette.green.base).darken(9).toString()
colors.green['900'] tinycolor(palette.green.base).darken(13).toString()
colors.green['1000'] tinycolor(palette.green.base).darken(20).toString()

Mapping Icon example

v3 v4
<WarningIcon color={colors.yellow['500']} /> <Icon icon="warning-sign" color="warning" />

Pane + Card

Appearance is now background.

  • The Pane component no longer accepts the appearance property. Use the background property instead.
    • appearance="selected" is deprecated.
    • appearance="dark" is deprecated.
    • appearance="tint3" is deprecated. Use background="tint2" instead.
v3 v4
<Pane appearance="tint1" /> <Pane background="tint1" />
<Pane appearance="tint2" /> <Pane background="tint2" />
<Pane appearance="tint3" /> <Pane background="tint2" />
<Card appearance="tint1" /> <Card background="tint1" />
<Card appearance="tint2" /> <Card background="tint2" />
<Card appearance="tint3" /> <Card background="tint2" />

Borders are different. extraMuted is deprecated.

  • Borders don't support the extraMuted property anymore. Use muted instead.
  • BorderColors.muted in v3 is default in v4
  • BorderColors.extraMuted in v3 is muted in v4
  • BorderColors.default is deprecated
v3 v4
<Pane borderRight <Pane borderRight />
<Pane borderRight="muted" /> <Pane borderRight="default" />
<Pane borderRight="extraMuted" /> <Pane borderRight="muted" />
<Pane borderRight="default" /> <Pane borderRight="default" />

Button

  • [Breaking] intent property that accepts: none, success, danger, warning
  • [Breaking] appearance property changed to accept: default, minimal, primary
  • [Breaking] Icons now use BlueprintJS icons.
  • [Change] Minimal default button now has a blue text color
  • [Fix] Bring back cursor: not-allowed; when buttons are disabled
  • [Fix] Fixed marginTop on the Button component. [v4] Fix button margin top #240

Before / After

v3 v4
<Button appearance="green" /> <Button appearance="primary" intent="success" />
<Button appearance="blue" /> <Button appearance="primary" />
<Button appearance="danger" /> <Button appearance="primary" intent="danger" />
<Button appearance="ghostBlue" /> <Button appearance="minimal" />
<Button appearance="ghost" /> <Button appearance="minimal" />

IconButton

  • [Breaking] intent property that accepts: none, success, danger, warning
  • [Breaking] appearance property changed to accept: default, minimal, primary
  • [Breaking] Icons now use BlueprintJS icons.
  • [Add] Add iconSize prop to IconButton component. add iconSize to IconButton component. closes #316 #317

Icon

  • Icons now use BlueprintJS icons
  • Icons are no longer wrapped in a Box.
  • Icons now accept the size property.
  • aim prop deprecated
  • iconWidth prop deprecated
  • iconHeight prop deprecated
v3 v4
<AddIcon /> <Icon icon="plus" />
<CheckCircleIcon /> <Icon icon="tick-circle" />
<CloseIcon /> <Icon icon="cross" />
<CogIcon /> <Icon icon="cog" />
<DangerIcon /> <Icon icon="error" />
<QuestionIcon /> <Icon icon="info-sign" />
<SearchIcon /> <Icon icon="search" />
<WarningIcon /> <Icon icon="warning-sign" />

Icons with aim

v4 no longer supports the aim property on icons. Instead use the icon for it.

v3 v4
<ArrowIcon /> <Icon icon="arrow-up" />
<ArrowIcon aim="right" /> <Icon icon="arrow-right" />
<ArrowIcon aim="left" /> <Icon icon="arrow-left" />
<ArrowIcon aim="bottom" /> <Icon icon="arrow-bottom" />
<TriangleIcon /> <Icon icon="caret-up" />
<TriangleIcon aim="right" /> <Icon icon="caret-right" />
<TriangleIcon aim="left" /> <Icon icon="caret-left" />
<TriangleIcon aim="down" /> <Icon icon="caret-down" />

Avatar

  • Avatar appearance is deprecated. Use color prop instead.
v3 v4
<Avatar appearance="green" /> <Avatar color="green" />

Badge + Pills

  • Badge + Pill appearance is deprecated. Use color prop instead.
v3 v4
<Badge appearance="green" /> <Badge color="green" />
<Pill appearance="green" /> <Pill color="green" />

Dialog

  • Dialog now implements the intent API.
  • type prop deprecated. Use intent instead.
v3 v4
<Dialog type="danger" {...otherProps} /> <Dialog intent="danger" {...otherProps} />

Alert

v3 v4
<Alert type="none" {...otherProps} /> <Alert intent="none" {...otherProps} />
<Alert type="danger" {...otherProps} /> <Alert intent="danger" {...otherProps} />
<Alert type="warning" {...otherProps} /> <Alert intent="warning" {...otherProps} />
<Alert type="success" {...otherProps} /> <Alert intent="success" {...otherProps} />

Typography

All typography information is now passed through the theme.
The following documentation describes the default theme settings.

  • The SubHeading component is deprecated.
  • Typography components now export the ability to set a default margin top: marginTop="default"

Typography - Text

  • Text styles are passed through the theme
  • Text only support size={300 | 400 | 500 | 600}.
    • Default size is now 400
    • 600 is only there for the Link component that can be used as a big breadcrumb in some cases and is based on the Text component

Deprecated

  • color="extraMuted" is deprecated. Use color="muted" instead.
  • isUppercase prop is deprecated.
  • textStyles prop is deprecated.
  • textUppercaseStyles prop is deprecated.

Typography - Paragraph

  • Paragraph no longer implements the Text component...

  • ...instead paragraph styles are passed through the theme independently.

  • Paragraph only supports size={300 | 400 | 500}. Not 600!

    • Default size is now 400

  • inherited props from Text are deprecated

    • isUppercase prop is deprecated.
    • textStyles prop is deprecated.
    • textUppercaseStyles prop is deprecated.

Typography - Heading

  • Heading no longer implements the Text component...

  • ...instead heading styles are passed through the theme independently.

  • Font family display is used for text sizes above and including 20px.

  • Font family ui is used for text sizes below 20px

  • Heading sizes support size={100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}.

    • size={100} is uppercase
    • Colors are explicitly set in the theme.

  • isUppercase prop is deprecated.

  • inherited props from Text are deprecated

    • textStyles prop is deprecated.
    • textUppercaseStyles prop is deprecated.

Typography - Link

  • appearance deprecated for color.
  • Default color is blue instead of green.
  • Link accepts size={300 | 400 | 500 | 600}.
v3 v4
<Link /> <Link color="green" />
<Link appearance="blue" /> <Link />
<Link appearance="neutral" /> <Link color="neutral" />

Table

  • Components are exported from Table directly. Table.TextCell, Table.Row etc.
  • No longer a default borderRight on table cells.
  • Height is now managed by the Table.Row and default is 48.
  • intent prop added to Table.Row.
v3 v4
TableBody Table.Body
TableHead Table.Head
TableHeaderCell Table.HeaderCell
TextTableHeaderCell Table.TextHeaderCell
SearchTableHeaderCell Table.SearchHeaderCell
TableRow Table.Row
TableCell Table.Cell
TextTableCell Table.TextCell

Table.Cell

Table.Row

Table.VirtualBody (new)

Table.SelectMenuCell (new)

Table.EditableCell (new)

Button

Scales minorScale and majorScale

Evergreen now exports two helper methods to conform to the 4 (px) minor scale and 8 (px) major scale.

import { minorScale, majorScale } from 'evergreen-ui'

minorScale(1) // => 1*4 = 4
minorScale(3) // => 3*4 = 12

majorScale(1) // => 1*8 = 8
majorScale(2) // => 2*8 = 16
majorScale(3) // => 3*8 = 24
majorScale(4) // => 4*8 = 32

Both scales only except integers as input and will otherwise throw a TypeError.

Stack component and Stacking

V4 ships a fix for nesting Popovers, SelectMenu and Combobox in Dialogs and SideSheets. And layering Dialogs on top of Dialogs. Essentially allowing infinite layering anything that uses a Stack component.

Changes

  • Use React 16.3.0
  • Use createContext API
  • Export StackingContext from evergreen-ui
  • Export Stack component from evergreen-ui
  • Export StackingOrder object with z-index presets from evergreen-ui.
  • Remove zIndex props from Popover, Combobox and Positioner.

StackingContext

The StackingContext is a React context with a default value (z-index) of 10. The StackingContext is currently only used within the Stack component within Evergreen.

Stack component

The Stack component uses the StackingContext which accepts a function as children. That function takes in the zIndex and should return a React node:

static propTypes = {
  /**
   * Function that takes the current z-index and returns a React Node.
   * (zIndex) => ReactNode.
   */
  children: PropTypes.func.isRequired,

  /**
   * Set the value of the stack. This will increment for children.
   */
  value: PropTypes.number
}

Inside of the render function the Stack component first looks for the current value. Passing a value to the component will make sure the highest of the two are used. This is useful because Overlays start at a z-index of 20. See more info below about StackingOrder. The Stack component will pass the current value to the current children, and increment the value for the next consumer.

render() {
  const { children, value } = this.props
  return (
    <StackingContext.Consumer>
      {previousValue => {
        const currentValue = Math.max(value, previousValue)
        const nextValue = currentValue + 1
        return (
          <StackingContext.Provider value={nextValue}>
            {children(currentValue)}
          </StackingContext.Provider>
        )
      }}
    </StackingContext.Consumer>
  )
}

Stack component usage

In most cases Stack will be an internal component, we are exposing it if you want to build custom components on top of this logic.

<Stack value={StackingOrder.POSITIONER}>
  {zIndex => {
    return (
      /* ... code omitted */
    )
  }}
</Stack>

StackingOrder

The values here are somewhat random, the reason why POSITIONER and OVERLAY are 10 apart is that in between the Stack component can increment the z-index — giving a head room of 10 z-indexes.

/**
 * Stacking order contains z-index values that are used through.
 * Note that the Stack component might increase the z-index for certain components.
 */
export default {
  /**
   * Used for focused buttons and controls.
   */
  FOCUSED: 2,

  /**
   * Used as the default for the StackingContext.
   */
  STACKING_CONTEXT: 5,

  /**
   * Used as the default for the Positioner.
   */
  POSITIONER: 10,

  /**
   * Used for the Overlay and everything that's inside such as Dialog + SideSheet.
   */
  OVERLAY: 20,

  /**
   * Used for the toasts in the toaster. Appears on top of everything else.
   */
  TOASTER: 30
}

StackingOrder Example

I tweeted about this with a video attached. Click the link below to see.

React.createContext is a great solution for solving automatic stacking order when using portals for modal dialogs, popovers, panels and sheets. #reactjs pic.twitter.com/9RImVl2ISV

— Jeroen Ransijn 🌲 (@Jeroen_Ransijn) April 17, 2018

Toaster

SelectMenu

  • [Improvement] isMultiSelect prop added to SelectMenu. Use when using multi select.
  • [Fix] SelectMenu selection now skips filtered items. Only visible items are selected.
  • [Fix] SelectMenu scrolls to the selected item by setting scrollToIndex on VirtualList.
  • [Fix] Fix SelectMenu search when 0 results. Table.SelectMenuCell crash when filter returns zero items #302

Tooltip

Select

TextInputField / FormField

  • [Improvement] Add hint property to TextInputField which is under the input element. FormFieldHint
  • [Improvement] Description moved above the input element, instead under.
  • [Fix] Fixed alignment slightly of icon in FormFieldValidationMessage

TextInputField

SegmentedControl

Select / SelectField

Menu (new)

  • [New] Menu.Item component
  • [New] Menu.Group component
  • [New] Menu.Divider component
  • [New] Menu.Option component
  • [New] Menu.OptionsGroup component
  • [Improvement] Add better focus management to the Menu component
    • Support Home and End key to jump to first and last component
    • Support custom [role="menuitem"] and [role="menuitemradio"] elements within the Menu.

UnorderedList, OrderedList, ListItem

  • [Add] Add size prop to OrderedList and UnorderedList
  • [Add] Add iconColor and icon prop to OrderedList and ListItem
  • [Improvement] When using icon/iconColor in OrderedList and ListItem, ListItem will override the property
  • [Fix] Fixed prop warnings and make list components more flexible. fix prop warnings and make list components more flexible #315

SidebarTab

Popover

Positioner

Position

Position constant values updated throughout Evergreen.

Position.TOP // 'top',
Position.TOP_LEFT // 'top-left',
Position.TOP_RIGHT // 'top-right',
Position.BOTTOM // 'bottom',
Position.BOTTOM_LEFT // 'bottom-left',
Position.BOTTOM_RIGHT // 'bottom-right',
Position.LEFT // 'left',
Position.RIGHT // 'right'

SideSheet

Dialog

Dialog + Overlay + SideSheet

Checkbox

Radio

Other Changes

Docs

  • Docs is completely redesigned.
  • Docs is now using Gatsby v2.

@jeroenransijn
Stack component and React 16.3
c4c5573
@jeroenransijn
improvements
55c968a
@jeroenransijn
typo
891ff4f
@jeroenransijn
Merge branch 'master' into fix-stacking
568c86e
@jeroenransijn
Merge branch 'master' into fix-stacking
738948e
@jeroenransijn
add default value
e47c44c
@jeroenransijn
Merge branch 'fix-stacking' of ssh://github.com/segmentio/evergreen i…
5939f8b 
…nto fix-stacking
@jeroenransijn
themer wip
972321d
@jeroenransijn
create select appearance
be88790
@jeroenransijn
create link appearance
ec3faa1
@jeroenransijn
theme
e9cdbda
@jeroenransijn
fix border
5fdc569
@jeroenransijn
progress on buttons theming
07fa145
@jeroenransijn
using new icons
a60a44a
@jeroenransijn
in flight progress
05ca8a6
@jeroenransijn
withTheme single line
5538217
@jeroenransijn
default theme cleanup in folder
4846796
@jeroenransijn
more controls use withTheme
53908b8
@jeroenransijn
getTextareaClassName
8916cee
@jeroenransijn
getRowAppearance
539f5a8
@jeroenransijn
getSelectClassName
dad2900
@jeroenransijn
getSegmentedControlClassName
3f796d9
@jeroenransijn
remove ButtonAppearances
778768e
@jeroenransijn
themed avatar
a1330fc
@jeroenransijn
fixes
a9c7798
@jeroenransijn
fix icon Combobox
a4111ca
@jeroenransijn
themed badges
290e615
@jeroenransijn
sunset icons
eee85bc
@jeroenransijn
themed switch
447a94f
@jeroenransijn
remove color refs from components
1453f75
@mytototo
Copy link

mytototo commented Sep 12, 2018

Hi there,

Thank you for the work on Evergreen, it's amazing !
Do you know when a public release will be available for the v4 ?

Thanks.

jeroenransijn and others added 10 commits September 18, 2018 17:38
@jeroenransijn
remove empty divs from positioner (#330)
3025705
@jeroenransijn
4.0.0-40
705c23f
@mshwery @jeroenransijn
fix conflict between v3 and v4 toaster init order (#332)
e4f2558
@jeroenransijn
4.0.0-41
9ca3910
@Rowno
Remove storybook-deployer
23ae955
@jeroenransijn
V4 Docs (#335)
be78929 
* overview images

* wip

* mdx integration wip

* wip testing mdx

* wip docs provider

* overview images

* wip

* mdx integration wip

* wip testing mdx

* wip docs provider

* layout primitives

* fix css

* typography

* small cleanup

* colors + icons

* button docs

* tab docs

* badge and pill

* avatar docs

* TextInput docs

* SearchInput docs

* Textarea docs

* Autocomplete docs

* filepicker docs

* Select docs

* Select docs

* Combobox docs

* SelectMenu docs

* more examples for SelectMenu

* Popover docs

* Menu docs

* Checkbox docs

* Radio docs

* SegmentedControl docs

* Switch docs

* toaster docs

* Alert docs

* Spinner docs

* Dialog docs

* SideSheet docs

* IconButton docs

* remove example

* CornerDialog docs

* Table docs

* Portal docs

* FormField docs

* broken wip

* fix portal

* get started back to normal

* docs homepage

* docs media items

* add spectrum link

* github button

* docs update

* ssr and improvements

* fix aboslutePath

* remove old docs

* fix imports

* clean docs

* docs & readme improvements

* update readme and remove unused code

* remove old code
@jeroenransijn
Upgrade dependencies v4 (#336)
6ee16a6 
* upgrade deps

* update snaphosts
@Rowno
Merge branch 'master' into v4
75eb185 
* master: (25 commits)
  Remove storybook-deployer
  v3.2.7
  Fix typo in Tooltip proptypes (#321)
  fix githubLink pathname on ComponentReadme (#310)
  Use `rm -rf` in prepublishOnly
  Run the babel builds concurrently
  circleci: fix the gh-pages ignore config
  circleci: fix the gh-pages ignore
  Migrate to circleci 2.0
  Adding a link to Synapse
  Fix wording in Toaster docs (#294)
  v3.2.6
  allow default TableRow keypress events (#221) (#276)
  Fix misspelling of ListItem component name (#268)
  🌲 CI status image (#263)
  Add link to v4 docs and PR
  Add more spacing
  Add Hero image
  Add GitHub hero
  Add note to v4
  ...

# Conflicts:
#	README.md
#	docs/src/components/ComponentReadme.js
#	package.json
#	src/segmented-control/src/SegmentedControl.js
#	src/segmented-control/src/SegmentedControlRadio.js
#	src/segmented-control/src/styles/SegmentedControlAppearances.js
#	src/select-menu/src/OptionsList.js
#	src/select-menu/src/SelectMenuContent.js
#	src/table/src/TableRow.js
#	src/table/stories/index.stories.js
#	src/toaster/docs/index.js
#	yarn.lock
@jeroenransijn
add segment tracking (#337)
399757a
@jeroenransijn
Tracking fix (#338)
92bb2a7 
* add segment tracking

* improve ssr

* fix
@jeroenransijn jeroenransijn changed the title V4 (WIP) V4 Sep 25, 2018
@jeroenransijn jeroenransijn changed the title V4 V4 (Kauri) Sep 25, 2018
@Flaque
Copy link
Contributor

Flaque commented Sep 26, 2018

@mytototo, at the moment you can publically use evergreen-v4! (though it's in beta)

yarn install evergreen-ui@4.0.0-41

@mshwery
Copy link
Contributor

mshwery commented Sep 26, 2018 •
edited
Loading

It's also available on the next tag @Flaque @mytototo:

npm install --save evergreen-ui@next

mshwery and others added 10 commits October 2, 2018 12:27
@mshwery
Bug/radio indeterminate (#340)
e536446
@Rowno
v4.0.0-42
74bea20
@Rowno
Add babel-plugin-add-react-displayname
e498643 
This makes sure that all components have a `displayName`.
@Rowno
v4.0.0-43
ac7f24d
@Rowno
Add displayName to withTheme
c0b724d
@Rowno
v4.0.0-44
c0d1b8a
@Rowno @jeroenransijn
Upgrade most of the dependencies (#344)
7c70e1a 
* Upgrade most of the dependencies

* Fix evergreen version in ssr example

* Add @babel/runtime

* Fix excluding the stories and tests from the build

* Revert test order change

* Upgrade ava and sinon

* Upgrade husky hooks config
@mshwery @jeroenransijn
remove unused TableCell props (#342)
eb2a303
@mshwery @jeroenransijn
BREAKING: bubble event in radio onChange (#341)
3e4ecfe 
* BREAKING: bubble event in radio onChange

* comply with linter
@jeroenransijn
4.0.0-45
b419a36
@jeroenransijn jeroenransijn merged commit aca37cb into master Oct 16, 2018
@Rowno Rowno deleted the v4 branch October 17, 2018 09:17
prateekgoel pushed a commit to prateekgoel/evergreen that referenced this pull request Oct 26, 2018
@jeroenransijn
V4 (Kauri) (segmentio#200)
8c95118 
* Stack component and  React 16.3

* improvements

* typo

* add default value

* themer wip

* create select appearance

* create link appearance

* theme

* fix border

* progress on buttons theming

* using new icons

* in flight progress

* withTheme single line

* default theme cleanup in folder

* more controls use withTheme

* getTextareaClassName

* getRowAppearance

* getSelectClassName

* getSegmentedControlClassName

* remove ButtonAppearances

* themed avatar

* fixes

* fix icon Combobox

* themed badges

* sunset icons

* themed switch

* remove color refs from components

* updated colors story

* default theme cleanup

* upgrade to gatsby v2

* color docs

* typography docs improvements

* improve layer docs

* improve alert docs

* improve button docs

* add icon docs

* Table improvements + Menu component added

* advanced table example

* advanced table example

* table docs update

* component status fix

* fix theme export + text size 600

* fix

* 4.0.0-0

* scales added

* 4.0.0-1

* color mapping example

* prop type fix Select

* fix tooltip

* 4.0.0-2

* fix autofocus => autoFocus in Select

* alert improvements

* 4.0.0-3

* support auto height table rows

* 4.0.0-4

* support border false

* 4.0.0-5

* unify intent API, deprecate info

* 4.0.0-6

* icon button default color change

* 4.0.0-7

* docs update

* Fix popover not closed when toggle button has children (segmentio#219)

* Fix popover when toggle button has children

* Add a story for popover

* Update snapshot and fix tests

* Refactor onbody click check

* Increase package size limit

* add hint prop to TextInputField

* 4.0.0-8

* 4.0.0-9

* set default TextInputField  height to 32

* 4.0.0-10

* add cursor not-allowed to disabled button

* use transparent color for button disabled

* focus management

* Remove intent requirement on button, add default "none" (segmentio#225)

* Remove intent requirement on button, add default "none"

* Update snapshots

* support is prop MenuItem

* 4.0.0-11

* allow passthrough props on menu item, and always bubble highjacked events (segmentio#231)

* 4.0.0-12

* increase the contrast of n1-level colors and fix typo (segmentio#232)

* increase the contrast of n1-level colors and fix typo

* wip update snap and B1 color

* wip. update more snaps

* 4.0.0-13

* size in lists + icons (segmentio#234)

* 4.0.0-14

* Bug/select icon margin (segmentio#237)

* add padding for icon on Select, add SelectField, add docs

* wip. include in docs

* wip

* 4.0.0-15

* add export for SelectField (segmentio#238)

* [v4] Fix button margin top (segmentio#240)

* fix margin top button

* fix tests

* add focus handling to segmented control (segmentio#241)

* [V4] tooltip inside popover (segmentio#239)

* size in lists + icons

* clean up

* fix typo and add children check

* fix

* clean up

* fix typo and add children check

* fix

* 4.0.0-16

* fix docs blank page (segmentio#244)

* enable passing `defaultValue` for uncontrolled select inputs (segmentio#245)

* 4.0.0-17

* fix icon placement (segmentio#248)

* 4.0.0-18

* Remove caret right icon from sidebartab (segmentio#250)

* 4.0.0-19

* fix jitter positioner (segmentio#257)

* 4.0.0-20

* improve positioner calculations (segmentio#259)

* 4.0.0-21

* fix css ssr (segmentio#264)

* Fix hiding <Tooltip> by explicitly setting `isShown` to `false` (segmentio#265)

* 4.0.0-22

* support onCancel callback prop (segmentio#266)

* 4.0.0-23

* [v4] Add Table.VirtualBody (segmentio#267)

* wip virtual body

* add Table.VirtualBody

* remove warning (segmentio#269)

* fix fixed height virtual body (segmentio#270)

* 4.0.0-24

* improve virtual body (segmentio#271)

* 4.0.0-25

* Fix broken blueprint link (segmentio#273)

Fixes a broken link in the docs for icons. 

```
http://blueprintjs.com/docs/v2/#icons -> http://blueprintjs.com/docs/versions/2/#icons
```

* [v4] Add Editable/SelectMenu Cell (segmentio#274)

* add Editable/SelectMenu Cell

* minor tweaks

* cleanup stories + improve table row interaction

* cleanup imports

* 4.0.0-26

* [V4] EditableCell improvements (segmentio#278)

* wip disabled editable cell

* editable cell improvements

* remove controlled usage

* 4.0.0-27

* [v4] Improve (SelectMenu/Editable)Cell and SegmentedControl (segmentio#281)

* improve select menu/editable cell and segmented control

* remove border right from cell

* 4.0.0-28

* [v4] Table.(Editable/SelectMenu)Cell Fixes (segmentio#284)

* fix size and isSelectable={true}

* fixes to size and isSelectable={true}

* 4.0.0-29

* fix editable cell position + tiny pixel shift radio (segmentio#286)

* 4.0.0-30

* fix virtual body height calculation (segmentio#289)

* 4.0.0-31

* improve editable/selectmenu cells (segmentio#293)

* 4.0.0-32

* add left, right, top, bottom anchors to side-sheet (segmentio#252)

* add left, right, top, bottom anchors to side-sheet

* use Position enum in Side-sheet and cache calls to generating sheetCloseClassName

* move Position to constants and update imports

* fix another Position import

* change SheetClose animation name and make position a required prop

* 4.0.0-33

* fix search (segmentio#304)

* 4.0.0-34

* Migrate to circleci 2.0

* circleci: fix the gh-pages ignore

* circleci: fix the gh-pages ignore config

* Run the babel builds concurrently

* Make the Dialog mobile friendly (segmentio#301)

* Make the dialog mobile friendly

This change makes the dialog resize gracefuly to fit the available viewport.

It should be a non-breaking change and the dialog should behave the same on desktop as it did before.

* Add sideOffset

* Remove unnecessary sideOffsetWithUnit variable

* Use `rm -rf` in prepublishOnly

* v4.0.0-35

* add docs to badge and pill (segmentio#307)

* fix prop warnings and make list components more flexible (segmentio#315)

* dialog: add horizontal scrolling support (segmentio#314)

This allows the Dialog to gracefully handle block level content that's too wide by scrolling, preventing the Dialog from overflowing the sides of the viewport.

This should be a non-breaking change.

* add iconSize to IconButton component. closes segmentio#316 (segmentio#317)

* 4.0.0-36

* Add "indeterminate" prop to <Checkbox> (segmentio#313)

* Add "indeterminate" prop to <Checkbox>

* Delete extraneous line

* Remove permutation function, use plain JSX

* Fix label

* Add ref callback to set indeterminate prop

* Add indeterminate styles

* Remove console.log

* Make prop order consistent

* Clean up story

* Uncomment commented-out styles

* Remove duplicate styles

* add position relative (segmentio#318)

* 4.0.0-37

* Allow grammarly to be disabled for Textarea (segmentio#323)

* Allow grammarly to be disabled for Textarea

* Destructure grammarly from props

* Improve cancelation behavior for SideSheet, Dialog, and Overlay (segmentio#324)

* Extend cancelation handling in Dialog and Overlay

This adds:
- `shouldCloseOnEscapePress` and `shouldCloseOnClick` to `Overlay` and `Dialog`
- Fixes a bug where `Dialog`'s did not trigger the `onCancel` handler when the close button was clicked.

* Add Stories and SideSheet support

* 4.0.0-38

* add Positioner support for Position.LEFT and Position.RIGHT (segmentio#299)

* add Position.LEFT and Position.RIGHT positions to Positioner, Tooltip, and Popover

* alter y axis to keep popover in viewport

* 4.0.0-39

* remove empty divs from positioner (segmentio#330)

* 4.0.0-40

* fix conflict between v3 and v4 toaster init order (segmentio#332)

* 4.0.0-41

* Remove storybook-deployer

* V4  Docs (segmentio#335)

* overview images

* wip

* mdx integration wip

* wip testing mdx

* wip docs provider

* overview images

* wip

* mdx integration wip

* wip testing mdx

* wip docs provider

* layout primitives

* fix css

* typography

* small cleanup

* colors + icons

* button docs

* tab docs

* badge and pill

* avatar docs

* TextInput docs

* SearchInput docs

* Textarea docs

* Autocomplete docs

* filepicker docs

* Select docs

* Select docs

* Combobox docs

* SelectMenu docs

* more examples for SelectMenu

* Popover docs

* Menu docs

* Checkbox docs

* Radio docs

* SegmentedControl docs

* Switch docs

* toaster docs

* Alert docs

* Spinner docs

* Dialog docs

* SideSheet docs

* IconButton docs

* remove example

* CornerDialog docs

* Table docs

* Portal docs

* FormField docs

* broken wip

* fix portal

* get started back to normal

* docs homepage

* docs media items

* add spectrum link

* github button

* docs update

* ssr and improvements

* fix aboslutePath

* remove old docs

* fix imports

* clean docs

* docs & readme improvements

* update readme and remove unused code

* remove old code

* Upgrade dependencies v4 (segmentio#336)

* upgrade deps

* update snaphosts

* add segment tracking (segmentio#337)

* Tracking fix (segmentio#338)

* add segment tracking

* improve ssr

* fix

* Bug/radio indeterminate (segmentio#340)

* v4.0.0-42

* Add babel-plugin-add-react-displayname

This makes sure that all components have a `displayName`.

* v4.0.0-43

* Add displayName to withTheme

* v4.0.0-44

*  Upgrade most of the dependencies (segmentio#344)

* Upgrade most of the dependencies

* Fix evergreen version in ssr example

* Add @babel/runtime

* Fix excluding the stories and tests from the build

* Revert test order change

* Upgrade ava and sinon

* Upgrade husky hooks config

* remove unused TableCell props (segmentio#342)

* BREAKING: bubble event in radio onChange (segmentio#341)

* BREAKING: bubble event in radio onChange

* comply with linter

* 4.0.0-45
@jeroenransijn jeroenransijn mentioned this pull request Nov 8, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.