Components - Release notes
- Release notes
3.4.0
Dependency updates
@dynatrace/strato-design-tokenswas updated to version1.4.0.
Updates
General
- Behavior tracking attributes are now supported in all button components, including
Button,IntentButton,NotifyButton, andRunQueryButton. (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, andToggleButtonGroup. (APPDEV-16882) - Behavior tracking attributes are now supported in
FilterBar,FilterField,SegmentSelector, andTimeframeSelector.FilterField.SuggestionsandTimeframeSelector.Presetsnow 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
useFocusRingconsiders the modality correctly when thefocusWithinflag 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,RadioGroupandToggleButtonGroup. (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+EnterorCtrl+Enteron an overlay trigger made the trigger stick and prevented it from opening again with the keyboard. (APPDEV-17378)
AnnotationsChart
- Fixed an issue in the
AnnotationsChartwhere 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 morecontrol no longer remains visible after all chips are removed. (APPDEV-11526) - Dynamically-added chips no longer flash visibly before being hidden behind the
Show morecontrol. (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-controlsreference. (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, andCut. (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)
suggestStatementOnValueMatchnow 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
HoneycombCharthas a renewed view and improved performance. (APPDEV-16285)
IntentButton
IntentButton.Itemnow supports a disabled state. (APPDEV-17301)
Label
- Now displays a "(read only)" text suffix when the associated form field is read only. (APPDEV-16541)
Menu
- The
Menutrigger now correctly shows its active state when theMenuis open. (APPDEV-16688)
MeterBarChart
MeterBarChart.Tooltipnow accepts anameprop to customize the label displayed in the tooltip. (APPDEV-16994)- Added
Legendslot with ahiddenprop.MeterBarChart.ThresholdLegendis deprecated in favor ofMeterBarChart.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
Legendslot now supports ahiddenprop. (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
SpinButtonvalues can now be deleted viaDelete,Backspace, andCut. (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 allin 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 adjacentNumberSpinButton. Digits typed on aTextSpinButtonare 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
formatterprop are now correctly caught and rendered as theErrorState. (APPDEV-17319) - Migrated the default tooltip to use the new
OverlayTooltipcomponent for consistency with other chart components. No changes to the public API or visual appearance. (APPDEV-16898)
XYChart
- Fixed an issue that caused
AreaSeriesto show duplicate gap datapoints when stacked. BarSeriesthat 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-nameanddata-dt-propertiesattributes onPage.PanelControlButtonare no longer overridden by the default values. (APPDEV-17287)
TimeframeSelector
- Fixed preset and recent suggestions being incorrectly disabled when
maxis set to an expression value (e.g.now). (APPDEV-17327)
ToggleButtonGroup
- User-provided
data-dt-nameattribute onToggleButtonGroup.Itemis no longer overridden by the default value. (APPDEV-17287)
Tooltip
- User-provided
data-dt-nameattribute 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-v2from^1.0.0to^1.0.0 | ^2.0.0. @dynatrace/strato-iconswas updated to version2.2.0.
Deprecations
FilterField
- The object notation of the
validatorMapcomponent'skeyPredicatesis 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
FilterFieldValidatorMapTypePredicateis now deprecated. Adding the type to thevaluePredicatewill no longer be supported to restrict a key's value to a specific type or set of types. Use thevalueTypeonFilterFieldKeySuggestionConfiginstead, providing aFilterFieldPrimitivetype (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
FilterFieldDurationtype is now deprecated. Instead of providing durations as{ value: ..., unit: ...}objects in thevalidatorMap, use simple strings instead.
const validatorMap = {
keyPredicates: [
{
key: 'myKey1',
valuePredicate: [
- { value: 10, unit: 'ms' },
- { value: 1, unit: 's' },
+ '10ms',
+ '1s',
],
},
],
};
TimeframeSelector
- Deprecated
clearableprop 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-propertiesattribute to the section trigger and section header.
AppHeader
- Spacing between the logo text and the release phase indicator was corrected. (APPDEV-16591)
convertToColumns
- The
timeframecolumns now accept ISO date strings forstartandendvalues in addition toDateobjects. (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
indicatorsDisplayprop. (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 haveonSelectcallback available. (APPDEV-4846) MeterBarCharttooltip inmeterbarcolumns is now unpinned on click outside the chart or tooltip. (APPDEV-16627)- Sparkline columns allow configuration for
min,maxandscaleof theyAxis. (APPDEV-16840) - The column resize handle now meets ARIA requirements and no longer causes an
aria-required-childrenviolation. - Added
data-dt-propertiesattribute 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-childrenviolation.
DateTimePicker
- Added
data-dt-propertiesattribute 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-propertiesattribute to the 'Show more' and 'Show less' buttons.
FilterField
- The
contains-middleandends-withmatches are now grouped together when sorting suggestions by match relevance while typing (exact→starts-with→contains-middle/ends-with). (APPDEV-16055) - Custom validation functions are now called for each element in a value list. (APPDEV-17106)
- Added
data-dt-nameanddata-dt-propertiesattributes 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, alabelcan be provided. Per default, the type name is used. (APPDEV-16719) - Suggestions can now be grouped using the
validatorMap. The object notation of thekeyPredicatesdoesn't support groups. Switch to the array notation to add groups. (APPDEV-15798) - The
valuePredicatefunction is now called correctly for values of typeVariable. - 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.Labelno longer causes anaria-prohibited-attraccessibility violation. (APPDEV-16907)
HistogramChart
- Setting
indicatorsDisplay: 'auto'on an annotation marker now correctly overrides a track-levelalwaysconfiguration, 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-propertiesattribute to the 'Next' and 'Got it' buttons.
MultiMeterBarChart
- The tooltip has an updated layout and performance improvements. (APPDEV-16627)
Page
- Added
data-dt-propertiesattribute to the 'Expand' and 'Collapse' buttons, 'Close' button, and resize handles.
PasswordInput
- Added
data-dt-propertiesattribute to the 'Show password' and 'Hide password' buttons.
SegmentSelector
- Added
data-dt-propertiesattribute to the 'Pin' and 'Unpin' buttons, and the 'Show more' and 'Show less' buttons.
Select
- Added
data-dt-propertiesattribute 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
TimeframeSelectorcan now still be adjusted after selecting everything withCmd/Ctrl+a. (APPDEV-16861) - You can now move between
DateTimeInputvalues 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-propertiesattribute 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-levelalwaysconfiguration, so that all marker-level values (auto,never,always) take precedence over the track-level configuration. (APPDEV-17153)
ToggleButtonGroup
- Removed redundant
aria-checkedattribute from the radio input to resolve an accessibility conflict (WCAG 4.1.2). (APPDEV-16861) - Added
data-dt-nameattribute 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-levelalwaysconfiguration, 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-iconswas updated to version2.1.1.
Deprecations
AppHeader
- Deprecated
AppHeader.AppNavLink(useAppHeader.Logo),AppHeader.NavItems(useAppHeader.Navigation),AppHeader.NavItem(useAppHeader.NavigationItem), andAppNavLinkInternalOwnProps. (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-nameattributes to the section trigger and section header. (APPDEV-16670)
AppHeader
AppHeader.Logonow accepts areleasePhaseprop. SettingreleasePhase="preview"displays a "Preview" chip next to the app name, allowing apps to communicate their release phase to users. (APPDEV-16591)- Added
data-dt-nameattribute to the app icon. (APPDEV-16671)
CategoricalBarChart
CategoricalBarChartnow 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-nameattribute to the copy button. (APPDEV-16670)
DataTable
- Selecting text inside the table no longer triggers row activation. (APPDEV-16654)
- The event passed to
onActiveRowChangeis now aclickevent (previouslypointerup); middle mouse button clicks pass anauxclickevent. (APPDEV-16654) - Scrollable tables now keep correct row heights when
lineWrapis enabled and previously virtualized rows scroll back into view. (APPDEV-16699) - Added
data-dt-nameattributes 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-nameattributes to the button opening the calendar, and the calendar's header, day, month, year, and stepper buttons. (APPDEV-16671) - The relative
TimeValuenow supports spinning values with theArrowUpandArrowDownkeys. PressingArrowUpincrements the numeric part of the expression (e.g.now-2h→now-1h), andArrowDowndecrements it. (APPDEV-16136)
DonutChart
DonutChartnow supports behavioral tracking props. (APPDEV-16600)
DQLEditor
- Added
data-dt-nameattribute to autocomplete suggestion items and the "Learn more" link. (APPDEV-16670)
ExpandableText
- Added
data-dt-nameattributes to the show more and show less buttons. (APPDEV-16670)
FeatureHighlight
- Added
data-dt-nameattribute to the close button. (APPDEV-16670)
FilterBar
data-dt-nameattribute is now available on the "Add filter" button. (APPDEV-16603)
FilterField
- Fixed
onFilterbeing 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 (
exact→starts-with→contains-middle→ends-with). Key and value suggestions are sorted alphabetically or in ascending order within each group. Key and value suggestion sorting can be disabled by settingsortSuggestions: falseon thevalidatorMap, keeping the original order of the suggestions while still sorting by relevance once the user starts typing. (APPDEV-15956)
GaugeChart
GaugeChartnow supports behavioral tracking props. (APPDEV-16600)
HelpMenu
- Added
data-dt-nameattributes to the menu trigger and icon. (APPDEV-16671)
HistogramChart
HistogramChartnow supports behavioral tracking properties (APPDEV-16515)- Now the prop
widthfor the histogram accepts CSS string values (e.g.,"100%","500px") in addition to numeric values. (APPDEV-15226)
Menu
- Stop calling the SDK function
getIntentLinktwice when theMenu.Intentcomponent is rendered. (PAPA-32034)
MessageContainer
- Due to a guideline change, using
MessageContainer.Titleas the sole content slot is no longer valid, everyMessageContainermust now include aMessageContainer.Description. If you previously presented content using onlyMessageContainer.Title, move that content toMessageContainer.Descriptioninstead. If both a title and a description are appropriate, keep both slots. With this change,Actionsnow remain on the same line as theDescriptionif they fit the available space; otherwise, they wrap to the next line. (APPDEV-12784)
MeterBarChart
MeterBarChartnow supports behavioral tracking props. (APPDEV-16600)
Microguide
- Added
data-dt-nameattributes to the close, back, next, and got it buttons. (APPDEV-16670)
Modal
- Added
data-dt-nameattribute to the close button. (APPDEV-16671)
MultiMeterBarChart
MultiMeterBarChartnow supports behavioral tracking props. (APPDEV-16600)
Page
- Added
data-dt-nameattributes 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-nameattribute to the button for showing and hiding the password. (APPDEV-16671)
PieChart
PieChartnow supports behavioral tracking props. (APPDEV-16600)
ReleasePhaseIndicator
- Introduces the
ReleasePhaseIndicatorcomponent. Use it to communicate the release phase of a feature by rendering a pre-configuredChipbased on thephaseprop ('preview','new', or'deprecated'). (APPDEV-16670)
SegmentSelector
data-dt-nameattribute 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.Filterinput now has anaria-labelset to comply with accessibility standards. (APPDEV-16713) - Added
data-dt-nameattribute to the "Select All" element. (APPDEV-16671)
TimeframeSelector
- The relative
TimeValuenow supports spinning values with theArrowUpandArrowDownkeys. PressingArrowUpincrements the numeric part of the expression (e.g.now-2h→now-1h), andArrowDowndecrements 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-nameattribute is now available on the following interactive elements: recent/preset timeframes, steppers, calendar and apply buttons, and "Learn more" link. (APPDEV-16603)
TimeseriesChart
TimeseriesChartnow supports behavioral tracking properties (APPDEV-16515)- the
widthprop now accepts CSS unit strings like"100%"or"500px"in addition to numeric pixel values. (APPDEV-15225)
Toast
- Added
data-dt-nameattribute to the close button. (APPDEV-16671)
TreeMap
TreeMapnow supports behavioral tracking props. (APPDEV-16600)
XYChart
XYChartnow supports proper nice ticks for any unit format (APPDEV-16140)XYChartnow 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-iconswas updated to version2.1.0.
Deprecations
AiLoadingIndicator
- The
aria-disabledprop is deprecated, as the attribute is only intended for interactive elements.
DataTable
-
Column type
dateis now deprecated. Usedatetimeinstead. (APPDEV-4005) -
The
onDownloadDataon theDataTableelement is now deprecated. Please use it via theDataTable.DownloadDatatoolbar slot instead. (APPDEV-16234)
TimeframeSelector
- The
_isSelectedprop on theTimeframeSelector.PresetItemslot is now deprecated. (APPDEV-16158)
Updates
General
- All components in content, editors, notifications, tables and typography now expose
className,style,data-testid,data-dtrum-maskanddata-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
OverlayandTooltipcomponent. (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
symbolprop on the markers would disappear after programmatically changingindicatorsDisplayor any other prop that triggers a component re-render. (APPDEV-16647)
CategoricalBarChart
- The
widthprop now accepts CSS string values (e.g.,"100%","500px") in addition to numeric values.
convertToColumns
- Now maps
timestampandtimeframefields todatetimecolumn type instead of the deprecateddate. (APPDEV-4005)
DataTable
- Datetime columns now accept
date,time, ordatetimeas shorthandformattervalues, making it easy to show only the date or time portion without providing fullFormatDateOptions. (APPDEV-4005) - The
scrollToRowmethod now supports an additionalalignparameter (start,center,end) to control where the target row is positioned within the table’s visible area. Defaults tostart. (APPDEV-14431) - The
onDownloadDatacallback is now available on theDataTable.DownloadDatatoolbar 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-nametracking 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
Enteron 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
widthprop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)
FilterField
- The
validatorMapnow supportsdisplayValueanddetailson 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
customTypesprop, allowing type-specific value constraints to be used in thevalidatorMap. (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 thevalidatorMap. (APPDEV-16555)
FormField
- Validation now automatically updates when validation-related props (like
required) change dynamically. (APPDEV-16103)
GaugeChart
- The
seriesActionscallback'sseriesparameter type now includesGaugeChartDatato 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
NumberInputis now deprecated in favor ofNumberInputV2.
NumberInputV2
- Introduce
NumberInputV2.NumberInputV2aligns with the current forms architecture and delivers more consistent input behavior across Strato form controls.
API changes to consider when migrating:
minandmaxnow acceptnumber | undefined(previouslynumber | string | undefined).- Parsing/formatting is stricter and locale-aware, including intermediate input states and paste normalization.
stepvsstepMultiplier: -stepdefines the valid value interval for validation and the base increment/decrement amount (for examplestep={0.5}only allows values aligned to0.5and steps by0.5). -stepMultiplieris a positive integer multiplied bystep(or1if nostepis 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 andstepMultiplier={4}to increment/decrement by2. (APPDEV-3996)
Overlay
- Fixed empty
aria-labelledbyattribute being rendered when no label is provided, which violated accessibility guidelines. (APPDEV-16714)
PieChart
widthprop now accepts string values and the unit for the data accepts Unit type, SliceUnit deprecated. (APPDEV-15409)
Radio
- Remove redundant
aria-checkedattribute 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
minWidthset whencontentWidthiscontentand aFilter.Filteris present, preventing theSearchInputfrom becoming too narrow. (APPDEV-16635)
SingleValue
SingleValuenow supports behavioral tracking properties. (APPDEV-16377)
SingleValueGrid
SingleValueGridnow supports behavioral tracking properties. (APPDEV-16377)seriesActionsnow receives the full data record for each item, including all custom fields, instead of onlyvalueandlabel. (APPDEV-16619)
Sparkline
Sparklinenow 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-disabledare now correctly applied. (APPDEV-16682)
TreeMap
- ColorRules now work consistently regardless of
nameAccessorvalue. (APPDEV-16559) - The
widthprop now accepts string or number and also added an unit prop. (APPDEV-15408)
XYChart
AreaSeriesis now available in the strato package. (APPDEV-15176)- The
widthprop 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
readOnlyproperty. (APPDEV-13937)
Dependency updates
@dynatrace/strato-iconswas updated to version2.0.0.- Added
@dynatrace-sdk/unitsas a peer dependency with version range^1.5.0. (APPDEV-10467) - Changed peerDependency version range for
@dynatrace-sdk/navigationfrom^1.3.0 || ^2.0.0to^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-iconswas updated to version1.13.0.
Updates
General
- Fixed broken links in the documentation. (PRODUCT-9394)
1.17.0
Updates
Core
useFocusRinghook is now available to apply custom focus styles to components. (APPDEV-14256)
IntentButton
- Deprecated
IntentButtonPropsas they will be replaced by theIntentButtonPropsfromstrato-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-iconswas updated to version1.12.0.@dynatrace/strato-design-tokenswas updated to version1.3.1.
Deprecations
IntentButton
- The
IntentButtonwill be removed from this package. Use theIntentButtonfrom@dynatrace/strato-components-previewinstead. The preview version offers feature parity but introduces slight differences in the API. TheIntentButtonnow accepts a configuration object. It also supports multiple intents. Configure additional intents using theIntentButton.Item. They're shown in a customisableOpenWithoverlay component. (APPDEV-15713)
Updates
ExternalLink
- 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.Segmenterwill now be created only when needed and not on import. (APPDEV-15823)
1.15.0
Dependency updates
@dynatrace/strato-iconswas updated to version1.11.1.@dynatrace/strato-design-tokenswas updated to version1.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-iconswas updated to version1.11.0.
Updates
AppRoot
- Added
translationsRootPathto props ofAppRootto configure language resource path. (APPDEV-15400)
ExternalLink
- Now respects custom
textDecorationstyles. (APPDEV-15438)
Link
- Now respects custom
textDecorationstyles. (APPDEV-15438)
1.13.0
Dependency updates
@dynatrace/strato-design-tokenswas updated to version1.2.0.@dynatrace/strato-iconswas updated to version1.10.0.
1.12.0
Dependency updates
@dynatrace/strato-design-tokenswas updated to version1.1.4.@dynatrace/strato-iconswas updated to version1.9.0.- Changed peerDependency version range for
@dynatrace-sdk/unitsfrom^1.0.2to^1.3.1. (APPDEV-14636)
Updates
General
- Slowed animation timings for the
ProgressBar,ProgressCircle,Skeleton, andSkeletonTextcomponents. (APPDEV-14758)
Skeleton
- Improved animations. (APPDEV-14760)
SkeletonText
- Improved animations. (APPDEV-14760)
1.11.0
Dependency updates
@dynatrace/strato-design-tokenswas updated to version1.1.3.@dynatrace/strato-iconswas updated to version1.8.0.
Updates
General
- A
useIdhook 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.
Link
- The underline now appears correctly based on whether the link is focused via keyboard. (APPDEV-14816)
1.10.0
Dependency updates
@dynatrace/strato-iconswas updated to version1.7.0.@dynatrace/strato-design-tokenswas updated to version1.1.2.
1.9.2
General
- Unicode ranges for Roboto fallback are now removed.
1.9.1
@dynatrace/strato-iconswas updated to version1.6.1.@dynatrace/strato-design-tokenswas updated to version1.1.1.
General
- Font definitions are now directly added to the apps css bundle.
ExternalLink
- 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-testidcan now be set on the component. (APPDEV-13925)
1.8.1
TextEllipsis
- When
truncationModeis set tostart, punctuation characters are now rendered correctly at the start of the string. (APPDEV-14072)
1.8.0
@dynatrace/strato-design-tokenswas updated to version1.1.0.@dynatrace/strato-iconswas updated to version1.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
@dynatrace/strato-iconswas updated to version1.5.1.
1.7.0
Core
- Removed internal
_isStringChildren,_useId,_uuidv4, and_mulberry32utility. (APPDEV-12775)
TextEllipsis
truncationMode="middle"now fully supports emoji characters. (APPDEV-13186)TruncationModeis now available as a public type. (APPDEV-12065)
1.6.2
Core
- Add internal
_isStringChildren,_useId,_uuidv4, and_mulberry32back for 1.6.x compatibility. (APPDEV-13282)
1.6.1
- Documentation update
1.6.0
- Changed peerDependency version range for
@dynatrace-sdk/navigationfrom^1.3.0to^1.3.0 || ^2.0.0. @dynatrace/strato-iconswas updated to version1.5.0.
1.5.0
- Changed peerDependency version range for
react-intlfrom^6.0.8to^6.0.8 || ^7.0.0. @dynatrace/strato-design-tokenswas updated to version1.0.1.@dynatrace/strato-iconswas updated to version1.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
truncationModeis set tostart, punctuation characters are now rendered correctly at the end of the string. (APPDEV-12900)
1.4.0
@dynatrace/strato-iconswas updated to version1.3.0.
Highlight
- Added support for using
FormattedMessagewithin theHighlightcomponent. (APPDEV-12687) - Highlighted text reflows correctly when wrapped inside a smaller container. (APPDEV-12666)
1.3.0
@dynatrace/strato-iconswas updated to version1.2.0.
1.2.0
Highlight
- Whitespaces are preserved when the
Highlightcomponent is rendered inside an element styled withdisplay: 'flex'. (APPDEV-12362)
Surface
- Now uses correct selected border with a 2px transparent gap. (APPDEV-11985)
1.1.0
@dynatrace/strato-iconswas updated to version1.1.0.
TextEllipsis
- Text with ellipsis with
truncationMode="middle"can grow when resizing. (APPDEV-11597)
1.0.0
General
- Removed deprecated testing subpackage. Please use the
@dynatrace/strato-components-testingpackage 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
roleVariantsandRoleVariantTypeare now removed, as they are no longer used. (APPDEV-11235)
ProgressBar
- Removed the
variantprop, as the color and variant are now derived from the container. The color can still be overwritten with thecolorprop.(APPDEV-11668)
ProgressCircle
- Removed the
variantprop, as the color and variant are now derived from the container. The color can still be overwritten with thecolorprop.(APPDEV-11668)
- Changed peerDependency version range for
@dynatrace-sdk/app-environmentfrom^1.0.0to^1.1.0. (APPDEV-11243) - Changed peerDependency version range for
@dynatrace-sdk/navigationfrom^1.2.1to^1.3.0. (APPDEV-11243) - Changed peerDependency version range for
@dynatrace-sdk/error-handlersfrom^1.0.0to^1.3.1. (APPDEV-11243) - Changed peerDependency version range for
@dynatrace-sdk/user-preferencesfrom^1.1.0to^1.1.1. (APPDEV-11243) @dynatrace/strato-design-tokenswas updated to version1.0.0.@dynatrace/strato-iconswas updated to version1.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
Button
- Deprecated
readOnlyprop, please usedisabledinstead. (APPDEV-11549)
General
useBreakpointhook now has better SSR support.
Content
ProgressBarandProgressCirclenow inherit theContainer's color, if used inside it.
Core
- Added
FocusScopecomponent. (APPDEV-11591)
0.85.100
@dynatrace/strato-iconswas updated to version0.39.4.
Content
- Deprecated the
variantprop fromProgressBarPropsandProgressCircleProps, which will be removed in favor of thecolorprop.
Core
- Deprecated the
RoleVariantType, which will be removed. You can use'neutral' | 'primary' | 'success' | 'warning' | 'critical'instead, as theonAccentoption will be dropped.
Typography
- CSS text ellipsis from a wrapping element is now correctly applied to the
LinkandExternalLinkcomponent. (APPDEV-11491)
0.85.90
- Added
@dynatrace/strato-design-tokensas a peer dependency with version range~0.20.0. - Added
@dynatrace/strato-iconsas a peer dependency with version range~0.39.0.
General
- Moved
@dynatrace/strato-design-tokensand@dynatrace/strato-iconsto 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
ExternalLink
- The
ExternalLink's icon now remains on the same line as its preceding word, even when there are line breaks.
IntentButton
- Now accepts
ReactNodeas children instead of only strings.
TextEllipsis
- Now
onTextOverflowis also called whenTextEllipsisis used inside another component that already handles text truncation.
0.85.70
General
- Testing subpackage exports are now marked as deprecated. Please use
@dynatrace/strato-components-testinginstead.
0.85.60
@dynatrace/strato-iconswas updated to version0.39.3.
0.85.50
Typography
HeadingandParagraphnow 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
0when used as child.
0.85.32
- Documentation update
0.85.31
- Added missing vanilla-extract dependencies to the package.
0.85.30
@dynatrace/strato-iconswas updated to version0.39.2.
UseBreakpoint
useBreakpointhas been moved from@dynatrace/strato-components-preview/coreto@dynatrace/strato-components/layoutsand a migration script has been provided.
0.85.21
- Documentation update
0.85.20
IntentButton
IntentButtonhas been moved from@dynatrace/strato-components-preview/buttonsto@dynatrace/strato-components/buttons. TheiconOnlyprop has been removed. To display only the icon, leave the label empty.
Skeleton
Skeletonhas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/contentand a migration script has been provided.
SkeletonText
SkeletonTexthas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/contentand a migration script has been provided.
Surface
Surfacehas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/layoutsand a migration script has been provided.
0.85.11
- Documentation update
0.85.10
@dynatrace/strato-iconswas updated to version0.39.1.@dynatrace/strato-design-tokenswas updated to version0.20.40.
Button
Buttonhas been moved from@dynatrace/strato-components-preview/buttonsto@dynatrace/strato-components/buttonsand a migration script has been provided.
0.85.0
General
- Drop react 17 support.
- Drop @testing-library/react 12 support.
- Drop @testing-library/user-event 13 support.
@dynatrace/strato-iconswas updated to version0.39.0.
General
- Add @testing-library/react 15 support.
0.84.51
General
- Content subpackage is now exported from the
@dynatrace/strato-componentsentrypoint.
0.84.50
@dynatrace/strato-iconswas updated to version0.38.0.
Container
Containerhas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/layoutsand a migration script has been provided.
Flex
Flexhas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/layoutsand a migration script has been provided.
Grid
Gridhas been moved from@dynatrace/strato-components-preview/layouts-coreto@dynatrace/strato-components/layoutsand a migration script has been provided.
ProgressBar, ProgressCircle
ProgressBarandProgressCirclehave been moved from@dynatrace/strato-components-preview/coreto@dynatrace/strato-components/contentand a migration script has been provided.
0.84.42
- Documentation update
0.84.41
- Documentation update
0.84.40
@dynatrace/strato-design-tokenswas updated to version0.20.30.
Typography
- Typography is migrated from
@dynatrace/strato-components-preview/typographyto@dynatrace/strato-components/typographyand a migration script has been provided.
Divider
- Divider has been moved from
@dynatrace/strato-components-preview/typographyto@dynatrace/strato-components/layoutsand a migration script has been provided.
0.84.31
- Documentation update
0.84.30
@dynatrace/strato-design-tokenswas updated to version0.20.20.
0.84.21
- Documentation update
0.84.20
0.84.12
- Documentation update
0.84.11
@dynatrace/strato-design-tokenswas updated to version0.20.10.@dynatrace/strato-iconswas updated to version0.37.0.
AppRoot
AppRootcomponent was moved from@dynatrace/strato-components-preview.