@tonic-ui/react@2.0.0

Overview

Tonic UI v2 has officially been released. The most significant improvement is that it no longer embeds all icons. Instead, you'll need to import individual icon components as needed. This change results in a substantial reduction in bundle size. We conducted a test by comparing the bundle size of a simple React app built with both versions 1.29.2 and 2.0.0 to confirm this improvement.

As illustrated in the graph below, the size of @tonic-ui rendered after tree shaking decreased from 630.01KB to 133.85KB. This reduction saves approximately 500KB for a kickstart app.

@tonic-ui/react@1.29.2

vite v4.5.3 building for production...
✓ 1032 modules transformed.
output/index.html                   2.68 kB │ gzip:   1.22 kB
output/static/index-bad4b52b.js     4.09 kB │ gzip:   1.90 kB
output/static/vendor-48c2906a.js  876.35 kB │ gzip: 265.40 kB
 
(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 6.76s

root rendered: 1.55MB

@tonic-ui rendered: 630.01KB (39.81%)

@tonic-ui/react@2.0.0

vite v4.5.3 building for production...
✓ 1504 modules transformed.
output/index.html                   2.68 kB │ gzip:   1.22 kB
output/static/index-dc6ba10f.js     4.09 kB │ gzip:   1.90 kB
output/static/vendor-52292424.js  350.35 kB │ gzip: 111.77 kB
✓ built in 5.38s

root rendered: 645.77KB

@tonic-ui rendered: 133.85KB (20.73%)

Migration from v1 to v2

https://trendmicro-frontend.github.io/tonic-ui/react/v2/getting-started/migration-v1-to-v2

What's Changed

• feat: prepare for v2 release by @cheton in #834
• feat: move date picker components from @tonic-ui/react-lab to @tonic-ui/react by @cheton in #858

P2

• The CSS fill and stroke properties for SVG elements are removed from styled-system
• Prepare a codemod migration tool to automate the process of migrating icons from v1 usage to v2 usage in the codebase.

  npx @tonic-ui/codemod@latest react/v2.0.0/import-react-icons <path>

• v1 to v2 migration guide
• Address issues identified in #687 for Alert, Toast, and Tag components
• Mark ToastProvider and useToast as deprecated in v2 and plan for their complete removal in the subsequent major release. Update your code to use ToastManager and useToastManager instead. #687
• AccordionCollapse will be marked as deprecated in v2 and plan for their complete removal in the subsequent major release. Update your code to use AccordionContent instead.
• Enhance Tooltip component. #701
  • Support light or dark background colors #754
  • Figma: https://www.figma.com/file/bHr2zAshr0D5ROp8vCVPFR/%F0%9F%92%BC-Tonic---Dark-Mode?type=design&node-id=51221-177231&mode=design&t=LsTmDjCmwmIv0zsk-4
  • Hide the arrow by default. Note: arrow is required only for icon tooltips.
• Update default values for the OverflowTooltip component:
  • arrow={false}
  • nextToCursor={true}
• Table component updates
  • Deprecate TableHeaderRow and replace it with TableRow
  • Deprecate TableHeaderCell and replace it withTableCell
• Move the ref prop to the outermost element for Checkbox, Radio, and Switch components

  const combinedInputRef = useMergeRefs(ref, inputRef)

• Color style refinement
  • Figma: https://www.figma.com/file/xqZ6ZSFUg6q6KedXzj4rP1/Tonic---Style-Guidelines?type=design&node-id=13521-5530&mode=design&t=3LNrpa2CyoEpbMhI-4
  • Deprecate severity color scheme
  • Add functional color scheme
  • Provide examples for product-specific severity and risk colors

• Tag
  • Figma: https://www.figma.com/file/N84ebgxXVKZTMVClV2x0VP/Pattern-guideline?type=design&node-id=19406-59084&mode=design&t=PeX7kEn7mLby1l1l-4
  • Limit display to 5 menu items, with a scrollbar if exceeded
  • Enable keyboard navigation and operation
  • Highlight only the first item with a perfect match
• Deprecated components
  • AccordionCollapse is deprecated and will be removed in the next major release. Use AccordionContent instead.
  • ToastProvider is deprecated and will be removed in the next major release. Use ToastManager instead.
  • useToast is deprecated and will be removed in the next major release. Use useToastManager instead.
• Changed or removed props
  • Alert
    • Removed isCloseButtonVisible prop
  • Badge
    • Removed dotSize, isHidden, offset, and variantColor props
  • CheckboxGroup
    • Changed onChange(value, event) to onChange(value)
  • InputBase
    • Removed isInvalid prop
  • Menu
    • Removed openMenu and closeMenu props
  • Pagination
    • Removed ellipsisLabel, firstButton, lastButton, prevButton, and nextButton props
    • Changed onChange(event, value) to onChange(value)
  • Popover
    • Removed arrowAt, distance, hideArrow, and skidding props
    • Removed PopperArrowComponent and PopperArrowProps props from PopoverContent
  • Popper
    • Removed container prop
  • Portal
    • Removed container, isDisabled, and onRender props
  • Spinner
    • Removed color, strokeWidth, and speed props
  • Scrollbar
    • Removed disabled, minThumbSize, visibility, renderView, renderHorizontalTrack, renderHorizontalThumb, renderVerticalTrack, renderVerticalThumb, and thumbSize props
  • Tabs
    • Removed activateOnKeyPress, isFitted, isManual props
  • Table
    • Removed isHoverable prop
    • TableHeaderRow is deprecated. Use TableRow instead.
    • TableHeaderCell is deprecated. Use TableCell instead.
  • Tag
    • Removed isCloseButtonVisible, isInvalid, and variantColor props
  • Toast
    • Removed isCloseButtonVisible prop.
  • ToastManager
    • Removed container prop
  • Tooltip
    • Removed PopperArrowComponent, PopperArrowProps, arrowAt, hideArrow, hideDelay, showDelay, and closeOnMouseDown props
  • TooltipContent
    • Removed PopperArrowComponent and PopperArrowProps props

P3

• Move Calendar and DateInput components from @tonic-ui/react-lab to @tonic-ui/react
• Review the transition delay configuration for all components #691

@tonic-ui/react@2.0.0-alpha.0

What's Changed

• feat: prepare for v2 release by @cheton in #834
• feat: move date picker components from @tonic-ui/react-lab to @tonic-ui/react by @cheton in #858

@tonic-ui/react@1.29.2

What's Changed

• feat(styled-system): add complete support for grid CSS properties by @cheton in #854
• ci: bump Node.js to v18 by @cheton in 045cf68
• ci: update Next.js to the latest version by @cheton in 361e7f0
• fix: apply display: block to ensure Text-based components behave as block-level elements by @cheton in #859
• docs: include box-shadow for toasts in modal and drawer examples by @cheton in #860
• ci: remove deprecated NPM configuration setting scripts-prepend-node-path by @cheton in 82f144a
• docs: update .gitignore file to exclude the .next folder by @cheton in c6c111c

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.29.1...@tonic-ui/react@1.29.2

@tonic-ui/react@1.29.1

What's Changed

• docs: revise ToastManager usage to address toast animation issue by @cheton in #822
• docs: add examples for table column and row ordering by @cheton in #820
• docs: add examples of superscript text formatting by @cheton in #824
• chore: include @tonic-ui/utils in the dependencies of @tonic-ui/react-hooks by @cheton in #825
• feat(ARIA): incorporate checkbox, radio, and switch roles into their respective control box components by @cheton in #826
• chore(deps): bump ip from 2.0.0 to 2.0.1 by @dependabot in #830
• docs: update table column/row ordering examples according to the visual spec by @cheton in #828
• chore(deps): bump follow-redirects from 1.15.5 to 1.15.6 by @dependabot in #837
• docs: update examples for table column and row ordering by @cheton in #841
• docs: update v1 documentation by @cheton in #840
• fix(SearchInput): resolve composition event issue with CJK input methods in controlled inputs by @cheton in #850

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.29.0...@tonic-ui/react@1.29.1

@trendmicro/react-styled-ui@0.27.4

What's Changed

• ci: update Node.js version by @cheton in d613f45
• ci: update circleci/browser-tools to 1.4.3 by @cheton in 8c51b99
• chore: update ensure-type to ^1.5.1 by @cheton in a75227f
• docs: adjust Toast sample code for smooth animation by @tinaClin in #620
• docs: adjust Toast sample code (Part II) by @tinaClin in #622

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@trendmicro/react-styled-ui@0.27.3...@trendmicro/react-styled-ui@0.27.4

@tonic-ui/react@1.29.0

What's Changed

• feat: update ToastManager to enable passing transition props and specifying toast data by @cheton in #814

Migration Usage

Note: In order to avoid any disruptive changes, the default styling will be included in the next major release.

To adjust the default spacing of toasts, utilize the TransitionProps prop within the ToastManager. Customize the styling using the sx prop, as shown in the example below:

<TonicProvider
  colorMode={{
    defaultValue: 'dark',
  }}
  useCSSBaseline
>
  <PortalManager>
    <ToastManager
      TransitionProps={{
        sx: {
          '[data-toast-placement^="top"] > &:first-of-type': {
            mt: '4x', // the space to the top edge of the screen
          },
          '[data-toast-placement^="bottom"] > &:last-of-type': {
            mb: '4x', // the space to the bottom edge of the screen
          },
          '[data-toast-placement$="left"] > &': {
            ml: '4x', // the space to the left edge of the screen
          },
          '[data-toast-placement$="right"] > &': {
            mr: '4x', // the space to the right edge of the screen
          },
        },
      }}
    >
     <App />
    </ToastManager>
  </PortalManager>
</TonicProvider>

Next, specify the desired toast spacing and width by defining the style props:

const render = ({ onClose, placement }) => {
  const isTop = placement.includes('top');
  const toastSpacingKey = isTop ? 'pb' : 'pt';
  const styleProps = {
    [toastSpacingKey]: '2x', // 8px
    width: 320,
  };

  return (
    <Box sx={styleProps}>
      <Toast isClosable onClose={onClose}>
        <Text>This is a toast notification</Text>
      </Toast>
    </Box>
  );
};

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.28.1...@tonic-ui/react@1.29.0

@tonic-ui/react@1.28.1

What's Changed

• docs: enhance examples by replacing code blocks with the render function by @cheton in #810
• docs: migrate from InstantSearch v6 to v7 by @cheton in #815
• fix: the Switch component renders incorrect background color in checked and disabled states by @cheton in #818

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.28.0...@tonic-ui/react@1.28.1

@tonic-ui/react@1.28.0

What's Changed

• feat(Scrollbar): add support for programmable scrolling with scrollTop, scrollLeft, and scrollViewRef props by @cheton in #809

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.27.0...@tonic-ui/react@1.28.0

@tonic-ui/react@1.27.0

What's Changed

• chore(deps): bump axios from 1.5.1 to 1.6.1 by @dependabot in #805
• feat: enhance OverflowTooltip overflow detection for precise handling of non-integral width or height by @tinaClin in #806

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.26.0...@tonic-ui/react@1.27.0

@tonic-ui/react@1.26.0

What's Changed

• feat(react): improve accessibility with targeted :focus-visible focus styles for non-pointer devices by @cheton in #796
• chore(deps): bump @babel/traverse from 7.22.10 to 7.23.2 by @dependabot in #804

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/react@1.25.0...@tonic-ui/react@1.26.0