Skip to content

@tonic-ui/[email protected]
Compare
Choose a tag to compare
@cheton cheton released this 26 May 13:05
· 90 commits to v2 since this release
@tonic-ui/[email protected]
74518cf

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/[email protected]

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

image

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

image

@tonic-ui/[email protected]

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

image

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

image

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

  • 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
    If you were using the ref prop to get the checked status, rename ref to inputRef to retrieve the checked status.

    • Checkbox 
      - <Checkbox ref={checkboxRef} />
+ <Checkbox inputRef={checkboxRef} />
    • Radio 
      - <Radio ref={radioRef} />
+ <Radio inputRef={radioRef} />
    • Switch 
      - <Switch ref={switchRef} />
+ <Switch inputRef={switchRef} />
  • Tag
  • 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

Contributors

cheton
Assets 2
Loading