@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]