Styled Ui Versions Save

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.

@tonic-ui/[email protected]

2 weeks ago

What's Changed

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

@tonic-ui/[email protected]

4 months ago

What's Changed

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]

5 months ago

What's Changed

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

@tonic-ui/[email protected]

6 months ago

What's Changed

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

@tonic-ui/[email protected]

6 months ago

What's Changed

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

@tonic-ui/[email protected]

7 months ago

What's Changed

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

@tonic-ui/[email protected]

7 months ago

What's Changed

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

@tonic-ui/[email protected]

8 months ago

What's Changed

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

@tonic-ui/[email protected]

9 months ago

What's Changed

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

@tonic-ui/[email protected]

10 months ago

What's Changed

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