@tonic-ui/[email protected]

What's Changed

• fix: correct arrow position when enabling popper's flip modifier by @cheton in #761
  • Popover demo
  • Tooltip demo

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: add Code component to display inline code in a monospace font by @cheton in #756
  https://trendmicro-frontend.github.io/tonic-ui/react/latest/components/code
• feat: add table layout support to the Table component by @cheton in #745
  https://trendmicro-frontend.github.io/tonic-ui/react/latest/components/table
  
• feat: add TableColumnResizeHandle component by @cheton in #758
  https://trendmicro-frontend.github.io/tonic-ui/react/latest/components/table#column-resizing
• feat: add InvertedMode component for color mode inversion by @cheton in #759
  https://trendmicro-frontend.github.io/tonic-ui/react/latest/components/color-mode/invertedmode

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: update CSS Variables and Box pages by @cheton in 0f601aa
• docs: resizable side navigation menu by @cheton in #757

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 focus control for Drawer, Modal, and Tooltip components by @cheton in #748

Highlight

This release introduces several new props to control the focus behavior in the Drawer, Modal, and Tooltip components. These changes are designed to address an issue identified in #345, where the focus is restored to the initially focused element upon closing the drawer or modal, causing an unexpected display of the tooltip.

Drawer

Name	Type	Default	Description
returnFocusOnClose	boolean	true	If true, the focus will be restored to the element that was focused on when the drawer was initially opened. ⚠️ This only works if ensureFocus is set to true.

Modal

Name	Type	Default	Description
returnFocusOnClose	boolean	true	If true, the focus will be restored to the element that was focused on when the modal was initially opened. ⚠️ This only works if ensureFocus is set to true.

Tooltip

Name	Type	Default	Description
closeOnPointerDown	boolean	true	If true, the tooltip will close while the pointer is pressed down.
openOnFocus	boolean	true	If true, the tooltip will open upon receiving focus.

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: add useCSSVariables option to the theme config by @cheton in #732
• feat: add sx prop to provide a superset of CSS that maps values directly from the theme by @cheton in #747
  • Read more on the sx prop page.

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: add useCSSVariables option to the theme config by @cheton in #732
• feat: add sx prop to provide a superset of CSS that maps values directly from the theme by @cheton in #747

Highlight

Superset of CSS

The sx prop supports CSS syntax including child and pseudo-selectors, media queries, raw CSS values, and more. Here are a few examples of how you can implement these CSS features:

• Using pseudo-selectors:

  <Box
    sx={{
      ':hover': {
        backgroundColor: 'gray:10',
      },
    }}
  />

• Using media queries:

  <Box
    sx={{
      '@media print': {
        width: 300,
      },
    }}
  />

• Using nested selectors:

  <Box
    sx={{
      '& .child-selector': {
        backgroundColor: 'white:secondary',
      },
    }}
  />

Read more on the sx prop page.

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: adjust the background color for OptionGroup and Option components by @cheton in #743
• feat: add .12 and .08 overlays to the color style for highlighted and selected background color by @cheton in #738
• fix: fix a regression issue with border color display in table components by @cheton in #741

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 the table component colors to align with the design guidelines by @cheton in #737
  • Added role attributes to table components

    Component	role attribute
    Table	table
    TableHeader	rowgroup
    TableHeaderRow	row
    TableHeaderCell	columngroup
    TableBody	rowgroup
    TableRow	row
    TableCell	cell

  • Corrected the border color for the table in light mode
  • Corrected the background color for selected menu items in light mode

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: add isObject function by @cheton in #731 (3b8525e)

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: add support for CSS variables by @cheton in #731

Highlight

Tonic UI now has a default behavior of internally converting theme tokens defined in the theme to CSS variables.

For example, consider a theme object that looks like this:

const theme = {
  colors: {
    'gray:10': '#fafafa',
    'gray:20': '#f7f7f7',
  },
};

When this theme is passed to TonicProvider, Tonic UI will generate CSS variables automatically, as shown below:

:root {
  --tonic-colors-gray-10: #fafafa;
  --tonic-colors-gray-20: #f7f7f7;
}

These CSS variables can then be used to style components, providing a consistent look and feel throughout the application.

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