v2.2.0

Improvements & Features

Scaleable

Scaleable is one of the most exciting features of this release, giving Geist a great deal of freedom and imagination, and EVERY COMPONENT fully supports the Scaleable feature.

We removed all size props, so that each component no longer needs to be manually scaled, but instead the scale props control the scaling function:

<Loading scale={0.5} />
<Loading scale={2/3} />

Developers are free to set the size of the component, and if necessary, you can specify a space in the component to be scaled:

<Button paddingLeft="20px" paddingRight={1.35} />

You can choose either a fixed CSS value or a scaling factor, and each component supports all scaleable props.

Also, you can also use a more streamlined alias attribute:

<Button h="50px" w="75%" />

💡 Learn more in the Scaleable documentation

More friendly type support

1. Shorter paths

We've noticed that many developers need to import component types to use, excessively long paths and unnecessary declarations should be omitted. The component types will now be exported by default under the root namespace:

// before
import { Button } from '@geist-ui/react'
import { ButtonProps } from '@geist-ui/react/dist/button/button'

// now
import { Button, ButtonProps } from '@geist-ui/react'

2. Alias of type

The types exported from the component will now be shorter and easier to recognize:

3. Easier identification of component names

We also compile an extra copy of the types in the exported esm package, so that when your project supports esm mode, the type checking will be smarter and the hints will be better than before.

New components

• Add React Hooks: useKeyboard. #541
• Add Rating component. #543
• Add Drawer component. #575 #501

Other optimizations

• Add className and rowClassName to Table for overriding styles. #569
• Table component now fully supports TypeScript type derivation.
• The operation property of the Table data has been removed and the render property on TableColumn.
• We have refactored the types of the Table so that there are now fewer types, but they are more precise.
• Add props for popup container. AutoComplete. #558 #534
• Add forwardRef for AutoComplete component. #542
• The Popup component is now better positioned
• Ensure compatibility with Yarn2 (berry) #561
• Fewer and more accurate error logs
• In DEV environment, previewable names (displayName) have been added for each component

Patches

• Fix path error under ESM. #603
• Fix shadow style for AutoComplete #547
• Fix size of loading icon. AutoComplete #546
• Upgrade styled-jsx to the latest version to support React 17. #520

Migration &Breaking changes

If you have any questions about the migration and the new version, please let us know by leaving a comment in the Discussions.

• All size props have been removed, use scale instead of size.
• Remove the Row and Col components, this is a legacy component of the old layout system and it is recommended to use Grid instead of it.
• Remove the Fieldset.Footer.Actions and Fieldset.Footer.Status components, they don't really do anything, if your style has changed, just add some flex styles.
• Remove the disableAutoResize and scale properties of component Image, now the Scaleable function can work instead of it.
• The x and y of the Spacer component have been changed to w and h. (Scaleable system props)

Credits

Thanks to @jorekai @Bowen7 @Gounlaf @Deep-Codes