v2.2.0-rc.7

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.

Other optimizations

• The Popup component is now better positioned
• Ensure compatibility with Yarn2 (berry) #561
• Fewer and more accurate error logs
• In DEV, previewable names (displayName) have been added for each component

Breaking change & Migration

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)

Next version

Canary

• We plan to improve and resolve some of the features that are blocked by Scaleable, such as Rating
• Update all sample projects
• Optimize the implementation details of Scaleable on each component
• Released within 1 - 2 weeks

Minor (v2.2.0)

• Includes all the new features of 2.2.0
• Plan to change package name to @geist-ui/core
• Released within 2 - 4 weeks

Canary Documentation

• This is a canary version (2.2.0-rc.7), and if you are interested, you can run yarn add @geist-ui/react@canary to install.
• Documentation for canary release