Components preview
0.116.13
Calendar
Calendar
header reflects the actual month when selecting the first of the month.Calendar
no longer shows duplicate dates when DST changes and correctly applies the initial time.
0.116.12
General
@dynatrace-sdk/client-notification
is no longer a production dependency.
0.116.11
CategoricalBarChart
- Fix cropped labels in bottom axis for some cases (unique categories).
0.116.10
@dynatrace/strato-components
was updated to0.85.10
.@dynatrace/strato-icons
was updated to0.39.1
.@dynatrace/strato-design-tokens
was updated to0.20.40
.
Charts
- Added
XYChart
andHeatmap
charts. - Downloaded CSV data is now sanitized to prevent injection and parses dates to ISO8601 to preserve consistency.
RangeLegend
ofHoneycomb
doesn't reverse its items when re-rendering.
Editors
- Added
required
as a prop which setsaria-required
to true in theCodeEditor
andDQLEditor
. onChange
is now called when content is deleted viactrl+a
followed bydel
.value
prop change now correctly updates content regardless of cursor position.onChange
is now called on undo or redo.
AnnotationsChart
- Remove symbol content when range marker is too short and
textOverflow
istruncate
.
Button
Button
has been moved from@dynatrace/strato-components-preview/buttons
to@dynatrace/strato-components/buttons
and a migration script has been provided.
Calendar
- Fixes the today indicator when using a user setting timezone like UTC+/-offset.
DataTable
- Ensure column order considers prefix and suffix columns.
DataTableV2
- Added
DataTableV2
. - Introducing columnType
markdown
that can display content formatted in markdown-style. - Added syntax highlighting for log-content.
FilterField
- Now supports undo and redo.
onChange
is now called on undo or redo.- Selection is now set correctly when programmatically changing the value.
- Now shows suggestions when typing
in
as an operator, and moves the cursor to the right when applying a suggestion. - Added virtualization and
max-height
toFilterField
suggestions. - Virtual focus is now reset correctly when closing the suggestions overlay.
- Inclusion list now contains whole
FilterField
leaf nodes in addition to the string values.
Histogram
- Now supports programmatic zooming.
Honeycomb
- A bug preventing the correct color from being displayed for categories with capital letters was resolved.
- The legend now does not crash when applying
ColorRanges
with some range with from=to.
NotifyButton
- Added
NotifyButton
.
SelectV2
- Now aria-controls are correctly mapped.
- Overflow ellipsis now applies correctly in multi select mode.
SingleValue
- Fix issue with fractions and percentages in Firefox.
- Remove trend arrow when no value and label exists.
TimeframeSelector
- Fixed an issue where the user-settings' timezone was not considered when entering time in a certain format.
Timeseries
- Fixed issue that caused the axis ticks to not use the correct time zone.
- The
List
'stokenValue
prop now contains the whole leaf node of each value provided in the list.
Tooltip
- Now uses new animation.
TreeMap
- Apply ellipsis to node labels.
- Now supports the cluster aggregation.
0.116.1
Annotations
- Fixed Annotations breaking when Track has no Markers.
Filters
- Filter field list now includes all types of values again.
0.116.0
General
- Drop react 17 support.
- Drop @testing-library/react 12 support.
- Drop @testing-library/user-event 13 support.
Core
- Removed deprecated TimeFrame type.
Forms-core
- Deprecated internal
_TIMEFRAME_EXPRESSION_COMPATIBILITY
regex and_migrateDeprecatedExpression
function are removed.
Layouts-core
- Deprecated
Columns
andColumn
component are removed.
Button
- Deprecated types
TextAlignOptionsType
,ButtonWidthOptionsType
,ButtonSizeOptionsType
,behaviorTypeOptions
andButtonBehaviorType
are removed.
Chip
- Deprecated
ColorType
,SizeType
,VariantType
andWidthType
Chip props are removed. Deprecatedvisible
andhidden
numbers in theChipGroupContext
are removed. UsevisibleKeys
andhiddenKeys
instead. Removed deprecatedmaxWidth
on the BaseChip in favor ofstyle
override.
Container
- Removed deprecated
ContainerVariantOptions
andContainerColorOptions
types.
DateTimePicker
- Removed deprecated imperative handle functions
show
/hide
. Useopen
/close
instead.
FilterField
- All occurrences of logical operators in the filter field syntax tree are now upper case.
- The string to tree conversion util now also returns the
isValid
flag in addition to the tree. The return type of the util changes from just the tree to{ tree: FilterFieldTree, isValid: boolean }
. Either destructure the result or access with dot notation.
Hint
- Removed deprecated
hasError
prop. To add an error to a form control, please use aFormFieldMessage.Item
inside aFormFieldMessage
component.
Treemap
- Removed deprecated property
minNodeSize
.
@dynatrace/strato-components
was updated to0.85.0
.@dynatrace/strato-icons
was updated to0.39.0
.
General
- Added @testing-library/react 15 support.
Charts
- Fixed bottom axis labels that were vertically cropped in some edge cases.
- Category
warn
as alias ofwarning
was added tolog-status
andlog-level
color palettes.
Annotations
- Fixed marker content to be properly centered when markers are cropped.
- Add x axis label for annotations chart.
- Some minor visual issues were solved in Annotations.
ConversionUtilities
- Improved conversion performance by optimizing the type lookups.
CellRenderers
- Deprecated
CellRendererOptions
andCellRendererTextTruncationOptions
which are only used in connection with the already-deprecatedcellRenderer
.
Editors
onChange
is now correctly called when text is changed to match the value prop.
Formatters
- The
formatTimeframe
function is deprecated as the formatting is different from the newTimeFrameV2
type and will be removed.
AnnotationsChart
- Implement config import and export.
BaseInput
- Inputs with
type="search"
no longer render browser default clear (x) button.
CodeEditor
- Autocompletion suggestions with a suffix now have the correct dimensions.
DataTable
- Introduced columnType
markdown
that can display content formatted in markdown-style. - Row actions now receive correct
TableRow
data after any table column sort. - Table now correctly applies minimum height to its body when row density is set to condensed.
- Fixes column settings interfering with column order.
- Pagination now works with data that contains circular references.
- When table data is downloaded now all values will be exported as raw data except the date values that will be formatted in ISO 8601 format.
DataTable
now supports syntax highlighting for log-content.
DateTimePicker
- Fixes
DateTimePicker
breaking on multiple lines on overflow.
FilterField
FilterField
now supports the propsdisabled
,aria-disabled
andread-only
.SuggestionTips
now contains a link to theFilterField
syntax documentation.- Applying a suggestion with the cursor inside a list now no longer replaces the list's brackets. The applied suggestion is only added to the list.
- The
in
andnot in
suggestions include more details on the operators. When applying them brackets are added. - Clear statement button type is now set to 'button' to prevent form submission.
- The
FilterField
now uses the same grammar for basic and complex mode and only shows errors in the basic mode for unsupported tokens.
Honeycomb
- The hive of the honeycomb is able to fill vertical space.
Markdown
- Rendering content of the
Markdown
component can now be customized with thecustomComponentMappings
property.
Modal
Modal
andSheet
now allow components within their title as well.
SelectV2
- Overlay is closed when selecting an already selected option in single selection mode.
Timeseries
- The
userData
deprecated prop has been removed fromTimeseriesBand
. Extend theTimeseriesBand
type to add custom data. - Fixed timeseries chart breaking when filtering from chart interactions.
TimeseriesChart
- Introduced programmatic enablement for the explore zoom mode (timeseries only).
Toast
- Tooltips now apply the correct zIndex within a
Toast
.
0.115.25
FilterField
- Filter field list now includes all types of values again.
0.115.24
Charts
- Fixed React 17 apps breaking because of a React 18 dependency.
0.115.23
FilterField
- All occurrences of logical operators in the filter field syntax tree are now upper case.
Editors
onChange
is now correctly called when text is changed to match the value prop.
FilterField
- Applying a suggestion with the cursor inside a list now no longer replaces the list's brackets. The applied suggestion is only added to the list.
- The
FilterField
now uses the same grammar for basic and complex mode and only shows errors in the basic mode for unsupported tokens.
TimeseriesChart
- Fixed timeseries chart breaking when filtering from chart interactions.
0.115.22
- Documentation correction.
0.115.21
@dynatrace/strato-components
was updated to0.84.51
.
0.115.20
Container
Container
has been moved from@dynatrace/strato-components-preview/layouts-core
to@dynatrace/strato-components/layouts
and a migration script has been provided.
DatePicker
DatePicker
is deprecated and will be removed in a future release. Please use theDateTimePicker
instead.
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
andProgressCircle
have been moved from@dynatrace/strato-components-preview/core
to@dynatrace/strato-components/content
and a migration script has been provided.
@dynatrace/strato-components
was updated to0.84.50
.@dynatrace/strato-icons
was updated to0.38.0
.
Accordion
Accordion
always animates the opening of a section.
AnnotationsChart
- Exposed new subcomponent to provide custom tooltip template.
- Fixed marker react icons flickering on hover.
Avatar
Avatar.Label
andAvatar.Subtitle
can text break when overflown.
Charts
- Set a fixed z-index to Timeseries and Histogram axis magnifiers to prevent other elements from overlapping them.
- Remove the
Bin:
prefix for the tooltip in the Histogram. - Changed default ratio to automatically set the optimal legend size for the initial rendering (based on the content of the legend).
- Improved the alignment for all axis-based chart.
- Fixed markers misplacement when vertical scroll was present in Annotations.
- Change
AnnotationsTooltip
position. - Annotations supports truncation of long text and also expand to fit a long text.
- Value markers in Annotation have a new visualisation and they don't overflow from tracks anymore.
- Fixed max height of the tooltip body.
- Deprecated
resizable
prop from Legend API.
ChipGroup
ChipGroup
now correctly displays the show more button initially.
DataTable
- Sorting a column no longer submits a wrapping form.
- If
formatter
settings have been configured in the column definition, they can now be applied in a custom cell renderer. - Number comparator now handles
NaN
values in data correctly. - Download now works with escaped accessors.
- When downloading table data, values starting with
=
,+
,-
,@
,\t
and\r
are now escaped with a single quote to mitigate CSV injection.
Editors
- Cursor position no longer resets to zero when typing.
- Markdown prefix now has the correct color in light mode.
FilterField
- The
FilterField
now provides theisValid
flag in theonChange
callback. When clearing theFilterField
with the clear button,onChange
is now called prior toonFilter
. - Provide utility for converting a filter field tree into its string representation.
not-contains
operator is detected correctly.- The filter field syntax tree is now generated correctly for nested groups.
- Supports
in
andnot in
operator.
Microguide
Microguide
is now clickable whenMenu
is open.
Page
- The
Page.DetailView
now provides akeepMounted
prop, preventing it's contents from unmounting when dismissing the detail view.
SelectV2
- Selecting an option within a group without a label works in controlled mode.
SingleValue
- Make label visible for empty
SingleValue
.
Sparkline
- Fixed display of isolated data points when
gapPolicy
is set togap
.
Tables
- Change default page size from
10
to100
and default page size options from[10, 20, 30, 40, 50]
to[10, 20, 50, 100, 250, 500, 1000]
for pagination.
Timeframeselector
- The
TimeframeSelector.DisplayValue
andTimeframeSelector.CustomTrigger
now also accept a render function as child. TimeframeSelector
now shows the right timeframe translations for relative dates.
Timeseries
- Update the tooltip items to appear in the same sequence of the series plotted in the chart.
0.115.17
Charts
- Fixed React 17 apps breaking because of a React 18 dependency.
0.115.16
TimeseriesChart
- Fixed timeseries chart breaking when filtering from chart interactions.
0.115.15
- Documentation correction.
0.115.14
@dynatrace/strato-components
was updated to0.84.42
.
0.115.13
Migrations
- Fixed FileMode error in migrations.
0.115.12
@dynatrace/strato-components
was updated to0.84.41
.
0.115.11
- Documentation correction.
0.115.10
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.
@dynatrace/strato-components
was updated to0.84.40
.@dynatrace/strato-design-tokens
was updated to0.20.30
.
AnnotationsChart
- Included support for timestamp data (number to date conversion).
Calendar, DateTimeRangePicker, TimeframeSelector
- The
Calendar
now keeps the original time when switching to dates with a different daylight savings time offset.
Charts
- Provided new
AnnotationsActionsPayload
type for custom actions.
DataTable
- Column ordering via column action now takes into consideration hidden columns.
DatePicker, DateTimePicker, DateTimeRangePicker, TimeframeSelector
- These components now take into account the timezone from the user settings.
DateTimeRangePicker
DateTimeRangePicker
no longer crashes when range selection is incomplete and the user clicks outside.
DateTimeRangePicker, TimeframeSelector
DateTimeRangePicker
no longer shows a validation error despite the correct date and time format in specific regions andTimeframeSelector
no longer crashes.
FilterField
- Error state is updated when using the clear filter button.
- Keyboard navigation for the
FilterField
suggestions supports Home, End, Page Up and Page Down keys. - Suggestions overlay closes when
onFilter
is triggered. - Number that precedes a closing bracket is correctly detected as a number.
HoneycombChart
- Exposed shared legend props.
PieChart
- Added early error handler.
SelectV2
- Content width is not jumping when not using the max-content setting on the
SelectV2.Content
. - Overlay content is not jumping to a different option when scrolling.
TimeframeSelector
- Timezone information is now shown in the
TimeframeSelector
overlay. TimeframeSelector
now has responsive support.
TreeMap
- Added cluster background color based on the nodes color.
- Added
value
option toTreeMap
valueAccessor.
0.115.1
@dynatrace/strato-components
was updated to0.84.31
.
TimeframeSelector
- Timeframe selector now also supports React17.
0.115.0
@dynatrace/strato-components
was updated to0.84.30
.@dynatrace/strato-design-tokens
was updated to0.20.20
.
Filters
The filter field tree now groups statements that are connected with the same logical operator.
Example input: a = 1 b = 1 OR c = 2
Converted syntax tree: Before:
[
{
"type": "Statement",
"a = 1"
},
{
"type": "Statement",
"b = 1"
},
{
"type": "LogicalOperator",
"OR"
},
{
"type": "Statement",
"c = 2"
}
]
After:
{
"type": "Group",
"range": {
"from": 0,
"to": 20
},
"logicalOperator": "or",
"explicit": false,
"children": [
{
"type": "Group",
"logicalOperator": "and",
"range": {
"from": 0,
"to": 11
},
"explicit": false,
"children": [
{
"type": "Statement",
"a = 1"
},
{
"type": "Statement",
"b = 1"
}
]
},
{
"type": "LogicalOperator",
"OR"
},
{
"type": "Statement",
"c = 2"
}
]
}
Forms
- All form components use
FormControlProps
and extends controlled and uncontrolled props. Most controlled and uncontrolled form props are deprecated, and theFormControlProps
should be used instead.Checkbox
,Radio
,Switch
andTextArea
use theFormControlRef
.
AnnotationChart
- Prevent from setting negative height in
AnnotationCharts
.
CategoricalBarChart
- Fixed incorrect bottom threshold in the categorical bar chart.
Charts
- Added more space between tooltip items in Annotations.
- Added an improvement to avoid labels getting cropped in the range legend.
- Fixed issue that happened in some browsers where axis labels overlapped with the axis ticks.
- Support empty content in Annotations markers.
CodeEditor
- CodeEditor no longer crashes when the folding number provided exceeds the text character length.
DataTable
- Download now preserves new line and carriage return characters and escapes entries containing them.
- DataTable now supports column type of log content.
- Fixes unexpected behavior in auto-width columns by correcting how DataTable sets the last column.
DateTimePicker
- DateTimePicker is now taking the whole width of its container.
FilterField
- Add string to filter field tree conversion utility function.
onFilter
is also triggered when deleting the entire filter using the clear button.
General
- Added 'data-dtrum-mask' and 'data-dtrum-allow' to all components root node, defining the masking of data in session replay.
HoneycombChart
- An issue breaking the honeycomb when setting an invalid colorScheme was solved.
MeterBarChart
- Fixed chart border overlapping container border
MultiMeterBarChart
- Added a default auto option to the max property in order to calculate the max value based on the segments values.
Page
Page.Main
no longer flickers if animations are disabled.
SelectV2
onBlur
event only triggers when focus moves outside of the select.
Switch
- The Switch is no longer able to be focused while disabled, this behavior can be achieved with aria-disabled, but the interactivity needs to be disabled.
TimeseriesChart
- Fixed multiple geometries not working in some specific cases.
0.114.12
@dynatrace/strato-components
was updated to0.84.21
.
0.114.11
- Documentation correction.
0.114.10
@dynatrace/strato-components
was updated to0.84.20
.
AnnotationsChart
- Added support for numerical data.
AnnotationsChart
now supports a configurable height
Button
- The
SharedInputPropsContext
is not consumed by theButton
anymore. Workarounds that were needed so that the Button does not consume the id coming from the FormField can now be removed.
DataTable
- Download now also replaces carriage returns with spaces.
- The table's accessibility is now improved.
DataTable.Cell
now also acceptsAriaLabelingProps
.
DatePicker
- No longer trap focus within the overlay.
DateTimePicker
- No longer trap focus within the overlay.
- Now updates the
aria-invalid
property correctly.
DateTimeRangePicker
- No longer trap focus within the overlay.
DQLEditor
- Fix missing suggestions in some cases (by statement).
FilterField
- Duration value works with one space character at the end of the statement.
- Support basic and complex syntax in the filter field.
Forms
- The
SharedInputPropsContext
is not consumed by form control components anymore. Workarounds that were needed so that the Button does not consume the id coming from the FormField can now be removed.
HistogramChart
- Added series color override to the Histogram chart.
- Fixed magnifiers background color when range zooming.
- Fixed alignment between the vertical line and the crosshair when range zooming.
- Fixed the proper selected bin from the
HistogramChart
fromseriesActions
prop.
HoneycombChart
- Added string support for height prop in
HoneycombChart
. - A bug disallowing honeycomb legend to show custom categorical color palettes was solved.
SelectV2
SelectV2.Filter
does not consume the required coming from the FormField.- Now updates the
aria-invalid
property correctly.
TimeframeSelector
- TimeframeSelector display value now shows milliseconds when precision is set accordingly.
- No longer trap focus within the overlay.
TimeseriesChart
- Fixed magnifiers background color when range zooming.
- Fixed alignment between the vertical line and the crosshair when range zooming.
- Exposed selected data point in the
TimeseriesChart
seriesActions
prop.
Tooltip
data-testId
,className
, andstyle
is now applied to the Tooltip element instead of the hidden wrapper.
TreeMap
- Added a
valueAccessor
prop.
0.114.3
:::
@dynatrace/strato-components
was updated to0.84.12
.
HoneycombChart
- A bug disallowing honeycomb legend to show custom categorical color palettes was solved.
0.114.2
DateTimeRangePicker
- DateTimeRangePicker no longer crashes when opening it.
0.114.1
- Documentation correction.
0.114.0
General
- A new peerDependency to
@dynatrace/strato-components
is now added. You might have to install it manually.
Filters
- The auto suggestions array of the
FilterField
no longer uses theSuggestionProps
type, but a separate type.
The AppRoot
component and some connected components, hooks, and types have been moved to the @dynatrace/strato-components
package. All symbols are still exported from the @dynatrace/strato-components-preview/core
entrypoint. dt-app
migration is provided to adjust the import paths.
@dynatrace/strato-components
was updated to0.84.11
.@dynatrace/strato-design-tokens
was updated to version0.20.10
.@dynatrace/strato-icons
was updated to version0.37.0
.
Accordion
- Accordion no longer animates during initial render.
AnnotationsChart
- Introduced time-based X axis in
AnnotationsChart
.
Charts
- All charts now support setting
style
orclassName
to apply on their root element. - Series actions now support sub menus.
DataTable
DataTable.Pagination
now forwards all exposed aria roles properly.- Now date type column can be customized by using the
formatter
property within the column definition and passingFormatDateOptions
to it. - DataTable can now sort columns with a mix of number and BigInt values.
- The
DataTable.FontStyle
andDataTable.LineWrap
column actions can now also be used with column groups. DataTable.Pagination
now supportsstyle
andclassName
props.- The loading indicator now remains centered in the table, regardless of scrolling.
- Resolved issues with printing in Chrome when table columns are resized wider than the table width.
DatePicker
- The
DatePicker
calendar header icons now have the correct width.
FilterField
- The
FilterField
supports different insertion strategies for applying suggestions. - Escaped textValues are set correctly for contains and ends-with operator.
- The
FilterField
ignores trailing spaces of suggestions if already present in the input.
HoneycombChart
- Fixed a Webkit browsers related bug whilst rendering the hexagons of the honeycombs.
Overlays
- Keydown events are captured within overlays.
SelectV2
- Custom
DisplayValue
works with theTextEllipsis
component and is automatically truncated if it is a string.
Sheet
- The
Sheet
component now stays open when interacting with an overlay on top of them.
TimeframeSelector
- The
TimeframeSelector
now uses theDateTimeRangePicker
inside the overlay. - The
TimeframeSelector
calendar header icons now have the correct width. - The
TimeframeSelector
trigger now supports form validation.
TreemapChart
-
Added support for labels on the clusters.
-
Updated dependencies
@dynatrace/strato-design-tokens@0.20.10
@dynatrace/strato-components@0.84.11
@dynatrace/strato-icons@0.37.0
0.113.11
- Internal corrections release.
0.113.10
Button
- Deprecated
TextAlignOptionsType
,ButtonWidthOptionsType
,ButtonSizeOptionsType
,behaviorTypeOptions
,ButtonBehaviorType
in favor of inline types.
TreeMap
- Deprecated
minNodeSize
prop.
@dynatrace/strato-design-tokens
was updated to version0.20.9
.@dynatrace/strato-icons
was updated to version0.36.2
.
Button
- Deprecated
TextAlignOptionsType
,ButtonWidthOptionsType
,ButtonSizeOptionsType
,behaviorTypeOptions
,ButtonBehaviorType
in favor of inline types.
Charts
- Added max width property to the tooltip info content container.
- Add support for tooltip templates in Annotations.
- Annotations's markers get their truncation threshold fixed. Also, padding is fixed for markers with values (not ranges).
DataTable
- If
ratioWidth
is enabled, the resize handle is no longer displayed. - In the column visibility configuration it's now possible to specify columns as 'always visible'. Use the value 'always-visible'. Furthermore, it's no longer necessary to specify all columnVisibility entries because 'visible' will be used as the default.
- The table actions slot container should now take full table width when the toolbar is not displayed.
- Column visibility settings in the toolbar should now work correctly for uncontrolled props.
- It is now possible to pass custom page size options to the
DataTable.Pagination
and the passed page size is not sanitized anymore.
List
- For list markers (bullet points, numbers), color, font family and font size are now inherited. Font weight remains as not being inherited.
Microguide
- The Microguide now provides the additional
onStepChange
callback, that allows you to react to users navigating between steps.
SelectV2
- Overlay styles no longer conflict with
Surface
styles. - Improves focus handling for the
SelectV2
component when used with aSelectV2.Filter
.
TreeMap
- Added node labels display to treemap.
- Deprecate
minNodeSize
props from TreeMap.
0.113.2
Charts
- Fixes disappearing chart legends when series items are more than 50.
SelectV2
SelectV2
does not crash when pressing tab and not using it inside aFormField
component.
0.113.1
TimeframeSelector
- Improved TimeframeSelector types to enable easy usage. This allows a simple string value for from and to without the need of parsing the time.
0.113.0
Charts
- Removes deprecated
userData
prop fromTimeseries
type. Extend theTimeseries
type to add custom data. - Removes
toolbar
,collapsed
anddefaultMode
props fromChartInteractionsConfig
andChartInteractionsProps
. - The
PieChart
andDonutChart
main types do not extend anymore fromSVGSVGElement
Core
- Removes deprecated
stopPropagation
property fromBaseEvent
. UsecontinuePropagation
property instead.
Filters
- Remove deprecated
defaultPinnedState
fromFilterBarItem
. Define the pinned state on theFilterBar
instead.
Formatters
- Removes deprecated
bytes
converter and formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
date
formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
duration
formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
custom unit
formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
percent
formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
bit
converter and formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
number
formatter. Use@dynatrace-sdk/units
instead. - Removes deprecated
rate
formatter. Use@dynatrace-sdk/units
instead.
Forms
- Removes deprecated
InputRef
interface. UseFormControlRef
instead. - Removes deprecated
Select
component. UseSelectV2
component instead. - Removes deprecated
resizable
property on theTextarea
component. Use theresize
property instead. - Removes deprecated
label
property on theFormField
component. Render theLabel
component within theFormField
instead. - Removes deprecated
ariaLabelToggle
andplaceholder
properties from theTimeframeSelector
component. Please use theCustomTrigger
or theTrigger
component to provide anaria-label
or aplaceholder
. - The
DateTimePicker
is now capable of returning anull
value when all input fields are cleared. - The
value
andonChange
of theTimeFrameSelector
component are now using theTimeframeV2
type. - The
TimeframeSelector
now supports uncontrolled and controlled values. The new DQL syntax is used, which means weeks, months, and years are no longer supported. The_migrateDeprecatedExpression
utility is therefore included for compatibility reasons (to support the old expression formats), but will be deprecated.
Layouts core
- Removes deprecated style types
FlexContainerCSS
,FlexContainerProps
,FlexItemCSS
,FlexItemProps
,FlexStyles
,GridContainerCSS
,GridContainerProps
,GridItemCSS
,GridItemProps
,GridStyles
.
Notifications
- Remove deprecated
useToastNotification
hook. Use the staticshowToast
function instead.
Overlays
- Removes deprecated
onClose
property fromuseOverlayWithTrigger
. Use theonOpenChange
property instead.
Typography
- The default rendered element of the
Text
component is nowspan
. Migration is provided.
Charts
userData
prop inTimeseriesBand
interface is now deprecated. ExtendTimeseriesBand
instead to add custom data.
Content
CodeSnippetLanguages
type is now deprecated in favor of inlineCodeSnippetProps['languages']
.maxWidth
on theChip
component is now deprecated in favor of allowing the maxWidth to be set withstyle
.ColorType
,SizeType
,VariantType
andWidthType
are now deprecated in favor ofChipOwnProps
.
Accordion
- An
interactive
prop is now available to control the accordions trigger behavior. - A
color
property is now available on theAccordion
andAccordion.Section
to control the color of theAccordion.Section
s.
Charts
- Series actions can now be disabled.
- Fixes an issue on the
TimeseriesChart
, where some tooltip values were inconsistent with the data that was visually represented. - Fixes an issue that caused the magnifier to change position after unpinning the tooltip.
- Fixes annotations scrollbar overflowing the legend hide/show icon on
TimeseriesChart
andHistogramChart
. - Fixes an issue with the
Tooltip
position, when exiting the chart from the bottom magnifier. - Fixes an issue of the chart tooltip not utilizing the custom formatter when the value representation is set to relative.
Chip
- MaxWidth on the chip now applies to the correct element.
DataTable
- Loading spinner is now also opaque for tables that are not contained.
- When sortBy is updated from ascending to unset,
onSortChange
now accurately reflects it.
Editors
- Editor styles are now updated correctly once the
size
changed.
FilterField
- Correctly detect exists operators before logical operators.
- Adds an
onFilter
callback to theFilterField
and triggers form submission on enter if it is the only input inside a form. - Syntax tree statement node includes key, operator, and value props instead of children array.
- Fixes the suggestion type provided in the suggestions callback.
SelectV2
SelectV2.Content
width now allows setting ofmax-content
.
TextInput
- Fixes an issue with the aria props used for input browser validation when controlState is used.
TimeframeSelector
TimeframeSelector
no longer submits the surrounding form when clicking the Apply button.
0.112.22
Chip
- Chips no longer call onClick twice.
0.112.21
Charts
- Fixes issue that prevented the tooltip from being pinned in the Categorical bar chart.
- Solved chart/legend overlap issue when sending custom style to the charts.
Chip
- Styling no longer breaks for
Chip
component.
DataTable
- Fixes issue with sorting on notebooks/dashboards.
0.112.20
Charts
- timeseries, categorical, honeycomb, histogram, pie, donut, meter bar and multi meter bar chart no longer apply a default padding to their container. If you want to get the padding back, please apply it via the
style
orclassName
prop on the root of the chart.
DataTable
- Padding is no longer applied to custom header render functions by default. If you want to apply the padding, wrap your custom rendered element in the
DataTable.Cell
component.
Typography
- The
Text
component now inherits all styles (font size, font weight, line height, etc.) if notextStyle
orfontStyle
prop is set. To mitigate unexpected visual changes and keep the default text styles, you can manually settextStyle
tobase
or run the provided migration.
Columns
component from layouts-core has been deprecated. Instead please use aGrid
orFlex
component.
@dynatrace/strato-design-tokens
was updated to version^0.20.8
.
Accordion
- New
size
prop is now available on the Accordion withdefault
andcondensed
options. - New
showDividers
prop is now available.
Charts
- New
"status"
color palette is now supported in all charts that support color palettes. - Fixed issue in Categorical, Histogram and Timeseries charts that generated a minimum bar shape for values that were 0.
- Updated styling of bars variant in Timeseries, Histogram and Categorical charts to be consistent.
- Fixed Annotations markers which did not displayed text in Histogram.
- Added overflow to magnifiers for the timeseries, categorical and histogram charts.
- Remove surrounding padding and optimize spacing in timeseries, categorical, honeycomb, histogram, pie, donut, meter bar and multi meter bar.
- Tooltip item virtualization is now fixed.
Checkbox
- Checkbox label design is now aligned with the
Label
component and takes the containers width.
Core
useContainer
hook no longer crashes whenborderBoxSize
is undefined.
DataTable
- An
onDownloadData
callback now is provided when data has been downloaded. It includes information about which subset was downloaded. - Numbers passed to formatted columns can now also be passed as a string.
- Default padding for a custom header was removed. If the default padding for a custom header cell should be applied, please wrap it in the
DataTable.Cell
component. - Next and Previous buttons for the Pagination are now always shown for server-side pagination.
- Fixes sorting issue when accessor is different than id.
- Fixes CSV export for columns with string accessors.
- Currently displayed, sorted data is now exposed via
getCurrentPageData
on the DataTable ref.
EmptyState
- A new generic
EmptyState
component is now available intended for empty and error states.
FilterField
- A new
FilterField
component is now available. - Now enforces a space before / after a comparison operator.
- The
FilterField.LoadingSuggestions
was removed in favor of a wrappingFilterField.Suggestions
component. This compound accepts theloading
prop which shows the loading indicator formerly exposed byFilterField.LoadingSuggestions
.
Forms
- The
TextArea
,DatePicker
,TimeframeSelector
,Checkbox
,Switch
,NumberInput
, andSelectV2
correctly apply the disabled or required state when wrapped in aFormField
. Hint
andFormFieldMessages.Item
components no longer break existing styling.
HistogramChart
- Bin calculation is now supported in the Histogram tooltip header.
HoneycombChart
- Shapes in the Honeycomb chart now have rounded corners.
- Color palette now has lighter color at the bottom when legend is aside in the Honeycomb chart.
MeterbarChart
- Removed the whole header from the shared tooltip.
Sheet
- The
Sheet
component correctly closes on outside clicks.
SkeletonText
- SkeletonText no longer adds margins if only a single line is rendered.
SparklineChart
- Support smooth and linear curve shapes in
Sparkline
component.
TimeseriesChart
- Fixed tooltip disappearing when clicking twice in the same annotations marker.
Typography
- Style inheritance is now improved. Only block-level components like
Paragraph
orHeading
explicitly define font family, font size, etc., while inline components likeStrong
orLink
only set the minimum styles necessary and inherit the rest. In addition to the font family, the default font size is now also set on the body.
0.112.11
DataTable
- Fixes sorting issue when accessor is different than id.
0.112.10
Forms
Hint
andFormFieldMessages.Item
components do not break existing styling.
0.112.9
@dynatrace/strato-design-tokens
was updated to version^0.20.7
.
0.112.8
Forms
- FormControls no longer interfere with the focus after invalid input.
0.112.7
Checkbox
- Faulty css style has been fixed in the checkbox.
0.112.6
- The
ariaLabelToggle
and theplaceholder
prop will be removed from theTimeframeSelector
. Please use theCustomTrigger
or theTrigger
component, which has anaria-label
and aplaceholder
prop. useTextTruncation
hook and theText
component'smaxLines
prop are now deprecated.
@dynatrace/strato-icons
was updated to version^0.36.1
.
Charts
- Exposes
className
andstyle
props of TimeseriesChart, HistogramChart and CategoricalBarChart. - Fixed Annotations not being shown when used inside an animated component.
- Fixed text ellipsis middle truncation inconsistencies.
- Added in Histogram and Timeseries charts toolbar, the key shortcuts label to the toolbar button tooltip.
Core
getTextStyle
is now deprecated andtextStyleCSS
is provided as a vanilla-extract alternative.@print
stylesheet now properly forces light theme.
Conversion utilities
- Deprecated the
cellRenderer
function.
DataTable
- Fixed last column behavior altered by add/delete column operations on DataTable.
- Fixed issue where occasionally the end of the column autowidth measuring cycle didn't get triggered.
- DataTable no longer sorts incorrectly if provided with non-existing columns.
- Added
columnVirtualization
prop that allows for virtualizing columns.
DQLEditor
- Missing
size
prop has now been added.
FilterField
- Adds form support for FilterField.
- Groups in FilterField are detected and structured correctly.
Honeycomb
- Solved issue related to the tooltip visibility when clicking out of the chart.
- Vertical numerical legend in honeycombs now has the lower value at the bottom.
- Range legend visualize now the items in desc order.
- Now honeycomb has a responsive gap between nodes.
- Honeycomb now is able to parse values to color categories, no matter the casing of the value.
- Honeycomb tooltip fixes the color of the node when its pinned.
Menu
- Font weight of menu items and spacing of the
Menu.SubTrigger
have been adjusted.
PieChart
- Supports units in labels for absolute values.
SelectV2
- The clearable SelectV2 now only focuses the Clear Selection button instead of two elements when clicking on the filter and tabbing.
Sparkline
- Removed
'auto'
option from the Sparkline y baseline configuration. - Fixed Sparkline being cropped on top in some cases.
Tabs
- Right-clicking a
Tab
component no longer selects them.
TimeFrameSelector
- Add support for customizing the TimeframeSelector trigger and add precision to the TimeframeSelector.
0.112.5
Dependencies
- Removed no longer needed peerDependencies from the list.
0.112.4
SelectV2
- Full-width SelectV2 trigger does not outgrow the container.
0.112.3
General
As a general effort to expose more control on className
, style
and data-testid
on all components, the following components now allow setting any of these three to their internal root element: Content
, CodeSnippet
, Divider
, ExpandableText
, KeyboardShortcutTooltip
, DataTable
, DataTableCell
, DataTableToolbar
, SimpleTable
, BaseCodeEditor
, FormattedTimeFrame
, AppCard
, AppLink
, Tabs
, Tab
, TabPanel
, Sheet
, Trigger
, Blockquote
, Code
, Divider
, Emphasis
, ExternalLink
, Heading
, Link
, Paragraph
, Section
, Strikethrough
, Strong
, Text
, TextEllipses
, Toast
, Tooltip
, TooltipElement
, Title
, Visual
, and Description
.
- The
label
prop on theFormField
is now deprecated. - The
InputRef
type is now deprecated and is replaced with theFormControlRef
type. - The
Section
component, theDocumentOutlineContext
and theDocumentOutlineProvider
are now deprecated.
Accordion
Accordion.Section
now supports akeepMounted
prop to preserve the components content even when hidden.- Controlled state on the accordion now works correctly.
Button
Button
now aligns the suffix correctly when the width is set to a percentage.
CodeSnippet
- Now DQL codesnippet with triple-quotes should be highlighted correctly.
DataTable
- Row threshold background color is now correctly applied, also without zebra row separation.
- Column or Cell action menus are no longer bound by the DataTable boundaries.
- Improved row height for space efficiency with condensed row density.
- Fails to sort columns containing numeric values if any value within the column is either empty or includes non-numeric characters, such as commas.
- DataTable no longer throws an error when server side pagination is used in conjunction with selectable rows.
DQLEditor
- When value of the editor is updated programmatically, highlighting should happen only in updated editor.
FormField
- The FormField supports using a Label inside the FormField. FormMessages have been added to provide errors and hints that are automatically connected to the form control.
HoneycombChart
- Improved quality and performance for honeycomb chart.
Page
Page.Sidebar
now supports akeepMounted
prop to preserve the components content even when hidden.
SelectV2
SelectV2.Trigger
now aligns the suffix correctly when the width is set to a percentage.- Empty state is shown when
showSelectedOptionsFirst
is enabled. ref
on the component now exposes afocus
function to set focus the trigger.
Tabs
Tab
now supports akeepMounted
prop to preserve the components content even when hidden.
TextInput
- The
TextInput
now supports browser validation out of the box and displays those errors in theFormFieldMessages
slot.
TimeframeSelector
- Add support for custom preset items using the
TimeframeSelector.Presets
andTimeframeSelector.PresetItem
compound components.
TimeseriesChart
- Added
curve
prop to provide option of setting the type of curve shape applied to line, band and area series. - Timeseries with multiple units and specific Y-axes could filter the data shown in the chart.
- Adapted the formatter precision by default.
TreeMapChart
- Added support for the legend slot.
0.112.2
TimeframeSelector
- Fixes an issue with the TimeframeSelector's DatePicker inputs moving the cursor at the end on changes.
0.112.1
SingleValue
- Faulty alignment in the SingleValue is now fixed.
0.112.0
TimeframeSelector
- The type of the forwarded ref changed to
TimeRangePickerRef
to include/give access to thefrom
andto
input refs. So if you explicitly use the old type for the ref -FormControlWithOverlayRef
- you would need to manually rename it toTimeRangePickerRef
.
@dynatrace/strato-icons
was updated to version^0.36.0
.
Accordion
- Accordion content now correctly applies sizing without overflow.
General
- Scrollbar styling issue in Chrome 121+ are now fixed.
Charts
- Units now are correctly serialized for CSV download.
- Extended available color palettes with sequential and diverging palettes.
DataTable
- The sub rows column is now updated once sub rows are added/removed in the data.
- Improved custom cell value handling for download as CSV.
- Newlines characters are now replaced with spaces in downloaded CSV.
ColumnSettings
buttons now show tooltips when hovered over.- Selected rows now reset if the data provided changes.
- Pagination no longer breaks if there is no data present.
data-testid
attribute is now exposed on the DataTable.
DQLEditor
- Default font color now aligns with designs.
- The autocomplete label now uses the full width and the command type is no longer shown.
- Autocomplete list now shows a visual difference between touch/mouse and keyboard focus and hover.
FilterBar
- Now updates the states correctly and doesn't trigger an error on initial use.
HistogramChart
- Highlighted series no longer get lost after filtering the legend.
- Adjusted the formatters default precisions.
- Absolute min and max values now display correctly in the Axes.
Tabs
- Adding Tabs dynamically no longer deselects selected tabs.
TextEllipsis
- Now recalculates it's state when new fonts are loaded.
TimeframeSelector
TimeframeSelector
now features a new design and support for form integration.
TimeseriesChart
- Highlighted series no longer get lost after filtering the legend.
- Fixed misalignment in
TimeseriesChart
annotations tracks when axislabels were present.
SelectV2
- Now emits an
onOpenChange
event when the dropdown of the Select opens or closes.
0.111.7
SingleValue
- Faulty alignment in the SingleValue is now fixed.
0.111.6
@dynatrace/strato-icons
was updated to version^0.35.11
.
General
As a general effort to expose more control on className
, style
and data-testid
on all components, the following components now allow setting any of these three to their internal root element: DonutChart
, PieChart
, MeterBarChart
, MultiMeterBarChart
.
CodeEditor
- Improved visual representation of
read-only
mode. - The new
size
prop now allows for a condensed visual representation.
CodeSnippet
- The new
size
prop now allows for a condensed visual representation.
DataTable
- Sorting a column in quick succession no longer endlessly toggles the column sort.
- Toggling the
select all
checkbox no longer affects the sorting of the table - The
autoWidth
setting for columns now reacts correctly to changing font faces.
DQLEditor
- Improved visual representation of
read-only
mode.
HistogramChart
- Panning is now possible in Explore mode via the middle mouse button.
- Enables the pan feature for the axis in Explore mode when zoom is applied.
- Navigation within the toolbar with arrow keys now works correctly.
KeyboardShortcut
- Remaining props of the component are now passed to the underlying root element.
SelectV2
- Activating already selected options in a single select mode no longer triggers an onChange.
- The dropdown now closes correctly when selecting an option and a custom trigger is defined.
SingleValueChart
- Emojis, single characters and glyphs are now supported in the SingleValue icon.
SparklineChart
- GapPolicy is now supported.
Tabs
- Setting a custom data-testid no longer influences selection behavior of the tabs.
TimeseriesChart
- Panning is now possible in Explore mode via the middle mouse button.
- Enables the pan feature for the axis in Explore mode when zoom is applied.
- Navigation within the toolbar with arrow keys now works correctly.
Toast
- The Toast now allows a custom id to be set in order to avoid duplicate notifications popping up.
TreeMapChart
- Now allows importing and exporting of configs.
0.111.5
General
- Updated d3-color dependency due to a vulnerable version.
0.111.4
Charts
ChartInteractionsConfig.defaultMode
-This property will be removed, as theinspect
andzoom-x
modes no longer exist. The default mode will be changed toexplore
.userData
prop is now deprecated on theTimeseriesChart
.
General
As a general effort to expose more control on className
, style
and data-testid
on all components, the following components now allow setting any of these three to their internal root element: Accordion
, Avatar
, AvatarGroup
, Breadcrumbs
, Button
, Checkbox
, Chip
, ChipGroup
, Column
, Columns
, DatePicker
, DateTimePicker
, FieldSet
, FormField
, Hint
, IntentButton
, Label
, Menu.Group
, Menu.Item
, NumberInput
, PasswordInput
, ProgressBar
, ProgressCircle
, Radio
, RunQueryButton
, Select
, SelectV2
, Skeleton
, SkeletonText
, Surface
, Switch
, TextArea
, TextInput
, TimeframeSelector
, ToggleButtonGroup
.
DataTable
The new UI for controlling column visibility and column order in the DataTable might have an impact on your UI test if you have been interacting or testing with the column visibility or column order controls.
@dynatrace-sdk/units
was updated to version^0.11.1
.
CategoricalBarChart
- Inspecting a series action no longer throws an error.
Charts
- Annotation markers are now cropped and respect the overflow controls.
- Zooming can now be performed via the mouse wheel scroll or keyboard shortcut, when the toolbar is collapsed.
DataTable
- Introduced a new UI for controlling column visibility and column order. The previous functionality of column visibility has been reorganized and is now integrated into the same column settings modal instead of appearing as an overlay.
- An issue with initial rendering flickers is now fixed.
- Column menu actions performance is improved.
- The
DataTable.Cell
now allowsstyle
andclassName
to be set. - Columns are now correctly updated if selectableRows changes.
autoWidth
columns are now updated once width is unset.- Passed columnOrder props are now validated. Violating values, where nested columns would no longer be in the same group, are ignored.
- Row actions column content now respects the
rowDensity: "condensed"
mode. - By using the new prop
maxAutoWidth
you can now set a limit onautoWidth
per column while still having the ability to resize beyond this limit.
HistogramChart
- ChartInteractions can now be set through a configuration.
- Toolbar can now be enabled through an imported configuration.
- Keyboard shortcuts for zoom actions will now trigger only while the chart has focus.
HoneycombChart
- The tooltip now shows consistently when hovering entries.
- Unnamed tiles in now receive a default name.
Markdown
- Table and list styles are now aligned.
TimeseriesChart
- Timeseries now highlights correctly if the data was misaligned from the Timeseries type.
- Toolbar can now be enabled through an imported configuration.
- Explore mode is now supported.
- Deprecated
userData
prop in favor of extendingTimeseries
type to allow for custom props. - Keyboard shortcuts for zoom actions will now trigger only while the chart has focus.
SparklineChart
- The sparkline now allows a Y axis min/max configuration.
0.111.3
Core
- The
getThresholdColor
function has been deprecated.
FilterBar
defaultPinnedState
prop on theFilterBar.Item
has been deprecated. Use thedefaultPinnedState
prop on theFilterBar
component instead.
TextArea
- The
resizable
prop has been deprecated. It is replaced by aresize
prop, that now let's you define the resize axis individually. To mitigate the deprecation you can changeresizable={false}
toresize="none"
.
Charts
- The tooltip for the legend item is not shown anymore if the item cannot be hidden.
- Annotations can consider now a height value in order to adapt properly to a container for certain use cases and prevent overflowing.
- Fixed infinite resize issue when using the range legend with horizontal layout and chart resizer.
DataTable
- Table height now updates if individual row heights change.
- Cell actions (if defined) will no longer be applied to cells in the action column.
- The width of columns that have
autowidth
configured, is now reacting to density changes on the table. - Visually improved the Subrows connector, which now spans the entire height of the row.
- Improved the TableRowActions.Item typing.
- Alternating row background colors are now correctly applied during scroll.
- Scroll performance has been improved for large datasets.
- Positioning of the column and cell action overlay now behaves correctly on wide columns.
- Column widths are now correctly updated after resizing and changing the column definition.
- Fixed sub row connectors when used without pagination.
- Improved the performance of threshold calculations.
- TableRowActions with long names no longer cause overflow in the table.
Editors
data-testid
prop is now exposed for you to control in theCodeEditor
andDQLEditor
.
FilterBar
- The
defaultPinnedState
prop of the FilterBar.Item no longer has any effect and is deprecated.
HistogramChart
- Zoom explore mode now has keyboard support.
- Thresholds can now be used in Histogram charts.
HoneycombChart
- Integrated the chart toolbar and added DownloadData as CSV.
- Categorical legends can now be used in the
HoneycombChart
. - Set default width to 100% on
HoneycombChart
. - Support for range legends and tile coloring.
- Enabled
HoneycombChart
to import and export configurations
Microguide
- The visual slot now correctly styles
picture
andfigure
tags.
Overlays
- Improved initial rendering and positioning to avoid flashing of the overlays in the wrong position.
SelectV2
- Adjusted the dropdowns minimum height and width for smaller screens.
- Selectv2 does not remove selected options when typing in the filter and pressing backspace.
- In single select mode, the onChange now returns
null
when cleared instead ofundefined
. - The dropdown now correctly increments the z-index stacking for tooltips within options.
TextArea
- TextArea now has a
resize
prop that can be used to disable resizing or restrict resizing to one direction only. By default, it resizes in both directions but can be set to can be set tohorizontal
,vertical
,both
, ornone
. Note that theresizable
prop is now deprecated in favor of theresize
prop.
TimeseriesChart
- Fixed an issue where metadata would throw an error when there was a gap in data for a Timeseries.
- Fixed incorrect output of Timeseries chart onZoomChange prop when using right panning.
Dependencies
@dynatrace/strato-icons
has been updated to0.35.9
0.111.2
TimeseriesChart
- Fixed TimeseriesChart issue that crashes the page in some cases after initial loading or resizing it.
0.111.1
Global, AppRoot
- The
AppRoot
updated its usage of the new version of the DynatraceFlow font face.
Accordion
- The
Accordion.Content
now takes up the whole width of the accordion.
Button
- Items within the button now properly align vertically relative to the height of the
Button
.
CategoricalBarChart
- Custom data is passed through to categorical bar chart legend.
Charts
- Fixed
security-risk-level
color palette not applying themuted
category/series name on charts. Fixedcategorical
color palette not using the whole amount of colors on theTimeseries
and theHistogram
charts when having more than 12 series.
DataTable
- The action column header can now be overridden.
- Row and cell thresholds now have the ability to provide a backgroundColor for the cell or row.
- An issue with cut off italic text in cells has been fixed.
- SDK formatters configured via column definition will now be applied also on sub columns.
- Sorting on the action column is now disabled by default.
- Page index is now exposed on the
DataTable.Pagination
in a controlled and uncontrolled manner.
DonutChart
- Data of the
DonutChart
can now be programmatically downloaded by callingdownloadCSV
on the charts ref.
HistogramChart
- The horizontal crosshair now behaves correctly after pinning the tooltip.
- ZoomIn, ZoomOut and Pan features are now available on the
HistogramChart
.
HoneycombChart
- SeriesAction support is now available for the
HoneycombChart
.
MeterBarChart
MeterBarChart
andMultiMeterBarChart
now correctly show an empty chart for 0 values.
PieChart
- Data of the
PieChart
can now be programmatically downloaded by callingdownloadCSV
on the charts ref.
SelectV2
SelectV2
visible focus now behaves correctly when displaying an error state.onFocus
andonBlur
events are now exposed on theSelectV2
element.SelectV2
now connects internal ids correctly when used in aFormField
.- Aria labeling props are now supported on the
SelectV2
.
SparklineChart
null
andundefined
values are no longer treated as max values.
Sheet
Sheet
now renders actions to the right consistently, even if no title is set.
Switch
- Screen reader now correctly announces the
Switch
checked state.
Tabs
- Disabled tabs are no longer activatable.
TextArea
TextArea
now has the correct focus styles in error state.
0.111.0
CategoricalBarChart, TimeseriesChart
- The
ref
for the CategoricalBarChart and the TimeseriesChart now use an imperativeHandle. If you want to access the native element, you will have to access theref.current.element
.
Flex, Grid
- Unused types for Grid and Flex are now deprecated. These include:
FlexContainerCSS
,FlexContainerProps
,FlexItemCSS
,FlexItemProps
,FlexStyles
,GridContainerCSS
,GridContainerProps
,GridItemCSS
,GridItemProps
,GridStyles
.
TextInput, PasswordInput, DatePicker
- Default values for the
data-testid
are now deprecated and will fall back to undefined.
Accordion
- The trigger buttons of the
Accordion
now have an accessible text for screen-readers.
Charts
- Chart color palette value
'warn'
now correctly maps on'log-status'
and'log-level'
color palettes. - All charts now show the legend when there is enough space at the bottom.
- Added proper space between Range Legend and resize line in bottom position.
- Annotation's track, marker and pills feature a new design.
CategoricalBarChart
- Added the capability of downloading data programmatically. The
CategoricalBarChart
now exposes adownloadData
function on theref
. - Fixed tooltip scrollbar flakiness from
CategoricalBarChart
.
CodeSnippet
- Copying the values of the
CodeSnippet
withCtrl+C
now works correctly in Firefox.
DataTable
- The last nested column header now also uses the remaining space if rowActions are defined.
- Conversion utility
cellRenderer
now allows options to control text truncation. - Nested headers are now correctly aligned when using
ratioWidth
and the table becomes scrollable.
DatePicker
-
DatePicker
now supports adata-testid
that defaults to the "date-picker" id and aria labelling props.Note: The data-testid of the DatePicker, TextInput, and PasswordInput container will default to undefined in the next breaking change. Also, the data-testid of the internal TextInput will be removed.
FieldSet
FieldSet
components now correctly take up the available space inside theOverlay
and no longer overflow in Firefox.
HistogramChart
- Fixed tooltip scrollbar flakiness from
HistogramChart
. - Annotations in the
HistogramChart
now accept priority props. - The
HistogramChart
toolbar now shows a reset zoom button when zoom interactions are enabled.
MeterBarChart, MultiMeterBarChart
- Fixed issue with unneeded scrollbar in MeterBar and MultiMeterBar charts.
Page
Page.Main
andPage.Detail
panel no longer show the default outline when focussed.
SelectV2
- Dropdown overlay now adjusts its size correctly on small screens.
- The trigger of the
SelectV2
is now focused when an associated label is clicked.
Sheet
- Removed the margin that was added when there was no
Title
orActions
in theSheet
component.
SparklineChart
SparklineChart
x-axis is now consistent with theTimeseriesChart
.
Switch
- Disabled styling of the
Switch
is now consistent across checked and unchecked states.
TextInput
TextInput.Prefix
andTextInput.Suffix
now also support string values.TextInput
now supports adata-testid
prop that defaults to the "text-input-root" id.
TimeseriesChart
- Added the capability of downloading data programmatically. The
TimeseriesChart
now exposes adownloadData
function on theref
. - Fixed annotations marker not being shown when it start/ends outside the chart domain boundaries of the Timeseries.
0.110.4
Patch Changes
- Fixed TimeseriesChart issue that crashes the page in some cases after initial loading or resizing it.
0.110.3
Patch Changes
GridItem
andFlexItem
are no longer applied to the DOM.
0.110.2
Patch Changes
- DataTable - fixed line wrap for custom cells.
0.110.1
Patch Changes
- Consuming applications that use vanilla extract for styling no longer get a build error due to faulty style imports.
0.110.0
Minor Changes
-
BREAKING CHANGE: UseContainerSize hook now returns border box size and content box size.
You may have to switch from using
width
/height
tocontentWidth
/contentHeight
to get the desired result. -
The
Container
,Grid
andFlex
now exposestyle
andclassName
props and have aligned styling forgap
sizing.BREAKING CHANGE:
gridGap
,gridRowGap
andgridColumnGap
have been removed from the API as their usage was deprecated. BREAKING CHANGE:rowGap
andcolumnGap
typings are now aligned with thegap
property and only accepts the number basedSpacingSizes
instead of a token value.
Patch Changes
- DataTable - When using UserActions for sorting in combination with enableDefaultSort, now the unsetting of sorting works.
- Toast -
showToast
now returns the corresponding toast id and addeddismissToast
anddismissAllToasts
functions that allow for programmatically dismissing one or all toasts. - Position scrollbar in the sheet on firefox next to the content.
- Fixed spacing in DataTable when using rowThresholds together with expandable/selectable/sub rows.
- DataTable, Menu and Tabs - added documentation for compound components and changed some types to interfaces to improve proptables.
- SingleValue: Enabled possibility to extend styles and class names of the SingleValue outer container.
- Chip component now has a maxWidth prop to configure its maximum width.
- TextArea now has the same background color on focus.
- SelectV2 with filtering enabled now allows typing spaces inside the filter input.
- SelectV2 sortSelectedItemsFirst setting now correctly responds to cache misses.
- SimpleTable now accepts a
variant
prop, to configure the visual look. - DQLEditor - Fix syntax highlighting for nested commands' keywords following a parameter.
- SelectV2 dropdown no longer overextends the viewport when used in modals.
- Integrated annotation tracks and markers in Histogram Chart.
- Integrated empty, error, and loading states in the HoneycombChart component.
- Fixed y-axis order not defined by slots in the Timeseries chart.
- DataTable - the last column now always uses up the remaining space if the table uses the full width.
- Fix button label overflow behavior when using prefix and/or suffix icons.
- ToastContainer - onChange is cleaned up correctly now.
- Export additional chart visualization utility types and methods.
- DataTable - prevent the table crashing if sortBy is configured on custom unsortable columns.
- Filterbar's onChange is only called once for controlled filter items.
- Adapting honeycomb chart to integrate tooltip
- InputButton now correctly defaults the size prop.
- DataTable - we now provide the ability to define row actions.
- Fixed bars not being stacked on the categorical bar chart when having only one category.
- Adjusted keyboard focus handling in the Toast to work the same as in the Microguide and FeatureHighlight.
- Fixed legend ticks behavior on dataset changing.
- Fixed some edge cases in which SingleValueGrid font sizes didn't update properly.
- Fixed setState warning log in TimeseriesChart
- Added support for overlay stacking to the Drawer.
- Fix missing userdata in timeseries converter.
- Added logarithmic support for histogram y axis.
- CodeEditor - Border has been fixed for the editor in the presence of a scrollbar.
- The Heading component now supports adding an ID.
- Fix useless autocomplete reopen in DQLEditor in some cases.
0.109.3
Patch Changes
- DataTable - fixed line wrap for custom cells.
0.109.2
Patch Changes
- CodeSnippet - Snippets with language 'dql' no longer crash if the character | is present in a string surrounded by double quotes.
0.109.1
Patch Changes
- CodeEditor - we now provide a gutter configuration to display the gutter next to foldGutter.
0.109.0
Minor Changes
-
FilterBar's pinned state is now controllable.
BREAKING-CHANGES: The defaultPinnedState prop of the FilterBar.Item is removed from the item and can now be set as a configuration object on the FilterBar itself. The record keys are the item's name and the value of the item's pinned state. Migrations are provided and should create the configuration according to the already set defaultPinnedState values. In case those attributes are spread, the migration must be done manually.
Patch Changes
- Dismissible overlays are no longer closed incorrectly when used in conjunction with a menu.
- A basic version of Honeycomb is now available.
- Implement up-to-date consistent tooltip in the Timeseries Annotations integration.
- CodeSnippet - Single line comments now don't highlight the next uncommented line if 'dql' is set as a language.
- HistogramChart: Added tooltip for annotations.
- Add showSelectedOptionsFirst to the SelectV2 to configure whether the options should be reordered to show the selected options at the top.
- Added ChipGroup component and documentation.
- Fixed value axis min/max values not being applied in the categorical bar chart.
- Improves table rendering performance by ~10% by improving the variant handling.
- Enabling the disableFiltering no longer hides the filter in the SelectV2 component.
- Fixed time series chart's y-axis not automatically adjusting its scale when a minimum and/or maximum value was set on the x-axis.
- DataTable - Text overflow ellipsis is now also applied when using a custom cell renderer and wrapping the content with
DataTable.Cell
. - Added support for the toolbar component into the Geo Map component.
- DataTable - The next and previous buttons in paginated tables now output the correct pageIndex after using the page select.
- The Range legend is now hiding the labels when there are collisions.
- Added support for Log Scale in Histogram Chart for X Axis
- Fixed meter bar that shows 50% when min and max are equal.
- DataTable - Loading overlay is now displayed correctly in the presence of a scrollbar in the table.
- Fixed log-status color palette being mapped to log-level color palette.
- DataTable - when different column definitions are set, we ensure the widths update properly.
- Fixed the categorical bar chart hidden legend property.
- DataTable: fixed misalignment of column widths in autowidth column.
- Updated dependencies
@dynatrace/strato-design-tokens@0.20.0
0.108.5
Patch Changes
- Updated Readme
0.108.4
Patch Changes
- DataTable - when different column definitions are set, we ensure the widths update properly.
0.108.3
Patch Changes
- Tabs - OnChange is now not called on initial render if selectedIndex is set.
0.108.2
Patch Changes
- Replaced React 18 usage of useId for uuidv4 instead, as it's supported in React 17.
0.108.1
Patch Changes
- Reverted export of safeRender as this utility should be kept internal.
0.108.0
Minor Changes
-
Single and multi meter bar chart: Removed 'unit' prop as functionality is replaced by the 'formatter' prop.
-
BREAKING-CHANGE: The
SelectV2.Filter
component onFilterChange prop is now called onChange. -
SelectV2 now supports the FormControlWithOverlayRef and is used in the FilterBar's "add filter" dropdown.
BREAKING-CHANGES:
- SelectV2 ref changed from a HTMLDivElement to a FormControlWithOverlayRef. Migrations are provided.
- Tests that open the "add filter" dropdown might need some adjustments, if they're relying on the select test helpers.
-
Testing subpackage now requires jest@29 to run.
-
Unit SDK version bump and fixed unit and value misalignment in SingleValue.
Patch Changes
- Single meter bar: threshold indicators positions are now calculated correctly when the min value is not 0.
- DataTable - Column reordering is now possible via column actions.
- DataTable now supports sub rows.
- Added custom color per each slice in the pie/donut chart.
- Fixes the SelectV2 height overflowing when the multiple version is used and added the overlayHeightStrategyHandling modifier to keep it consistent with the previous Select.
- Fixed missing nice value for x-axis scale in Histogram Chart.
- Fixed cropped off markers and scrollbar on TimeseriesChart Annotations.
- Fixed the categorical bar chart relative values.
- Single meter bar and multi meter bar: Updated styling so that the margin is applied to surrounding components instead of the chart segment.
- SelectV2 enables clearable selection by default in multiple selection mode.
- Allow React nodes inside the display value slot of the SelectV2.
PasswordInput
tooltip text can now be customized by adding the newPasswordInput.Tooltip
compound component.- DataTable: Fixed issue for a certain case where resizing didn't work after column visibility was toggled.
- DefaultValue is now optional in the SelectV2.
- SelectV2 now clears the filter text on close.
- Removed unused Histogram interfaces from API
- DataTable: fixed cell density when column header has custom renderer.
- Integrated annotation tracks and markers in Histogram Chart.
- Container now correctly accepts
0
as value for paddings and margins. - DataTable - Fixed column misalignment when autoWidth is set to false.
- The SelectV2 now closes the overlay when clearing the selection in single mode.
- The Select component is now deprecated in favor of the new SelectV2.
- DateTimePicker precision type is now correctly not exposed on date only pickers.
- DataTable - improved comment on data regarding what is allowed.
- Cursor is now not-allowed on disabled SelectV2 options.
- Fix Chip component styling when using very long keys.
- Add missing props to the PasswordInput API: id, required, onKeyUp, and onKeyDown.
- DataTable - performance improvement related to cell actions.
- SingleValue Area Sparkline fades into transparent in dark mode.
Tabs
- we have reworked internals and improved the performance when switching tabs.- Fixes keyboard navigation in the selectV2, when using shift tab.
- Annotations: Fixed issues with marker being highlighted when having same time and different tracks.
- Updated dependencies
@dynatrace/strato-design-tokens@0.19.0
@dynatrace/strato-icons@0.35.0
0.107.0
Minor Changes
- Selectable rows in the DataTable can now be used in a controlled way. BREAKING-CHANGE: onRowSelectionChange now provides three parameters: The selected row ids, their original row data and a flag indicating whether the change was triggered by the user or internally. Migrations are provided.