Skip to main content

Components - Release notes

  • Release notes

3.4.0

Dependency updates

  • @dynatrace/strato-design-tokens was updated to version 1.4.0.

Updates

General

  • Behavior tracking attributes are now supported in all button components, including Button, IntentButton, NotifyButton, and RunQueryButton. (APPDEV-16876)
  • The text and icon color tokens for the success on accent button are now correct. (APPDEV-17388)
  • Behavior tracking attributes are now supported in all form components, including Calendar, Checkbox, DateTimePicker, DateTimeRangePicker, FieldSet, FormField, Label, NumberInput, NumberInputV2, PasswordInput, Radio, SearchInput, Select, Switch, TextArea, TextInput, and ToggleButtonGroup. (APPDEV-16882)
  • Behavior tracking attributes are now supported in FilterBar, FilterField, SegmentSelector, and TimeframeSelector. FilterField.Suggestions and TimeframeSelector.Presets now also support behavior tracking attributes. (APPDEV-16881)
  • Added feature flag and css overrides for design tokens for visual refresh. (APPDEV-17223)

Charts

  • Annotations now allows metadata for intents. (APPDEV-17129)
  • Chart.Legend now correctly respects the initialRatio prop when the chart is first rendered without data and later receives data. (APPDEV-17415)
  • Legend interactions are now disabled when loading is visible. (APPDEV-16703)

Core

  • useFocusRing considers the modality correctly when the focusWithin flag is set.

Editors

  • Default placeholder texts are now shown when no placeholder is explicitly provided. (APPDEV-17048)

Forms

  • Improved read-only state for form components: TextInput, TextArea, PasswordInput, NumberInput, DateTimePicker, DateTimeRangePicker, Select, Switch, Checkbox, RadioGroup and ToggleButtonGroup. (APPDEV-16539, APPDEV-16540, APPDEV-16542, APPDEV-16543, APPDEV-16544, APPDEV-16545, APPDEV-16546, APPDEV-16547, APPDEV-16548)
  • Default placeholder texts are now shown when no placeholder is explicitly provided. (APPDEV-17048)

Overlays

  • Fixed the issue where pressing Cmd+Enter or Ctrl+Enter on an overlay trigger made the trigger stick and prevented it from opening again with the keyboard. (APPDEV-17378)

AnnotationsChart

  • Fixed an issue in the AnnotationsChart where range marker alignment with indicators was incorrect when space is constrained (APPDEV-17128)

CategoricalBarChart

  • Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

ChipGroup

  • The expand/collapse control button now correctly references the chip group via aria-controls.
  • The Show more control no longer remains visible after all chips are removed. (APPDEV-11526)
  • Dynamically-added chips no longer flash visibly before being hidden behind the Show more control. (APPDEV-11526)

CodeSnippet

  • Kotlin, Swift, and Groovy are now supported languages. (APPDEV-12954)

DataTable

  • The page now remains interactive when cell or column actions menu is open. (APPDEV-17100)
  • When downloading large tables as CSV, a progress indicator is now shown, and the table stays responsive during the download. (APPDEV-13387)
  • Sorting controls are now also available in the column actions menu for any column with sorting enabled. (APPDEV-16866)
  • The buttons for showing/collapsing row details from expandable rows no longer have a broken aria-controls reference. (APPDEV-17125)
  • Unpinned columns can now be ordered via drag and drop while other columns are pinned. (APPDEV-16859)

DateTimePicker

  • Arrow key navigation on empty spin buttons now cycles correctly through values instead of sticking at "00".
  • Changing the precision while a spin button is partially filled now functions without breaking the input. (APPDEV-17299)
  • Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
  • Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
  • Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
  • Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

DonutChart

  • The tooltip has an updated layout and performance improvements. (APPDEV-15962)

DQLEditor

  • Autocomplete now reopens when typing resumes after dismissing suggestions with Esc, as well as when the cursor is positioned before or after a comment. (APPDEV-16879)
  • Autocomplete suggestions now open automatically when the cursor is placed on a new line after existing query content. (APPDEV-17256)

FilterField

  • No longer crashes when saving pinned or recent filter fails due to missing permissions (403/401). Pinning is silently disabled in those cases. (APPDEV-17372)
  • Improved the visual style of pasted content. (APPDEV-16263)
  • suggestStatementOnValueMatch now matches values case-insensitively. (APPDEV-17294)
  • Typing a key followed by a space inside a bracket group ((foo ), for example) now shows the correct suggestions. (APPDEV-17232)
  • Fixed the highlight range from potentially being out of bounds. (APPDEV-17263)
  • Pasting multi-line text no longer inserts literal newlines — line breaks are collapsed into spaces so the pasted content stays on a single line. (APPDEV-11712)

GaugeChart

  • Has a new and improved tooltip, which now also shows by default. (APPDEV-16899)

HistogramChart

  • Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

HoneycombChart

  • The tooltip in the HoneycombChart has a renewed view and improved performance. (APPDEV-16285)

IntentButton

  • IntentButton.Item now supports a disabled state. (APPDEV-17301)

Label

  • Now displays a "(read only)" text suffix when the associated form field is read only. (APPDEV-16541)
  • The Menu trigger now correctly shows its active state when the Menu is open. (APPDEV-16688)

MeterBarChart

  • MeterBarChart.Tooltip now accepts a name prop to customize the label displayed in the tooltip. (APPDEV-16994)
  • Added Legend slot with a hidden prop. MeterBarChart.ThresholdLegend is deprecated in favor of MeterBarChart.Legend. (APPDEV-16834)
  • The single meter bar now supports the loading state. (APPDEV-16795)

Microguide

  • The overlay is now rendered in the correct position, regardless of style load order. (APPDEV-17240)

MultiMeterBarChart

  • The Legend slot now supports a hidden prop. (APPDEV-16834)
  • The multimeter bar now supports the loading state. (APPDEV-16795)

PieChart

  • The tooltip has an updated layout and performance improvements. (APPDEV-15962)

Select

  • When opening a second Select on mobile, the first one closes. (APPDEV-17015)

TimeframeSelector

  • Arrow key navigation on empty spin buttons now cycles correctly through values instead of sticking at "00".
  • Changing the precision while a spin button is partially filled now functions correctly and doesn't break the input. (APPDEV-17299)
  • Selected SpinButton values can now be deleted via Delete, Backspace, and Cut. (APPDEV-16125)
  • Calendar now resets the selection when reopened.
  • DateTime inputs can now be scrolled horizontally on mobile devices. (APPDEV-16852)
  • Fixed spin buttons not restoring properly when an absolute value is set to the same date after fields were manually cleared. (APPDEV-17389)
  • Select all in the expression input no longer throws an error when the browser wraps the text content in element nodes. (APPDEV-16987)
  • Relative-value expression inputs now support partial text selection and deletion. (APPDEV-17229)
  • Fixed pasting invalid expressions into the from-input from replacing the arrow separator. (APPDEV-17277)
  • Selection behavior for spin buttons when using Shift+ArrowLeft/ArrowRight now allows values to be deselected correctly. (APPDEV-17229)
  • Fixed digit keys from being incorrectly forwarded from a TextSpinButton (e.g. AM/PM) to an adjacent NumberSpinButton. Digits typed on a TextSpinButton are now silently ignored. (APPDEV-17276)
  • Fixed copying from a single focused field.
  • Pasting formatted dates and times is now supported. (APPDEV-16822)
  • Spinbutton placeholders now use uppercase format (YYYY, MM, DD) for improved clarity and consistency.

TimeseriesChart

  • Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

Toast

  • No longer displays incorrect visual styles. (APPDEV-17316)

TreeMap

  • The component now supports a new labelsDisplay="clusters-and-values" option that shows the category (cluster) label alongside only the value inside each leaf square. (APPDEV-16922)
  • Errors thrown inside the formatter prop are now correctly caught and rendered as the ErrorState. (APPDEV-17319)
  • Migrated the default tooltip to use the new OverlayTooltip component for consistency with other chart components. No changes to the public API or visual appearance. (APPDEV-16898)

XYChart

  • Fixed an issue that caused AreaSeries to show duplicate gap datapoints when stacked.
  • BarSeries that are grouped by category now have grid lines, making them easier to see. (APPDEV-17201)
  • Fixed thresholds are no longer hidden when their assigned axis is filtered out via the legend. (APPDEV-16553)
  • Fixed bar/rect selection to include bars with very small or zero pixel heights, while still excluding datapoints whose y-value lies outside the visible y-axis domain.
  • Threshold indicator tooltips now match the updated chart tooltip design. (APPDEV-16294)

3.3.3

Updates

FilterField

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.3.2

Updates

FilterField

  • FilterField no longer crashes when saving pinned or recent filters fails due to missing permissions (403/401). Pinning is now disabled gracefully in those cases. (APPDEV-17372)

3.3.1

Updates

Page

  • User-provided data-dt-name and data-dt-properties attributes on Page.PanelControlButton are no longer overridden by the default values. (APPDEV-17287)

TimeframeSelector

  • Fixed preset and recent suggestions being incorrectly disabled when max is set to an expression value (e.g. now). (APPDEV-17327)

ToggleButtonGroup

  • User-provided data-dt-name attribute on ToggleButtonGroup.Item is no longer overridden by the default value. (APPDEV-17287)

Tooltip

  • User-provided data-dt-name attribute on the trigger is no longer overridden by the default value. (APPDEV-17287)

3.3.0

Dependency updates

  • Changed peerDependency version range for @dynatrace-sdk/client-notifications-v2 from ^1.0.0 to ^1.0.0 | ^2.0.0.
  • @dynatrace/strato-icons was updated to version 2.2.0.

Deprecations

FilterField

  • The object notation of the validatorMap component's keyPredicates is now deprecated. Use the array notation instead. (APPDEV-15798)

Instead of accepting an object, the keyPredicates now have to be provided as an array. See the example below:

const validatorMap = {
- keyPredicates: {
- myKey1: {
- valuePredicate: ...
- },
- myKey2: {
- valuePredicate: ...
- },
- },
+ keyPredicates: [
+ {
+ key: 'myKey1',
+ valuePredicate: ...
+ },
+ {
+ key: 'myKey2',
+ valuePredicate: ...
+ },
+
  • The FilterFieldValidatorMapTypePredicate is now deprecated. Adding the type to the valuePredicate will no longer be supported to restrict a key's value to a specific type or set of types. Use the valueType on FilterFieldKeySuggestionConfig instead, providing a FilterFieldPrimitive type (or custom type) or array of types.
const validatorMap = {
keyPredicates: [
{
key: 'myKey1',
- valuePredicate: {
- type: ['String', 'Number']
- },
+ valueType: ['String', 'Number']
},
{
key: 'myKey2',
valuePredicate: [
'warning',
'error',
- { type: 'String' }
],
+ valueType: 'String',
},
],
};
  • The FilterFieldDuration type is now deprecated. Instead of providing durations as { value: ..., unit: ...} objects in the validatorMap, use simple strings instead.
const validatorMap = {
keyPredicates: [
{
key: 'myKey1',
valuePredicate: [
- { value: 10, unit: 'ms' },
- { value: 1, unit: 's' },
+ '10ms',
+ '1s',
],
},
],
};

TimeframeSelector

  • Deprecated clearable prop in favor of the new built-in clear button. (APPDEV-16374)

Updates

Charts

  • Fixed an issue where the annotations tooltip would grow beyond its intended size when the description text is long. (APPDEV-17117)
  • The legend now prevents highlighting series when hovering between the margins of the elements. (APPDEV-16894)

Editors

  • Scroll containers now have an explicit role="group" attribute to fix an accessibility issue where focusable elements were missing an implicit or explicit role. (APPDEV-16997)

Accordion

  • Added data-dt-properties attribute to the section trigger and section header.

AppHeader

  • Spacing between the logo text and the release phase indicator was corrected. (APPDEV-16591)

convertToColumns

  • The timeframe columns now accept ISO date strings for start and end values in addition to Date objects. (APPDEV-17007)

DataTable

  • Column headers now display sort order indicators when multiple columns are sorted simultaneously. (APPDEV-10404)
  • Gantt chart annotations now display indicators that highlight the position of annotation markers in the chart. Indicators can be configured per track and overridden per marker using the indicatorsDisplay prop. (APPDEV-16812)
  • Fixed an issue that occurs in rare cases due to a rendering timing issue. (APPDEV-16787)
  • Built-in TableActionsMenu (CopyItem, LineWrap, HideColumn, ColumnOrder, ColumnPinning, ColumnFontStyle) actions now have onSelect callback available. (APPDEV-4846)
  • MeterBarChart tooltip in meterbar columns is now unpinned on click outside the chart or tooltip. (APPDEV-16627)
  • Sparkline columns allow configuration for min, max and scale of the yAxis. (APPDEV-16840)
  • The column resize handle now meets ARIA requirements and no longer causes an aria-required-children violation.
  • Added data-dt-properties attribute to the toolbar and column line wrap actions, column header sorting, row selection controls, sub-row 'Expand' and 'Collapse' buttons, and column settings modal visibility controls.
  • The imperative handle now exposes getDisplayedRowIds, which returns the IDs of the displayed rows in their display order. (APPDEV-16929)
  • Column reordering via drag and drop now meets ARIA requirements and no longer causes an aria-required-children violation.

DateTimePicker

  • Added data-dt-properties attribute to the calendar's header, day, month, and year buttons.
  • Now supports clearing the selected value via a built-in clear button. (APPDEV-16374)

ExpandableText

  • Added data-dt-properties attribute to the 'Show more' and 'Show less' buttons.

FilterField

  • The contains-middle and ends-with matches are now grouped together when sorting suggestions by match relevance while typing (exactstarts-withcontains-middle/ends-with). (APPDEV-16055)
  • Custom validation functions are now called for each element in a value list. (APPDEV-17106)
  • Added data-dt-name and data-dt-properties attributes to the suggestions, 'Clear' button, 'Delete filter statement' buttons, 'Show more' and 'Show less' buttons, and the filter syntax link. (APPDEV-16903)
  • Invalid value error messages now include the supported value types for the key. For custom types defined via customTypes, a label can be provided. Per default, the type name is used. (APPDEV-16719)
  • Suggestions can now be grouped using the validatorMap. The object notation of the keyPredicates doesn't support groups. Switch to the array notation to add groups. (APPDEV-15798)
  • The valuePredicate function is now called correctly for values of type Variable.
  • Typing a relative timeframe character (n, +, -, @) while focused on an absolute date input now automatically switches to relative timeframe mode. (APPDEV-16134)

FocusScope

  • Focus-visible (focus ring) is now prevented when focus is moved after pointer interaction. (APPDEV-16864)

GaugeChart

  • GaugeChart now supports loading prop. (APPDEV-16152)

HealthIndicator

  • HealthIndicator.Label no longer causes an aria-prohibited-attr accessibility violation. (APPDEV-16907)

HistogramChart

  • Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)

HoneycombChart

  • Fixed a bug that prevented showing a tooltip in the area where three hexagons meet. (APPDEV-17154)

MeterBarChart

  • The tooltip has an updated layout and performance improvements. (APPDEV-16627)

Microguide

  • Added data-dt-properties attribute to the 'Next' and 'Got it' buttons.

MultiMeterBarChart

  • The tooltip has an updated layout and performance improvements. (APPDEV-16627)

Page

  • Added data-dt-properties attribute to the 'Expand' and 'Collapse' buttons, 'Close' button, and resize handles.

PasswordInput

  • Added data-dt-properties attribute to the 'Show password' and 'Hide password' buttons.

SegmentSelector

  • Added data-dt-properties attribute to the 'Pin' and 'Unpin' buttons, and the 'Show more' and 'Show less' buttons.

Select

  • Added data-dt-properties attribute to the 'Select all' control.

Sparkline

  • Chart width is now consistent between rows regardless of whether context values contain negative numbers. A fixed sign column is always reserved so the chart area does not shift. (APPDEV-16895)

Tabs

  • Page no longer scrolls when you click on a tab. (APPDEV-16831)

TimeframeSelector

  • The value of the TimeframeSelector can now still be adjusted after selecting everything with Cmd/Ctrl+a. (APPDEV-16861)
  • You can now move between DateTimeInput values with the arrow keys. When typing numbers, focus switches to the next spin-button segment as soon as the current one is complete. (APPDEV-16126)
  • Added data-dt-properties attribute to the 'Apply' button, preset timeframes, and recent timeframes.
  • Now supports clearing the selected value via a built-in 'Clear' button. (APPDEV-16374)
  • Improved support for pasting ISO timestamps or timeframes. Additionally, there's now the possibility to undo after pasting. (APPDEV-16124)

TimeseriesChart

  • Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)

ToggleButtonGroup

  • Removed redundant aria-checked attribute from the radio input to resolve an accessibility conflict (WCAG 4.1.2). (APPDEV-16861)
  • Added data-dt-name attribute to the toggle item.

TreeMap

  • The width of the treemap tooltip is now limited, as with the other charts. (APPDEV-16905)

XYChart

  • Fixed a bug that caused series with the id '0' to not be able to be highlighted.
  • Setting indicatorsDisplay: 'auto' on an annotation marker now correctly overrides a track-level always configuration, so that all marker-level values (auto, never, always) take precedence over the track-level configuration. (APPDEV-17153)
  • The default tooltip in explore mode got an updated layout, refreshed visual design, and performance improvements. (APPDEV-16266)

3.2.2

Updates

FilterField

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.2.1

Updates

General

  • Updates DTFlow to not use font auto hinting on the font and improve legibility.

3.2.0

Dependency updates

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

Deprecations

AppHeader

  • Deprecated AppHeader.AppNavLink (use AppHeader.Logo), AppHeader.NavItems (use AppHeader.Navigation), AppHeader.NavItem (use AppHeader.NavigationItem), and AppNavLinkInternalOwnProps. (APPDEV-12515)

Updates

General

  • Reduced motion media query now overrides timings on tokens. (APPDEV-17018)
  • DTFlow version 1.2 is now used. (APPDEV-16887)

Charts

  • Meter bars tooltip now appears also on grayed area. (APPDEV-16799)
  • Meter bars supports now unit, width and height. (APPDEV-15934)
  • Toolbar now supports behavioral tracking props. (APPDEV-16378)
  • After triggering a series actions its corresponding item gets the highlighting removed. (APPDEV-16665)

Overlays

  • Add support for behavior tracking props on overlay components. (APPDEV-16801)

Accordion

  • Added data-dt-name attributes to the section trigger and section header. (APPDEV-16670)

AppHeader

  • AppHeader.Logo now accepts a releasePhase prop. Setting releasePhase="preview" displays a "Preview" chip next to the app name, allowing apps to communicate their release phase to users. (APPDEV-16591)
  • Added data-dt-name attribute to the app icon. (APPDEV-16671)

CategoricalBarChart

  • CategoricalBarChart now supports behavioral tracking properties (APPDEV-16515)

CodeEditor

  • The line-number gutter no longer disappears when the gutter marker is placed at an out-of-bounds line number. (APPDEV-16705)

CodeSnippet

  • No longer crashes on very large inputs. Syntax highlighting is now limited to the first 100,000 characters; content beyond that is rendered as plain text without syntax highlighting or dynamic line breaks. (APPDEV-16797)
  • Added data-dt-name attribute to the copy button. (APPDEV-16670)

DataTable

  • Selecting text inside the table no longer triggers row activation. (APPDEV-16654)
  • The event passed to onActiveRowChange is now a click event (previously pointerup); middle mouse button clicks pass an auxclick event. (APPDEV-16654)
  • Scrollable tables now keep correct row heights when lineWrap is enabled and previously virtualized rows scroll back into view. (APPDEV-16699)
  • Added data-dt-name attributes to the toolbar line wrap button and the column line wrap action. (APPDEV-16670)
  • Columns no longer resize when hovering a header with column actions in a condensed or comfortable table. (APPDEV-16981)
  • Column widths for already measured columns are persisted when columns reference changes. This fixes an issue with columns not being rendered correctly, after the columns reference changed in a horizontally scrolled table. (APPDEV-16792)

DateTimePicker

  • Added data-dt-name attributes to the button opening the calendar, and the calendar's header, day, month, year, and stepper buttons. (APPDEV-16671)
  • The relative TimeValue now supports spinning values with the ArrowUp and ArrowDown keys. Pressing ArrowUp increments the numeric part of the expression (e.g. now-2hnow-1h), and ArrowDown decrements it. (APPDEV-16136)

DonutChart

  • DonutChart now supports behavioral tracking props. (APPDEV-16600)

DQLEditor

  • Added data-dt-name attribute to autocomplete suggestion items and the "Learn more" link. (APPDEV-16670)

ExpandableText

  • Added data-dt-name attributes to the show more and show less buttons. (APPDEV-16670)

FeatureHighlight

  • Added data-dt-name attribute to the close button. (APPDEV-16670)

FilterBar

  • data-dt-name attribute is now available on the "Add filter" button. (APPDEV-16603)

FilterField

  • Fixed onFilter being incorrectly called when the clear button is clicked (APPDEV-16623)
  • Silently handle missing pinned or recent filter state instead of logging an error warning. (APPDEV-16875)
  • Suggestions are now automatically sorted by match relevance (exactstarts-withcontains-middleends-with). Key and value suggestions are sorted alphabetically or in ascending order within each group. Key and value suggestion sorting can be disabled by setting sortSuggestions: false on the validatorMap, keeping the original order of the suggestions while still sorting by relevance once the user starts typing. (APPDEV-15956)

GaugeChart

  • GaugeChart now supports behavioral tracking props. (APPDEV-16600)

HelpMenu

  • Added data-dt-name attributes to the menu trigger and icon. (APPDEV-16671)

HistogramChart

  • HistogramChart now supports behavioral tracking properties (APPDEV-16515)
  • Now the prop width for the histogram accepts CSS string values (e.g., "100%", "500px") in addition to numeric values. (APPDEV-15226)
  • Stop calling the SDK function getIntentLink twice when the Menu.Intent component is rendered. (PAPA-32034)

MessageContainer

  • Due to a guideline change, using MessageContainer.Title as the sole content slot is no longer valid, every MessageContainer must now include a MessageContainer.Description. If you previously presented content using only MessageContainer.Title, move that content to MessageContainer.Description instead. If both a title and a description are appropriate, keep both slots. With this change, Actions now remain on the same line as the Description if they fit the available space; otherwise, they wrap to the next line. (APPDEV-12784)

MeterBarChart

  • MeterBarChart now supports behavioral tracking props. (APPDEV-16600)

Microguide

  • Added data-dt-name attributes to the close, back, next, and got it buttons. (APPDEV-16670)
  • Added data-dt-name attribute to the close button. (APPDEV-16671)

MultiMeterBarChart

  • MultiMeterBarChart now supports behavioral tracking props. (APPDEV-16600)

Page

  • Added data-dt-name attributes to expand/collapse, open, and close buttons, as well as the resize handler of the sidebar and detail view panels. (APPDEV-16671)

PasswordInput

  • Added data-dt-name attribute to the button for showing and hiding the password. (APPDEV-16671)

PieChart

  • PieChart now supports behavioral tracking props. (APPDEV-16600)

ReleasePhaseIndicator

  • Introduces the ReleasePhaseIndicator component. Use it to communicate the release phase of a feature by rendering a pre-configured Chip based on the phase prop ('preview', 'new', or 'deprecated'). (APPDEV-16670)

SegmentSelector

  • data-dt-name attribute is now available on the following interactive elements: recent/pinned segments, clear all, apply, manage segments, pin/unpin, add segments, and remove segment buttons and "Learn more about segments" link. (APPDEV-16603)
  • The SegmentSelector doesn't close when deselecting a segment variable. (APPDEV-16678)

Select

  • The Select.Filter input now has an aria-label set to comply with accessibility standards. (APPDEV-16713)
  • Added data-dt-name attribute to the "Select All" element. (APPDEV-16671)

TimeframeSelector

  • The relative TimeValue now supports spinning values with the ArrowUp and ArrowDown keys. Pressing ArrowUp increments the numeric part of the expression (e.g. now-2hnow-1h), and ArrowDown decrements it. (APPDEV-16136)
  • After selecting a timeframe via the Calendar, the focus is now moved to the time input of the start date. (APPDEV-16131)
  • data-dt-name attribute is now available on the following interactive elements: recent/preset timeframes, steppers, calendar and apply buttons, and "Learn more" link. (APPDEV-16603)

TimeseriesChart

  • TimeseriesChart now supports behavioral tracking properties (APPDEV-16515)
  • the width prop now accepts CSS unit strings like "100%" or "500px" in addition to numeric pixel values. (APPDEV-15225)

Toast

  • Added data-dt-name attribute to the close button. (APPDEV-16671)

TreeMap

  • TreeMap now supports behavioral tracking props. (APPDEV-16600)

XYChart

  • XYChart now supports proper nice ticks for any unit format (APPDEV-16140)
  • XYChart now supports behavioral tracking properties (APPDEV-16515)
  • numerical axes with unit-converting formatters now produce round, human-readable tick values in the target unit as GiB (APPDEV-14514)

3.1.5

Updates

FilterField

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.1.4

Updates

SegmentSelector

  • The SegmentSelector doesn't close when deselecting a segment variable. (APPDEV-16678)

3.1.3

Updates

DataTable

  • Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)

3.1.2

Updates

DataTable

  • No longer spreads configuration props to DataTable DOM element.

3.1.1

Updates

FilterField

  • Reduce number of requests for recent and pinned filters. (APPDEV-16748)

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.3

Updates

FilterField

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.0.2

Updates

DataTable

  • Table no longer crashes due to the row virtualizer attempting to measure detached DOM elements. (APPDEV-16862)

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