๐ŸŒฒ 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
  • Bump next from 10.0.8 to 12.0.4 in /docs

    Bump next from 10.0.8 to 12.0.4 in /docs

    Bumps next from 10.0.8 to 12.0.4.

    Release notes

    Sourced from next's releases.

    v12.0.4

    Core Changes

    • Update middleware eval checks: #30883
    • Optimize the SSR middleware runtime size: #30906
    • Improve error handling in the SSR middleware: #31057
    • Ensure decode error in minimal mode responds with 400 not 500: #31037
    • Update ServerlessPlugin to use chunkGraph: #31058
    • Fix custom 404 page when concurrentFeatures is enabled: #31059
    • Upgrade React alpha and experimental dependencies to latest: #31039
    • Change disabled SWC message to Log.info: #31091
    • Add render prop support to <Main>: #30156
    • Change .web extension of document page to part of path: #31116
    • Enable code splitting for the web runtime build: #31090
    • Give priority to document.title over h1 when announcing page change: #31147
    • Add webpack5 namespace to fix type errors: #31140
    • Add warning when image has unused sizes prop: #31064
    • Add experimental next-swc jest transform: #30993
    • fix: support --cache-strategy ESLint argument (fixes #29926): #29928
    • fixes #31060: NullReferenceException: #31061
    • use loader-utils 2 for resolve-url-loader to fix ./data: urls in sass: #31134
    • Update reason message for isolatedModules and esModuleInterop: #31150
    • Add input/output test for 30091: #31166
    • Fix useId mismatches on hydration: #31102
    • Do not hide body when concurrentFeatures is enabled: #31187
    • Fix middleware i18n rewrites: #31174
    • next-swc: Add displayNameAndId of styled-components: #31189
    • Use require.resolve to detect "framework" packages (fix pnpm): #21048
    • Add all cases where webpack5 type is used: #31206
    • Add test for styled-components SWC transform disabled: #31214
    • Add initial standalone build handling: #31003
    • fix(middleware): expose CryptoKey and globalThis.CryptoKey: #31193
    • Disable styled-components displayName in production: #31216
    • fix(31013): add base path to preflight request url: #31101
    • share collections in middleware vm context: #31043
    • Support assetPrefix specific protocol: #31213
    • upgrade webpack: #31034
    • Update swc: #31233
    • run middleware parser handler only for middleware modules: #31219
    • Update swc minifier: #31242
    • Fix process.env overriden in web runtime: #31261
    • fix: replaced useless let: #31239
    • Experimental next/jest config helper: #31246
    • correctly assess node equality when nonce attribute is present: #27573
    • bugfix/i18n Do not support the second locale in the pathname: #31229
    • Fix typo in next build log: #31295
    • Ensure next/jest is published: #31296
    • Update swc for jsc.paths: #31290
    • next/jest: Ensure typeof window is not transformed in jsdom environment: #31304
    • Output where preference is saved: #31305

    ... (truncated)

    Commits
    • abd87a5 v12.0.4
    • b204640 v12.0.4-canary.15
    • a9eb0de Ensure swc dep is copied for isolated tests (#31462)
    • b51a020 middleware: add request referrer support (#31343)
    • 66d9b4e v12.0.4-canary.14
    • be03a1d Remove .only and ensure jest lint rules apply for all tests (#31456)
    • ef57953 Close stream when fatal error occurs (#31164)
    • eb0bd63 Fix basePath replacing server-side and normalizeLocalePath() when path is e...
    • 2d9ac39 Remove moment locale replace from craCompat as it's a default in Next.js 12 (...
    • 16d56e2 Refactor server/render for SSR streaming (#31231)
    • Additional commits viewable in compare view
    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
  • Empty divs in evergree-portal-container using Tooltip

    Empty divs in evergree-portal-container using Tooltip

    Hello, I think I have encountered similar issue to this one https://github.com/segmentio/evergreen/issues/329 using the Tooltip component.

    I'm using version 6.6.1

    React:

    <Tooltip content="Layers" >
        <IconButton icon={LayersIcon} appearance="minimal" onClick={() => toggleMenu(Menu.Layers)} />
    </Tooltip>
    

    Looks like tooltip creates one extra div on hover, see: Before hover:

    before

    On hover:

    hover

    After mouse leave:

    after

    I suppose https://github.com/segmentio/evergreen/pull/330 did not fix the problem or am I missing something? Thank you for such a great library guys. ๐Ÿ˜Š

    opened by vojtatom 0
  • Add ability to render custom autocomplete option when items passed to autocomplete component is array of objects

    Add ability to render custom autocomplete option when items passed to autocomplete component is array of objects

    Overview

    ๐ŸŒฒ๐ŸŒฒ Hello everyone ๐ŸŒฒ๐ŸŒฒ

    I recently started exploring evergreen ui framework and I really like it.

    I found a use case where I wanted to implement <Autocomplete> component having items prop which is array of objects. I found a that currently autocomplete supports only array of strings for autocomplete items. So I am making this PR to help others who would like to use this component in similar way. :)

    <Autocomplete ...../> component currently uses itemToString function to stringify the each item from the items array passed through props.

    Now, if you have items like this :

    const fruits = [
      { id: "1", name: "Banana", image: "http://images.com/banana.png"},
      { id: "2", name: "Apple", image: "http://images.com/apple.png"},
      //... 
    ];
    

    Each AutocompleteItem of from the autocomplete dropdown receives props which are like this :

    {
      "id": "downshift-x-item-y",
      "children": "[object object]", // This is a string here
      "isHighlighted": false,
      "isSelected": false,
      "key": "[object object]", // This is a string here
      "style": {"position": "absolute", "top": 0, "left": 0, "width": "100%", "height": 32}
    }
    

    This adds limitation as we do not have access to the item object to render custom option for autocomplete dropdown. Even when Autocomplete component does have renderItem prop, it is now limited to items with string elements.

    This PR resolves this by passing the item in the renderItem prop. This enhances flexibility of the renderItem to handle custom objects as well as strings.

    For example :

    If you have items with structure like this :

    const itemsWithdetails = [
        {
            unique_id : 1,
            image_src: "http://images.com/1.png",
            name: "Item 1"
        },
        {
            unique_id : 2,
            image_src: "http://images.com/2.png",
            name: "Item 2"
        },
        //...
    ];
    

    Then you can make autocomplete option using available renderItem like below :

    <Box padding={40}>
        <Autocomplete
            itemSize={50}
            onChange={handleChange}
            itemToString={item => (item ? item.name : '')}
            items={itemsWithdetails}
            // Custom render dropdown option below with access to original item object, which is then used to get image, name etc 
            // from the item object in the custom renderItem
            renderItem={({ isHighlighted, isSelected, item, ...props }) => (
            <Pane
                display="flex"
                alignItems="center"
                justifyContent="left"
                gap={10}
                key={item.unique_id}
                {...props}
                paddingX={12}
                cursor="pointer"
            >
                <Image src={item.image_src} width={50} />
                <Text color="grey">{item.name}</Text>
            </Pane>
            )}
        >
            {({ getInputProps, getRef, getToggleButtonProps, inputValue, toggleMenu }) => (
            <Box ref={ref => getRef(ref)} display="inline-block">
                <TextInput placeholder="Custom item renderer" value={inputValue} {...getInputProps()} />
                <Button onClick={toggleMenu} {...getToggleButtonProps()}>
                Trigger
                </Button>
            </Box>
            )}
        </Autocomplete>
    </Box>
    

    I added detailed story for this as well as new component tests. Hope this helps :)

    Screenshots (if applicable)

    Screen Shot 2021-10-09 at 6 15 16 PM

    Documentation

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

    ๐ŸŒฒ๐ŸŒฒ Happy Coding ๐ŸŒฒ๐ŸŒฒ

    opened by techsemicolon 1
  • Bump nth-check from 2.0.0 to 2.0.1

    Bump nth-check from 2.0.0 to 2.0.1

    Bumps nth-check from 2.0.0 to 2.0.1.

    Release notes

    Sourced from nth-check's releases.

    v2.0.1

    Fixes:

    • Replace regex with hand-rolled parser for nth-expressions (#9) 9894c1d
      • Ensures parsing will always have linear time complexity.

    Internal:

    • chore(ci): Use GitHub Actions, Dependabot (#10) e02b4dd
    • Bump dependencies

    https://github.com/fb55/nth-check/compare/v2.0.0...v2.0.1

    Commits
    • 65e40b0 2.0.1
    • ff63f1d Bump eslint-config-prettier from 6.15.0 to 8.3.0 (#11)
    • ff24c93 Bump jest from 26.6.3 to 27.2.0 (#17)
    • da9d78a Bump @โ€‹typescript-eslint/parser from 4.9.0 to 4.31.1 (#18)
    • fa35caf Bump @โ€‹types/node from 14.14.10 to 16.9.1 (#16)
    • 5f39402 Bump @โ€‹typescript-eslint/eslint-plugin from 4.9.0 to 4.31.1 (#19)
    • a11c0c1 Bump prettier from 2.2.1 to 2.4.0 (#20)
    • 3ddd820 Bump @โ€‹types/jest from 26.0.15 to 27.0.1 (#13)
    • 732ab0a Bump ts-jest from 26.4.4 to 26.5.6 (#15)
    • 7efd9da Bump eslint from 7.14.0 to 7.32.0 (#14)
    • 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
  • Associate library-generated `description`, `hint` and `validationMessage` nodes with `aria-describedby`

    Associate library-generated `description`, `hint` and `validationMessage` nodes with `aria-describedby`

    Closes #1323.

    Overview

    When an author provides description, hint and validationMessage values as strings, evergreen-ui now generates the right aria-describedy values to ensure that these messages are exposed to assistive technology.

    โš ๏ธ Note: Authors are still required to write their own aria-describedby relationships when they provide description, hint and validationMessage as JSX!

    Documentation

    I'm happy to mention these new aria- associations in the docs, but I'd like some guidance about if and how I should do that, since I don't see a11y spec explicitly mentioned in the docs.

    • [x] Updated Typescript types and/or component PropTypes (unneeded in this PR)
    • [ ] Added / modified component docs
    • [ ] Added / modified Storybook stories
    opened by mxmason 3
  • Components that accept `description`, `hint`, and `validationMessage` do not create `aria-describedby` associations.

    Components that accept `description`, `hint`, and `validationMessage` do not create `aria-describedby` associations.

    Because description, hint, and validationMessage add extra information to the various *Field components, and the relationship between the input and the text is visually apparent, those associations should also be reflected in the accessibility tree.

    Currently, authors have to pass JSX as the value of description, hint, and validationMessage if they want to associate these hints with their inputs. Improving the markup generated when the author supplies hint, description, or validation messages as strings will make it easier for authors to create accessible forms.

    (Contrived) examples

    if I write the following code:

    <TextInputField
      label="Token"
      hint="Tokens are comprised of 3 words separated by hyphens"
    />
    

    I see the hint text I expect in the rendered DOM, but there is no aria-describedby attribute connecting the text input to the hint. This means that a user of assistive technology could miss the hint that tells them about the shape of the token.

    Again, it's possible to create aria-describedby relationships if I write my own JSX, but it's a lot of extra author code if several or more inputs have hint text.

    const hintText = (
      <Text
        is="div"
        id="token-hint"
        marginTop={8}
      >
        Tokens are comprised of 3 words separated by hyphens
      </Text>
    )
    
    <TextInputField
      label="Token"
      hint={hintPane}
      aria-describedby="token-hint"
    />
    
    Type: Improvement 
    opened by mxmason 0
  • Bump semver-regex from 3.1.2 to 3.1.3

    Bump semver-regex from 3.1.2 to 3.1.3

    Bumps semver-regex from 3.1.2 to 3.1.3.

    Commits

    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
  • Invalid SelectFields are not bordered red

    Invalid SelectFields are not bordered red

    This is visible in the documentation of SelectField:

    https://evergreen.segment.com/components/select#invalid_field

    comparatively TextInputField:

    https://evergreen.segment.com/components/text-input#invalid_field

    opened by seth-wat 1
  • Bump next from 10.2.3 to 11.1.1 in /examples/ssr-next

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

    Bumps next from 10.2.3 to 11.1.1.

    Release notes

    Sourced from next's releases.

    v11.1.1

    Core Changes

    • Next.js swc publish flow: #27984
    • Ensure config file message is only shown once: #28017
    • Add missing fields to NextConfig type: #27974
    • use a shared worker pool for collecting page data and static page generation: #27924
    • Use @โ€‹next scope for native packages: #28046
    • Fix generateBuildId type that can be async function: #28040
    • Fix image optimization encoding url: #28045
    • Clean up Document in preparation for streaming: #28032
    • Render as a concatenation of streams: #28082
    • Add support for dynamic HTML: #28085
    • Support suspense in next dynamic: #27611
    • Handle blob urls in image component: #27975
    • Bypass webpack compilation for precompiled @โ€‹next/polyfills-nomodule: #27596
    • Update util to 0.12.4: #27939
    • Remove duplicate doctypes: #28089
    • Fix revalidate for initial notFound: true paths: #28097
    • Add proper error when failing to load next.config.js: #28099
    • Fix: wrong link error message: #28127
    • Add support for Jaeger trace target: #28129
    • Enable pure client suspense in blocking rendering: #28165
    • Add entrypoint tracing: #25538
    • Add module type to build-module trace: #28128
    • Update to latest babel versions: #28174
    • Improve jaeger traces: #28168
    • fix development mode bug with pages with "+" and other special characters: #28122
    • let loaders automatically infer source map setting: #28204
    • Avoid fs write next-env.d.ts on read-only filesystems: #28206
    • Document usage of suspense option of next/dynamic: #28210
    • Add warning when parent styles break next/image: #28221
    • Use zen-observable library: #28214
    • Fix HMR when custom _app or _document is removed: #28227
    • Add relationship between issuer and module to traces: #28192
    • Update generating next-server dependencies: #28223
    • Fix next/image blur placeholder when JS is disabled: #28269
    • Ensure adding _app/_document HMRs correctly: #28279
    • upgrade webpack to 5.51.1: #28291
    • [ESLint] Adds process.exit to next lint success output: #28299
    • Fix next env vars injection in dynamic: #28309
    • Add layout to data-nimg attribute: #28312
    • Add data attribute to script component: #28310
    • Ensure @โ€‹babel/core is de-duped when nccing: #28384
    • Fix forked NODE_OPTIONS except for inspect: #28420
    • [ESLint] Enable caching by default: #28349
    • Update test config to leverage swc: #28400
    • Add missing typescript property to NextConfig: #28459
    • next/script fix duplicate scripts : #28428
    • Ensure error is shown correctly for empty headers field: #28430

    ... (truncated)

    Commits

    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 tar from 6.1.0 to 6.1.11

    Bump tar from 6.1.0 to 6.1.11

    Bumps tar from 6.1.0 to 6.1.11.

    Commits
    • e573aee 6.1.11
    • edb8e9a fix: perf regression on hot string munging path
    • a9d9b05 chore(test): Avoid spurious failures packing node_modules/.cache
    • 24b8bda fix(test): use posix path for testing path reservations
    • e5a223c fix(test): make unpack test pass on case-sensitive fs
    • 188badd 6.1.10
    • 23312ce drop dirCache for symlink on all platforms
    • 4f1f4a2 6.1.9
    • 875a37e fix: prevent path escape using drive-relative paths
    • b6162c7 fix: reserve paths properly for unicode, windows
    • 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
Releases(v6.6.3)
  • 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)
  • v5.0.0-16(Jul 29, 2020)

  • v5.0.0-15(Jul 29, 2020)

    • loosen proptype requirements for IconWrapper 426d5675
    • update v5 docs location 4b72b616

    https://github.com/segmentio/evergreen/compare/v5.0.0-14...v5.0.0-15

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-14(Jul 28, 2020)

    • support forwardRef on TagInput container 900b382f
    • export more utility types fc148ec0

    https://github.com/segmentio/evergreen/compare/v5.0.0-13...v5.0.0-14

    Source code(tar.gz)
    Source code(zip)
  • v4.29.1(Jul 28, 2020)

React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Nov 19, 2021
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 461 Nov 20, 2021
๐Ÿ‘Ÿ rbx โ€“ The Comprehensive Bulma UI Framework for React

rbx โ€“ The Comprehensive Bulma UI Framework for React ?? Read the docs. ?? I'll wait, go check them out! Features up-to-date Bulma implementation (0.7.

Devin Fee 474 Nov 17, 2021
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 242 Nov 28, 2021
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18.4k Dec 2, 2021
Elastic UI Framework ๐Ÿ™Œ

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 3.2k Dec 2, 2021
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 55 Nov 21, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
react-health-card ๐Ÿฅ๐Ÿ’ณ An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

medipass 26 Nov 8, 2021
React standard libraryโ€”must-have toolbox for any React project.

libreact React standard libraryโ€”must-have toolbox for any React project. LAUNCH STORYBOOK ?? See documentation Most components implement Isomorphic -

Vadim Dalecky 2.5k Nov 17, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 73.4k Dec 2, 2021
๐ŸŒˆ 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 75.8k Nov 24, 2021
A React-based UI toolkit for the web

Blueprint Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications

Palantir Technologies 18.3k 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.5k Nov 24, 2021
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.2k Nov 23, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Nov 25, 2021
The official Semantic-UI-React integration

Semantic UI React Installation & Usage See the Documentation for an introduction, usage information, and examples. Built With Amazon Publishing โ€” the

Semantic Org 12.5k Nov 27, 2021
โšก๏ธ 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 22.3k Nov 26, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Nov 28, 2021