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.
ToastManager
usage to address toast animation issue by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/822
@tonic-ui/utils
in the dependencies of @tonic-ui/react-hooks
by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/825
checkbox
, radio
, and switch
roles into their respective control box components by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/826
SearchInput
): resolve composition event issue with CJK input methods in controlled inputs by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/850
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
ToastManager
to enable passing transition props and specifying toast data by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/814
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]
InstantSearch
v6 to v7 by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/815
Switch
component renders incorrect background color in checked and disabled states by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/818
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
scrollTop
, scrollLeft
, and scrollViewRef
props by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/809
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
OverflowTooltip
overflow detection for precise handling of non-integral width or height by @tinaClin in https://github.com/trendmicro-frontend/tonic-ui/pull/806
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
:focus-visible
focus styles for non-pointer devices by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/796
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
useColorMode
and useColorStyle
Hooks by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/803
ToastManager
and PortalManager
to optimize rendering and reduce unnecessary re-renders by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/802
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
SearchInput
using selectionStart
and selectionEnd
for cursor position preservation by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/800
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
yarn.lock
file by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/787
ResizeHandle
component by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/789
devDependencies
by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/792
Tree
component by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/785
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]
inputProps
for input elements within Checkbox
, Radio
, and Switch
components by @cheton in https://github.com/trendmicro-frontend/tonic-ui/pull/783
Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]