@tonic-ui/[email protected]

What's Changed

• feat: add OverflowTooltip component by @cheton in #700
• feat: prevent default mouse and keyboard events on disabled menu items and tabs by @cheton in #698

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 documentation with CodeSandbox integration and Table of Contents (TOC) by @cheton in #704

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): enhance close button components to allow passing custom props in Alert, Drawer, Modal, Tag, and Toast components by @cheton in #687

Highlight

This release includes the following improvements:

• Rename ToastProvider and useToast to ToastManager and useToastManager to provide better naming conventions and consistency.

  // packages/react/src/toast/index.js
  import ToastManager from './ToastManager';
  import useToastManager from './useToastManager';
  
  export {
    ToastManager,
    useToastManager,
  };
  
  export const ToastProvider = ToastManager; // alias of ToastManager
  export const useToast = useToastManager; // alias of useToastManager

  You can continue using ToastProvider and useToast, but the original naming will be deprecated in the next major release. Please update your code accordingly.

  import { TonicProvider, ToastManager } from '@tonic-ui/react';
  
  function App() {
    return (
      <TonicProvider>
        <ToastManager placement="bottom-right">
          {/* Your app goes here */}
        </ToastManager>
      </TonicProvider>
    );
  }

  import { useToastManager } from '@tonic-ui/react';
  
  function Component() {
    const toast = useToastManager();
    /* You component goes here */
  }

• Introduce new functionality to the DrawerCloseButton, ModalCloseButton, AlertCloseButton, ToastCloseButton, and TagCloseButton components, allowing custom props to be passed in. This provides greater flexibility for using these components.

  If you choose to use above components, the isClosable prop is unnecessary and can be left out. However, for the AlertCloseButton, ToastCloseButton, and TagCloseButton, you must control the position by yourself.

  To help illustrate usage, we have provided some examples below:

  How to close a drawer

  Using the isClosable prop to

  The isClosable prop is used to make a drawer closable by adding a close button to it. By default, the value of isClosable is false. To make a drawer closable, set isClosable to true.

  <Drawer isOpen={isOpen} isClosable onClose={onClose}>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerHeader />
      <DrawerBody />
      <DrawerFooter />
    </DrawerContent>
  </Drawer>

  Using the DrawerCloseButton component

  The DrawerCloseButton component provides an easy way to add a close button to a drawer. This button is specifically designedto handle closing the drawer, so you don't need to write any additional code to handle it. If you use DrawerCloseButton, youcan omit the isClosable prop in the Drawer component.

  Besides the default functionality of the DrawerCloseButton, you can also pass additional props, such as data-test or data-tracking attributes, to the DrawerCloseButton component as needed.

  <Drawer isOpen={isOpen} onClose={onClose}>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerHeader />
      <DrawerBody />
      <DrawerFooter />
      <DrawerCloseButton data-test="drawer-close-button" />
    </DrawerContent>
  </Drawer>

  How to close a modal

  Using the isClosable prop

  The isClosable prop is used to make a modal closable by adding a close button to it. By default, the value of isClosable is false. To make a modal closable, set isClosable to true.

  <Modal isOpen={isOpen} isClosable onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader />
      <ModalBody />
      <ModalFooter />
    </ModalContent>
  </Modal>

  Using the ModalCloseButton component

  The ModalCloseButton component provides an easy way to add a close button to a modal. This button is specifically designed to handle closing the modal, so you don't need to write any additional code to handle it. If you use ModalCloseButton, you canomit the isClosable prop in the Modal component.

  Besides the default functionality of the ModalCloseButton, you can also pass additional props, such as data-test or data-tracking attributes, to the ModalCloseButton component as needed.

  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader />
      <ModalBody />
      <ModalFooter />
      <ModalCloseButton data-test="modal-close-button" />
    </ModalContent>
  </Modal>

  How to close an alert

  Using the isClosable prop

  The isClosable prop is used to make an alert closable by adding a close button to it. By default, the value of isClosable is false. To make an alert closable, set isClosable to true.

  <Alert variant="solid" severity="success" isClosable onClose={onClose}>
    <Text>This is a success alert.</Text>
  </Alert>

  function Component() {
    const [isOpen, onClose] = useToggle(true);
    return (
      <Collapse in={isOpen} unmountOnExit>
        <Alert variant="solid" severity="success" isClosable onClose={onClose}>
          <Text>This is a success alert.</Text>
        </Alert>
      </Collapse>
    );
  }

  Using the AlertCloseButton component

  The AlertCloseButton component provides an easy way to add a close button to an alert. This button is specifically designed to handle closing the alert, so you don't need to write any additional code to handle it. If you use AlertCloseButton, you can omit the isClosable prop in the Alert component.

  Besides the default functionality of the AlertCloseButton, you can also pass additional props, such as data-test or data-tracking attributes, to the AlertCloseButton component as needed.

  <Alert variant="solid" severity="success" onClose={onClose}>
    <Text pr="10x">This is a success alert.</Text>
    <AlertCloseButton top={3} right={7} position="absolute" data-test="alert-close-button" />
  </Alert>

  When using the AlertCloseButton component, be sure to manually adjust its position. In the example above, the close button is positioned absolutely, with 3 pixels from the top and 7 pixels from the right of its parent element.

  function Component() {
    const [isOpen, onClose] = useToggle(true);
    return (
      <Collapse in={isOpen} unmountOnExit>
        <Alert variant="solid" severity="success" onClose={onClose}>
          <Text pr="10x">This is a success alert.</Text>
          <AlertCloseButton top={3} right={7} position="absolute" data-test="alert-close-button" />
        </Alert>
      </Collapse>
    );
  }

  How to close a toast

  Using the isClosable prop

  The isClosable prop is used to make a toast closable by adding a close button to it. By default, the value of isClosable is false. To make a toast closable, set isClosable to true.

  <Toast appearance="success" isClosable onClose={onClose} width={320}>
    <Text>This is a success toast.</Text>
  </Toast>

  function Component() {
    const [isOpen, onClose] = useToggle(true);
    return (
      <Collapse in={isOpen} unmountOnExit>
        <Toast appearance="success" isClosable onClose={onClose} width={320}>
          <Text>This is a success toast.</Text>
        </Toast>
      </Collapse>
    );
  }

  Using the ToastCloseButton component

  The ToastCloseButton component provides an easy way to add a close button to a toast. This button is specifically designed to handle closing the toast, so you don't need to write any additional code to handle it. If you use ToastCloseButton, you canomit the isClosable prop in the Toast component.

  Besides the default functionality of the ToastCloseButton, you can also pass additional props, such as data-test or data-tracking attributes, to the ToastCloseButton component as needed.

  <Toast appearance="success" onClose={onClose} width={320}>
    <Text pr="10x">This is a success toast.</Text>
    <ToastCloseButton top={10} right={8} position="absolute" data-test="toast-close-button" />
  </Toast>

  When using the ToastCloseButton component, be sure to manually adjust its position. In the example above, the close button is positioned absolutely, with 10 pixels from the top and 8 pixels from the right of its parent element.

  function Component() {
    const [isOpen, onClose] = useToggle(true);
    return (
      <Collapse in={isOpen} unmountOnExit>
        <Toast appearance="success" onClose={onClose} width={320}>
          <Text pr="10x">This is a success toast.</Text>
          <ToastCloseButton top={10} right={8} position="absolute" data-test="toast-close-button" />
        </Toast>
      </Collapse>
    );
  }

  How to close a tag

  Using the isClosable prop

  The isClosable prop is used to make a tag closable by adding a close button to it. By default, the value of isClosable is false. To make an alert closable, set isClosable to true.

  <Tag variant="solid" isClosable onClose={onClose}>
    <Text>This is a tag</Text>
  </Tag>

  function Component() {
    const [isOpen, onClose] = useToggle(true);
    return (
      <Fade in={isOpen} unmountOnExit>
        <Tag variant="solid" isClosable onClose={onClose}>
          <Text>This is a tag</Text>
        </Tag>
      </Fade>
    );
  }

  Using the TagCloseButton component

  The TagCloseButton component provides an easy way to add a close button to a tag. This button is specifically designed to handle closing the tag, so you don't need to write any additional code to handle it. If you use TagCloseButton, y...

@tonic-ui/[email protected]

What's Changed

• feat(utils): add a isNullish method (alias of isNullOrUndefined) to check whether a value is either null or undefined by @cheton in #692

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): set outlineOffset="unset" to fallback to the initial value if the outline is not zero by @cheton in #696

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(styled-system): add outlineTransform to transform the outline property to fit the needs of high-contrast mode users by @cheton in #693

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): set outlineOffset="unset" to fallback to the initial value if the outline is not zero by @cheton in #696

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): remove the default outline for tabindex="-1" for accessibility reasons by @cheton in #694

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): refactor Scrollbar to use MutationObserver for detecting DOM node changes by @cheton in #689

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: remove the close icon after resetting value of SearchInput component by @cheton in #683

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