Releases: TEDI-Design-System/react
Releases · TEDI-Design-System/react
react-16.0.0
16.0.0 (2026-02-26)
Bug Fixes
- checkbox,radio: pass required prop to label #115 (#498) (a569636), closes #486
- checkbox,radio: show pointer on label hover #532 (#533) (097627d)
- choice-group: prevent calling onchange twice on card variant #484 (#502) (27799cc)
- choice-group: prevent double change events and unify card click behavior #504 (#505) (7ea1fed)
- choice-group: segmented item borders and focus behaviour #101 (#513) (455c491)
- choice-group: selected disabled choice-group item fixes #27 (#510) (be8884e)
- feedback-text: fix error/success text color variables #517 (#521) (c019e79)
- link: fix link icon sizes in relation to figma design #46 (#520) (f32bd83)
- number-field: fix variables #516 (#522) (dcf6240)
- separator: fix custom size application #535 (#536) (130edcd)
- sidenav: apply linkAs for flyout items #40 (#501) (6007ede)
- text-field: fix small textfield right area padding, fix small textfield font size #527 (#528) (bd8bd16)
- tooltip,overlay: wcag improvements #468 (#491) (fa60e46)
Features
- alert: new size prop with default and small values #11 (#509) (35c4962)
- button-group: add size prop, add small example, fix examples on storybook #14 (#511) (73cd4f1)
- closing-button: add brand and inverted color #6 (#519) (cfeb5f2)
- closing-button: align size and icon behavior with the design #43 (#481) (cdd92a8)
- form-label: update label prop type to ReactNode #486 (#490) (2c1152a)
- info-button: added inverted variant and new color prop #420 (#508) (6ca2d7f)
- separator: redesign with new spacing API, dotPosition and dotStyle support #30 (#525) (93e9e11)
- sidenav: subheading as ReactNode, fix mobile sidenav items padding #421 (#512) (bb7fbe8)
BREAKING CHANGES
- separator: legacy spacing props removed, dotSize enum changed, variant values simplified
- closing-button: size, iconSize changes, new default values
MIGRATION GUIDES
react-16.0.0-rc.20
react-16.0.0-rc.19
16.0.0-rc.19 (2026-02-25)
Bug Fixes
react-16.0.0-rc.18
16.0.0-rc.18 (2026-02-25)
Features
BREAKING CHANGES
- separator: legacy spacing props removed, dotSize enum changed, variant values simplified
MIGRATION GUIDE
High-Level Changes
| Area | Old Behavior | New Behavior |
|---|---|---|
| Default color | default |
primary |
| Spacing | Fixed enum values | Numeric + object spacing |
| Axis spacing props | topSpacing, bottomSpacing |
Removed |
| Variants | dotted, dotted-small, dot-only |
dotted, dot-only |
| Dot customization | Limited | Size, style, position |
| Display options | Limited | Extended |
| Thickness | Ignored with variants | Always supported |
| Dot positioning | Not supported | Start / Center / End / Custom |
Breaking Changes Summary
Removed props
topSpacingbottomSpacingvariant="dotted-small"
1. Spacing System Migration
Old API
<Separator spacing={1} /> <Separator topSpacing={1} bottomSpacing={2} />
New API
Spacing now behaves like CSS margin.
Uniform spacing
<Separator spacing={16} />
Applies:
- vertical margin for horizontal separators
- horizontal margin for vertical separators
Directional spacing
<Separator spacing={{ top: 24, bottom: 8 }} />
Vertical separator spacing
<Separator axis="vertical" spacing={{ left: 12, right: 12 }} />
Migration mapping:
| Old | New |
|---|---|
spacing={1} |
spacing={16} |
topSpacing |
spacing={{ top: X }} |
bottomSpacing |
spacing={{ bottom: X }} |
2. Variant Changes
Old
<Separator variant="dotted-small" />
New
<Separator variant="dotted" dotSize="small" />
Variant mapping:
| Old Variant | New Equivalent |
|---|---|
dotted |
variant="dotted" |
dotted-small |
variant="dotted" dotSize="small" |
dot-only |
variant="dot-only" |
3. Dot Customization
Dot Size
<Separator variant="dot-only" dotSize="medium" />
Available values:
largemediumsmallextra-small
Dot Style
<Separator variant="dotted" dotStyle="outlined" />
Options:
filled(default)outlined
Dot Position
Preset positions:
<Separator variant="dotted" dotPosition="center" />
Options:
startcenterend
Custom position (rem units):
<Separator variant="dotted" dotPosition={2.5} />
4. Color Default Change
Old default:
<Separator />
Rendered as:
color="default"
New default:
<Separator />
Rendered as:
color="primary"
5. Thickness Behavior
Previously ignored when variant was used.
Now supported across all variants.
<Separator variant="dotted" thickness={2} />
6. Vertical Separator Updates
Old:
<Separator axis="vertical" height={4} />
New:
<Separator axis="vertical" height={4} display="inline-block" />
Display options:
blockinlineinline-block
7. Breakpoint Support
Old:
<Separator spacing={{ xs: 1, md: 2 }} />
New:
<Separator spacing={{ xs: 8, md: { top: 24, bottom: 24 } }} />
9. Type Changes
Removed
SeparatorSpacingenum scale- axis-specific spacing props
New
type SeparatorSpacing =
| number
| {
top?: number;
bottom?: number;
left?: number;
right?: number;
};
Recommended Migration Steps
Step 1 — Replace spacing props
- Remove
topSpacing - Remove
bottomSpacing - Convert to object spacing
Step 2 — Update dotted variants
Replace:
variant="dotted-small"
with:
variant="dotted"
dotSize="small"
Step 3 — Verify color usage
Add explicit color if design depended on old default.
Step 4 — Review vertical separators
Confirm spacing direction behaves correctly.
Step 5 — Adopt new dot capabilities (optional)
Consider using:
dotStyledotPosition
Before / After Example
Before
<Separator spacing={1} topSpacing={2} variant="dotted-small" color="secondary" />
After
<Separator spacing={{ top: 32, bottom: 16 }} variant="dotted" dotSize="small" color="secondary" />