@mittwald/flow-react-components 0.2.0-alpha.1057 → 0.2.0-alpha.1058

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.0-alpha.1058](https://github.com/mittwald/flow/compare/0.2.0-alpha.1057...0.2.0-alpha.1058) (2026-08-26)
+
+### Features
+
+* **SegmentedControl:** deprecate in favor of Tabs and RadioGroup ([#2903](https://github.com/mittwald/flow/issues/2903)) ([3f65b46](https://github.com/mittwald/flow/commit/3f65b46c638be332bebb686cdd3e151cd0b63939))
+
 ## [0.2.0-alpha.1057](https://github.com/mittwald/flow/compare/0.2.0-alpha.1056...0.2.0-alpha.1057) (2026-08-26)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/MIGRATION.md

@@ -23,6 +23,69 @@ separately, and only when coming from `0.1.0`.
 
 ---
 
+## From version `0.2.0-alpha.1055` to `>=0.2.0-alpha.1056`
+
+### SegmentedControl deprecated
+
+`SegmentedControl` and `Segment` are deprecated. The component covered two
+different jobs, and each already has its own component in Flow. Which
+replacement is right depends on what the control does at that place.
+
+**Switching content.** The selection swaps what is shown below it — a content
+switcher. That is what `Tabs` are for: each `Segment` becomes a `Tab` with its
+title in `TabTitle` and its content inside the tab. The label and the state that
+tracked the selection both go away.
+
+```diff
+- <SegmentedControl defaultValue="app">
+-   <Label>Verbindung</Label>
+-   <Segment value="app">Mit App verbinden</Segment>
+-   <Segment value="container">Mit Container verbinden</Segment>
+- </SegmentedControl>
+- {connection === "app" ? <AppSettings /> : <ContainerSettings />}
++ <Tabs>
++   <Tab>
++     <TabTitle>Mit App verbinden</TabTitle>
++     <AppSettings />
++   </Tab>
++   <Tab>
++     <TabTitle>Mit Container verbinden</TabTitle>
++     <ContainerSettings />
++   </Tab>
++ </Tabs>
+```
+
+**Setting a value.** The selection feeds a form or a setting. Use a
+`RadioGroup`: each `Segment` becomes a `Radio`, everything else — `Label`,
+`FieldDescription`, `FieldError`, the React Hook Form binding — stays as it is.
+
+```diff
+- <SegmentedControl defaultValue="debit">
++ <RadioGroup defaultValue="debit">
+    <Label>Zahlungsart</Label>
+-   <Segment value="debit">Lastschrift</Segment>
+-   <Segment value="invoice">Rechnung</Segment>
++   <Radio value="debit">Lastschrift</Radio>
++   <Radio value="invoice">Rechnung</Radio>
+    <FieldDescription>Jederzeit änderbar</FieldDescription>
+- </SegmentedControl>
++ </RadioGroup>
+```
+
+There is no codemod. Both replacements change the structure, and picking the
+right one is a decision per usage, not a rename.
+
+`SegmentedControl` and `Segment` (and the `flr-segmented-control` /
+`flr-segment` remote elements) keep working unchanged and will be removed in a
+future major version. `SegmentedControl` logs a deprecation warning at runtime;
+`Segment` relies on it, since it only renders inside a `SegmentedControl`.
+
+The `containerBreakpointSize` property has no counterpart: `Tabs` collapse on
+their own when the available width runs out, and a `RadioGroup` stacks its
+options anyway.
+
+---
+
 ## From version `0.2.0-alpha.1046` to `>=0.2.0-alpha.1047`
 
 ### Align renamed to Combine