Design system
0.108.6
Patch Changes
- dfafe8da6f: CodeSnippet - Snippets with language 'dql' no longer crash if the character | is present in a string surrounded by double quotes.
- 4e5f9c2a0f: Fix missing userdata in timeseries converter.
0.108.5
Patch Changes
- Update Readme
0.108.4
Patch Changes
- b7a16d19e6: DataTable - when different column definitions are set, we ensure the widths update properly.
0.108.3
Patch Changes
- 0f9e6d572d: Tabs - OnChange is now not called on initial render if selectedIndex is set.
0.108.2
Patch Changes
- 09217dbf2e: Replaced React 18 usage of useId for uuidv4 instead, as it's supported in React 17.
0.108.1
Patch Changes
- 09299bb234: Reverted export of safeRender as this utility should be kept internal.
0.108.0
Minor Changes
9a83ec2942: Single and multi meter bar chart: Removed 'unit' prop as functionality is replaced by the 'formatter' prop.
3539e858bf: BREAKING-CHANGE: The
SelectV2.Filter
component onFilterChange prop is now called onChange.be11b4c6ec: 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.
a199d8143a: Testing subpackage now requires jest@29 to run.
72f4ccc848: Unit SDK version bump and fixed unit and value misalignment in SingleValue.
Patch Changes
- 8629164eee: Single meter bar: threshold indicators positions are now calculated correctly when the min value is not 0.
- 40d1ed0b02: DataTable - Column reordering is now possible via column actions.
- 09a4dde046: DataTable now supports sub rows.
- 7175df0e99: Added custom color per each slice in the pie/donut chart.
- d2baced035: Fixes the SelectV2 height overflowing when the multiple version is used and added the overlayHeightStrategyHandling modifier to keep it consistent with the previous Select.
- b8472556ea: Fixed missing nice value for x-axis scale in Histogram Chart.
- 795eaa5a17: Fixed cropped off markers and scrollbar on TimeseriesChart Annotations.
- f07678bbb5: Fixed the categorical bar chart relative values.
- 8603bd9d22: Single meter bar and multi meter bar: Updated styling so that the margin is applied to surrounding components instead of the chart segment.
- ec793d929b: SelectV2 enables clearable selection by default in multiple selection mode.
- ece0153b1c: Allow React nodes inside the display value slot of the SelectV2.
- 73d1d2a705:
PasswordInput
tooltip text can now be customized by adding the newPasswordInput.Tooltip
compound component. - 57e5c11fc8: DataTable: Fixed issue for a certain case where resizing didn't work after column visibility was toggled.
- 9cf25ed167: DefaultValue is now optional in the SelectV2.
- 19ffe250cc: SelectV2 now clears the filter text on close.
- 8cdfa65532: Removed unused Histogram interfaces from API
- 4c39bed2f1: DataTable: fixed cell density when column header has custom renderer.
- aaef101a7b: Integrated annotation tracks and markers in Histogram Chart.
- 90f37e411f: Container now correctly accepts
0
as value for paddings and margins. - 21e6202d85: DataTable - Fixed column misalignment when autoWidth is set to false.
- 9165e18c4d: The SelectV2 now closes the overlay when clearing the selection in single mode.
- 3bf8093c00: The Select component is now deprecated in favor of the new SelectV2.
- 69d66ced75: DateTimePicker precision type is now correctly not exposed on date only pickers.
- 38b0603317: DataTable - improved comment on data regarding what is allowed.
- b5963d4678: Cursor is now not-allowed on disabled SelectV2 options.
- c2e6943516: Fix Chip component styling when using very long keys.
- 7deee461b5: Add missing props to the PasswordInput API: id, required, onKeyUp, and onKeyDown.
- 1dbf81584e: DataTable - performance improvement related to cell actions.
- 729e1c9aa5: SingleValue Area Sparkline fades into transparent in dark mode.
- ec4d1f1065:
Tabs
- we have reworked internals and improved the performance when switching tabs. - db86b07957: Fixes keyboard navigation in the selectV2, when using shift tab.
- 6956cb12df: 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
- 3210ca072e: 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.
Patch Changes
- 4656858894: Implemented the Accordion component
- 30cdea80be: FeatureHighlight is now correctly inserted before the Toast and/or Microguide, if they exist.
- 5b40a3c1e4: Interactive chip and chip delete button callbacks are called independently when disabled. Chip styles updated to have correct height in flex containers.
- cfc651ac82: TextEllipsis works inside the TitleBar.Title element.
- 9e17edd928: Added private slots for Histogram Annotations
- f15cbb282b: Upgrade sdk/units package to 0.9.0. Minimum fraction digits are now set for DQL numbers.
- 1030b673cd: DataTable: When resized, column widths properly fulfill min and max constraints.
- 25c0ab063e: Improved caching of useBreakpoint hook.
- b549241012: Timestamp formatter is consistent on when to omit seconds count.
- 4a3f698c67: DataTable: onColumnResize is now also called when the 1st column is resized.
- 140f3f09ce: Single meter and multi meter bar chart - Fix default labels not displaying correct values when the chart scale is negative.
- 2769f915ad: FeatureHighlight no longer warns about conditionally rendered children.
- 12418fc23d: Page panel now shrinks as much as possible when being added and there's not enough space available.
- c8c542a332:
Editor
- Autocomplete popup no longer clips through editor after underlying library (codemirror) update. - 0edf9203e0: SelectV2 supports text truncation and customization of the overlay width.
- 6c7a1091c1: Fixed the Logcarithmic scale for Timeseries Bar Chart.
- ee694cfcff: Fixed TimeseriesChart right axis config being lost when filtering by a series belonging to that axis.
- 3525089302: DataTable: Removed console warnings for variants without rowSeparation, rowDensity
- 92affa1b91: The SelectV2 component moved to the preview package.
- ab41613da4: Fixed TimeseriesChart right-axis threshold not showed correctly when filtering.
- 2812af93e5: DataTable: We now debounce the onColumnResize callback with 300ms.
- 6be7e9130f: TextInput now accepts a
type
property that maps to the native input types. - a62a2f9bab: Highlight: Now highlighted text will behave like normal text, long words will not break, even if they overflow the container.
- ff09429c9d: useFocusRing updates focus when element changes its disabled state dynamically.
- d930f6bc4f: DataTable now features built-in support for visualizing column data as Meterbar charts.
- 8794b46e68: Fix broken syntax highlighting in DqlEditor on nested property access.
- e73d5f31e4: In the Calendar view of the DatePicker, the days outside of the current month are now also clickable.
- 5059396a55: DataTable - Introduced
enableDefaultSort
prop to support choosing between custom and default sorting when using the onSortChange callback. - 668acb036a: The calendar in the date picker now fully respects the configured user timezone.
- 170498c507: "page-size" selector for an empty DataTable with pagination is enabled and working properly
- Updated dependencies
@dynatrace/strato-design-tokens@0.18.3
0.106.2
Patch Changes
- 2fced2f1c6: DataTable: We fixed an infinite re-render issue which occurred immediately when the DataTable mounted.
0.106.1
Patch Changes
- fe9d5fa936: Package export map now lists require before the esm packages to ensure jest@29 compatibility.
0.106.0
Minor Changes
Changed
SingleValue
label default color.Added
Histogram
chart.Made
Annotations
description prop optional.DataTable: Column resizing is now possible also when one or more columns have autoWidth defined.
Added tooltip and legend configuration for single and multi meter bar charts.
Meter bar and multi meter bar charts can now automatically generate the value label.
DataTable - We now provide a "selected rows actions" feature that allows you to perform actions on one or multiple rows in the DataTable simultaneously.
Added 'vulnerability-status' color palette to charts.
The
Tabs
component now passes the remaining props and also allows for controlling the overflow behavior of the tab panel.Align the DataTable's pagination UI with the latest design.
BREAKING CHANGE: The DataTable's default cell styling is not applied by default anymore for custom cells. Migrations are provided to re-apply it for existing occurrences.
Improved slots layout display for meter and multi meter bar.
BREAKING-CHANGE: Size definition prop value changed for single and multi meter bar components as follow:
- size100 replaced by size8;
- size200 replaced by size16;
- size300 replaced by size24;
Fixed icon not showing in Annotations custom actions.
Patch Changes
DataTable - Now when a custom rendered header contains an interactive element it can properly emit a trigger event.
Multiple tooltips reset the timers correctly and close or open accordingly when moving from one trigger to the next.
Custom icons in the annotations now scale as expected in all supported browsers.
Fixed the
CategoricalBarChart
legend, should hide when there is no legend to display.Form controls with overlays (select, timeframeselector, datepicker) now use an imperativeHandle instead of a element ref. The handle supports access to the wrapping element and the trigger as well to an open and close functionality.
BREAKING-CHANGE: The ref structure changed but migrations are provided and should cover most of the use-cases. In case the migrations didn't work properly, the outer element of the component can now be accessed with
ref.current?.element
and the trigger withref.current?.triggerRef?
.SingleValue
icon and unit is not cropped on Windows anymore.CodeSnippet
with DQL selected now correctly escapes quotes within strings.Page
no longer crashes when dismissing a panel that has no calculated size yet.DataTable - padding is no longer missing if a formatter is used in a column definition.
CodeSnippet
with DQL selected now doesn't highlight numbers attached to functions or identifiers.Links within accent chips now have better contrast when focused with the keyboard.
Updated dependencies
@dynatrace/strato-design-tokens@0.18.0
0.105.0
Minor Changes
56209a61a3: BREAKING-CHANGE:
KeyboardShortcutTooltip
position
prop is renamed toplacement
, which is automatically migrated.BREAKING-CHANGE:
Tooltip
position
prop is renamed toplacement
, thefallbackPositions
prop is renamed tofallbackPlacements
, and theTooltipPosition
type is renamed toTooltipPlacements
, which are automatically migrated.BREAKING-CHANGE:
Microguide
position
prop is renamed toplacement
, which is automatically migrated.BREAKING-CHANGE:
FeatureHighlight
position
prop is renamed to placement andFeatureHighlightPosition
type is renamed toFeatureHighlightPlacement
, which are automatically migrated.BREAKING-CHANGE:
InformationOverlay
position
prop is renamed toplacement
, which is automatically migrated.2dafac113a: Added
formatter
to the meter bar chart.e7a63c4aff: Added
formatter
to the multi meter bar chart.06ebfb1453: Added
start
prop to an orderedList
.275dfce1b1: Aligned
ExpandableText
components design with guidelines.a3d07a31dc: Added tooltip to multi meter bar chart.
1fffc3e614: BREAKING-CHANGE: Removes
AppHeaderDeprecated
. TheAppHeader
component from the layouts package should be used instead.30cb3180d8: Fixed automatically color mapping on time series chart for log-status, log-level, apdex & vulnerability-risk-level.
c6b9337457: Added legend to multi meter bar chart.
4edddb56fa: Added new
Chip
component for showing a complex piece of information in a compact form.a887fd9246:
FilterBar
now focuses an item when it's selected from the additional filters menu and FilterBar.Items can now be removed only from the menu (the delete button next to each item is removed). Also, aFilterBar.ResetButton
is now available, which provides a handler for resetting the filter values.f8d7c0730c: Aligned
TerminologyOverlay
andInformationOverlay
designs.8e4a2ced64:
DataTable
- We have provided a space or sub-componentDataTable.TableActions
for consumers to create and place custom actions for the whole table. Table actions will be just an open slot, and consumers can add any children to this slot.499b23849c: Support config provider and export configuration in the MultiMeterBarChart component
5b406acd50: Added support for react icons to Annotations component.
Patch Changes
edc78cc13d:
DQLEditor
autocomplete now opens correctly whenDQLEditor
is inside a Drawer.e9139563cb: The button now exposes
disabled
andaria-disabled
props to allow for natively disabling a button.Breaking changes
- The
disabled
prop now adds the nativedisabled
attribute to the underlyingbutton
element. aria-disabled
behaves according to the MDN documentation -> only semantically disables the button; events need to be handled by the app dev.
Migration Guide
We don't automatically migrate the
disabled
prop toaria-disabled
, since we don't know which events would need to be cancelled. If you want to keep the button focusable for accessibility reasons, change thedisabled
prop toaria-disabled
and handle events accordingly to avoid triggering an action.- The
b4ae164661: Improved legend items rendering when the legend contains long text items.
c7f2875177: Start of week in the
Calendar
now correctly respects user timeframe settings.34b53b3331: Fixed the CategoricalBarChart horizontal layour bar displays, should display transparent bar border.
e1c9d8da32: Typography
List
now generates keys for items more intelligently.a32ec0ba68: Improved spacing in meter bar and multi meter bar when there are no optional slots.
27cabd7baa: Aria-label has been added to the generated checkbox item in the Markdown component.
b440eb8cf0: Fixes
onChange
triggered twice onToggleButtonGroup
.ea7b5e32d8: Updated to the latest
@dynatrace-sdk/units
version. Some formatter helper functions now remove trailing zeros when formatting the value, which affects the styling e.g. in charts.21e071c47b: The
FilterBar
accepts ashowLabels
prop to define whether a label is displayed. The configuration can be overwritten with theshowLabel
prop on the item.8be8a3a483: The output of the migrations script now print the path to the file when the migration fails.
f42d6c04b2: Fixed an issue with overlay closing when mousedown inside overlay.
Updated dependencies [46d42680f6]
@dynatrace/strato-icons@0.34.0
0.104.0
Minor Changes
- 3d471f76da: Added support for custom configuration for meter bar chart.
- 7102de43e5: Added basic tooltip to single meter bar chart.
- 5a8d3a0087: Improved canvas area, band and bar shape plot performance with a high amount of series and data points.
- c87d747cfe: Improved
SingleValueGrid
gap calculation for grids with an even number ofSingleValue
instances. - fa07acf940: BREAKING CHANGE: Removed FormatterOptions support for the
SingleValue
formatter prop. - 472a9803e6: BREAKING CHANGE: Removed
React.Node
support for theSingleValue
label property.
Patch Changes
- 1c4c7eb190:
react-intl
peerDependency range is now extended to^6.0.8
. - 8bd7bd7083: Improved stacked area and bar data processing performance.
- e196752cc4: Fixed Timeserieschart config override from variant children of gap policy, points to display and value representation.
- c8f882c9c9:
DataTable
- The pageIndex in the pagination is now reset to 0 when the data length is changed. - 61a4794fdc: When using server-side pagination in the
DataTable
, the pageIndex is now not erroneously reset to zero once the length of the data changes. - 218a5ae175: DQLEditor's autocomplete no longer closes on trying to scroll inside the autocomplete tooltip using the scrollbar.
- c4aa848e2f: Fix overlay positioning when trigger repositions or animations are not yet done.
- dedb2a4b4c: Fixed timeseries stacking positive or negative zero values considering previous value sign.
- 54a7c2a13d:
TextInput
,NumberInput
, andPasswordInput
now allow the maxLength prop. - 4be77f023b: DQL formatter accepts configuration object directly.
0.103.1
Patch Changes
- f6440ac0e1: Fix: Bump @dynatrace-sdk/user-preferences peer dependency.
0.103.0
Minor Changes
- 395f667521: Added customizable size to meter bar.
- 491646157f: Added empty and error state to
SingleValue
component. - 4db5cf14b4: Create Simple Multi segment Meter Bar.
- 99590688a5: Enabled Timeseries, Pie, Donut & CategoricalBar charts to show a loading distractor.
- 4def99f6be: Added thresholds support for single meter bar component.
- a7258e1f1e: Restore truncation of legend items after they receive focus.
Patch Changes
- d7b4793f76: Dismissible overlays now remain open when selecting a menu item.
- e1c59f17bb: Fixed react warning messages related to tooltip and axis.
- b36d273fb8: Fixed
SingleValueGrid
not sharing the label font size properly, when not all theSingleValue
instances had label. - 5fab60ce2e: Removed react-aria dependency in
Sheet
component. - 0e28730c52:
Tab
no longer require a unique title under theTabs
component. - b36d273fb8: Fixed
SingleValueGrid
not accepting a mix of strings, numbers and objects in the data prop. - 66125bcc5e:
DataTable
overlays are now scrollable if they would overflow the screen. - b36d273fb8: Fixed
SingleValueGrid
not showing SingleValue instances in deployed apps. - ad4951dea0: Fixed series action inspect dimension now shows value in Categorical Bar Chart.
- e20fcc5427:
convertToColumns
now correctly handles 'duration' record types to allow for numeric sorting rather than alphanumeric. - e868d1b289: Fixed
SingleValue
text being cropped on some characters. - d634c234f5:
Tabs
now directly focus on the first interactive element in aTabPanel
if there is one. - Updated dependencies [7ab1abd321]
- Updated dependencies [44f40107fa]
@dynatrace/strato-design-tokens@0.17.1
@dynatrace/strato-icons@0.33.0
0.102.0
Minor Changes
- 0cea4f6eea:
SingleValue
: Label color is no longer customizable. - 2c294844dd: Added a meter bar chart for data visualization.
- a3b3ce0465:
Page
: Add prop for disabling page animations. - 657133f2e4: BREAKING CHANGE: Renamed
Avatar
displayLabel
prop toabbreviation
. If you update using dt-app a migration will be applied automatically. - 38596250fc: Added FeatureHighlight component.
- 27697733fb: Introduced new
SingleValueGrid
component, which contains several instances ofSingleValue
inside and provides a consistent layout for all of them. - 21a7f94652: Apply interactive styles on interactive surfaces (a and button) only.
- 5d630f3b99: Light mode appearance is now enforced when printing pages.
Patch Changes
8cd521836e: Enables the Select All option to take its full width when the Select is initially opened.
b290965f28: Add
onFocus
,onBlur
, and aria labelling props to thePasswordInput
.d3852ceaa8: Tooltips are now correctly shown in a Chart's Legend/Toolbar.
0a84a9986e: The icon in the
ExternalLink
component now has the correct accessiblity set up.08b2d6d202: Improved timeseries chart overall performance.
breaking-change: Removed
isGap
andabsoluteValue
fromTimeseriesDatapoint
.0910915575: Scrolling of DataTable header and body is now in sync also when navigating via keyboard.
e58193b735: Fix
NumberInput
width when used insideFlex
container.e154f74d35: The offset between
DatePicker
overlay and its trigger is no longer bigger when setting a valid/invalid state with a hint.4083ecb491:
DataTable
: You can now trigger a CSV download programmatically using the new downloadData() function.bb8a743e70:
Microguide
is now correctly inserted before theToastContainer
, if it exists.1b992569d4: Expandable row now takes the full width of
DataTable
, even if it is horizontally scrollable.Updated dependencies [428e98b5f3]
@dynatrace/strato-design-tokens@0.17.0
0.101.2
Patch Changes
- 6231597364: Fix NumberInput width when used inside Flex container.
0.101.0
Minor Changes
BREAKING-CHANGE:
TextInput
now uses compound components forPrefix
andSuffix
and the forwarded ref now uses an imperative handle (of type InputRef) to allow access to the wrapper element and the input element. A migration is provided for using the prefix and suffix icons and renaming the inputRef prop to the new ref prop. The migration also changes simple usages of the old ref type, but for more complex scenarios it might still be necessary to migrate manually.How to migrate: If you already used a type for the TextInput inputRef and the migration didn't change it, you need to replace it with and import InputRef from the
@dynatrace/strato-components-preview/forms
package. If you need to access the input element and the migration didn't already cover your use case, you can access it like this: ref.current?.inputRef, where ref is the forwarded ref. If you need to access the wrapper element, you can do it like this: ref.current?.element.Added empty and error state to
Sparkline
component.Fixed
Chart
error message with colon when there is no error message to show.The
ChartLegend
is now cleaning its selection when the chart re-renders.Added value type for labels in Pie and Donut.
Aria-label for the column header can now be set explicitly in the DataTable's column definition.
Conversion utilities: Add optional parameter to convertToColumns for providing column options e.g. ratioWidth: 1
DQLEditor
autocomplete improvements:- Only open autocomplete in
DQLEditor
when starting a new command or parameter followed by a space - Move information of tooltip to the top of the
DQLEditor
autocompletion dropdown - Restyle information panel and enable syntax highlighting
- Add middle ellipsis for long labels
- Only open autocomplete in
Fixed automatically color mapping on time series chart for log-status, log-level, apdex & vulnerability-risk-level.
Set color palette mode to single-color by default on the CategoricalBarChart.
Patch Changes
DataTable
- fixed allowing column contents to be 100% of the width.react-is is now a peerDependency in order to allow a smooth transition over to react@18
DataTable
cell with cell actions no longer bleeding into the next cell.Fixed aria-labelling props used for the Select.
Note: The native, hidden select is now also hidden from screen readers to fix the duplication of the aria-labelling props from the trigger button. If your tests rely on the native, hidden select or its options, you can now only access them by adding the option { hidden: true } to your selectors.
Adjusted internal padding styles of the Button component.
Adjusted Sparkline area gradient color and fixed first segment of the line being lighter than the others.
A bug in the
DataTable
, that didn't resize the table when the height property changed, has been fixed.Editors now correctly apply formatting for highlighting new added values.
Rollback the old Timeseries loading display.
Fix syntax highlighting for escaped backslash in
DQLEditor
.Button
now renders icons correctly within its content section.Button
content now defaults to inline-flex.The
Tooltip
now also calls theonOpenChange
callback on unmount and clears the opening warmup timeout.Refactored annotations data processing logic and fixed grouping by time error.
Updated dependencies
@dynatrace/strato-design-tokens@0.16.0
0.100.1
Patch Changes
- react-is is now a peerDependency in order to allow a smooth transition over to react@18
- @testing-library/user-event peerDependency range has been extended to allow for newer major versions as well.
0.100.0
Minor Changes
Fixed toolbar rendering even if no config was present.
Deprecated
Table
has been removed from the library. Alternalively use either theDataTable
orSimpleTable
.Introduced Trend component integrated with the
SingleValue
. RedesignedSingleValue
internal layout to give more space to Sparkline.Introduced alignment functionality as a prop to the
SingleValue
component.Experimental support for react 18 has been added.
This is the first draft containing compatibility for react 18. Please do not upgrade to react 18 in your applications when working on production applications as there are still some issues to be resolved.
The
Avatar
component can now be polymorphed.The page content can now be scrolled while the tooltip's series action menu and the legend menu are open.
TimeseriesChart
data points are now displayed at the middle of a timeframe.react-intl
is now listed as a peerDependency, effectively lifting the hard version lock. You are now able to use your own version ofreact-intl
. Migrations to addreact-intl
in the previously used version are provided.Added Empty and Error state feature into the CategoricalBarChart.
Added empty and error state to pie and donut.
Patch Changes
- The fixed collapsed toolbar menu now correctly triggers the overlays x-Axis zoom and pan functionalities.
DataTable
: Now the pagination defaultPageSize can be properly exported in the configuration.- BREAKING CHANGE: Removed unused prop
onSeriesClick
fromCategoricalBarChart
andTimeseriesChart
. - Fixed the Timeseries toolbar A11y. Ensured that the keydown shortcuts were working correctly. Triggered X Axis zoom and Panning actions with the enter key. In Panning mode, allowed cancellation with the escape key.
- Fixed SelectIndicator rendering issue when using useListboxOptionsWithIcon when passing too long texts. Fixed SelectSection title causing issues when passing too long texts.
DataTable
: If empty user actions are defined cell no longer disappears.- Fixes an issue when clicking an element inside the roving focus container and navigating away with Shift+Tab, then with Tab.
DataTable
defaultSelectedRows now work correctly without pagination.- Editors now consider min-height and max-height of wrapping flex container when using fullHeight.
- DQL query results displayed in a
DataTable
instance are now correctly serialized, when downloaded as csv. Arrays and Records are not currently supported. - CodeEditor's autocomplete overlay now stacks correctly above a Surface component.
- Updated dependencies
- Updated dependencies
- Updated dependencies
- Updated dependencies
@dynatrace/strato-design-tokens@0.15.0
@dynatrace/strato-icons@0.32.0
0.99.3
Patch Changes
- Fix charts not taking the full available width.
0.99.2
Patch Changes
- DataTable selectable rows now work correctly when used with pagination.
0.99.1
Patch Changes
- Editors now consider min-height and max-height of wrapping flex container when using fullHeight.
0.99.0
Minor Changes
Added Empty and Error state feature into the
TimeseriesChart
.DataTable
default minimum column width is now 30 instead of 100.The surface now adds interactive styles autonomously when using it as an interactive element.
BREAKING CHANGES: Removal of the interactive prop from the surface. It automatically styles all interactive surfaces, meaning all surfaces have a tabIndex or an underlying
a
orbutton
HTML tag. There are migrations to remove the interactive prop and for interactive elements it shouldn't change anything. All those elements that do not rely on an interactive HTML syntax would need some manual adjustment to align the focus behavior.Changed the
SingleValue
internal layout. Now the value, label, unit and sparkline are better positioned and distributed, and only have the vertical layout.Adds an
Inner
element to theDonutChart
. This allows you to customize the middle section within theDonutChart
.Removed the visible focus outline in clearable mulitselects.
In the
DataTable
component a callback eventonColumnResize
is exposed that will be triggered when the user resizes a table column.Remove value dimension from name of timeseries converter result if it is identical for all timeseries.
Charts color palettes apdex, log-status, log-level and vulnerability-risk-level now automatically map the colors to the values.
BREAKING CHANGE:
DonutChart
: Added new parameters to the Inner Component function.Height calculation in
Page Panel
andPage Drawer
is now aligned.Adds support for anchors as part of the
ActionGroup
.Adds support for custom series actions for
PieChart
andDonutChart
.
Patch Changes
- Fixed misplaced Timeseries and Categorical magnifiers and grid lines when the chart was center aligned.
- In the
DataTable
, when the column actions are enabled, the column group header should not contain an empty actions menu when actions are unavailable. Button
with fixed width and prefix and/or suffix elements no longer overflow.useRovingFocus
hook now consistently sets focus when navigating away from a container with shift+tab. It now also correctly navigates to the new item when changing the initialIndex dynamically and tabbing inside the container.- Fixed bars being misplaced in the
CategoricalBarChart
when having single dimensions and grouped mode. - Bump
@visx
version to ^3.0.0. DataTable
: Reselection works now when only reselecting 1 item less and onSelectionChange is called with correct values when selecting multiple rows.- In the
DataTable
the correct row will be selected when any rows are expanded. - Fixed toolbar expanding out of chart bounds.
- Fixed thresholds not being shown with infinite values in TimeseriesChart and CategoricalBarChart.
TextArea
can now set its width to full, content (default), or a specific width.- Improve the formatting of the CSV data of the categorial chart
Ellipsis
is now correctly styled if used in aLink
.- Keep focus in dql and code editor when pressing tab.
- Fixed width of
ProgressBar
in Flex containers. - Fixed the
Timeseries
X axis zoom selector opacity when accessing through keyboard shortcuts.
0.98.0
Minor Changes
DataTable
now accepts aloading
prop, which will display one of these 3 loading states:- When the data table is initially loaded and columns and data are being loaded.
- When the table is loading new data.
- When the user switches to a new page and the data is being loaded.
Added empty, error and loading state core components.
Menu.Content now allows a
avoidCollisions
prop to be set (defaults to true). It can be used to override the default positioning behavior which is trying to avoid collisions.DataTable
row expansion can be controlled through props.The
Codesnippet
now correctly copies the selected content only.Added support for uncontrolled detail view and sidebar for the page component.
Charts Toolbar: Hide grip control when draggable is false.
Added unit prop to
SingleValue
.List
typography component has been redesigned.TimeseriesChart
: Added toolbar configuration to shared config provider.The defaultValue for an uncontrolled
Switch
component is now optional.DataTable
: If rowSeparation and rowDensity are set to empty values during DataTable configuration import, they will fallback to default values.Fixed wrong font-weight in
Surface
.Toolbar: Collapse depending on container size.
Extended the properties that could be configured via Shared Config to the Sparkline when is within a SingleValue.
- Color, showTicks and variant, are now configurable.
Icons now support custom sizes and predefined sizes were updated.
BREAKING-CHANGE: Icon size "large" was changed from 64 to 32 pixels, and "text" option was removed. Migrations are provided.
Adds a controlState to the
TimeframeSelector
.Implemented the categorical bar chart custom actions.
Toast
: Added support for JSX in the message for formatting.All Editors now accept
AriaLabelingProps
as part of the props.DataTable
doesn't show the expandable content anymore if it's outside the virtualized viewport while the row is inside.Tabs
can now be rendered conditionally.Add units and proper value formatting to
DataTable
.The scrollbar colors have changed.
BREAKING-CHANGE: Adjusted DataTable Toolbar API:
DataTable.Toolbar.DownloadData
changed toDataTable.DownloadData
DataTable.Toolbar.FontStyle
changed toDataTable.FontStyle
DataTable.Toolbar.LineWrap
changed toDataTable.LineWrap
DataTable.Toolbar.VisibilitySettings
changed toDataTable.VisibilitySettings
Migrations are provided.
DataTable and SimpleTable now allow for configuring vertical alignment as well.
Patch Changes
- Fixed misplaced borders in the
TimeseriesChart
on keyboard accessed panning mode. NumberInput
cursor now moves to the beginning/end when pressing Home/End and no min/max value is set.- Fixed
TimeseriesChart
threshold values displaying in flipped order. - Fixed y-axis max tick not to surpass 100% when displaying relative value representation in timeseries chart.
ToggleButtonGroup
now correctly sets the initial focus on the selected element.- Fixed and refactored Timeseries overlays interactions.
- Fixed the magnifier is not being showed when x-zoom is being selected.
- Fixed wrong icons diplayed while interact with the
ChartLegend
. - Improved the display of axis lines and threshold lines in charts, addressing issues like inconsistent thickness and overlapping lines.
- Fixed
TimeseriesChart
crosshair line being showed over the data points. - Fixed tooltip not being properly updated in the TimeseriesChart between data points with the same value.
- Fixed Annotations timestamp indicators in Timeseries not showing.
- Added 8px of padding around the ChartLayout.
- Updated dependencies
- Updated dependencies
- Updated dependencies
- Updated dependencies
@dynatrace/strato-design-tokens@0.14.0
@dynatrace/strato-icons@0.31.0
0.97.1
Patch Changes
- Improved text width detection for TextEllipsis to avoid truncating text when enough space is available.
0.97.0
Minor Changes
Toast
can now be focused with Cmd+F6 as well.DataTable
: Now header dividers have the correct height when sub-columns are hidden.- BREAKING CHANGE: Table column types now enforce the ID and accessor rules. Migrations are provided for cases with missing IDs.
- Success variant of the
Toast
has been added. - Updated dependency
@radix-ui/react-dropdown-menu
from 0.1.1 to 2.0.4 (used byMenu
component). - BREAKING CHANGE:
Menu.TriggerItem
was renamed toMenu.SubTrigger
,Menu.Content
tags inside nestedMenu
s are now of typeMenu.SubContent
and nestedMenu
s are now of typeMenu.Sub
. Migrations are provided, however there might be corner cases where manual changes might be required like when imports got renamed or affected components get styled with styled-components. - The new version of @radix-ui/react-dropdown-menu may occasionally cause issues with unit tests. If you get an error message like this, you have to use a workaround:
TypeError: Cannot read properties of null (reading 'documentElement')
. In this case, add the following line to your test setup:afterAll(() => new Promise((resolve) => setTimeout(resolve, 0)));
. For more information, see "Comment on #1908 getDocumentElement null during testing" (https://github.com/floating-ui/floating-ui/issues/1908#issuecomment-1520880447).
- Updated dependency
- Added
Avatar
andAvatarGroup
components. - The configured alignment from the column definition now takes precedence over the alignment based on columnType.
DataTable
: Table body height is now calculated correctly during first render.- Improve dql suggestions in
DQLEditor
. - Removed the
LoadingIndicator
component. Use theProgressCircle
component instead.- BREAKING CHANGE: The
LoadingIndicator
component is no longer available. There is a migration available. Please update using the dt-app update command.
- BREAKING CHANGE: The
DataTable
export to CSV now handles arrays, undefined and null.- Dismissible overlays now remain open when closing a
Toast
notification. CodeSnippet
now provides anonCopy
callback.- The
DataTable
now has a shortcut for selecting/deselecting multiple rows. - Page panel sizes type changed from string to numbers for each size.
- Unify error states design for forms components.
CodeEditor
andDQLEditor
now expose onFocus and onBlur events.- Add
Microguide
component. - The
DataTable
now has a new toolbar button for toggling whether lines should be wrapped in all columns of the table. - The
Code
component now uses the field background color.
Patch Changes
- Handle modifiers correctly if the intent button is triggered via the keyboard.
- Column and Cell action menus in
DataTable
are now aligned in accordance to column alignment.
0.96.0
Minor Changes
You can now configure a customizable message to be displayed in the absence of data in the
DataTable
component.Extend
IntentButton
to support recommending an appId and intentId.Breaking changes
- Removed
IntentIconButon
. UseIntentButton
with iconOnly property instead.
- Removed
With changes to column resizing when fullWidth is set to true, header groups alignment is broken in certain scenarios.
On
DataTable
columns you can now use SDK formatting i.e. you can specify column formatting with the notation of@dynatrace-sdk/util-formatters
.useBreakpoint
hook with an array query will no longer cause re-renders.
Patch Changes
- Using a simple text input no longer throws a warning that it's switching from uncontrolled to controlled.
DataTable
select all button now works correctly in Firefox.FilterBar
now callsonFilterChange
only once when multiple items are added at the same time using theMoreMenu
.- The multiple
Select
trigger now correctly displays text values of complex options. CodeSnippet
no longer applies rounded corners in nested elements.- In the
DataTable
cells with user actions defined, theautoWidth
setting is not resizing the column based on the content. - The
FilterBar
onFilterChange
callback is no longer cached. - Introduced alignment property for
Menu.Content
that determines how the menu is aligned relative to its trigger. - The
FormField
no longer nests labels in case a custom label is used. - The
FilterBar
can now display the text of custom labels and the MoreMenu now truncates multiple items with an ellipsis when they overflow. Also, when using custom labels in theFilterBar.Item
, the input id and the label can now be properly connected with the htmlFor attribute. - Fixed regression that caused overflowing cell content to be cut off without ellipsis in DataTable.
- Editors background no longer bleeds out of it's container.
- Increase scrollbar visibility in Firefox.
- Updated dependencies
- Updated dependencies
@dynatrace/strato-design-tokens@0.13.0
0.95.0
Minor Changes
DataTable: Overscan for virtualization is now set to 5 to improve performance.
DataTable: Now if all sub-columns are hidden, the header height will collapse to one row.
CodeSnippet: Selecting and copying with 'ctrl/cmd + c' doesn't copy the line-numbers anymore.
Fixed
Divider
layout in theTitleBar
when using it inside Flex layouts.DataTable: The threshold for the rows (used for row highlighting) can be configured and applied at the DataTable level as table props.
BREAKING CHANGE: Row highlighting is not possible to configure via column definition anymore. Property
highlightRow
is removed from Threshold options.Before:
const column: TableColumn[] = [
{
header: 'Firstname',
accessor: 'firstname',
thresholds: [
{
value: 'Emery',
comparator: 'equal-to',
color: 'red',
~~highlightRow: true,~~
},
],
}
];Now the row highlighting must be defined on the table level by using data table prop
rowThresholds
.See usage examples https://developer.dynatrace.com/preview/reference/design-system/preview/tables/DataTable/#row-highlighting
After:
<DataTable
rowThresholds={[
{
id: 'firstname', // column accessor/id must be specified
value: 'Emery',
comparator: 'equal-to',
color: 'red'
},
]}
/>DataTable: Under certain scenarios header groups are not aligned properly.
Heading: The semantic level is now set to same level as the visual level, if not specifically specified with the 'as' property.
In the DataTable, default column actions are not rendered on expandable/selectable cells anymore.
Unify component prop interface names and fix DOMProps imports.
Breaking changes
- Renamed component prop interfaces
CheckboxProps*
toCheckbox*Props
- Renamed component prop interfaces
SwitchProps*
toSwitch*Props
- Renamed component prop interfaces
TabsProps*
toTabs*Props
- Renamed component prop interfaces
In the DataTable, if all regular columns are hidden now the expandable and selectable columns are also hidden.
CodeSnippet/CodeEditor: design is now aligned
Page compounds can now be rendered anywhere in the page's subtree and no longer need to be direct children of the page.
Fixes ability to resize when the table is fullWidth. Also, changes the column width allocation when fullWidth is enabled. Instead of all columns proportionately expanded, all columns remain same and additional space is taken by the last column or last column is expanded to take remaining space.
Patch Changes
- Fixed bug in the
DQLEditor
whereonVisibilityHandler
reference was never updated on re-render.
0.94.3
Patch Changes
- Categorical axes now have the correct padding again.
0.94.2
Patch Changes
- Menu now no longer requires a second click in Chrome to open after a re-render.
- Expandable row content in Datatable works with fullWidth again.
0.94.1
Patch Changes
- Packages now provide a Readme file within them.
- Updated dependencies
@dynatrace/strato-design-tokens@0.12.1
@dynatrace/strato-icons@0.30.5
0.94.0
Minor Changes
When column groups are present, include parent header also in the downloaded csv file.
DataTable pagination go to end/start now also reset row selection. In this regard, they now behave the same as next/previous.
Cut and paste are now no longer possible for read-only editors.
New toasts are now shown at the bottom instead of the top.
The
Button
now supports loading states and shows an indeterminateProgressCircle
when loading.The RunQueryButton now uses the ProgressCircle to display the loading state.
Release the
NewPage
component as stablePage
. Page panels now also supportminWidth
.Breaking changes
- The previously deprecated
Page
component is replaced by the new page component. - The old page's
SideBar
is renamed toSidebar
with the replacement of the page. - Mandatory
dismissed
andonDismissChange
prop on theSidebar
. - The compounds of the page (
Header
,Sidebar
,Main
, andDetailView
) must be rendered as direct children of the page.
The following example will no longer work:
<Page>
<Page.Header></Page.Header>
<Routes>
{/* route 1 */}
<>
<Page.Sidebar></Page.Sidebar>
<Page.Main></Page.Main>
</>
{/* route2 */}
<>
<Page.Sidebar></Page.Sidebar>
<Page.Main></Page.Main>
<Page.DetailView></Page.DetailView>
</>
</Routes>
</Page>You will have to restructure your app and either pull out the page to the topmost level and add the routes to the corresponding panels, or create a page for each route.
<Page>
<Page.Header></Page.Header>
<Page.Sidebar></Page.Sidebar>
<Page.Main>
<Routes>...</Routes>
</Page.Main>
<Page.DetailView>
<Routes>...</Routes>
</Page.DetailView>
</Page><Routes>
{/* route 1 */}
<Page>
<Page.Header></Page.Header>
<Page.Sidebar></Page.Sidebar>
<Page.Main></Page.Main>
</Page>
{/* route2 */}
<Page>
<Page.Header></Page.Header>
<Page.Sidebar></Page.Sidebar>
<Page.Main></Page.Main>
<Page.DetailView></Page.DetailView>
</Page>
</Routes>- The previously deprecated
In DataTable onRowSelectionChange() callback avoid exposing internal library data structure in the event parameter. Only expose the original data which is selected. Breaking change: The data in the event parameter is now at the top level, so instead of data.original use data.
BREAKING-CHANGE: DataTable now only accepts type 'number' for the column 'width' property.
The Switch component has a new design and internally uses an input now.
Removed icon in front of FilterBar.
DataTable column resizing issues
Page panels can now be resized by keyboard actions (ArrowLeft and ArrowRight) when focusing the resize handle.
Add Surface component.
The Link/ExternalLink/AppLink always shows an underline.
Patch Changes
- Make truncationMode property optional for TextEllipsis.
- Menu now only closes once forcibly if outside of the viewport.
- Disable column actions when
null
is returned instead ofTableUserActions
. - Disable cell actions when
null
is returned instead ofTableUserActions
.
- Disable column actions when
- Fix parenthesis highlighting in DqlEditor. ()
- Menus now close when the window is out of focus.
- Fixed issue where text got completely truncated when TextEllipsis was used inside a Button.
- Fix failing timeseries converter with empty array. ()
- Fixed bug where sometimes the available width for ellipsized text was assumed to be larger than is actually was.
- Updated dependencies
@dynatrace/strato-design-tokens@0.12.0
0.93.3
Patch Changes
- Fixes missing autoComplete in the PasswordInput component.
0.93.2
Patch Changes
- Migrations for version 0.93.0 are now referenced correctly.
0.93.1
Patch Changes
- Testing subpackge now supports the correct entry point after a regression.
0.93.0
Minor Changes
In the DataTable, the correct hover styling is now applied to all column headers with column actions defined.
Editors now have a new focus behaviour. When navigating via the keyboard, users now have to press ENTER to start editing.
UseRovingFocus does not overwrite styles attribute of the ref anymore.
Fixed wrong button variant for toast dismiss button.
@dynatrace/strato-components-preview/conversion-utilities
has been updated to use@dynatrace-sdk/client-query-v09
instead of@dynatrace-sdk/client-query-v02
.Breaking-change: This change introduces a lot of changes since the move from
RecordV2Beta[]
toQueryResult
. The conversion-utilities package is no longer compatible with@dynatrace-sdk/client-query-v02
. Most of the conversion utilities have changed to acceptResultRecord[]
and/orRangedFieldTypes[]
that are provided from@dynatrace-sdk/client-query-v09
. Please be aware that the conversion-utilities api may change at any given time to match changes in@dynatrace-sdk/client-query
.Update to client-query 1.0 sdk
Divider now accepts a variant and a color option.
Hiding a column can now be added to the column actions menu using
TableUserActions.HideColumn
.Using dismiss functionality instead of the collapse functionality on NewPage.Sidebar.
Breaking-changes:
- Renaming onDismiss to onDismissChange and extending it with a suggested state and reason
- Removing collapse form the NewPage.Sidebar
- Introducing onDismissChange and dismissed on the NewPage.Sidebar
TimeseriesChart now supports SDK units.
The DataTable's default styling (variant) has been adjusted. It now sets
rowSeparation
tohorizontalDividers
and setscontained
by default.@dynatrace/strato-components-preview/editors
has been updated to use@dynatrace-sdk/client-query-v09
.Fixed missing button when there are collapsed breadcrumbs.
Add Container component.
Replaced
@dynatrace/strato-components-preview/formatters
formatters with the@dynatrace-sdk/units
formatters.
Patch Changes
- Updated dependency use-resize-observer from 7.1.0 to 9.1.0.
- Fixes an issue when clicking an item inside the roving focus container focuses the first item and then the clicked item. Also, fixes shift tabbing to skip the wrapping container that's just used for checking non-focusable items.
- Ordered lists now increment correctly when nested.
- Minor performance improvement in Menu component.
- Fix bug where text inside TextEllipsis component gets truncated even though enough space is available (only occurs when middle ellipsis is used in combination with Flex).
- Updated dependencies
@dynatrace/strato-icons@0.30.0
0.92.1
Patch Changes
- Migration function for 0.91.0 will no longer fail the entire update process when the source file fails to parse.
0.92.0
Minor Changes
NewPage component now allows custom style overrides.
Button now supports variant, color, size, textAlign and width props and Button.Prefix and Button.Suffix components. BREAKING CHANGE: Options for the variant and width props changed. The props prefixIcon and suffixIcon are no longer supported. There is a migration available. Please update using the dt-app update command.
Text style variants are now aligned with the new design token structure.
BREAKING-CHANGE: Text style definition is split up in textStyle and fontStyle to reflect the new token structure (see Text component and getTextStyle/getTextStyleCss). The exported styles are renamed and all text styles are now located in the 'core' package and removed from the 'typography' package.
There is a migration available. Please update using the dtp-app update command.
ExternalLink component now accepts an onClick handler
Added ability to escape DataTable column accessors using quotes.
Patch Changes
- Tables - Adjust TableUserActions component to allow for more flexible wrapping and usage patterns.
- DataTable - vertical dividers are not aligned when horizontal scrolls are present.
0.91.2
Patch Changes
- Publish config in packages has been fixed to ship correct files.
- Updated dependencies
@dynatrace/strato-design-tokens@0.11.2
@dynatrace/strato-icons@0.29.1
0.91.1
Patch Changes
- Updated dependencies
@dynatrace/strato-icons@0.29.0
0.91.0 (2023-03-06)
Features
- preview-charts:
- Removed color and original unit from Timeseries.
- Added new menu for series actions on the Tooltip.
- Removed suffix prop from SingleValue.
- preview-notifications:
- Toasts can now also be spawned outside of a component context.
- preview-tables:
- Toolbar component for downloading data from table is now available.
Bug Fixes
- preview-charts:
- Fixed performance issues LineCanvas.
- Fixed issue on the pie/donut config props not taken into account. BREAKING-CHANGE
- Annotations
- Tooltip not showing the proper x-axis datapoints on time series chart.
- Fixed maximum call size getXAxisRange.
- preview-layouts:
- Adjust newPage side-panel padding.
- Add alt prop to default app icon, used for the <AppHeader /> simplest version.
- preview-tables:
- Make resizing columns work with column actions.
- DataTable - vertical dividers are not aligned with horizontal scroll.
- Expanded rows now collapse if data for table changes.
- DataTable - TableVisualLookConfig - Nested header resizing.
Breaking Changes
preview-charts: The color is no longer part of the data. In order to override a series color please migrate the code to the new slotting approach (more details in the doc).
preview-charts: The content of the suffix prop will be migrated to the label or formatterOptions prop if possible, otherwise removed completely.
0.90.0 (2023-02-27)
Features
- preview-charts:
- Introduced track label functionality to AnnotationsChart.
- Added markers interactions to TimeseriesChart.
- Implemented scroll for annotations with more than 3 tracks.
- Apply annotation track symbol and color props to markers.
- Filter annotations out of bounds for TimeseriesChart Annotations.
- Removed outer circle from markers in AnnotationsCharts.
- Make hidden prop work for track and for marker.
- Remove opacity from marker border when they overlap.
- Support custom tooltip actions for annotations.
- Created Track and Marker slots for Annotations.
- Added tooltip hover interaction.
- Added Tooltips for AnnotationsChart.
- Created annotations slot configuration.
- Moved AnnotationsChart to preview package.
- Created threshold indicator component.
- Fixed categorical bar chart not displaying correctly non-homogeneous data.
- preview-forms:
- Update onChange signature for forms components.
- preview-layouts:
- Add AppHeader compound components to configure the app name and icon.
- Make AppHeader NavItems polymorphic to remove the react-router-dom dependency. BREAKING-CHANGE
- preview-tables:
- Implement user actions for column groups.
Bug Fixes
- preview-charts:
- Fixed CategoricalBarChart color overrides not working.
- Fixed CategoricalBarChart displaying wrong unit, when different units are passed.
- Fixed y-axis ticks on logarithmic scale.
- Highlighted group items in the annotations tooltip.
- Tooltip doesn't unpin and eventually doesn't show at all.
- Tooltip trigger area is not on the whole marker when at the end of a track.
- Fixed chart crashing on annotations bottom border hover.
- Fixed overlay mouseposition with overflow.
- Add missing overlay padding to AnnotationsChart in Timeseries.
- Fixed tooltip disappearing on hover over it.
- Unit in right axis accepts undefined value.
- Fixed pointsDisplay plot override.
- Fixed LineChart bad performance.
- preview-core:
- Fixed ProgressBar text reflow on condensed density variants.
- preview-forms:
- Fix clearing the select filter value on close.
- preview-notifications:
- ToastContainer is now a singleton component.
- preview-overlays:
- Fix sheet content container height.
- preview-tables:
- DataTable visual look bugs found by UX.
Refactors
- Removed overlay from annotation tooltip implementation.
Breaking Changes
- preview-forms: DatePicker onChange 'value' parameter type was renamed from DatePickerChangeEvent to DatePickerValue. TimeframeSelector onChange signature changed to object containing the 'from' string, 'to' string, and 'details' object, so the usage needs to be updated from
onChange={(value, details) => { setValue(value); setDetails(details); }
toonChange={(timeframe: Required<Timeframe>) => { setValue(timeframe); setDetails(timeframe?.details ?? null); }
.
0.89.0 (2023-02-20)
Features
Package was renamed to @dynatrace/strato-components-preview