Changelog History
Page 4
-
v5.1.2 Changes
September 28, 2020 -
v5.1.1 Changes
September 14, 2020 -
v5.1.0 Changes
September 14, 2020- โก๏ธ Update Dialog "title" prop type in declaration file (#1012) 8106a92
- ๐ Fixup incorrect icon usage on Menu docs (#1013) a0293e2
- Clear up tooltip timeouts on mouse leave (#1011) 84a63b6
- โก๏ธ update PR template (#1007) 6593cbc
- Forward TextareaField ref (#987) b021089
- ๐ fix Popover focus issues (#962) c45f702
-
v5.0.6 Changes
September 01, 2020- โ Add missing disabled property to SegmentedControlOwnProps interface (#935) 0900ef0
- ๐ fix unnecessary re-renders for popover component (#945) ecdf5d3
- ๐ fix classnames overwrites in Tab, TagInput, FilePicker, TextDropdown (#953) 4e7da88
- ๐ fix menu disable items functionality and appearence (#954) 667c957
- โ add StackingOrder and Code appearance typedefs (#961) d0573a7
-
v5.0.5 Changes
August 29, 2020- ๐ fix input height regression on text field (#960) 1cff104
- ๐ fix undefined props merging and list styles (#959) 743140f
- ๐ Fix broken Icon docs with non-existent condition (#950) d4d2467
- ๐ fix onChange() and onBlur() types for FilePicker (#941) a81be4c
- โก๏ธ Update layout-primitives.mdx (#936) 92c787e
-
v5.0.4 Changes
August 10, 2020- โฌ๏ธ bump version to current npm version ec72d3c
- Call
onStateChange
if passed to<Combobox>
(#926) c191f78 - ๐ Fix itemToString for Autocomplete & Combobox (#930) (#931) b8ec393
- ๐ Fix(switch): set default value (checked) (#932) cc4ce9b
- Resolve issue, where incorrect props where being passed around (#933) b80f6c3
- โ Add box wrapper to maintain positioning for custom icons (#934) 26bf88b
-
v5.0.3 Changes
August 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)
-
v5.0.2 Changes
August 04, 2020 -
v5.0.1 Changes
August 03, 2020 -
v5.0.0 Changes
August 03, 2020Evergreen 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 aroundinnerRef
props to forward refs to the underlying components.
We've centralized on the standard way of using refs in React: passing aref
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 ofPopover
.
The directchild
of aPopover
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
orIconButton
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
evergreen-ui@^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
evergreen-ui@^4.26.0
we introduced a new way to import icons that would lead to some amount of tree-shaking.๐ป Finally, in
evergreen-ui@^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 likeButton
,IconButton
,Menu.Item
,OrderedList
(andOl
),UnorderedList
(andUl
).โก๏ธ 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 theIcon
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
โก๏ธ updatesimport { 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
to5.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
- 0๏ธโฃ
defaultSelectedItem
- useinitialSelectedItem
- 0๏ธโฃ
defaultInputValue
- useinitialInputValue
getButtonProps
- usegetToggleButtonProps
Switch is uncontrolled
โก๏ธ To unify usage of form components across Evergreen, we updated
Switch
to more closely match other components, such asCheckbox
.
When using the component it is now required that you pass the component anonChange
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
'sonChange
handler now bubbles the event directly from childrenRadio
inputs instead of bubbling the value.This change was made to help improve the internal consistency with
onChange
handlers and to more closely matchonChange
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
'sonChange
handler:- \<Radio onChange={(event, checked) =\> console.log(checked)} /\>- \<Radio onChange={(event) =\> console.log(event.target.checked)} /\>