nextui-org/nextui v1.0.0-beta.10

on GitHub

What's Changed

🚀 Features

• New component: Navbar #686 by @jrgarciadev
• New component: Badge #610 by @jrgarciadev
• Additional sizes and fontSizes #558 by @jrgarciadev
• Smaller bundle size #663 by @TIMMLOPK

🐛 Fixes

• fix(react-tooltip): tooltip story by @imchell in #537
• fix(react-card): box shadow applied intead of box shadow filter on sa… by @jrgarciadev in #594
• fix(react-table): react-stately props by @danielsimao in #564
• fix(react-dropdown): zIndex for focused dropdown item by @shtelzerartem in #595
• fix(react-switch): Switch Animation In Safari by @TroyTae in #553
• fix(react-dropdown): add collections and menu deps of react-stately by @tianenpang in #616
• fix(react-table): Table.Header column border-radius size #677 by @wangly19 in #684

⚙️ Refactors

• refactor(react-container): add forwardRef by @danielsimao in #567

📚 Docs

• fix(docs): fix typos by @ZackKanter in #540
• fix(docs): Need Import React in Example by @MrScrappy in #542
• fix(docs): default value of animated props in avatar group by @shota8888 in #563
• fix(docs): fix import error by @TroyTae in #575
• fix(docs): unimported component in Card example by @imchell in #577
• fix(docs): adjust contrast of text and svgs in the KBar component by @mattbudde in #588
• fix(docs): remove unimplemented Dropdown API by @imchell in #587
• fix(docs): fix input typos by @benmneb in #604
• fix(docs): wrong case in image props by @sapkra in #603
• fix(docs): Kbar change theme by @danielsimao in #599
• fix(docs): change media page title by @imchell in #620
• fix(docs): grammar in loading docs by @chainerprince in #628
• fix(docs): fix typo in the Table docs by @denniskigen in #625
• fix(docs): fix typos in image docs by @MForMarlon in #645
• fix(docs): remove wrong imports in custom cells example by @tianenpang in #654
• fix(docs): codesandbox error in content input by @tianenpang in #655

📦 Repo

• feat(repo): better eslint/prettier configuration by @jrgarciadev in #558
• feat(repo): Adding links in contribution and code of conduct by @nerdjfpb in #632
• chore(repo): Force build and upgrade some versions of action by @tianenpang in #651
• chore(repo): build and deploy with vercel by @tianenpang in #652

🚀 New behavior

Typography units changes:

• New space units were added to the common theme 2xl...9xl, min: "min-content", max: "max-content", fit: "fit-content", screen: "100vw", full: "100%"
• Text component now supports any value from fontSizes (e.g. "3xl") theme in addition to number (e.g. 14) and string (e.g. "20px")

e.g.

import {Text} from "@nextui-org/react";

function App({ Component }) {
  return (
    <Text size="4xl">Hello World</Text> 
  );
}

The idea is to implement the same Text size behaviour in the future in other components like Grid, Row etc. to take advantage of the theme tokens

Breakpoints Media

export const media = {
    xs: `(min-width: ${defaultTokens.breakpoints.xs})`,
    sm: `(min-width: ${defaultTokens.breakpoints.sm})`,
    md: `(min-width: ${defaultTokens.breakpoints.md})`,
    lg: `(min-width: ${defaultTokens.breakpoints.lg})`,
    xl: `(min-width: ${defaultTokens.breakpoints.xl})`,
+  xsMin: `(min-width: ${defaultTokens.breakpoints.xs})`,
+  smMin: `(min-width: ${defaultTokens.breakpoints.sm})`,
+  mdMin: `(min-width: ${defaultTokens.breakpoints.md})`,
+  lgMin: `(min-width: ${defaultTokens.breakpoints.lg})`,
+  xlMin: `(min-width: ${defaultTokens.breakpoints.xl})`,
    xsMax: `(max-width: ${defaultTokens.breakpoints.xs})`,
    smMax: `(max-width: ${defaultTokens.breakpoints.sm})`,
    mdMax: `(max-width: ${defaultTokens.breakpoints.md})`,
    lgMax: `(max-width: ${defaultTokens.breakpoints.lg})`,
    xlMax: `(max-width: ${defaultTokens.breakpoints.xl})`,
    motion: '(prefers-reduced-motion)',
    safari: 'not all and (min-resolution:.001dpcm)',
    hover: '(any-hover: hover)',
    dark: '(prefers-color-scheme: dark)',
    light: '(prefers-color-scheme: light)'
};

e.g.

import {Text} from "@nextui-org/react";

function App({ Component }) {
  return (
    <Text css={{
      "@xsMin": { 
         color: "red"
      }
   }}>Hello World</Text> 
  );
}

Dropdown API

• disableTriggerPressedAnimation prop added to the Dropdown - Whether the trigger should show a pressed animation when the menu is open.
• showFullDescription prop added to the Dropdown.Item - Whether the item description should be truncated or not.

Text API

• hideIn prop added - Whether the Text should be hidden from selected breakpoint.
• showIn prop added - Whether the Text should be visible only from the selected breakpoint.

💣 Breaking changes:

Link API

The margin of some HTML primitives has been removed from the CssBaseline

-  "dl, dd, hr, figure, p": {
-    margin: 0,
-  },

Typography units changes:

• Some fontSizes were renamed from xl2...xl9 to 2xl...9xl
• Some lineHeights were renamed from xl2...xl9 to 2xl...9xl

New Contributors

• @ZackKanter made their first contribution in #540
• @MrScrappy made their first contribution in #542
• @shota8888 made their first contribution in #563
• @TroyTae made their first contribution in #575
• @mattbudde made their first contribution in #588
• @danielsimao made their first contribution in #567
• @shtelzerartem made their first contribution in #595
• @benmneb made their first contribution in #604
• @sapkra made their first contribution in #603
• @denniskigen made their first contribution in #625
• @nerdjfpb made their first contribution in #632
• @MForMarlon made their first contribution in #645
• @wangly19 made their first contribution in #684

Huge thanks to all contributors 🙏🏻

Full Changelog: v1.0.0-beta.9...v1.0.0-beta.10