Hi all, sorry in advance for the unfinished PR. I tagged it as WIP but felt like opening it already because I didn't want this work to go to waste.

I was able to setup the bulk of the components with TS definitions already, and just got XO and storybook to make good with typescript (the latter being the final checkpoint I wanted to touch before opening this PR).

There's still a few things to do:

• [x] move css definition to ui-box
• [x] add props back in (I deleted them at first but they're critical for non-TS projects, as Evergreen is a component library)
• [ ] migrate all remaining components to TS
• [ ] migrate all stories to TSX
• [x] fix tests (would love help with this, not used to AVA)
• [ ] migrate all tests to Typescript
• [ ] fix build process for both CJS and ESM (would love help with this, I'm guessing 2 different tsconfig that extend from a base tsconfig) as per @jaredpalmer this would easily be solved by using TSDX
• [ ] add husky and lint-staged hooks back in

Hope you all appreciate the help, it's pretty new for me - contributing to a component library - helping out at this scale. But, I really dig Evergreen as a design language! I made the move to TS last year and would love to continue it in all its glory (but with the typescript upgrade!)

If you have any feedback be sure to leave it in this PR, I can update as I go 🙌

Version: 4.26 Bundler: Create-React-App default (Webpack)

Hello, I updated to the latest version to take advantage of tree-shaking but am still seeing all of the icons in my bundle:

I am not using the Icon component anywhere in my app. I do, however, use Menu and Menu.Item and am wondering if the icon prop on Menu.Item is causing all icons to be included.

a quick pr for #252 . Managing all of the different styles for the different anchors is a bit ugly and there's probably a better way of going about it. I've added the "top" and "bottom" anchor position because it's sometimes useful and is often included with other "drawer" components (like material design). For these views the "close" button feels a bit odd, though.

I also wonder if it might be nice to have an option to remove the close button.

Another thing is that the width prop only really makes a different for the left and right anchored sheets. If we want to keep the top and bottom anchored sheets it might be useful to add a height prop.

Quick gif:

I may be missing something, but the only way I was able to get the bundle size own in v4 was to import the components like this: import Pane from 'evergreen-ui/esm/layers';.

Also, why is @blueprintjs a dependency, I am not using it at all in the components I am importing and it is still a part of my bundle.

Unfortunately this doesn't do anything about evergreen-ui/esm/icon/Icon.js. It still contains all of @blueprintjs/icons

I had to edit the Icon.js file and do the same thing to reduce the bundle.

Originally posted by @epitaphmike in https://github.com/segmentio/evergreen/issues/311#issuecomment-442190755

Unsure if I am doing something wrong, but I can't ever get my header row to align with the content rows. It is always off... either too far left or right. Even copying the example code from the documentation I can't get it to align:

https://codesandbox.io/s/evergreen-table-position-bug-i2el8

I've tried wrapping the table in a but that doesn't seem to help.

In the code-sandbox linked above, how can I fix that alignment issue? Any ideas?

In this one, I've removed the search header and added more columns, still not working.

https://codesandbox.io/s/evergreen-table-position-bug-more-columns-ffgjd

The red boxes are just drawn on top and aren't exact - but you can see the gap changes with each column, typically getting more exaggerated with the distance from the left.

Bug report 🐞

Hello! I'm using next.js with evergreen-ui and I get this error on development server:

index.js:1 Warning: Prop `htmlFor` did not match. Server: "TextInputField-2" Client: "TextInputField-0"

I'm new to next.js and wonder if this something I should care about? I'm sorry the code is closed source and I can't share it, but I will include minimal snippets which should be enough to reproduce the issue:

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

_document.tsx

import * as React from "react"
import Document, { DocumentContext } from "next/document"
import { ServerStyleSheet } from "styled-components"
import { extractStyles } from "evergreen-ui"

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    const { css, hydrationScript } = extractStyles()

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        css,
        hydrationScript,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

pages/sign-in.tsx

import * as React from "react"
import { NextPage } from "next"
import { useFormik } from "formik"
import Input from "components/ui/Input"
import Button from "components/ui/Button"

interface FormValues {
  email: string
  password: string
}

const initialValues: FormValues = {
  email: "",
  password: "",
}

const SignInPage: NextPage = () => {
  const formik = useFormik({
    initialValues,
    onSubmit: () => {},
  })

  return (
    <form onSubmit={formik.handleSubmit}>
      <Input
        required
        type="email"
        name="email"
        label="Email"
        placeholder="Enter your email address"
        autoComplete="username"
        value={formik.values.email}
        onChange={formik.handleChange}
        inputHeight={48}
      />
      <Input
        required
        type="password"
        name="password"
        label="Password"
        placeholder="Enter your password"
        value={formik.values.password}
        onChange={formik.handleChange}
        autoComplete="current-password"
        minLength="8"
        inputHeight={48}
      />
      <Button appearance="primary" intent="success" type="submit" height={40}>
        Sign in
      </Button>
    </form>
  )
}

export default SignInPage

components/ui/Input.tsx

import * as React from "react"
import { TextInputField, TextInputFieldProps } from "evergreen-ui"

const Input: React.FC<TextInputFieldProps> = props => {
  return <TextInputField {...props} />
}

export default Input

Please consider the following items when filing a bug report:

Steps to reproduce

Go to sign-in page, refresh the page a couple of times, you should see the warning in the console.

Versions

    "evergreen-ui": "4.23.0",
    "formik": "2.1.4",
    "isomorphic-unfetch": "3.0.0",
    "next": "latest",
    "react": "^16.10.1",
    "react-day-picker": "^7.4.0",
    "react-dom": "^16.10.1",
    "styled-components": "5.0.1",

Expected.

No warning?

Actual

index.js:1 Warning: Prop `htmlFor` did not match. Server: "TextInputField-2" Client: "TextInputField-0"

is shown in the console.

Browser name and version.

Chrome Version 79.0.3945.130 (Official Build) (64-bit) Also reproduceable on Firefox 72.0.2 (64-bit)

Operating system.

macOS Catalina 10.15.3

Last month in #460, someone said Evergreen doesn't set fonts by default. But from what I understand, there's a default theme that sets base fonts: https://github.com/segmentio/evergreen/blob/master/src/theme/src/default-theme/typography/fontFamilies.js

I'm having trouble overwriting them. I set a font-family for body, and it won't overwrite the themed styles, even when including !important. How do I use a custom font-family across all of the components supplied by Evergreen?

@Chrischuck I actually figured that out a little while back to add another header. I did have some additional questions though.

First off I notice some weird kind of offset between the last row and the table border, which is definitely kinda weird given that the styles don't show any indication of it.

Secondly, I noticed that at smaller widths tables can be come misaligned. I'm assuming this is probably due to the fact that the search header seems to have some kind of a min width. But definitely worth noting. That being said, I know evergreen isn't really supposed to be responsive, but I was just wondering what layout do you guys use to ensure that this doesn't happen? I see a 1024px min width and some auto margins but I'm not sure on the specifics and I'm not sure when and why.

Originally posted by @jibberishclient in https://github.com/segmentio/evergreen/issues/774#issuecomment-615375858

Takes from what Rowno built a while back. The only changes are rebasing off current master and to use hooks since it'd be going to v5. It still ends up breaking size-limit and I'd assume that's the only reason it wasn't merged a while ago.

Maybe we should go the way of material and make icons a separate package? or just increase our size limit.

Theming Support in Evergreen 🌲

note: I apologize for the size of this pull request. Getting all of the components updated to support theming beyond the theme.get___ convention ended up being a lot of work. However, there's no really effective way to change a single intent's color in the theme.

Problem Statement

I found that it was incredibly difficult to change only small pieces of Evergreen's theme. Specifically, I couldn't update theme.colors.intent for a specific project. Everything else about the theme was awesome. The primary button just needed to be purple, not blue.

Unfortunately, v5's create theme branch was last updated October 2018.

Summary of Changes/Commits

These changes introduce complete theming to all v4 Evergreen components in a backwards compatible manner. We do this by passing the theme object into all of our theme helpers. Since this is adding functionality by passing an additional argument, it only results in a bump to minor. 🎉

New Features

• defaultTheme.extend() - You can create your own custom theme by importing the defaultTheme from evergreen and calling the new extend() method. extend will create a copy of the theme using lodash.deepclone. The resulting theme can be passed into Evergreen's ThemeProvider. If you don't use Evergreen's ThemeProvider, Evergreen will fall back to the default styles.

New Stories

• A new story was created for theme which demonstrates the use of a custom theme without affecting the main storybook site.

Related Issues

• #379 (v5 roadmap) may be impacted by this, but it's more likely that if theming goes a different direction in v5, things would be backwards incompatible anyway
• #542, #179, #470 (custom theme properties) are solved with this approach to theming using const customTheme = defaultTheme.extend()
• #688 (remove blueprint) this is a first step. Since icons are not explicitly bound anymore, we can explore making blueprint a peerDependency and throw an error if (A) blueprint is missing and (B) getIcon is unchanged
• #617 (custom icons) are now supported. Obviously most icons not custom-built for evergreen will need some adjustments. I've put an example in a comment further down on getIcon usage.

Todo Tracking

• [x] ~Currently the lodash.deepclone addition puts us at 215.65, which is over the self-imposed bundle limit of 212k. We could go with a shallow copy approach, but that can cause issues if someone uses multiple ThemeProvider objects in the React tree. Additional bloat came from needing to create objects for all of our colors in the theme.~ The size limit was increased to 220kb in this PR
• [x] ~Themer continues to be a challenge. When we're using the neutral scales for shadowing, but Button makes use of scales.blue.* for minimal buttons and color specific linear gradients. These colors probably need to be moved into the theme object as something like colors.button.minimal. The same is true for the linear gradients.~ We split all the colors out and attached them to the main defaultTheme object.
• [x] ~The memoizer needs to handle objects if they are passed in. This is because many of our theme functions will now receive theme as their third parameter. The most efficient way is to keep an ID property attached to the object. While these should only be evergreen objects passed in, better safe than sorry.~ The __evergreen_uniqueid property allows us to tell theme objects apart during memoization. An additional story was added to show how evergereen can tell themes apart with multiple theme objects.
• [x] ~Custom icons aren't a great story yet~ Custom icons are supported by overriding theme.getIcon(icon, theme). If not defined we return DefaultIcon, which is the regular evergreen icon suite. This doesn't unbundle icons, but it does get people unblocked.

I know this is a huge PR for a first time contributor. I'm happy to make adjustments or talk through anything that seems gnarly. ❤️ We love how much time Evergreen and ui-box has saved us and this felt like a great way to give back.

Are there any plans to bump the react and react-dom peer dependencies to allow react 17? With the npm version 7 reintroduction of installing peer dependencies it is making it tricky to use evergreen without the --legacy-peer-deps flag.

When both <FileUploader> and <TextInput> present, TextInput's border would disappear.

Reproduction link: https://codesandbox.io/s/evergreen-ui-shadow-input-border-vveww1

Overview

This PR bulk-updates dependencies for the several dependabot PRs out right now instead of merging them one-by-one.

• Bumps minimatch from 3.0.4 to 3.1.2.
• Bumps decode-uri-component from 0.2.0 to 0.2.2.
• Bumps moment from 2.29.3 to 2.29.4.
• Bumps terser from 4.8.0 to 4.8.1.
• Bumps minimatch from 3.0.4 to 3.1.2.
• Bumps semver-regex from 3.1.3 to 3.1.4.
• Bumps jsdom from 16.2.2 to 16.7.0.
• Bumps loader-utils from 1.4.0 to 1.4.2.
• Bumps qs from 6.5.2 to 6.5.3.
• Bumps express from 4.17.1 to 4.18.2.

Screenshots (if applicable)

Documentation

• [ ] Updated Typescript types and/or component PropTypes
• [ ] Added / modified component docs
• [ ] Added / modified Storybook stories

Its difficult to modify several of your components.

Take tooltip for example I can't give it my own background color and text color or add borders or even remove border radius

Same apply to dialog. can't change the default background color can't remove the initial padding on the modal. Cant increase the

Your styling for button overrides CSS on build (React) always have to include important in CSS to override.

would love to be able to do say position={Position.LEFT + 20} if needed

Overview

This PR adds a few codemods for ejecting and replacing imports of the classicTheme or deprecatedDefaultTheme objects. I hadn't originally planned on adding such functionality, but it looks like we still have lots (200+) of references to the deprecatedDefaultTheme in our own app, so this seemed like the easiest way to migrate for now.

Note: The theme objects have been exported as-is (basically a flattened JSON object from the latest version on Evergreen) - that means the selectors have not been updated for the new ui-box prop. These are being provided as-is, and should be migrated off of sooner rather than later. I was very surprised and disappointed to see so many references to the deprecatedDefaultTheme still lingering around in app 😢 I'm working with our designers to remap those colors to our modern color palette, so hopefully we can swap/remove it sooner rather than later.

I'll be writing a follow-up PR to note these codemods and their limitations in the doc site as well!

Screenshots (if applicable)

Documentation

• [ ] Updated Typescript types and/or component PropTypes
• [ ] Added / modified component docs
• [ ] Added / modified Storybook stories

as of the documentation and thorough internet searching about "tab focusing" it is clear that creating tab focus from scratch is not applicable. (see stackoverflow)

Library to add: react-focus-trap

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.