nextui-org/nextui v1.0.0-beta.8 on GitHub

What's Changed

🚀 Features

[NEW COMPONENT]: Dropdown component has been created, based on react-aria hooks: useMenu useMenuItem useMenuSection useTreeState #507
Utilities added to the Stitches CSS library:

+ ds: (value) => ({
+   dropShadow: value
+ }),
+ shadow: (value) => ({
+   boxShadow: value
+ }),
+ dshadow: (value) => ({
+   dropShadow: value
+ }),
+ dropShadow: (value) => ({
+   filter: `$dropShadows${value}`
+ }),

New theme key -> dropShadows (to use along with css dropShadow utility)

Light Theme:

  dropShadows: {
+    xs: 'drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))',
+    sm: 'drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))',
+    md: 'drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))',
+    lg: 'drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))',
+    xl: 'drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))'
  }

Dark Theme:

  dropShadows: {
+    xs: 'drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))',
+    sm: 'drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))',
+    md: 'drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))',
+    lg: 'drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))',
+    xl: 'drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))'
  }

Usage example:

<Button
  css={{
    dropShadow: "$lg",
  }}
/>

🐛 Fixes

[react] Table safari row jitters on hover by @jrgarciadev in #510
[react] User props and link warnings by @tianenpang in #466
[docs] Prevent anchor links from hiding behind the navbar by @imchell in #502
[docs]: navbar background transparent after refreshing by @tianenpang in #493
[docs]: Fix typo in override-styles.mdx by @DannyNemer in #486

[docs]: Comma typo in customize theme code example by @tianenpang in #472

⚙️ Refactors

Radiorefactor and integration with react-aria/radio. by @tianenpang #491
Card refactor and integration with usePress and useHover react-aria hooks. by @jrgarciadev #511
New grey scale: in order to have better grey/dark contrast, a Slate one changed the grey palette by @jrgarciadev #483
Theme shadows have been improved and are now more consistent, a new key for drop shadows was added. by @jrgarciadev #511
Theme font sizes have been improved and are now more consistent. by @jrgarciadev #511
Theme line heights have been improved and are now more consistent. by @jrgarciadev #511
Docs components and core components have been updated in order to fit the new font sizes and shadows by @jrgarciadev #511
Amend utility function bgBlur to not modulate background value by @DannyNemer in #485

📚 Docs

Confetti position by @tianenpang in #469
Support button by @jrgarciadev in #471

📦 Repo

Limit node version to make Storybook work properly (fix #498) by @imchell in #499

Theme toggle with nextui by @tianenpang in #492

💣 Breaking changes:

Card APIs breaking changes

bordered prop has been removed, use variant="bordered" instead.
shadow prop has been removed, use variant="shadow" instead.
cover prop has been removed, use objectFit="cover" image prop instead.

Old APIs	New APIs
`clickable`	`isPressable`
`hoverable`	`isHoverable`
`animated`	`disableAnimation`

Card.Footer APIs breaking changes

Old APIs	New APIs
`blur`	`isBlurred`

Card Implementation difference:
NextUI is no longer automatically wrapping the children in a Card.Body component (since it causes a lot of issues), it means that you have to do it yourself.

    <Card css={{ mw: "400px" }}>
+     <Card.Body>
        <Text>A basic card</Text>
+     </Card.Body>
    </Card>

Theme breaking changes

Font sizes breaking changes

  fontSizes: {
-   tiny: '.75rem',
-   xs: '0.875rem',
-   base: '1rem',
-   sm: '1.25rem',
-   md: '1.5rem',
-   lg: '2.25rem',
-   xl: '3rem'

+   xs: '0.75rem', /* 12px */
+   sm: '0.875rem', /* 14px */
+   base: '1rem', /* 16px */
+   md: '1rem', /* 16px */
+   lg: '1.125rem', /* 18px */
+   xl: '1.25rem', /* 20px */
+   xl2: '1.5rem', /* 24px */
+   xl3: '1.875rem', /* 30px */
+   xl4: '2.25rem', /* 36px */
+   xl5: '3rem', /* 48px */
+   xl6: '3.75rem', /* 60px */
+   xl7: '4.5rem', /* 72px */
+   xl8: '6rem', /* 96px */
+   xl9: '8rem', /* 128px */
  }

Line heights breaking changes

  lineHeights: {
-   xs: 1,
-   sm: 1.25,
-   md: 1.5,
-   lg: 1.625,
-   xl: 1.75

+   xs: 1, /* 16px */
+   sm: 1.25, /* 20px */
+   base: 1.5, /* 24px */
+   md: 1.5, /* 24px */
+   lg: 1.75, /* 28px */
+   xl: 1.75, /* 28px */
+   xl2: 2, /* 32px */
+   xl3: 2.25, /* 36px */
+   xl4: 2.5, /* 40px */
+   xl5: 1,
+   xl6: 1,
+   xl7: 1,
+   xl8: 1,
+   xl9: 1
  }

Shadows breaking changes

Light Theme:

  shadows: {
-   xs: '-4px 0 4px rgb(0 0 0 / 5%);',
-   sm: '0 5px 20px -5px rgba(0, 0, 0, 0.1)',
-   md: '0 8px 30px rgba(0, 0, 0, 0.15)',
-   lg: '0 30px 60px rgba(0, 0, 0, 0.15)',
-   xl: '0 40px 80px rgba(0, 0, 0, 0.25)'

+   xs: '0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)',
+   sm: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
+   md: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
+   lg: '0 12px 34px 6px rgb(104 112 118 / 0.18)',
+   xl: '0 25px 65px 0px rgb(104 112 118 / 0.35)'
  }

Dark Theme:

  shadows: {
-   xs: '-4px 0 15px rgb(0 0 0 / 50%)',
-   sm: '0 5px 20px -5px rgba(20, 20, 20, 0.1)',
-   md: '0 8px 30px rgba(20, 20, 20, 0.15)',
-   lg: '0 30px 60px rgba(20, 20, 20, 0.15)',
-   xl: '0 40px 80px rgba(20, 20, 20, 0.25)'

+   xs: '0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)',
+   sm: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
+   md: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
+   lg: '0 12px 34px 6px rgb(0 0 0 / 0.18)',
+   xl: '0 25px 65px 0px rgb(0 0 0 / 0.35)'
  }

Radio APIs breaking changes

Radio needs to be wrapped in the Radio.Group.

Radio Props

OLD APIs	NEW APIs
`textColor`	`labelColor`
`animated`	`disableAnimation`
`squared`	`isSquared`
`disabled`	`isDisabled`

Radio Group Props

OLD APIs	NEW APIs
`textColor`	`labelColor`
`value: string, number`	`value: string`
`initialValue: string, number`	`defaultValue: string`
`disabled`	`isDisabled`
`onChange: (e:RadioEvent) => void`	`onChange: (value: T) => void`

row prop has been removed, use orientation="horizontal" instead.
Radio.Description and Radio.Desc sub-components have been removed, use description prop instead.

-  <Radio.Group value="1" row>
+ <Radio.Group value="1" orientation="horizontal">
-      <Radio value="1">
-        Option 1<Radio.Description>Description for Option1</Radio.Description>
-      </Radio>
+     <Radio value="1" description="Description for Option1">
+        Option 1
+      </Radio>
  </Radio.Group>

Checkbox APIs breaking changes

row prop has been removed, use orientation="horizontal" instead.

New Contributors

@imchell made their first contribution in #502

Full Changelog: v1.0.0-beta.7...v1.0.0-beta.8