🌲 Evergreen React UI Framework by Segment

Overview
  • Works out of the box. Evergreen contains a set of polished React components that work out of the box.

  • Flexible & composable. Evergreen components are built on top of a React UI Primitive for endless composability.

  • Enterprise-grade. Evergreen features a UI design language for enterprise-grade web applications.

Documentation & Community

Evergreen v4 to v5 Migration guide

Evergreen v4 to v5 migration guide

Install and use components

🌲 Evergreen is made up of multiple components and tools which you can import one by one. All you need to do is install the evergreen-ui package:

$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui

A working version, assuming you are using something like Create React App, might look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

ReactDOM.render(
  <Button>I am using 🌲 Evergreen!</Button>,
  document.getElementById('root')
)

Core values of 🌲 Evergreen

  • Evergreen is built on the belief that you can never predict all future requirements, only prepare for it. Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.

  • Evergreen is built on the belief that things should work out of the box with smart defaults, but also offer full control when needed. For example, Evergreen uses CSS-in-JS and builds on top of the Box component in ui-box.

  • Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience. We prioritize documentation and all the tools for a solid developer experience. We advocate respect and inclusivity in our writings and interactions.

FAQ

Theming support?

Evergreen v5 supports theming partially. It is still complex to theme Evergreen. We have done exploratory work to make theming more powerful and accessible, and hope to release a new theming api in Evergreen v6.

See these docs for more information regarding theming in Evergreen.

How does Server Side Rendering (SSR) work?

Evergreen offers easy Server Side Rendering (SSR) and automatic hydration.

Evergreen bundles 2 CSS-in-JS solutions, from glamor and ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a extractStyles() function that will do SSR for both at once.

Contributing to Evergreen

🍴 Step 1. Fork this repository

In order to contribute to Evergreen, you need to fork this repo, and develop on your own local clone.

If you don't know how to do so, follow this guide!

📖 Step 2. Get storybook up and running

First, move into your local cloned repository with the help of cd, after that install your node_modules with:

$ yarn

To actually start seeing the components you have to run React Storybook with the command:

$ yarn dev

Now go to http://localhost:6006 in your browser.

🛠 Step 3. Make your change

Now you can start developing! All of the components are under the src directory and associated code changes will automatically be reflected in StoryBook.

If necessary, we encourage you to update the documentation so Evergreen users will be aware of your new features/changes.

In order to run the documentation page locally, run these commands in your terminal:

$ yarn build
$ cd docs
$ yarn install
$ yarn dev

Now you can visit http://localhost:8000/ in your browser.

Documentation code is under the docs directory. A big portion of these docs are written in MDX, if you've never used MDX before, check out these docs.

🏆 Step 4. Making your pull request

Once you're done with making your changes, push everything to your local repository's branch.

From here, you can open up a pull request from your forked repository's branch into segmentio/evergreen's master branch.

In your PR description, explain the changes you made, why you made them, how to test them, and anything that might be a point of interest.

Once you create your PR, it will be reviewed and hopefully merged quickly!

🥂 Step 5. Pat yourself on the back

Congrats, you're officially an Evergreen contributor!

🤓 Scripts explained

Inside the package.json there are a bunch of scripts that this repo uses to run the project in development and to build the project.

Below you can read a description of each script.

  • yarn dev: Starts the development React Storybook.

  • yarn test: Lints the JavaScript files using XO and then runs the unit tests using AVA.

  • yarn build: Builds all of the JavaScript files using Babel.

  • yarn clean: removes all untracked files (git clean -Xdf).

  • yarn release: Releases new version of Evergreen (requires MFA via npm as a collaborator)

  • yarn create-package: This command scaffolds a package with no specific boilerplate. It's useful for creating utilities.

For the following command:

yarn create-package utils

The following file tree will be generated:

/src/utils
├── /src/
└── index.js
  • yarn create-package:components: This command scaffolds a package with React component(s) boilerplate.

You can pass one or more components to this command.

For the following command:

yarn create-package:components typography Text Heading

The following file tree will be generated:

/src/typography
├── /src/
|   │── Text.js
|   └── Heading.js
├── /stories/
│   └── index.stories.js
└── index.js

🎉 Contributors

We will add you to the list if you make any meaningful contribution!

  • Jeroen Ransijn
  • Roland Warmerdam
  • Ben McMahon
  • Matt Shwery
  • Colin Lohner
  • Allen Kleiner
  • Chris Chuck
  • ... many other on the Segment team and open-source contributors

This project is maintained by Segment

Please take a look at the contributing guide to better understand what to work on.

👏 Respect earns Respect

Please respect our Code of Conduct, in short:

  • Using welcoming and inclusive language
  • Being respectful of differing viewpoints and experiences
  • Gracefully accepting constructive criticism
  • Focusing on what is best for the community
  • Showing empathy towards other community members

License

Evergreen is released under the MIT license. The BlueprintJS icons are licensed under a custom Apache 2.0 license.

Copyright © 2017 Segment.io, Inc.

Issues
  • Migrate to TypeScript

    Migrate to TypeScript

    pinned 
    opened by Jetsly 44
  • [WIP] Migrate to typescript

    [WIP] Migrate to typescript

    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 🙌

    opened by jeroenptrs 31
  • add isClearable iconbutton & story for review

    add isClearable iconbutton & story for review

    Per conversation in #242 - WIP PR for evaluating deselection options in Combobox

    Will refer to this PR in the issue thread

    wontfix 
    opened by jmfury 29
  • Icon Tree Shaking not working

    Icon Tree Shaking not working

    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:

    image

    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.

    opened by seanemmer 26
  • add left, right, top, bottom anchors to side-sheet

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

    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:

    side-sheet

    opened by bmcmahen 20
  • Large bundle size with webpack v4

    Large bundle size with webpack v4

    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.

    screen shot 2018-11-27 at 2 39 44 pm screen shot 2018-11-27 at 2 40 44 pm

    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.

    screen shot 2018-11-27 at 2 36 06 pm screen shot 2018-11-27 at 2 35 54 pm

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

    opened by epitaphmike 18
  • Warning: Prop `htmlFor` did not match.

    Warning: Prop `htmlFor` did not match.

    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

    opened by mikheevm 15
  • Using custom fonts

    Using custom fonts

    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?

    opened by MicLeey 15
  • Table issue with header row not aligning with content rows.

    Table issue with header row not aligning with content rows.

    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:

    image

    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

    image

    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.

    opened by cstrat 15
  • Using native tables (Table header styles off by a few px)

    Using native tables (Table header styles off by a few px)

    At first, I thought this was something on my end, but looking at the Storybook, I see the same bug:

    image

    Status: Proposal Type: Improvement 
    opened by stephenmathieson 14
  • Swap faker w/ community maintained @faker-js/faker

    Swap faker w/ community maintained @faker-js/faker

    Looks like the original repo/package for faker (https://github.com/marak/Faker.js/) has been nuked by its owner. An official fork has been spawned by the community at https://github.com/faker-js/faker. We should swap our dependency since the original is no longer going to be maintained (and it looks like the most recent publish is just an empty package).

    Type: Maintenance 
    opened by brandongregoryscott 0
  • Update theme documentation

    Update theme documentation

    Overview

    Updates some of the /theming documentation to include references to new TS types, as well as the mergeTheme utility function. Fixes some misc. typos along the way, and updates the CodeSandbox link to pull in the same version of evergreen that the doc site is using :)

    Screenshots (if applicable)

    Rich diff should be visible within the Github PR.

    Documentation

    • [ ] Updated Typescript types and/or component PropTypes
    • [x] Added / modified component docs
    • [ ] Added / modified Storybook stories
    Type: Documentation 
    opened by brandongregoryscott 1
  • Fix color props heading component not working properly #1242

    Fix color props heading component not working properly #1242

    Overview

    • Inside combineStyles(...args) first it will check if there is any prop passed as color with a color value.
    • If it's true it will change the config.baseStyle object color property with the new color value.
    • I have added red500 as a color in Heading Stories.

    Screenshots header-component

    Documentation

    • [x] Updated Typescript types and/or component PropTypes
    • [x] Added / modified component docs
    • [x] Added / modified Storybook stories
    opened by JeevantheDev 1
  • MenuItem secondaryText propType doesn't accept string

    MenuItem secondaryText propType doesn't accept string

    Looks like the secondaryText propType for Menu.Item resolves to JSX.Element | undefined, but this doesn't allow for strings to be passed without casting. This is a bit misleading, especially since our examples include strings for this prop.

    Type 'string' is not assignable to type 'Element | undefined'.ts(2322)
    index.d.ts(1494, 3): The expected type comes from property 'secondaryText' which is declared here on type 'IntrinsicAttributes & Without<EnhancerProps, keyof MenuItemOwnProps> & { is?: "div" | undefined; allowUnsafeHref?: boolean | undefined; } & Without<...> & MenuItemOwnProps'
    

    See Code Sandbox for a reproduction.

    Type: Bug 
    opened by brandongregoryscott 0
  • Bump next from 10.0.8 to 12.0.8 in /docs

    Bump next from 10.0.8 to 12.0.8 in /docs

    Bumps next from 10.0.8 to 12.0.8.

    Release notes

    Sourced from next's releases.

    v12.0.8

    Core Changes

    • Fix no-server-import-in-page eslint rule for subfolder middleware: #32139
    • Create Base Server: #32154
    • Revert support for render prop in <Main />: #32184
    • Refactor FS references in the Base Server: #32179
    • telemetry: collect feature usage for linting during build: #32022
    • Chore/load bindings improvements: #32191
    • fix(NODE_ENV): Warn when launching start or build on development: #14033
    • Fix crash in no-page-custom-font eslint rule when default export is unnamed.: #32251
    • Add docs for leveraging outputStandalone config: #32255
    • Replace raw-body with get-stream and bytes: #21915
    • Update to latest ncc and ensure caniuse-lite data is external : #32064
    • Update swc: #32210
    • Simplify custom Writable: #32247
    • Add shake exports transform to next-swc: #32253
    • Revert "Replace raw-body with get-stream and bytes": #32305
    • Re-open chore(deps): upgrade browserslist: #32300
    • Fix RSC link navigation: #32303
    • Compile escape-string-regexp: #32310
    • Add unstable_useRefreshRoot: #32342
    • Upate swc: #32365
    • fix unstable_useRefreshRoot typing: #32364
    • fix(next-swc/styled-jsx): Fix nth: #32358
    • Rename experimental vital hook: #32343
    • Inline server data response with partial hydration: #32330
    • Update jsx transform of swc: #32383
    • Fix running server with Polyfilled fetch: #32368
    • Fix dynamic routes with pages under index folder: #32440
    • Fixes #32338 missing Document components trigger an error for production builds: #32345
    • Fixes for inline embedding data in the web runtime: #32471
    • Add vitals and rsc to npm files: #32472
    • fixes to allow lazy compilation for import(): #32441
    • upgrade webpack and watchpack: #32173
    • Update to filter loader specific files from traces: #32267
    • Fix server data cache key: #32506
    • [middleware] Fix hydration for rewrites to dynamic pages: #32534
    • Ensure image-optimizer is traced for standalone mode: #32522
    • Remove unused classnames dependency from react-dev-overlay: #32487
    • next-swc: Emit errors and add tests to next-ssg: #32254
    • Include message body in redirect responses: #31886
    • Prevent NEXT_PHASE env change in workers: #28941
    • Check stack property for page export exceptions: #32289
    • fix(next-swc/styled-jsx): Fix interpolation in media query: #32490
    • Update swc: #32566
    • Add turbo / improve Rust build caching in GitHub Actions: #31464
    • Fix ReadableStream.pipeTo() being unimplemented in the web runtime: #32602
    • Ensure AMP optimizer is only excluded from trace when not used: #32577
    • Upgraded next-env dependencies: #32613

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump follow-redirects from 1.14.1 to 1.14.7

    Bump follow-redirects from 1.14.1 to 1.14.7

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Add yarn tsd test step + small theme type tweaks

    Add yarn tsd test step + small theme type tweaks

    Overview

    • Adds yarn tsd to the yarn test script so we can actually leverage the index.test-d.ts in CI (or if yarn test is run manually). I added some additional tests and intentionally changed a type to {} to fail the build on my fork: https://github.com/brandongregoryscott/evergreen/runs/4819588995?check_suite_focus=true

    • Updated ci.yml so that the build steps will run on any branch push, not just master. If workflows are enabled on your fork, this should give you some quicker feedback on whether the CI build will pass on a pull request.

    • The DefaultTheme.components.<Component>.baseStyle type should have been a Partial to match appearances, sizes, and the Theme baseStyle type.

    • Finally, per request, I widened the colors theme property and Colors type to include string[]. We don't have any use-cases for it that I know of, but it doesn't clobber any of the typing as far as I can tell, so it should be safe to use.

    Screenshots (if applicable)

    image

    Documentation

    • [x] Updated Typescript types and/or component PropTypes
    • [ ] Added / modified component docs
    • [ ] Added / modified Storybook stories
    opened by brandongregoryscott 1
  • Bump next from 10.2.3 to 11.1.3 in /examples/ssr-next

    Bump next from 10.2.3 to 11.1.3 in /examples/ssr-next

    Bumps next from 10.2.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • SelectMenu popover at the bad position

    SelectMenu popover at the bad position

    Hello there,

    I submit this issue because on a project I need to use the SelectMenu component and when I click on the button to open the popover it does not take the position that I pass in props. (I used the documentation code sample)

    image

    Can you help me to resolve that issue please ?

    opened by leosheecool 3
  • Official dark theme

    Official dark theme

    Exporting defaultTheme and classicTheme is a really useful way for developers to extend/tweak styles of Evergreen components in their app.

    I would love for Evergreen to export a darkTheme. It's a bit difficult for the onus to be on developers to know which colors / appearances / baseStyle to edit on each component in order to achieve a basic dark mode for their apps.

    Status: On Hold 
    opened by jasonbarry 1
Releases(v6.7.1)
  • v6.7.1(Jan 15, 2022)

  • v6.7.0(Jan 11, 2022)

    • Generic Theme types, strongly typed DefaultTheme + theme utilities (#1382) 98e49a41

    The theme types have been reworked to provide better direction on usage of the existing theme values or adding/overriding values.

    • Theme is a very generic interface defining the expected shape/tokens of a theme
    • DefaultTheme extends Theme and provides better direction on what appearances/sizes the defaultTheme has
    • useTheme() is now generic (set to DefaultTheme unless otherwise specified)
    • Similarly, ThemeContext is now generic, and a custom typed version of it can be retrieved with the new exported function getThemeContext() (set to DefaultTheme unless otherwise specified)
    • A new utility function, mergeTheme, has been provided to deeply merge properties onto a destination theme, which can be useful if you're only looking to add or override a few values from the defaultTheme

    For examples on usage, check out the index.d.ts test file or the description of #1382

    https://github.com/segmentio/evergreen/compare/v6.6.5...v6.7.0

    Source code(tar.gz)
    Source code(zip)
  • v6.6.5(Jan 4, 2022)

    • Bump tar from 6.1.0 to 6.1.11 (#1312) 770dca33
    • Bump semver-regex from 3.1.2 to 3.1.3 (#1322) 5b9ad3cd
    • Bump nth-check from 2.0.0 to 2.0.1 (#1327) cdb94624
    • Export IconComponent type (#1385) 6147088e
    • upgrade faker to ^5.5.3 and replace alternatives for deprecated methods (#1386) 32a4d171
    • Add intent property to Button component (#1384) df9b0f40

    https://github.com/segmentio/evergreen/compare/v6.6.4...v6.6.5

    Source code(tar.gz)
    Source code(zip)
  • v6.6.4(Dec 29, 2021)

    • [Fix] Prevent Scrolling gets stuck when other packages/script also change document.body.style.overflow (#1383) 1a5ed5e0
    • Add pseudo selectors to maintain consistent borders for Table.Head and Table.Row components (#1378) 96f084c8

    https://github.com/segmentio/evergreen/compare/v6.6.3...v6.6.4

    Source code(tar.gz)
    Source code(zip)
  • v6.6.3(Nov 27, 2021)

    What's Changed

    • Add tests for Radio and RadioGroup by @kamebkj in https://github.com/segmentio/evergreen/pull/1344
    • fix: Update appearance Button propType to stop warnings by @CLSnazel in https://github.com/segmentio/evergreen/pull/1287
    • fix: remove margin from combobox button for safari by @krysia1 in https://github.com/segmentio/evergreen/pull/1371
    • Bump path-parse from 1.0.6 to 1.0.7 in /codemods by @dependabot in https://github.com/segmentio/evergreen/pull/1294
    • Bump path-parse from 1.0.6 to 1.0.7 in /docs by @dependabot in https://github.com/segmentio/evergreen/pull/1295
    • Adds optional shouldCloseOnEscapePress for Popover by @bradevans in https://github.com/segmentio/evergreen/pull/1308
    • Bump tmpl from 1.0.4 to 1.0.5 by @dependabot in https://github.com/segmentio/evergreen/pull/1325
    • Bump tmpl from 1.0.4 to 1.0.5 in /codemods by @dependabot in https://github.com/segmentio/evergreen/pull/1326

    New Contributors

    • @CLSnazel made their first contribution in https://github.com/segmentio/evergreen/pull/1287
    • @krysia1 made their first contribution in https://github.com/segmentio/evergreen/pull/1371
    • @bradevans made their first contribution in https://github.com/segmentio/evergreen/pull/1308

    Full Changelog: https://github.com/segmentio/evergreen/compare/v6.6.2...v6.6.3

    Source code(tar.gz)
    Source code(zip)
  • v6.6.2(Nov 23, 2021)

    What's Changed

    • Upgrade @blueprintjs/icons to v3.31.0 and generate icons by @KenanYusuf in https://github.com/segmentio/evergreen/pull/1366
    • fix: 🐛 Add position prop to the CornerDialogProps type by @martolini in https://github.com/segmentio/evergreen/pull/1369
    • Add invalid border color for select default component by @yeehanchung in https://github.com/segmentio/evergreen/pull/1357
    • move nudge + pulsar components to pulsar dir and add deprecation warning by @zkuzmic in https://github.com/segmentio/evergreen/pull/1364
    • fix ToastManager hasCloseButton logic by @krijoh92 in https://github.com/segmentio/evergreen/pull/1349

    New Contributors

    • @KenanYusuf made their first contribution in https://github.com/segmentio/evergreen/pull/1366
    • @martolini made their first contribution in https://github.com/segmentio/evergreen/pull/1369
    • @yeehanchung made their first contribution in https://github.com/segmentio/evergreen/pull/1357
    • @krijoh92 made their first contribution in https://github.com/segmentio/evergreen/pull/1349

    Full Changelog: https://github.com/segmentio/evergreen/compare/v6.6.1...v6.6.2

    Source code(tar.gz)
    Source code(zip)
  • v6.6.1(Nov 16, 2021)

    What's Changed

    • update eg version in docs by @zkuzmic in https://github.com/segmentio/evergreen/pull/1361
    • tests for Pane and Card by @zkuzmic in https://github.com/segmentio/evergreen/pull/1363
    • Fix Positioner rendering, Autocomplete + Combobox positioning issues by @brandongregoryscott in https://github.com/segmentio/evergreen/pull/1362

    Full Changelog: https://github.com/segmentio/evergreen/compare/v6.6.0...v6.6.1

    Source code(tar.gz)
    Source code(zip)
  • v6.6.0(Nov 10, 2021)

    What's changed

    • [Add/Improvement] Pulsar + Nudge updates by @zkuzmic in #1355
    • [Fix] correctly forward className in code component by @salolivares in #1352

    https://github.com/segmentio/evergreen/compare/v6.5.2...v6.6.0

    Source code(tar.gz)
    Source code(zip)
  • v6.5.2(Oct 29, 2021)

    What's Changed

    • Bump ansi-regex from 5.0.0 to 5.0.1 in /codemods by @dependabot in https://github.com/segmentio/evergreen/pull/1334
    • Bump ansi-regex from 5.0.0 to 5.0.1 in /examples/ssr-next by @dependabot in https://github.com/segmentio/evergreen/pull/1333
    • Basic tests for checkbox by @kamebkj in https://github.com/segmentio/evergreen/pull/1342
    • Backfill textarea tests by @brandongregoryscott in https://github.com/segmentio/evergreen/pull/1347
    • set intent types to string by @zkuzmic in https://github.com/segmentio/evergreen/pull/1341
    • Implemented conditional check before updating target ref within Autocomplete and Popover by @g00glen00b in https://github.com/segmentio/evergreen/pull/1346

    New Contributors

    • @g00glen00b made their first contribution in https://github.com/segmentio/evergreen/pull/1346

    Full Changelog: https://github.com/segmentio/evergreen/compare/v6.5.1...v6.5.2

    Source code(tar.gz)
    Source code(zip)
  • v6.5.1(Oct 5, 2021)

    What's Changed

    • add docs for Overlay component by @kamebkj in https://github.com/segmentio/evergreen/pull/1336
    • First pass of component smoke tests by @akleiner2 in https://github.com/segmentio/evergreen/pull/1337
    • Update onBeforeClose prop typing for SideSheet and Overlay components by @brandongregoryscott in https://github.com/segmentio/evergreen/pull/1340
    • Textareafield resize prop by @brandongregoryscott in https://github.com/segmentio/evergreen/pull/1339

    New Contributors

    • @brandongregoryscott made their first contribution in https://github.com/segmentio/evergreen/pull/1340

    Full Changelog: https://github.com/segmentio/evergreen/compare/v6.5.0...v6.5.1

    Source code(tar.gz)
    Source code(zip)
  • v6.5.0(Sep 30, 2021)

    @kamebkj @akleiner2 Empty state doc (#1290)

    • Add back docs for Empty States
    • Pin EG version
    • Some more fixes
    • Update empty state docstrings
    • Modify example text and icon color for docs
    • Add alt prop to img in RuleCard
    • Add dos and donts to Empty States
    • Edit Empty State doc content based on feedback
    • Fix a few content suggestions
    • Add imageAlt prop to RuleCard
    • Point the doc to 6.4.0
    • Pull [email protected]

    @GuruM types: add overlayProps type to Dialog (#1313) It already exists and is in the docs: https://github.com/segmentio/evergreen/blob/master/src/dialog/src/Dialog.js https://evergreen.segment.com/components/dialog/props

    @ChrisSMendoza fix 'alignItems' attribute typo (#1321)

    @Jupiterrr Fix Dialog containerProps (#1306)

    @blakeyoder Fix typo (#1328)

    @zkuzmic export getPosition and add types (#1332)

    Source code(tar.gz)
    Source code(zip)
  • v6.4.0(Aug 11, 2021)

    Clean up Empty State component and ready for the pattern doc to be published.

    • Use EvergreenLink for text link in doc (#1293) 1d380c59
    • Empty state fix (#1286) 915c39df

    https://github.com/segmentio/evergreen/compare/v6.3.0...v6.4.0

    Source code(tar.gz)
    Source code(zip)
  • v6.3.0(Jul 29, 2021)

  • v6.2.1(Jul 29, 2021)

  • v6.2.0(Jul 22, 2021)

    This release contains a bunch of housekeeping updates, performance improvements, and a few bug fixes (regarding SelectMenu behavior and EditableCell rendering).

    • include ReactIs as global since it needs to be a peer dep e96f05bc
    • Performance tuning (#1274) 965735a1
    • chore: upgrade rollup (#1068) 8cb9e952
    • update node engine to 12+, move react-is to peerDep matching react version (#1272) fc3ad76c
    • fix Transition nodeRef in Positioner component (#1271) 6d03cc4d
    • Bump css-what from 5.0.0 to 5.0.1 (#1264) 952ad21b
    • update ssr example dir (#1266) 4db6667c
    • Upgrade deps (#1261) a8288d06
    • rm enzyme (#1263) 41e7a8f5
    • rm unused ava tests (#1262) 87e5fba3
    • fix deselect/select on multiple select menus, optimize perf, remove broken context (#1256) 72ee3eec
    • Bump y18n from 4.0.0 to 4.0.3 in /examples/ssr-next (#1255) 8a9d650e
    • Bump ini from 1.3.5 to 1.3.8 in /examples/ssr-next (#1254) 3261399a
    • Bump ws from 7.4.5 to 7.5.3 (#1253) 42bc22b0
    • Bump postcss from 7.0.35 to 7.0.36 (#1240) c404bdf4
    • Bump set-getter from 0.1.0 to 0.1.1 in /examples/ssr-next (#1237) 2328e479
    • Bump hosted-git-info from 2.8.8 to 2.8.9 in /codemods (#1191) fac51b2e
    • Bump browserslist from 4.2.1 to 4.16.6 in /examples/ssr-next (#1214) 8ebc7f5b
    • Bump ws from 7.2.5 to 7.5.3 in /codemods (#1252) f2f258b9
    • Bump hosted-git-info from 2.5.0 to 2.8.9 in /examples/ssr-next (#1185) 09377b8c
    • Bump trim-newlines from 3.0.0 to 3.0.1 (#1228) a916c438
    • Bump postcss from 7.0.35 to 7.0.36 in /docs (#1232) 09c50dc3
    • Bump lodash from 4.17.19 to 4.17.21 in /codemods (#1190) 0e511409
    • Bump lodash from 4.17.19 to 4.17.21 in /examples/ssr-next (#1184) 54dd233b
    • Bump ua-parser-js from 0.7.17 to 0.7.28 in /examples/ssr-next (#1177) bbae5050
    • Eslint cleanup (#1251) 086f0407
    • fix storybook globs constantly rebuilding (#1250) d555fc02
    • Remove circle CI in favor of solely running GH Actions (#1249) ea07334f
    • include yarnhook in devDeps so it doesnt fail when not globally installed (#1248) ca36db01

    https://github.com/segmentio/evergreen/compare/v6.1.0...v6.2.0

    Source code(tar.gz)
    Source code(zip)
  • v6.2.0-0(Jul 22, 2021)

    This (pre)release contains a bunch of housekeeping updates, performance improvements, and a few bug fixes (regarding SelectMenu behavior and EditableCell rendering).

    • include ReactIs as global since it needs to be a peer dep e96f05bc
    • Performance tuning (#1274) 965735a1
    • chore: upgrade rollup (#1068) 8cb9e952
    • update node engine to 12+, move react-is to peerDep matching react version (#1272) fc3ad76c
    • fix Transition nodeRef in Positioner component (#1271) 6d03cc4d
    • Bump css-what from 5.0.0 to 5.0.1 (#1264) 952ad21b
    • update ssr example dir (#1266) 4db6667c
    • Upgrade deps (#1261) a8288d06
    • rm enzyme (#1263) 41e7a8f5
    • rm unused ava tests (#1262) 87e5fba3
    • fix deselect/select on multiple select menus, optimize perf, remove broken context (#1256) 72ee3eec
    • Bump y18n from 4.0.0 to 4.0.3 in /examples/ssr-next (#1255) 8a9d650e
    • Bump ini from 1.3.5 to 1.3.8 in /examples/ssr-next (#1254) 3261399a
    • Bump ws from 7.4.5 to 7.5.3 (#1253) 42bc22b0
    • Bump postcss from 7.0.35 to 7.0.36 (#1240) c404bdf4
    • Bump set-getter from 0.1.0 to 0.1.1 in /examples/ssr-next (#1237) 2328e479
    • Bump hosted-git-info from 2.8.8 to 2.8.9 in /codemods (#1191) fac51b2e
    • Bump browserslist from 4.2.1 to 4.16.6 in /examples/ssr-next (#1214) 8ebc7f5b
    • Bump ws from 7.2.5 to 7.5.3 in /codemods (#1252) f2f258b9
    • Bump hosted-git-info from 2.5.0 to 2.8.9 in /examples/ssr-next (#1185) 09377b8c
    • Bump trim-newlines from 3.0.0 to 3.0.1 (#1228) a916c438
    • Bump postcss from 7.0.35 to 7.0.36 in /docs (#1232) 09c50dc3
    • Bump lodash from 4.17.19 to 4.17.21 in /codemods (#1190) 0e511409
    • Bump lodash from 4.17.19 to 4.17.21 in /examples/ssr-next (#1184) 54dd233b
    • Bump ua-parser-js from 0.7.17 to 0.7.28 in /examples/ssr-next (#1177) bbae5050
    • Eslint cleanup (#1251) 086f0407
    • fix storybook globs constantly rebuilding (#1250) d555fc02
    • Remove circle CI in favor of solely running GH Actions (#1249) ea07334f
    • include yarnhook in devDeps so it doesnt fail when not globally installed (#1248) ca36db01

    https://github.com/segmentio/evergreen/compare/v6.1.0...v6.2.0-0

    Source code(tar.gz)
    Source code(zip)
  • v6.1.0(Jun 30, 2021)

    • New pattern - Empty States (#1238) 99af9f7c
    • Lint staged fix (#1231) 6d219217
    • Add Position to code sandbox import regex (#1230) c15d2e7d
    • Updates to lint infra and DX to make things a bit smoother (#1229) 607458ae
    • Bring back icon search in the docs (#1227) 95e9bfd3
    • Fix Select Menu + deselect example (#1213) 3dbaad92
    • Fix layout inconsistency for removeable alert's X button (#1210) 872eee87
    • update doc to use evergreen-ui ^6.0.0 (#1206) 9beb4d46
    • update readme hero image on github (#1204) 40b0a436

    https://github.com/segmentio/evergreen/compare/v6.0.1...v6.1.0

    Source code(tar.gz)
    Source code(zip)
  • v6.0.0(May 12, 2021)

  • v6.0.0-27(Nov 16, 2020)

  • v5.1.2(Sep 28, 2020)

    • Fix github link on the select docs page (#1031) f93e20a
    • Update PULL_REQUEST_TEMPLATE.md 55549df
    • Add link to Evergreen's Figma file from designer resources page (#1055) 5c2b4db
    • Fix broken icon docs (#1063) 15d8b46
    • use Extract instead of Pick for positions (#1048) 552391f

    https://github.com/segmentio/evergreen/compare/v5.1.1...v5.1.2

    Source code(tar.gz)
    Source code(zip)
  • v5.1.1(Sep 14, 2020)

    • Fix error caused when bringFocusInside is called outside an event handler (#1022) 90ca5a20

    https://github.com/segmentio/evergreen/compare/v5.1.0...v5.1.1

    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(Sep 14, 2020)

    • Update Dialog "title" prop type in declaration file (#1012) 8106a92d
    • Fixup incorrect icon usage on Menu docs (#1013) a0293e2f
    • Clear up tooltip timeouts on mouse leave (#1011) 84a63b69
    • update PR template (#1007) 6593cbc5
    • Forward TextareaField ref (#987) b021089a
    • fix Popover focus issues (#962) c45f7021

    https://github.com/segmentio/evergreen/compare/v5.0.6...v5.1.0

    Source code(tar.gz)
    Source code(zip)
  • v5.0.6(Sep 1, 2020)

    • Add missing disabled property to SegmentedControlOwnProps interface (#935) 0900ef0f
    • fix unnecessary re-renders for popover component (#945) ecdf5d35
    • fix classnames overwrites in Tab, TagInput, FilePicker, TextDropdown (#953) 4e7da886
    • fix menu disable items functionality and appearence (#954) 667c9570
    • add StackingOrder and Code appearance typedefs (#961) d0573a73

    https://github.com/segmentio/evergreen/compare/v5.0.5...v5.0.6

    Source code(tar.gz)
    Source code(zip)
  • v5.0.5(Aug 29, 2020)

    • fix input height regression on text field (#960) 1cff1047
    • fix undefined props merging and list styles (#959) 743140fc
    • Fix broken Icon docs with non-existent condition (#950) d4d24676
    • fix onChange() and onBlur() types for FilePicker (#941) a81be4c1
    • Update layout-primitives.mdx (#936) 92c787e9

    https://github.com/segmentio/evergreen/compare/v5.0.4...v5.0.5

    Source code(tar.gz)
    Source code(zip)
  • v5.0.4(Aug 10, 2020)

    • bump version to current npm version ec72d3cb
    • Call onStateChange if passed to Combobox (#926) c191f781
    • Fix itemToString for Autocomplete & Combobox (#930) (#931) b8ec393c
    • Fix(switch): set default value (checked) (#932) cc4ce9b0
    • Resolve issue, where incorrect props where being passed around (#933) b80f6c3c
    • Add box wrapper to maintain positioning for custom icons (#934) 26bf88bd

    https://github.com/segmentio/evergreen/compare/v5.0.3...v5.0.4

    Source code(tar.gz)
    Source code(zip)
  • v5.0.3(Aug 10, 2020)

    • Bump lodash from 4.17.15 to 4.17.19 (#895)
    • Bump lodash from 4.17.5 to 4.17.19 in /examples/ssr-next (#892)
    • Bump elliptic from 6.4.0 to 6.5.3 in /examples/ssr-next (#917)
    • Bump elliptic from 6.5.2 to 6.5.3 (#919)
    • Bump lodash from 4.17.15 to 4.17.19 in /codemods (#921)

    https://github.com/segmentio/evergreen/compare/v5.0.2...v5.0.3

    Source code(tar.gz)
    Source code(zip)
  • v5.0.2(Aug 4, 2020)

    • fix autocomplete itemToString (#924) 6d0a4ded
    • Update readme for v5 (#923) 0e85cbc5

    https://github.com/segmentio/evergreen/compare/v5.0.1...v5.0.2

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(Aug 3, 2020)

    • V5 (#915) 731e46e5
    • Readme file updated (#893) 87cbc52

    https://github.com/segmentio/evergreen/compare/v4.29.1...v5.0.0

    Evergreen v5 Migration Guide

    Evergreen v5 is a general health check for the framework. We took a look at what makes Evergreen tick and compared it to new standards. We made several updates to try and push the DevX of using the framework to be a lot more natural and robust. Below you can see some of the changes we made that may require some work on your side to to upgrade to v5. You can follow the changes below or in our migration guide

    Breaking Changes

    • innerRef is gone. Use ref
    • Popover triggers
    • Importing and using Icons
    • Downshift v5
    • Switch no longer manages state
    • RadioGroup onChange arguments

    innerRef no longer supported

    Previous versions of ui-box and Evergreen relied on passing around innerRef props to forward refs to the underlying components. We've centralized on the standard way of using refs in React: passing a ref directly on the component. Almost all Evergreen components support forwarding refs.

    Note: If you find a component that you think should be forwarding refs and isn't, please open an issue on GitHub!

    Here's an example of how to update your code:

     const MyComponent = () => {
       const inputRef = React.useRef()
    -  return <TextInput innerRef={inputRef} />
    +  return <TextInput ref={inputRef} />
     }
    

    Popover triggers

    With the removal of innerRef in Evergreen, there are some potential changes required with implementations of Popover. The direct child of a Popover must be a component that can forward refs to a DOM node. If you are using class components, you'll need to update your code. We've found the easiest path is to use an Evergreen component – which already handle ref forwarding. You can see an example below:

    const MyComponent = () => {
      return (
        <Popover content={(<Heading size={400} padding={16}>Example Popover</Heading>)}
    +     <Pane display="inline-flex">
            <MyClassComponent />
    +     </Pane>
        </Popover>
      )
    }
    

    We recommend using Button or IconButton as the trigger, because it provides better accessibility:

    const MyComponent = () => {
      return (
        <Popover content={(<Heading size={400} padding={16}>Example Popover</Heading>)}
    -     <MyClassComponent />
    +     <Button>Click me!</Button>
        </Popover>
      )
    }
    

    Importing and using Icons

    Previously, the way we shipped icons in [email protected]^4 would significantly bloat bundle sizes. Even if you only used 1 icon from Evergreen, you would ship all 400+ icons to your end-users.

    In [email protected]^4.26.0 we introduced a new way to import icons that would lead to some amount of tree-shaking.

    Finally, in [email protected]^5.0.0 we have full tree-shaking support. This does impact the way you import icons (import { Icon } from 'evergreen-ui') and pass icons as props to other components like Button, IconButton, Menu.Item, OrderedList (and Ol), UnorderedList (and Ul).

    We updated all the components that internally were using the Icon component and updated the prop to no longer expect a string but a React node. We also removed the Icon component from Evergreen itself. This means that all places you were using this component, you will need to update to use the new exported icons.

    There is also a codemod that can help you with this migration. It can be installed and used from the codemods directory. Notably it only updates import { Icon } from 'evergreen-ui'.

    npx jscodeshift -t node_modules/evergreen-ui/codemods/4.28.1.0-4.29.0/replace-icon-imports.js --parser=tsx --extensions=js,ts,tsx <your file target> --dry --print
    

    Migration path

    Importing an icon:

    - import { Icon } from 'evergreen-ui'
    + import { CogIcon } from 'evergreen-ui'
     
    - <Icon icon="cog" />
    + <CogIcon />
    

    Passing an icon as a prop:

    - import { Button } from 'evergreen-ui'
    + import { Button, CogIcon } from 'evergreen-ui'
     
    - <Button iconBefore="cog">
    + <Button iconBefore={CogIcon}>
        Settings
      </Button>
    

    Downshift v5

    We upgraded the version of Downshift we use internally in Evergreen from version 3.3.1 to 5.2.0. As part of this some component props have been deprecated and are no longer available in the components that use Downshift. See the diff in #792.

    Components affected

    • AutoComplete
    • Combobox

    Props removed

    • defaultSelectedItem - use initialSelectedItem
    • defaultInputValue - use initialInputValue
    • getButtonProps - use getToggleButtonProps

    Switch is uncontrolled

    To unify usage of form components across Evergreen, we updated Switch to more closely match other components, such as Checkbox. When using the component it is now required that you pass the component an onChange callback method when wanting to manage state.

    const [switchIsActive, setSwitchActive] = useState(false)
     
    + const onChange = (event) => {
    +   setSwitchActive(event.target.checked)
    + }
     
    - <Switch checked={switchIsActive} />
    + <Switch checked={switchIsActive} onChange={onChange} />
    

    Radio and RadioGroup onChange arguments

    RadioGroup's onChange handler now bubbles the event directly from children Radio inputs instead of bubbling the value.

    This change was made to help improve the internal consistency with onChange handlers and to more closely match onChange event signature expecations.

    const items = [{ label: 'one', value: '1' }, { label: 'two', value: '2' }]
    const [selected, setSelected] = useState()
    <RadioGroup
      items={items}
    -  onChange={selectedValue => setSelected(selectedValue)}
    +  onChange={event => setSelected(event.target.value)}
    />
    

    Similarly, we removed the second argument from Radio's onChange handler:

    - <Radio onChange={(event, checked) => console.log(checked)} />
    - <Radio onChange={(event) => console.log(event.target.checked)} />
    
    Source code(tar.gz)
    Source code(zip)
  • v5.0.1(Aug 3, 2020)

    • Fix version mismatch between npm and github b08d6d30
    • Fix combobox (#922) 0fc98c54

    https://github.com/segmentio/evergreen/compare/v5.0.0...v5.0.1

    Source code(tar.gz)
    Source code(zip)
React GUI-Framework based on Material UI; provides a couple of components for back-office apps (CRUD-based APIs)

Backoffice is a Framework based on Material UI, a Material Design React implementation that provides a couple of components you might want to use in a backoffice app.

React Backoffice 16 Jan 20, 2022
Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic🙌

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

elastic 3.3k Jan 13, 2022
Alumina is a react-like small UI framework.

Alumina is a react-like small UI framework. It aims to rapid and easy development for small applications.

yahiro 5 Jan 6, 2022
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion 206 Jan 17, 2022
React UI is a react UI library that uses the latest design language

coming-ui React UI is a react UI library that uses the latest design language Documentation

jantongCode 15 Nov 19, 2021
A Twitter clone made for my final project in The Odin Project's React portion. This clone was made with React js and with Atomic Design as a pattern. The backend is handled by Firebase.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Thiago Porto 7 Nov 8, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 2.6k Jan 14, 2022
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 77k Jan 15, 2022
Configurable React Components with great UX

Belle Configurable React Components with great UX. Website & Documentation: http://nikgraf.github.io/belle/ Getting Started Belle is available as npm

Nik Graf 2.5k Jan 17, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 23.3k Jan 13, 2022
🌈 React components that inspired by Microsoft's Fluent Design System.

Fluent-Windows React components that inspired by Microsoft's Fluent Design System. English | 简体中文 Installation Install the package in your project dir

Fluent-UI 119 Nov 7, 2021
A set of React UI components that supports Pinterest’s design language

Gestalt Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and

Pinterest 3.9k Jan 21, 2022
An opinionated UI components library for React. Based on Styled Components and Styled System.

Insites UI Insites UI is an opinionated UI components library, powered by TypeScript, Styled Components and Styled System. It comes with source versio

Sodify 29 Nov 26, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 15, 2022
React components of open-source Orbit design system by Kiwi.com

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products. Orbit Mission O

Kiwi.com 1.1k Jan 16, 2022
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

PrimeFaces 2.4k Jan 14, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.4k Jan 19, 2022
Foundation as React components.

React + Foundation Foundation as React components. Demo https://digia.online/react-foundation-docs/ Components with Bit Motivation Foundation is both

Digia 593 Jan 7, 2022
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

Reakit 5.4k Jan 15, 2022