Improvements & Features

@songhn233

Improvements & Features

ButtonDropdown now allows for custom icon. #630
Tabs is added with a highlighting effect when hovering. #653
Image component supports rendering of SVG strings. #692
Export useScale function. #693
Add a new style to the Code. #698
Redesign the documentation site, now it will be easier to read.

Patches

Complementary scale function for Input.Password. #685

Credits

Thanks to @songhn233 @nikhilgupta58

Canary

This is a canary version (2.3.0-rc.0), not for production. you can run yarn add @geist-ui/core@canary to install.
Documentation for canary release

Improvements

Simplify style library type export. (No side effects, optimize tsc compilation speed only)

Patches

Fix sharing of component contexts in esm mode. #681
Fix styled-jsx build failure in rollup. #681

Patches

Remove the scale props before the component is passed to the real dom. #666 #671
Fix reference paths after type compilation. #673

Patches

Remove all dependencies of the Geist UI
Redesign the bundling process to be compatible with ESM
Fix user build failure with ESM in production mode

@Megrax

Patches

Fix the wrong file path of hooks in esm mode. #603
Fix the horizontal scrollbar of component Select is always visible. #655
Fix typo of component displayName in development mode. #612
Removed unnecessary code in Grid Component. #633
Upgrade dependencies to be compatible with Vite and next.js.

Credits

Thanks to @Megrax @jstolwijk @zaguiini @mnismt @moatorres @RodrigoTomeES @craigglennie

@jorekai

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

@jorekai