@tonic-ui/[email protected]

Tonic UI 1.0 was released in March, 2022. This release focus on the following:

• Enhance UX with CSS transitions
• Improve bundle size with Tree Shaking
• Improve documentation
• Publish packages to a new organization
  • @tonic-ui/react
    React Tonic UI component library.
  • @tonic-ui/react-hooks
    A collection of React Hooks for Tonic UI components.
  • @tonic-ui/styled-system
    The framework agnostic styling engine for Tonic UI.
  • @tonic-ui/theme
    The default theme package for Tonic UI components.
• Upgrade components to be compatible with React 17

Migration Guide

See here for a migration guide

What's Changed

• 💣 breaking: refactor Transition components to ensure consistency of transition usage and props by @cheton in #297
• 💣 breaking: add deprecation warning message for deprecated props and remove unwanted code from the v1 release by @cheton in #306
• 💣 breaking: keep only named imports and move packages to the @tonic-ui namespace by @cheton in #285
• 💣 breaking: move useClipboard Hook from react to react-docs by @cheton in #417
• 🎉 feat: deprecate useDisclosure Hook by @cheton in #419
• 🎉 feat: add styled-system package by @cheton in #415
• 🎉 feat: add @tonic-ui/react-hooks package by @cheton in #424
• 📝 docs: fix incorrect scrollable menu examples that don't work properly by @cheton in #423
• 💣 breaking: remove Accordion component from v1 alpha by @cheton in #426
• 🎉 feat: rename MenuTrigger and MenuIndicator to MenuToggle and MenuToggleIndicator by @cheton in #430
• 🎉 feat(react-hooks): add useToggle Hook by @cheton in #434
• 🎉 feat(react-hooks): add useConst Hook by @cheton in #436
• 🎉 feat(styled-system): add backdropFilter style prop by @cheton in #438
• 💣 breaking: completely rewrite the Accordion components by @cheton in #427
• 🎉 feat: new folder structure for the @tonic-ui/react package by @cheton in #432
• 👷 refactor: by default the transition components will not perform the enter transition when it first mounts by @cheton in #443
• 🎉 feat(styled-system): add group, originalProperties, and alias properties to the sx style function by @cheton in #445
• 📝 docs: add Style Props and Pseudo Style Props pages by @cheton in #444
• 🎉 feat: add useIsomorphicEffect Hook by @cheton in #450
• 🎉 feat: set scrollbar default width and height from "100%" to "auto" by @cheton in #453
• 💣 breaking: deprecate legacy Tabs component from the v1 release by @cheton in #452
• 🐛 fix: Button, Input, InputGroupAddon, Checkbox, and Radio components should be able to override props inherited from their parent groups by @cheton in #454
• 🎉 feat: replace inline-block with inline-flex for all React components by @cheton in #456
• 👷 refactor(Stack): avoid using "cloneElement" to override stacked items by @cheton in #466
• 🎉 feat: add a _focusVisible style prop to support the :focus-visible pseudo-class by @cheton in #469
• 🎉 feat: allow MenuToggle and MenuList not necessarily be rendered in the same DOM context by @cheton in #458
• 📝 docs: add missing color code to the color palette and update system page examples by @cheton in #470
• 🧱 chore: refine the coding convention of the Table component style by @cheton in #478
• 🎉 feat: add TonicProvider to make setup cleaner by @cheton in #475
• 📝 docs: migration from v0.x to v1 by @cheton in #473
• 🎉 feat: set usePortal prop to false by default to reduce performance impact for Menu, Popover, and Tooltip by @cheton in #481
• 📝 docs: add accordion effect to the side menu by @cheton in #483
• ci: CircleCI & Codecov Integration by @cheton in #485
• 📝 docs: update the selected style for button groups by @cheton in #487
• 🎉 feat: use useReducer to implement the useColorMode Hook by @cheton in #490
• 🐛 fix: fix abnormal transition effect on primary, emphasis, and default buttons by @cheton in #491
• 🎉 feat(react-hooks): add useEventCallback Hook by @cheton in #498
• 🎉 feat: deprecate the use of the __before prop from the Button component by @tinaClin in #495
• 🎉 feat: rework Tabs component by @cheton in #493
• 🎉 feat: change TextLabel from inline to a block-level element by @cheton in #501
• 🎉 feat: Drawer should appear on the right of the screen if the placement prop is not explicitly specified by @cheton in #500
• 🐛 fix: adjust backdrop style to fix unexpected component position change by @tinaClin in #505
• 🎉 feat: add new React Hooks - useCopyToClipboard, useEffectOnceWhen, useMediaQuery, useOnce, useOnceWhen by @cheton in #503
• 🧱 style: adjust light theme style for Alert component by @tinaClin in #509
• 🎉 feat: rework Tabs component and deprecate unwanted props by @cheton in #502
• 🎉 feat: rework Tag component and deprecate unwanted props by @tinaClin in #492
• 🎉 feat: allow the entire modal content to scroll within the viewport by @cheton in #515
• 📝 docs: add examples for ButtonLink and VisuallyHidden components by @cheton in #517
• 🐛 fix: bug fixes for modal outside scrolling by @cheton in #520
• 🎉 feat: rework Drawer component by @cheton in #521
• 🐛 fix: remove unwanted lodash dependency from the @tonic-ui/react package by @cheton in #526
• 🎉 feat: enhance modal component structure and refine outside scrolling behavior by @cheton in #527
• 🎉 feat: enhance drawer component structure and set placement using the margin: auto technique by @cheton in #529
• 🎉 feat: export component Hooks and allow accessing internal context from component providers by @cheton in #534
• 💣 breaking: deprecate the rarely used FlatButton component by @cheton in #537
• 🎉 feat: rework Spinner component by @cheton in #540
• 🎉 feat: remove the color package for security consideration by @cheton in #535
• 🎉 feat: add selected state to the Button component by @cheton in #543
• 📝 docs: add color style usage to the getting started guide by @cheton in #544
• 📝 docs: add an example that navigates multiple alert notifications using the pagination method by @cheton in #546
• 💣 breaking: deprecate the second argument of CheckboxGroup's onChange callback by @cheton in #545
• 🎉 feat: v1 release candidate by @cheton in #548

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@trendmicro/[email protected]...@tonic-ui/[email protected]

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: make the overflow part of modal top accessible (scroll to top) by @light049 in #528
• 🎉 feat: use "margin: auto" technique to make modal centered horizontally and vertically by @cheton in #532

👏 New Contributors

• @light049 made their first contribution in #528

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: remove unwanted lodash dependency from the @trendmicro/react-styled-ui package by @cheton in 4fe93f8

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: bug fixes for modal outside scrolling by @cheton in #524

@trendmicro/[email protected]

🚀 What's Changed

• 🎉 feat: adjust light theme style for the Alert component by @tinaClin in #510
• 🎉 feat: allow the entire modal content to scroll within the viewport by @cheton in #519

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: adjust backdrop style to fix unexpected component position change by @tinaClin in #506
• 🐛 fix: fix abnormal transition effect on primary, emphasis, and default buttons by @cheton in 90d2db9

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: add a missing bracket ")" to the focusable element selectors by @cheton in #467

[email protected]

🚀 What's Changed

• 📝 docs: allow users to select which version of the document they would like to view by @cheton in #414

@trendmicro/[email protected]

🚀 What's Changed

• 🐛 fix: fixes an issue that cannot locate tooltip trigger if explicitly set the isOpen prop by @cheton in #408
• 🐛 fix: fixes an issue that cannot locate popover trigger if explicitly set the isOpen prop by @cheton in #410
• 🎉 feat: add common utilities by @cheton in #407
• 🎉 feat: add a useHydrated Hook that can be used to ensure the components are SSR-friendly by @cheton in #411

🪧 Highlight

Popover

• Remove shouldWrapChildren prop from PopoverTrigger.
• The popover trigger content will be wrapped with a Box by default. You can use Function as Child Component (FaCC) to render the popover trigger (anchor) if you don't want it to be wrapped with Box:

  <PopoverTrigger>
    {({ getPopoverTriggerProps }) => {
      return (
        <Button {...getPopoverTriggerProps()}>
          Popover Trigger
        </Button>
      );
    }}
  </PopoverTrigger>

Tooltip

• Remove aria-label, defaultIsOpen, shouldWrapChildren props from Tooltip
• The tooltip content will be wrapped with a Box by default. You can use Function as Child Component (FaCC) to render the tooltip trigger (anchor) if you don't want it to be wrapped with Box:

  <Tooltip label="tooltip label">
    {({ getTooltipTriggerProps }) => {
      return (
        <Button {...getTooltipTriggerProps()}>
          Tooltip Trigger
        </Button>
      );
    }}
  </Tooltip>

[email protected]

🚀 What's Changed

• 📝 docs: rework Badge component and deprecate unwanted props by @cheton in #395
• 📝 docs: rework Tonic UI style props by @cheton in #399