Rework the layout of the radio set example

Time to start to show off the new compose method.

docs/examples/widgets/radio_set.py

@@ -7,22 +7,23 @@ class RadioChoicesApp(App[None]):
     CSS_PATH = "radio_set.css"
 
     def compose(self) -> ComposeResult:
-        yield Horizontal(
+        with Horizontal():
-            RadioSet(
+            # A RadioSet built up from RadioButtons.
-                RadioButton("Battlestar Galactica"),
+            with RadioSet():
-                RadioButton("Dune 1984"),
+                yield RadioButton("Battlestar Galactica")
-                RadioButton("Dune 2021"),
+                yield RadioButton("Dune 1984")
-                RadioButton("Serenity", value=True),
+                yield RadioButton("Dune 2021")
-                RadioButton("Star Trek: The Motion Picture"),
+                yield RadioButton("Serenity", value=True)
-                RadioButton("Star Wars: A New Hope"),
+                yield RadioButton("Star Trek: The Motion Picture")
-                RadioButton("The Last Starfighter"),
+                yield RadioButton("Star Wars: A New Hope")
-                RadioButton(
+                yield RadioButton("The Last Starfighter")
+                yield RadioButton(
                     "Total Recall :backhand_index_pointing_right: :red_circle:",
                     id="focus_me",
-                ),
+                )
-                RadioButton("Wing Commander"),
+                yield RadioButton("Wing Commander")
-            ),
+            # A RadioSet built up from a collection of strings.
-            RadioSet(
+            yield RadioSet(
                 "Amanda",
                 "Connor MacLeod",
                 "Duncan MacLeod",
@@ -32,8 +33,7 @@ class RadioChoicesApp(App[None]):
                 "Methos",
                 "Rachel Ellenstein",
                 "Ramírez",
-            ),
+            )
-        )
 
     def on_mount(self) -> None:
         self.query_one("#focus_me", RadioButton).focus()