Release packages

[imodeljs-admin]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@itwin/itwinui-css@2.0.0

Major Changes

• #1548: Using aria-selected instead of iui-active in Tabs to set active styling.

• #1446: iui-avatar has been refactored to be a single <span>, and the status is now applied using the data-iui-status attribute. The colors have been updated to pass AAA contrast ratio.

• #1548: Combined tabs stripe variables: --iui-stripe-left and --iui-stripe-top into --iui-tabs-stripe-position; --iui-stripe-width and --iui-stripe-height into --iui-tabs-stripe-size.

• #1355: iui-transfer-list-listbox-label and iui-input-container classes were removed.

• #1255: iui-folder is updated to use display: grid. iui-tile-name is now moved outside of iui-tile-content for folder variant.

• #1420: <div class="iui-radio-tile-content"> has been removed from radio-tile. Also, data-iui-disabled attribute must be set on the radio-tile for browsers that don't support :has (firefox).

• #1573: Removed background from color-picker, date-picker/time-picker, and column-filter. Use iui-popover-surface class to add it back.

• #1489: --iui-color-dot-inset has been split into --iui-color-dot-inset-block and --iui-color-dot-inset-inline.

• #1369: The iui-breadcrumbs-item-overrides class name has been removed. Breadcrumbs items now use the iui-breadcrumbs-content class name.

• #1577: iui-scroll modifier is no longer needed on iui-menu.

• #1626: Improved carousel accessibility and changed the markup so that the dots are present before the slides.

• #1529: Removed location-marker component.

• #1469: - Replaced iui-slider-vertical class modifier with data-iui-orientation.

  • iui-slider-rail class is now ::before pseudo element of iui-slider.

• #1322: Removed input-container code from utils.css in favor of input-container.css.

• #1354: The following class names have been updated:

  • iui-header -> iui-expandable-header
  • iui-icon -> iui-expandable-block-icon
  • iui-title -> iui-expandable-block-title
  • iui-caption -> iui-expandable-block-caption

  The following class names have been removed and updated to be data attributes:

  • iui-expanded -> data-iui-expanded (boolean)
  • iui-small -> data-iui-size (default or small)
  • iui-borderless -> data-iui-variant (default or borderless)

• #1370: iui-progress-indicator-linear has been refactored to be a single <div>. Size, status, indeterminate variant, animation, etc are now specified using data attributes.

• #1523: Removed iui-tooltip-container and iui-tooltip-visible classes. The display is now toggled using the hidden HTML attribute, and the positioning should be managed using custom JS/CSS.

• #1302: border-box will now be set for all elements under iui-root.

• #1610: Replaced --iui-surface-border-color with --iui-surface-border for full customization of border. Also removed --iui-surface-border-radius and --iui-surface-background-color.

• #1328: 'iui-progress-overlay' has been renamed to 'iui-overlay' and moved to 'overlay.scss'

• #1295: iui-menu-item and iui-menu-description classes were removed.

• #1548: data-iui-scroll-placement attributes in Tabs were removed. Updated tabs start and end masks to be applied on scroll animation.

• #1356: iui-progress-radial has been refactored to be a single <div> instead of using a nested svg. Size and status have been moved to data attributes. Also it is recommended to explicitly set size when using in other components.

• #1556: Items inside button-group no longer need a wrapping <div>.

• #1304: Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: Header, Select, MenuItem, RadioTile, Tabs, Tile, ToggleSwitch, TreeNode, InputContainer (and all input variants).

• #1559: Changed iui-button-group-vertical class to iui-button-group with attribute data-iui-orientation="vertical".

• #1548: The iui-tabs element has changed from <ul> to <div>. iui-tabs children are no longer wrapped in an <li> element.

• #1247: Replaced the iui-alert-icon, iui-alert-button, and iui-alert-button-icon class names with iui-svg-icon, iui-button, and iui-button-icon respectively.

• #1269: All dialog variants have flex applied by default. This means the content should be wrapped with Dialog.Content or ModalContent for optimal layout.

• #1548: The iui-tab-label wrapper class has been removed. The iui-tab-label class now applies to the <span> which holds the tab's label. iui-tab-description is now a <span> element.

• #1270: Change line-height to use a unitless value.

Minor Changes

• #1355: Added iui-input-group-wrapper class to allow inline labels for input groups.
• #1373: Converted all physical CSS properties to their logical equivalents.
• #1355: Added iui-input-grid class for outer input styling.
• #1355: Added status styling to input and select.
• #1565: Updated menu styling and added iui-popover-surface class for standalone popovers.
• #1073: Added new TransferList component which is used to move one or more items between lists. Added the following subcomponents: TransferList.ListWrapper, TransferList.ListboxWrapper, TransferList.ListboxLabel, TransferList.Listbox, TransferList.Item, and TransferList.Toolbar
• #1355: Added padded styling to Icon using data-iui-padded attribute.
• #1362: All elements under the root will now get a default focus styling matching --iui-color-border-accent.
• #1355: Added iui-status-message class to wrap StatusMessage icon and content.
• #1363: iui-svg-icon now supports controlling size and fill using --iui-svg-size and --iui-svg-fill custom properties.

Patch Changes

• #1354: Expandable block animation now uses pure css instead of javascript for transitioning.
• #1609: Adjusted padding value for Surface.Body.
• #1632: Adjusted gap between adjacent icons in searchbox.
• #1351: .iui-toast-anchor can now be applied on a <button>.
• #1499: Removed special handling of iPhone notch in Header and SideNavigation.

@itwin/itwinui-react@3.0.0

Major Changes

• #1302: The dependencies on @itwin/itwinui-css and @itwin/itwinui-variable have been removed. This means @itwin/itwinui-react will bring its own stylesheet.

• #1296: Removed previously-deprecated typography components (Body, Headline, Leading, Small, Subheading, Title) which have been replaced by Text.

• #1548: Tabs are now always scrollable. Deprecated overflowOptions prop.

• #1330: Deprecated FileUploadTemplate. Removed all of its references.

• #1322: All css imports within components have been removed. @itwin/itwinui-react/styles.css must now be manually imported at the entrypoint.

• #1370: ProgressLinear has been refactored to be a single <div>.

• #1351: toaster import has been removed and replaced with useToaster which returns a toaster object with the same API.

• #1544: Removed iconDisplayStyle prop from LabeledInput and LabeledTextarea components. svgIcon is now added inline. Users must use StatusMessage to add custom icon to the message.

• #1371: Checkbox: className and style will now always be applied on the checkbox input element. Added new wrapperProps and labelProps to allow for styling of wrapper and label elements.

• #1514: Table now has better type support. Users must now import types from @itwin/itwinui-react/react-table instead of from @types/react-table.

• #1265: Removed the deprecated useTheme hook. <ThemeProvider> is now always required to be wrapped around all iTwinUI components.

• #1355: Removed inputStyle and inputClassName props from LabeledInput; style and className props are being passed down to input. Added wrapperProps, labelProps, messageProps, messageIconProps, inputWrapperProps to pass props to sub elements.

• #1433: Updated exports to prevent importing internal utilities.

• #1478: ThemeProvider now defaults the theme value to "inherit" and falls back to "light" there is no parent theme found. Also the inherit behavior has been made more resilient for cases where react context fails.

• #1626: Improved carousel accessibility and changed the markup so that the dots are present before the slides.

• #1278: Adjusted calculations in ButtonGroup's overflowButton callback, so that it respects overflowPlacement and considers the presence of the overflowButton itself.

• #1409: RadioTile's className and style props will now be applied on the <input> element instead of the wrapper. Added wrapperProps, iconProps, labelProps, subLabelProps to individually customize each part of the component.

• #1355: Removed selectStyle and selectClassName props from LabeledSelect; style and className props are being passed down to textarea. Added wrapperProps, labelProps, messageProps, messageIconProps to pass props to sub elements.

• #1469: - Updated internal DOM structure in Slider.

• #1302: All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.

• #1506: Replaced tippy.js with floating-ui in all popover-based components. While the basic usage is unchanged, all advanced props from tippy are no longer available.

  Components affected: Select, ComboBox, DropdownMenu, DropdownButton, SplitButton.

• #1383: Removed previously-deprecated UserIcon and UserIconGroup components. Also removed userIcon prop from Header.

• #1355: Removed textareaStyle and textareaClassName props from LabeledTextarea; style and className props are being passed down to textarea. Added wrapperProps, labelProps, messageProps, messageIconProps to pass props to sub elements.

• #1384: Removed previously-deprecated Wizard component (replaced by Stepper and WorkflowDiagram).

• #1300: modalRootId and ownerDocument props have been removed from Modal, in favor of the new portal prop (also available in Dialog).

• #1458: Added wrapperProps, contentProps, topProps, and bottomProps to Side Navigation component to improve customization. Top-level props (className, styling, etc) now passed to SideNav button instead of to the wrapper.

• #1255: Updated Tile component to allow composition of customizable subcomponents: <Tile.Wrapper/>, <Tile.Name/>, <Tile.NameIcon/>, <Tile.NameLabel/>, <Tile.ThumbnailArea/>, <Tile.ThumbnailPicture/>, <Tile.BadgeContainer/>, <Tile.TypeIndicator/>, <Tile.QuickAction/>, <Tile.ContentArea/>, <Tile.Description/>, <Tile.MoreOptions/>, <Tile.Metadata/>, <Tile.Buttons/>.

• #1356: ProgressRadial has been refactored to be a single <div> instead of using a nested svg. Also it is recommended to explicitly set size when using in other components.

• #1295: Deprecated MenuItem's icon and badge props in favor of new startIcon and endIcon props. Also affects Select and ComboBox options.

• #1311: - Removed Tippy.js as dependency in Tooltip. Using FloatingUI instead.

• #1298: Props types will no longer be exported for any component. Use React.ComponentProps instead.

• #1435: Improving customization of SplitButton with wrapperProps and menuButtonProps. ClassName now passed to the button instead of the component wrapper.

• #1461: Changed disabled button behavior to make them focusable and use aria-disabled instead of disabled attribute.

• #1583: Bumped minimum react version to 17. If you're still on react 16, please update to react 17 (which has no breaking changes).

• #1304: Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: Header, Select, MenuItem, RadioTile, Tabs, Tile, ToggleSwitch, TreeNode, InputContainer (and all input variants).

• #1389: iTwinUI now correctly supports both ESM and CJS environments.

• #1565: Removed Menu component. Use DropdownMenu instead.

• #1346: The build now targets es2020 instead of es2018.

• #1400: ErrorPage will now dynamically import illustrations. The peer dependency on @itwin/itwinui-illustrations-react will need to be manually installed if using ErrorPage.

• #1269: All dialog variants have flex applied by default. This means the content should be wrapped with Dialog.Content or ModalContent for optimal layout.

• #1406: Removed setFocus prop from Checkbox, ColorPicker, ComboBox, Input, LabeledInput, LabeledTextarea, Radio, RadioTile, Select, Slider, ToggleSwitch. Users can use ref to focus the element.

• #1388: Removed deprecated HorizontalTabs and VerticalTabs (replaced by orientation prop in Tabs).

Minor Changes

• #1440: Adding the ability for every DOM node to have a custom className passed to it.
  New prop for FileUpload component: contentProps

• #1355: Added status prop to Input, Textarea and Select.

• #1510: Added domProps to allow Toast's DOM customisation.

• #1355: Added two new components for building complex input layouts.

  • InputGrid for the "outer" layout (label, inputs and statusMessage)
  • InputWithDecorations for the "inner" layout (start icon/button, end icon/button)

  LabeledInput, LabeledSelect, LabeledTextarea and table DatePickerInput have been updated to make use of these new components internally.

• #1531: Selected options in Select/ComboBox will now have a checkmark.

• #1573: Added applyBackground prop to ColorPicker and DatePicker.

• #1373: Converted all physical CSS properties to their logical equivalents.

• #1321: Added disabled prop to ExpandableBlock component. When activated, it triggers the "disabled" CSS styling for the ExpandableBlock and disables user interaction with it.

• #1355: Added new padded prop to Icon.

• #1457: Added htmlName prop to the HeaderButton subcomponent which handles the native name attribute in <button>.

• #1548: Added composition API to Tab. Subcomponents: Wrapper, TabList, Tab, TabLabel, TabIcon, TabDescription, Actions, Panel.

• #1437: Added headerWrapperProps, headerProps, bodyProps, and emptyTableContentProps to make each part of the Table component more customizable.

• #1430: Adding the ability for each node element in Stepper to have a custom prop.
  New props include: stepProps, trackContentProps, circleProps, nameProps, labelProps, labelCountProps

• #1073: Added new TransferList component which is used to move one or more items between lists. Added the following subcomponents: TransferList.ListWrapper, TransferList.ListboxWrapper, TransferList.ListboxLabel, TransferList.Listbox, TransferList.Item, and TransferList.Toolbar

• #1247: Alert can now be used through customizable subcomponents. The onClose, clickableText, and clickableTextProps props have been deprecated.

• #1412: All styles have been wrapped inside a cascade layer named itwinui.

• #1435: Improving customization of Button with new props: labelProps, startIconProps, and endIconProps.
  Improving customization of IconButton with iconProps.

• #1506: Added new Popover component for public use.

• #1323: Added placement prop to Dialog to allow placing it at one of the corners.

• #1298: Most components are now polymorphic and forward their rest props and ref.

• #1419: Added htmlSize prop to the Input component which handles the native size attribute in <input>.

• #1328: Created new Overlay component with customizable subcomponents: Overlay.Wrapper, Overlay.HiddenContent, Overlay.Overlay

• #1369: Added new Breadcrumbs.Item subcomponent to use within Breadcrumbs. Directly passing <a>/<Button>/<span> as children is still supported but is deprecated.

• #1362: All elements under the root will now get a default focus styling matching --iui-color-border-accent.

• #1403: Updated DropdownMenu to additionally accept list of JSX elements or a JSX fragment for menuItems prop,

• #1407: Adding the ability for each node element in NonIdealState to have a custom className.

• #1610: Added border prop to Surface.

• #1477: Added a new portalContainer prop to ThemeProvider. When specified, all floating elements (tooltips, toats, dialogs) under the ThemeProvider will read this prop from context and portal into it.

• #1354: Updated ExpandableBlock to support customizable subcomponents: <ExpandableBlock.Wrapper/>, <ExpandableBlock.Trigger/>, <ExpandableBlock.ExpandIcon/>, <ExpandableBlock.LabelArea/>, <ExpandableBlock.Title/>, <ExpandableBlock.Caption/>, <ExpandableBlock.EndIcon/>, <ExpandableBlock.Content/>

  The old api is still supported for backwards compatibility.

• #1466: Adding the ability for every DOM node inside DatePicker component to have a custom className passed to it.

• #1567: Added endIconProps prop to ComboBox.

• #1523: Added ariaStrategy prop to Tooltip. Can be used to change how the tooltip is associated with the trigger element.

Patch Changes

• #1605: Added 'use client' directive for React Server Components support.
• #1533: Fixed missing accessible name in SplitButton.
• #1649: ThemeProvider will now inherit portalContainer if also inheriting theme.
• #1446: Avatar has been refactored to be a single <span>. The colors have been updated to pass AAA contrast ratio.
• #1354: Expandable block animation now uses pure css instead of javascript for transitioning.
• #1609: Adjusted padding value for Surface.Body.
• #1632: Adjusted gap between adjacent icons in searchbox.
• #1492: Fixed aria-owns syntax for TreeNode
• #1618: Improved accessibility of ColorPicker/ColorPalette/ColorSwatch.
• #1389: The build output is now more readable, using a combination of prettier for formatting and tslib for import helpers.
• #1360: The color-scheme property will now be correctly set for dark theme, resulting in better theming of built-in html elements.
• #1495: Added accessible name to dropdown menu button in HeaderSplitButton.
• #1486: DatePicker date tables now have accessible labels.
• #1496: Added accessible button name to SideNavigation expand button.
• #1499: Removed special handling of iPhone notch in Header and SideNavigation.
• #1505: Gave accessible label to the sub-row toggle in .
• #1397: Avatar will no longer incorrectly set aria-label on the status dot.
• #1404: aria-orientation attribute removed from ButtonGroup to meet accessibility requirements.
• #1420: RadioTile DOM has been simplified to remove a content wrapper div.

@itwin/itwinui-variables@3.0.0

Major Changes

• #1359: iui-root has been removed. data-iui-theme must now always be set in order to use variables.

Minor Changes

• #1302: All selectors have been wrapped with :where to nullify specificity.

Patch Changes

• #1360: The color-scheme property will now be correctly set for dark theme, resulting in better theming of built-in html elements.

[mayank99]

Changes made on top of regular changeset process:

• updated dependent package versions (in 5416bf1) to make future changeset PRs smaller
• removed old changelog entries, reordered new ones, and updated wording for readability purposes (in 38d573d)
• added v3 migration guide link to readmes (in 704b1f8)