@tonic-ui/[email protected]

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

@tonic-ui/[email protected]

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

@tonic-ui/[email protected]

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

@tonic-ui/[email protected]

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

@tonic-ui/[email protected]

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

@tonic-ui/[email protected]

What's Changed

• feat: enhance the memoization of the setter function in useColorMode and useColorStyle Hooks by @cheton in #803
• feat: update ToastManager and PortalManager to optimize rendering and reduce unnecessary re-renders by @cheton in #802

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: implement Content Security Policy (CSP) by @cheton in #795
• feat(react): enhance controlled behavior of SearchInput using selectionStart and selectionEnd for cursor position preservation by @cheton in #800

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

• chore(deps): bump word-wrap from 1.2.3 to 1.2.4 by @dependabot in #786
• ci: add a GitHub action to update yarn.lock file by @cheton in #787
• feat: add ResizeHandle component by @cheton in #789
• ci: upgrade to Lerna 7 and update devDependencies by @cheton in #792
• feat: add Tree component by @cheton in #785

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(react): update color scheme for informative toast by @cheton in #781
• chore(deps): bump semver from 5.7.1 to 5.7.2 by @dependabot in #784
• feat: enable customization of inputProps for input elements within Checkbox, Radio, and Switch components by @cheton in #783

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: update default warning icon for alerts and toasts by @cheton in #779

  Before

  

  

  After

  

  

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