v2.2.0

[unix]

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. feat: useKeyboard hooks #541
• Add Rating component. feat(rating): a new component rating indicator #543
• Add Drawer component. feat(drawer): create component #575 Drawer #501

Other optimizations

• Add className and rowClassName to Table for overriding styles. refactor(table): redesign interfaces to improve the experience in TypeScript #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. feat(auto-complete): add props for popup container #558 feat(auto-complete): getPopupContainer prop #534
• Add forwardRef for AutoComplete component. feat(auto-complete): add forwardRef for input element #542
• The Popup component is now better positioned
• Ensure compatibility with Yarn2 (berry) GeistUI with Next 11, Typescript and Yarn 2 with pnp throws a "Module not found" error #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. fix: migrate the hooks file path in esm #603
• Fix shadow style for AutoComplete fix(auto-complete): hide shadow when no content #547
• Fix size of loading icon. AutoComplete fix(auto-complete): fix size of loading icon #546
• Upgrade styled-jsx to the latest version to support React 17. chore(deps): update styled-jsx to ^3.3.1 #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

---

This discussion was created from the release v2.2.0.

[Deep-Codes]

This is amazing 🚀

[agoldis]

Awesome! Thank a lot for your great work!