Skip to main content

Components - Release notes

  • Release notes

3.1.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 2.1.0.

Deprecations​

AiLoadingIndicator​

  • The aria-disabled prop is deprecated, as the attribute is only intended for interactive elements.

DataTable​

  • Column type date is now deprecated. Use datetime instead. (APPDEV-4005)

  • The onDownloadData on the DataTable element is now deprecated. Please use it via the DataTable.DownloadData toolbar slot instead. (APPDEV-16234)

TimeframeSelector​

  • The _isSelected prop on the TimeframeSelector.PresetItem slot is now deprecated. (APPDEV-16158)

Updates​

General​

  • All components in content, editors, notifications, tables and typography now expose className, style, data-testid, data-dtrum-mask and data-dtrum-allow. Additionally, all remaining props are forwarded to the root of the component. (APPDEV-16251)
  • Behavior tracking attributes are now supported in all components in content, tables, editors, notifications, and typography, as well as in the Overlay and Tooltip component. (APPDEV-16246)

Charts​

  • Applied a more performant width/height/truncation method to Honeycomb, Pie, Donut, Treemap, Sparkline, and Single Value. (APPDEV-15420)
  • The chart legend only shows an outline when the navigation is done via the keyboard. (APPDEV-16596)
  • Fixed magnifier to dynamically round values based on the value per pixel. (APPDEV-16624)

Overlays​

  • Possibly overlapping overlays are now closed when focusing the FilterField. (APPDEV-16114)

AnnotationsChart​

  • Fixed annotation marker symbols in the tooltip not being visible on dark theme. (APPDEV-16715)
  • Fixed an issue where icon symbols set via the symbol prop on the markers would disappear after programmatically changing indicatorsDisplay or any other prop that triggers a component re-render. (APPDEV-16647)

CategoricalBarChart​

  • The width prop now accepts CSS string values (e.g., "100%", "500px") in addition to numeric values.

convertToColumns​

  • Now maps timestamp and timeframe fields to datetime column type instead of the deprecated date. (APPDEV-4005)

DataTable​

  • Datetime columns now accept date, time, or datetime as shorthand formatter values, making it easy to show only the date or time portion without providing full FormatDateOptions. (APPDEV-4005)
  • The scrollToRow method now supports an additional align parameter (start, center, end) to control where the target row is positioned within the table’s visible area. Defaults to start. (APPDEV-14431)
  • The onDownloadData callback is now available on the DataTable.DownloadData toolbar slot. (APPDEV-16234)
  • Batch selection now handles changing data and selection across multiple tables correctly. (APPDEV-16683)
  • Sparkline columns allow configuration of the xAxis. (APPDEV-13820)
  • Adds data-dt-name tracking attributes to more interactive elements: sorting/ordering header cells and sorting icons, row selection and subrow expand/collapse buttons, column resize and row drag-and-drop handles, and column settings modal controls. (APPDEV-16589)
  • Pressing Enter on an interactive element within a row (e.g. a button) no longer activates or deactivates the row. This aligns keyboard behavior with mouse behavior. (APPDEV-16586)

DateTimePicker​

  • No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)

DonutChart​

  • width prop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)

FilterField​

  • The validatorMap now supports displayValue and details on keys and values, enabling richer suggestions with labels and descriptions. (APPDEV-16298)
  • All filter field suggestions are now flattened in the DOM to support virtualization for individual items of suggestion groups. A11y is still ensured using aria attributes to link items to groups. (APPDEV-10064)
  • Custom validation types can now be defined via the customTypes prop, allowing type-specific value constraints to be used in the validatorMap. (APPDEV-16028)
  • No longer incorrectly marks values inside an in() operator as invalid when the key is configured with a special type (e.g. IPAddress, UID, Timestamp, SmartscapeId) in the validatorMap. (APPDEV-16555)

FormField​

  • Validation now automatically updates when validation-related props (like required) change dynamically. (APPDEV-16103)

GaugeChart​

  • The seriesActions callback's series parameter type now includes GaugeChartData to reflect that the actual value passed at runtime can also be an object. (APPDEV-16790)
  • Tooltip hover area is now constrained to the visible gauge arc and labels, preventing the tooltip from appearing over empty space around the chart. (APPDEV-16692)
  • Now the GaugeChart supports units. (APPDEV-15935)

HoneycombChart​

  • HoneycombChart now supports behavioral tracking properties. (APPDEV-16377)

NumberInput​

  • NumberInput is now deprecated in favor of NumberInputV2.

NumberInputV2​

  • Introduce NumberInputV2. NumberInputV2 aligns with the current forms architecture and delivers more consistent input behavior across Strato form controls.

API changes to consider when migrating:

  • min and max now accept number | undefined (previously number | string | undefined).
  • Parsing/formatting is stricter and locale-aware, including intermediate input states and paste normalization.
  • step vs stepMultiplier: - step defines the valid value interval for validation and the base increment/decrement amount (for example step={0.5} only allows values aligned to 0.5 and steps by 0.5). - stepMultiplier is a positive integer multiplied by step (or 1 if no step is set) to determine how much the value changes when using arrow keys, the scroll wheel, or the stepper buttons. - You can combine both: e.g. step={0.5} to validate allowed values and stepMultiplier={4} to increment/decrement by 2. (APPDEV-3996)

Overlay​

  • Fixed empty aria-labelledby attribute being rendered when no label is provided, which violated accessibility guidelines. (APPDEV-16714)

PieChart​

  • width prop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)

Radio​

  • Remove redundant aria-checked attribute from native radio inputs to fix accessibility violation. (APPDEV-16711)

SegmentSelector​

  • Add default aria-label which is also shown in an empty compact SegmentSelector. (APPDEV-16433)

Select​

  • Select now has a minWidth set when contentWidth is content and a Filter.Filter is present, preventing the SearchInput from becoming too narrow. (APPDEV-16635)

SingleValue​

  • SingleValue now supports behavioral tracking properties. (APPDEV-16377)

SingleValueGrid​

  • SingleValueGrid now supports behavioral tracking properties. (APPDEV-16377)
  • seriesActions now receives the full data record for each item, including all custom fields, instead of only value and label. (APPDEV-16619)

Sparkline​

  • Sparkline now supports behavioral tracking properties. (APPDEV-16377) (APPDEV-16377)
  • Fixed a crash in Sparkline area charts where the canvas gradient fill would throw a SyntaxError when the browser returned an HSLA color string. (APPDEV-16726)

TimeframeSelector​

  • Recently used timeframes are now displayed in the overlay. (APPDEV-16158)
  • Fixed a race condition that could sporadically show Start time must be before end time. while typing in the end time field. (APPDEV-16690)
  • No longer shows a transition animation when navigating between date and time spin buttons so that the selection highlight switches instantly. (APPDEV-16135)
  • When applying a timeframe with one empty field, it is now filled with "Now". (APPDEV-16130)

ToggleButtonGroup​

  • Styles for aria-disabled are now correctly applied. (APPDEV-16682)

TreeMap​

  • ColorRules now work consistently regardless of nameAccessor value. (APPDEV-16559)
  • The width prop now accepts string or number and also added an unit prop. (APPDEV-15408)

XYChart​

  • AreaSeries is now available in the strato package. (APPDEV-15176)
  • The width prop now accepts CSS string values (e.g., "100%", "500px") in addition to numeric values.
  • Added legend filtering and actions for series and rect categorical interactions by default. (APPDEV-15180)
  • Fixed tooltip to show the topmost overlapping series instead of the first one. (APPDEV-16253)

3.0.0​

Breaking changes​

Button​

  • Removed the deprecated readOnly property. (APPDEV-13937)

Dependency updates​

  • @dynatrace/strato-icons was updated to version 2.0.0.
  • Added @dynatrace-sdk/units as a peer dependency with version range ^1.5.0. (APPDEV-10467)
  • Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.3.0 || ^2.0.0 to ^2.1.0. (APPDEV-10467)

Updates​

ToggleButtonGroup​

  • Fixed a react warning about missing keys on each child.

3.0.0-rc.0​

1.18.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 1.13.0.

Updates​

General​

  • Fixed broken links in the documentation. (PRODUCT-9394)

1.17.0​

Updates​

Core​

  • useFocusRing hook is now available to apply custom focus styles to components. (APPDEV-14256)

IntentButton​

  • Deprecated IntentButtonProps as they will be replaced by the IntentButtonProps from strato-components-preview.

1.16.1​

Updates​

Core​

  • Adds the Behavioral Tracking Props interface to the API. (APPDEV-15861)

1.16.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 1.12.0.
  • @dynatrace/strato-design-tokens was updated to version 1.3.1.

Deprecations​

IntentButton​

  • The IntentButton will be removed from this package. Use the IntentButton from @dynatrace/strato-components-preview instead. The preview version offers feature parity but introduces slight differences in the API. The IntentButton now accepts a configuration object. It also supports multiple intents. Configure additional intents using the IntentButton.Item. They're shown in a customisable OpenWith overlay component. (APPDEV-15713)

Updates​

  • Copying the link text no longer copies a zero width no-break space. (APPDEV-15655)
  • No longer overflows vertically or shows a scrollbar when used in flex layouts where the text’s line height equals its font size. (APPDEV-15678)

TextEllipsis​

  • The Intl.Segmenter will now be created only when needed and not on import. (APPDEV-15823)

1.15.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 1.11.1.
  • @dynatrace/strato-design-tokens was updated to version 1.3.0.

Updates​

Highlight​

  • Now uses CSS Custom Highlight API instead of the <mark> HTML element. (APPDEV-14731)

1.14.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 1.11.0.

Updates​

AppRoot​

  • Added translationsRootPath to props of AppRoot to configure language resource path. (APPDEV-15400)
  • Now respects custom textDecoration styles. (APPDEV-15438)
  • Now respects custom textDecoration styles. (APPDEV-15438)

1.13.0​

Dependency updates​

  • @dynatrace/strato-design-tokens was updated to version 1.2.0.
  • @dynatrace/strato-icons was updated to version 1.10.0.

1.12.0​

Dependency updates​

  • @dynatrace/strato-design-tokens was updated to version 1.1.4.
  • @dynatrace/strato-icons was updated to version 1.9.0.
  • Changed peerDependency version range for @dynatrace-sdk/units from ^1.0.2 to ^1.3.1. (APPDEV-14636)

Updates​

General​

  • Slowed animation timings for the ProgressBar, ProgressCircle, Skeleton, and SkeletonText components. (APPDEV-14758)

Skeleton​

  • Improved animations. (APPDEV-14760)

SkeletonText​

  • Improved animations. (APPDEV-14760)

1.11.0​

Dependency updates​

  • @dynatrace/strato-design-tokens was updated to version 1.1.3.
  • @dynatrace/strato-icons was updated to version 1.8.0.

Updates​

General​

  • A useId hook is now provided, allowing css-ident safe IDs to be generated. (APPDEV-14808)

AppRoot​

  • The look and feel of scrollbars in Firefox is now aligned with the experience in Chrome.
  • The underline now appears correctly based on whether the link is focused via keyboard. (APPDEV-14816)

1.10.0​

Dependency updates​

  • @dynatrace/strato-icons was updated to version 1.7.0.
  • @dynatrace/strato-design-tokens was updated to version 1.1.2.

1.9.2​

General​

  • Unicode ranges for Roboto fallback are now removed.

1.9.1​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.6.1.
  • @dynatrace/strato-design-tokens was updated to version 1.1.1.

General​

  • Font definitions are now directly added to the apps css bundle.
  • The underline of the link is now displayed correctly based on whether it is focused via keyboard. (APPDEV-14521)

1.9.0​

FocusScope​

  • The prop data-testid can now be set on the component. (APPDEV-13925)

1.8.1​

TextEllipsis​

  • When truncationMode is set to start, punctuation characters are now rendered correctly at the start of the string. (APPDEV-14072)

1.8.0​

Dependency updates
  • @dynatrace/strato-design-tokens was updated to version 1.1.0.
  • @dynatrace/strato-icons was updated to version 1.6.0.

1.7.3​

Typography​

  • Removes canvas from DOM. (APPDEV-13639)

1.7.2​

Typography​

  • Removed canvas from DOM. (APPDEV-13639)

1.7.1​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.5.1.

1.7.0​

Core​

  • Removed internal _isStringChildren, _useId, _uuidv4, and _mulberry32 utility. (APPDEV-12775)

TextEllipsis​

  • truncationMode="middle" now fully supports emoji characters. (APPDEV-13186)
  • TruncationMode is now available as a public type. (APPDEV-12065)

1.6.2​

Core​

  • Add internal _isStringChildren, _useId, _uuidv4, and _mulberry32 back for 1.6.x compatibility. (APPDEV-13282)

1.6.1​

  • Documentation update

1.6.0​

Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.3.0 to ^1.3.0 || ^2.0.0.
  • @dynatrace/strato-icons was updated to version 1.5.0.

1.5.0​

Dependency updates
  • Changed peerDependency version range for react-intl from ^6.0.8 to ^6.0.8 || ^7.0.0.
  • @dynatrace/strato-design-tokens was updated to version 1.0.1.
  • @dynatrace/strato-icons was updated to version 1.4.0.

Button​

  • Hover animation was updated to be more responsive. (APPDEV-12827)

Highlight​

  • Now preserves whitespace around the highlighted term. (APPDEV-12895)

TextEllipsis​

  • When truncationMode is set to start, punctuation characters are now rendered correctly at the end of the string. (APPDEV-12900)

1.4.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.3.0.

Highlight​

  • Added support for using FormattedMessage within the Highlight component. (APPDEV-12687)
  • Highlighted text reflows correctly when wrapped inside a smaller container. (APPDEV-12666)

1.3.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.2.0.

1.2.0​

Highlight​

  • Whitespaces are preserved when the Highlight component is rendered inside an element styled with display: 'flex'. (APPDEV-12362)

Surface​

  • Now uses correct selected border with a 2px transparent gap. (APPDEV-11985)

1.1.0​

Dependency updates
  • @dynatrace/strato-icons was updated to version 1.1.0.

TextEllipsis​

  • Text with ellipsis with truncationMode="middle" can grow when resizing. (APPDEV-11597)

1.0.0​

Breaking changes

General

  • Removed deprecated testing subpackage. Please use the @dynatrace/strato-components-testing package now. (APPDEV-9460)

In the new package we are no longer re-exporting parts of the @testing-library package. This means you'll have to import functions like screen, userEvent, act, waitFor etc directly from @testing-library and its subpackages.

The render function is still exported in the testing package, as it makes testing strato components easier.

For more information on how to setup and use @dynatrace/strato-components-testing please look into package's readme.

Core

  • roleVariants and RoleVariantType are now removed, as they are no longer used. (APPDEV-11235)

ProgressBar

  • Removed the variant prop, as the color and variant are now derived from the container. The color can still be overwritten with the color prop.(APPDEV-11668)

ProgressCircle

  • Removed the variant prop, as the color and variant are now derived from the container. The color can still be overwritten with the color prop.(APPDEV-11668)
Dependency updates
  • Changed peerDependency version range for @dynatrace-sdk/app-environment from ^1.0.0 to ^1.1.0. (APPDEV-11243)
  • Changed peerDependency version range for @dynatrace-sdk/navigation from ^1.2.1 to ^1.3.0. (APPDEV-11243)
  • Changed peerDependency version range for @dynatrace-sdk/error-handlers from ^1.0.0 to ^1.3.1. (APPDEV-11243)
  • Changed peerDependency version range for @dynatrace-sdk/user-preferences from ^1.1.0 to ^1.1.1. (APPDEV-11243)
  • @dynatrace/strato-design-tokens was updated to version 1.0.0.
  • @dynatrace/strato-icons was updated to version 1.0.0.

0.85.120​

TextEllipsis​

  • Text now displays correctly in Firefox when the parent container has max-width: max-content. (APPDEV-12006)

0.85.110​

Deprecations

Button

  • Deprecated readOnly prop, please use disabled instead. (APPDEV-11549)

General​

  • useBreakpoint hook now has better SSR support.

Content​

  • ProgressBar and ProgressCircle now inherit the Container's color, if used inside it.

Core​

  • Added FocusScope component. (APPDEV-11591)

0.85.100​

Dependency updates
  • @dynatrace/strato-icons was updated to version 0.39.4.
Deprecations

Content

  • Deprecated the variant prop from ProgressBarProps and ProgressCircleProps, which will be removed in favor of the color prop.

Core

  • Deprecated the RoleVariantType, which will be removed. You can use 'neutral' | 'primary' | 'success' | 'warning' | 'critical' instead, as the onAccent option will be dropped.

Typography​

  • CSS text ellipsis from a wrapping element is now correctly applied to the Link and ExternalLink component. (APPDEV-11491)

0.85.90​

Dependency updates
  • Added @dynatrace/strato-design-tokens as a peer dependency with version range ~0.20.0.
  • Added @dynatrace/strato-icons as a peer dependency with version range ~0.39.0.

General​

  • Moved @dynatrace/strato-design-tokens and @dynatrace/strato-icons to peerDependencies and relaxed the version range. (APPDEV-9911)
  • Classnames for components now contain a version number to avoid conflicts if apps happen to have more than one version of the design system running.

0.85.80​

  • The ExternalLink's icon now remains on the same line as its preceding word, even when there are line breaks.

IntentButton​

  • Now accepts ReactNode as children instead of only strings.

TextEllipsis​

  • Now onTextOverflow is also called when TextEllipsis is used inside another component that already handles text truncation.

0.85.70​

Deprecations

General

  • Testing subpackage exports are now marked as deprecated. Please use @dynatrace/strato-components-testing instead.

0.85.60​

Dependency updates
  • @dynatrace/strato-icons was updated to version 0.39.3.

0.85.50​

Typography​

  • Heading and Paragraph now inherit their color from their container by default.

0.85.41​

Layouts​

  • Annotate exported styles accordingly.

0.85.40​

General​

  • Added missing vanilla-extract dependencies to the package.

Button​

  • Displays number 0 when used as child.

0.85.32​

  • Documentation update

0.85.31​

Dependency updates
  • Added missing vanilla-extract dependencies to the package.

0.85.30​

Dependency updates
  • @dynatrace/strato-icons was updated to version 0.39.2.

UseBreakpoint​

  • useBreakpoint has been moved from @dynatrace/strato-components-preview/core to @dynatrace/strato-components/layouts and a migration script has been provided.

0.85.21​

  • Documentation update

0.85.20​

IntentButton​

  • IntentButton has been moved from @dynatrace/strato-components-preview/buttons to @dynatrace/strato-components/buttons. The iconOnly prop has been removed. To display only the icon, leave the label empty.

Skeleton​

  • Skeleton has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/content and a migration script has been provided.

SkeletonText​

  • SkeletonText has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/content and a migration script has been provided.

Surface​

  • Surface has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

0.85.11​

  • Documentation update

0.85.10​

Dependency updates
  • @dynatrace/strato-icons was updated to version 0.39.1.
  • @dynatrace/strato-design-tokens was updated to version 0.20.40.

Button​

  • Button has been moved from @dynatrace/strato-components-preview/buttons to @dynatrace/strato-components/buttons and a migration script has been provided.

0.85.0​

Breaking changes

General

  • Drop react 17 support.
  • Drop @testing-library/react 12 support.
  • Drop @testing-library/user-event 13 support.
Dependency updates
  • @dynatrace/strato-icons was updated to version 0.39.0.

General​

  • Add @testing-library/react 15 support.

0.84.51​

General​

  • Content subpackage is now exported from the @dynatrace/strato-components entrypoint.

0.84.50​

Dependency updates
  • @dynatrace/strato-icons was updated to version 0.38.0.

Container​

  • Container has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

Flex​

  • Flex has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

Grid​

  • Grid has been moved from @dynatrace/strato-components-preview/layouts-core to @dynatrace/strato-components/layouts and a migration script has been provided.

ProgressBar, ProgressCircle​

  • ProgressBar and ProgressCircle have been moved from @dynatrace/strato-components-preview/core to @dynatrace/strato-components/content and a migration script has been provided.

0.84.42​

  • Documentation update

0.84.41​

  • Documentation update

0.84.40​

Dependency updates
  • @dynatrace/strato-design-tokens was updated to version 0.20.30.

Typography​

  • Typography is migrated from @dynatrace/strato-components-preview/typography to @dynatrace/strato-components/typography and a migration script has been provided.

Divider​

  • Divider has been moved from @dynatrace/strato-components-preview/typography to @dynatrace/strato-components/layouts and a migration script has been provided.

0.84.31​

  • Documentation update

0.84.30​

Dependency updates
  • @dynatrace/strato-design-tokens was updated to version 0.20.20.

0.84.21​

  • Documentation update

0.84.20​

0.84.12​

  • Documentation update

0.84.11​

Dependency updates
  • @dynatrace/strato-design-tokens was updated to version 0.20.10.
  • @dynatrace/strato-icons was updated to version 0.37.0.

AppRoot​

  • AppRoot component was moved from @dynatrace/strato-components-preview.
Still have questions?
Find answers in the Dynatrace Community