@itwin/[email protected]

Patch Changes

• a987bc9: Fixed issue with Table autoscroll not completely showing a given row.

@itwin/[email protected]

Patch Changes

• d3844a0: Dialog content won't overflow off smaller screen sizes when the content is too big

@itwin/[email protected]

Patch Changes

• cbcd97a: Fixed an issue in ComboBox where the height of empty state content was not getting updated when using enableVirtualization.

@itwin/[email protected]

Patch Changes

• d6d4d76: Fixed an issue where TablePaginator buttons were causing postbacks when used inside a form.

@itwin/[email protected]

Minor Changes

• 054bc3b: <Avatar>'s image now supports passing <svg> too

  <Avatar image={<SvgUser />} />

• 06476ad: Added new Flex utility component and optional Flex.Spacer/Flex.Item subcomponents to make it easier to work with CSS flexbox and use iTwinUI design tokens for gap.

  <Flex gap='xl' justifyContent='center'>
    <div>...</div>
    <div>...</div>
  </Flex>

  <Flex>
    <Flex.Item>...</Flex.Item>
    <Flex.Spacer />
    <Flex.Item>...</Flex.Item>
    <Flex.Item>...</Flex.Item>
  </Flex>

• 44446e5: DropdownButton now exposes dropdownMenuProps to allow control over all popover props, such as placement.

Patch Changes

• Updated dependencies
  • @itwin/[email protected]

@itwin/[email protected]

Minor Changes

• 06476ad: Added new Flex utility component and optional Flex.Spacer/Flex.Item subcomponents to make it easier to work with CSS flexbox and use iTwinUI design tokens for gap.

  <Flex gap='xl' justifyContent='center'>
    <div>...</div>
    <div>...</div>
  </Flex>

  <Flex>
    <Flex.Item>...</Flex.Item>
    <Flex.Spacer />
    <Flex.Item>...</Flex.Item>
    <Flex.Item>...</Flex.Item>
  </Flex>

Patch Changes

• fd2e523: Alert: close button's focus color now matches the status color.
• a1a8c74: Resizable dialog now has a min height set so that it always includes the button bar.

@itwin/[email protected]

Minor Changes

• c06caff: Added actions prop to Tabs to add right/bottom content to the horizontal/vertical tabs.

  <Tabs
    // ...
    actions={[
      <Button key={'Small'} size={'small'}>
        Small size button
      </Button>,
      <Button key={'Normal'}>Normal size button</Button>,
    ]}
  >
    // ...
  </Tabs>

• ec26b72: Anchor can now be rendered as a button using as prop.

  <Anchor as='button' onClick={() => {}}>
    ...
  </Anchor>

• dd13257: Added new Icon component for displaying svgs

  • Supports size and fill props

  <Icon size='medium' fill='positive'>
    <svg>...</svg>
  </Icon>

Patch Changes

• 8e319be: Removes transitions for Toast component when prefer-reduced-motion is active
• 24a0cf9: Fixed an issue where Table's onBottomReached callback was not being invoked when using strict mode with react 18.
• Updated dependencies
  • @itwin/[email protected]

@itwin/[email protected]

Minor Changes

• f7caf38: Added new iui-tabs-actions-wrapper and iui-tabs-actions to .iui-tabs-wrapper to add right/bottom content to the horizontal/vertical tabs.

  <div class="iui-tabs-wrapper iui-horizontal">
    <ul class="iui-tabs iui-default">
      ...
    </ul>
  
    <div class="iui-tabs-actions-wrapper">
      <div class="iui-tabs-actions">...</div>
    </div>
  
    <div class="iui-tabs-content">...</div>
  </div>

• dd13257: Added new iui-svg-icon class for displaying svgs

  • Supports data-iui-icon-size attribute for size. Can be one of: 's', 'm', 'l', 'auto'
  • Supports data-iui-icon-color attribute for fill. Can be one of: 'informational', 'positive', 'warning', 'negative'

  <span
    class="iui-svg-icon"
    data-iui-icon-size="m"
    data-iui-icon-color="positive"
  >
    <svg>...</svg>
  </span>

Patch Changes

• ec26b72: Anchor can now be rendered as a button using as prop.

  <Anchor as='button' onClick={() => {}}>
    ...
  </Anchor>

@itwin/[email protected]

Patch Changes

• 8e92e7e: ComboBox dropdown width will now stay fixed when enableVirtualization is true.

@itwin/[email protected]

Minor changes

• NotificationMarker: Add new NotificationMarker component (#829)
• Table: onFilter gets filtered rows (#958)
• Timepicker: Add combined time column (#844)

Patch changes

• Table: Reset columnOrder when columns changes (#983)
• Use import type instead of import { type } for supporting older typescript versions (#996)