@tonic-ui/[email protected]

What's Changed

• chore(deps): bump braces from 3.0.2 to 3.0.3 by @dependabot in #876
• test(react): improve test coverage for Accordion, Textarea, and VisuallyHidden components by @cheton in #870
• test: enhance test coverage across packages (0620) by @cheton in #879
• chore(deps): bump ws from 8.16.0 to 8.17.1 by @dependabot in #878
• docs: enhance Contribution Guide and Migration Guide by @cheton in #883
• ci: enhance monorepo release flow with changesets by @cheton in #884
• ci: add changelog-github package to workspace for changelog generation using Changesets by @cheton in #888
• docs: enhance the Contributing Guidelines by adding Changesets instructions by @cheton in #890
• fix(react/OverflowTooltip): resolve tooltip misalignment issue with popup menu items by @tinaClin in #894
• feat(react): improve tooltip placement and offset calculations by @cheton in #897

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

@tonic-ui/[email protected]

What's Changed

• feat(codemod): add --extensions, --ignore-pattern, and --verbose as configurable command-line options by @cheton in #877

Usage

In @tonic-ui/codemod v2.1.0, the default file extension is now .js, changing from the previous defaults of .js,.jsx,.ts,.tsx,.json. You must manually specify the extension if needed.

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

Applies a `@tonic-ui/codemod` to the specified paths

Positionals:
  codemod  The name of the codemod to apply                             [string]
  paths    The paths to the codebase that will be forwarded to `jscodeshift`
                                                                        [string]

Options:
  --version         Show version number                                [boolean]
  --help            Show help                                          [boolean]
  --dry             dry run (no changes are made to files)
                                                      [boolean] [default: false]
  --extensions      transform files with these file extensions (comma separated
                    list)                               [string] [default: "js"]
  --ignore-pattern  ignore files that match a provided glob expression
                                        [string] [default: "**/node_modules/**"]
  --parser          the parser to use for parsing the source files
                    (--parser=babel|babylon|flow|ts|tsx)
                                                     [string] [default: "babel"]
  --print           print transformed files to stdout, useful for development
                                                      [boolean] [default: false]
  --verbose         show more information about the transform process
                    (--verbose=0|1|2)                      [number] [default: 0]
  --jscodeshift     pass options directly to jscodeshift
                                                       [string] [default: false]

Examples:
  npx @tonic-ui/codemod react/v2.0.0/import-react-icons src

For JavaScript files:

npx @tonic-ui/codemod@latest react/v2.0.0/import-react-icons . --extensions=js,jsx --verbose=2

For TypeScript files:

npx @tonic-ui/codemod@latest react/v2.0.0/import-react-icons . --extensions=ts,tsx --parser=tsx --verbose=2

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

@tonic-ui/[email protected]

What's Changed

• docs: update the table column resizing example to align with the visual specifications by @cheton in #872
• fix(react-icons): fix regression issue by adding missing vertical-align: middle style property to SVGIcon component by @cheton in #874

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

@tonic-ui/[email protected]

What's Changed

• ci: set default Tonic UI package version for CodeSandbox integration by @cheton in 2e6568a
• feat(docs): add playground for interactive exploration by @cheton in #838
• feat(styled-system): update pseudo class/element selectors by @cheton in #868
• fix(styled-system): correct handling of negative margin where calc() was erroneously included by @cheton in #869

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

@tonic-ui/[email protected]

What's Changed

• fix(styled-system): correct handling of negative margin where calc() was erroneously included by @cheton in #869

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

@tonic-ui/[email protected]

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

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

@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

@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
  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} />

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

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

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/[email protected]...@tonic-ui/[email protected]

@tonic-ui/[email protected]

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/[email protected]...@tonic-ui/[email protected]

@trendmicro/[email protected]

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