Add ContentSwitcher (#1983)

* Add the basic ContentSwitcher widget

* Docstring tidy

* Add a visible_content property to the ContentSwitcher

* Clarify that children of ContentSwitcher with no IDs get ignored

* Simplify setting the display value

* Add the start of an example ContentSwitcher for the docs

* Tweak the example layout to better fit in small spaces

* Add the content switcher to the API docs

* Add a guide entry for the ContentSwitcher

This one is a wee bit more involved than most other widget entries in the
guide in that it doesn't obviously do anything itself, but needs
developer-input to make it do something useful. As such the outline here
isn't as clean as it could be, but I think it conveys everything necessary
without getting too complicated.

* Add the reactive attribute table to the ContentSwitcher guide

* Update the README

* Add a refresh after everything has been flipped in the switcher

As noted in the code, this should not be necessary and I don't believe it
has anything to do with this code. I would suspect some lower-level issue
with flipping between different widgets within a container. I need to find a
way to make an isolated reproduction that isn't about this particular
widget. Meanwhile though this works with the refresh().

* Swap current from var to reactive

This solves the explicit refresh issue, but only because the refresh is
implied due to the use of a reactive over a var. As such this sort of
addresses #1979 by ignoring the issue rather than diving into it.

I still suspect that I shouldn't need to do this, and that perhaps there's a
refresh issue when you flip display. So I'll keep #1979 kicking around and
at some point see if I can recreate in isolation.

* Add unit tests for the content switcher

* Add snapshot tests for the ContentSwitcher

* Clarify that an exception can be thrown on a bad ID

* Try and help other Pythons

* Add a pause at the end of the second switcher snapshot test

I'm getting a lot of fails in CI; none of them are actual problems.
Hopefully this will cure it.

* Paaaaaaaaause

More of a test than anything else really. My particular snapshot test is
failing but kinda randomly in each environment each time -- sometimes
Windows, sometimes GNU/Linux, different Python versions.

So... yeah, let's try this and see if it makes it through; otherwise I may
need to rethink this.

* New pause

So it turns out that _ doesn't do anything any more; and instead there's a
"wait:<n>" syntax! So let's give that a try.

* Learning my alphabet...

* Fix a typo in the docs.

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Add missing full stop.

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Add a missing word

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Try a longer wait on the switcher

I'm starting to suspect that this doesn't come down to a timing issue;
especially given that the snapshot report seems to be showing some oddity in
the length of the vertical scrollbar. But... I want to be as sure as
possible so let's double the length of the wait.

Bit a bit of me is starting to wonder if I've somehow managed to create the
perfect storm for scrollbars and you don't always get the same result every
time.

Seems unlikely, but if it's not timing it's that or lots of cosmic rays.

* Test a longer pause on the content switcher test

The idea here being that it takes 200ms for the button to pop again.

* Refresh the snapshots

This time. THIS TIME!

* Experiment: is the issue the same name for two tests?

* Experiment: drop the different source files, try terminal size

Having got over the issue of the button not ending up in the same state,
we're stuck with the scrollbar having different sizes. Having tried other
options let's go with tweaking the terminal size.

* Do a little less work when changing current

Rather than set everything invisible then the new one visible, every time
current is changed, instead just make sure everything is invisible up front
and then just swap the affected children each time.

This does mean that if someone messes with the children under the hood they
may see oddness happening, but less work while being less defensive seems
fair here.

---------

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

docs/api/content_switcher.md

@@ -0,0 +1 @@
+::: textual.widgets.ContentSwitcher

docs/examples/widgets/content_switcher.css

@@ -0,0 +1,27 @@
+Screen {
+    align: center middle;
+}
+
+#buttons {
+    margin-top: 1;
+    height: 3;
+    width: auto;
+}
+
+ContentSwitcher {
+    background: $panel;
+    border: round $primary;
+    width: 90%;
+    height: 80%;
+}
+
+DataTable {
+    background: $panel;
+}
+
+MarkdownH2 {
+    background: $primary;
+    color: yellow;
+    border: none;
+    padding: 0;
+}

docs/examples/widgets/content_switcher.py

@@ -0,0 +1,64 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Button, ContentSwitcher, DataTable, Markdown
+
+MARKDOWN_EXAMPLE = """# Three Flavours Cornetto
+
+The Three Flavours Cornetto trilogy is an anthology series of British
+comedic genre films directed by Edgar Wright.
+
+## Shaun of the Dead
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Strawberry | 2004-04-09 | Edgar Wright |
+
+## Hot Fuzz
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Classico | 2007-02-17 | Edgar Wright |
+
+## The World's End
+
+| Flavour | UK Release Date | Director |
+| -- | -- | -- |
+| Mint | 2013-07-19 | Edgar Wright |
+"""
+
+
+class ContentSwitcherApp(App[None]):
+    CSS_PATH = "content_switcher.css"
+
+    def compose(self) -> ComposeResult:
+        with Horizontal(id="buttons"):  # (1)!
+            yield Button("DataTable", id="data-table")  # (2)!
+            yield Button("Markdown", id="markdown")  # (3)!
+
+        with ContentSwitcher(initial="data-table"):  # (4)!
+            yield DataTable(id="data-table")
+            yield Markdown(MARKDOWN_EXAMPLE, id="markdown")
+
+    def on_button_pressed(self, event: Button.Pressed) -> None:
+        self.query_one(ContentSwitcher).current = event.button.id  # (5)!
+
+    def on_mount(self) -> None:
+        table = self.query_one(DataTable)
+        table.add_columns("Book", "Year")
+        table.add_rows(
+            [
+                (title.ljust(35), year)
+                for title, year in (
+                    ("Dune", 1965),
+                    ("Dune Messiah", 1969),
+                    ("Children of Dune", 1976),
+                    ("God Emperor of Dune", 1981),
+                    ("Heretics of Dune", 1984),
+                    ("Chapterhouse: Dune", 1985),
+                )
+            ]
+        )
+
+
+if __name__ == "__main__":
+    ContentSwitcherApp().run()

docs/widgets/content_switcher.md

@@ -0,0 +1,54 @@
+# ContentSwitcher
+
+A widget for containing and switching display between multiple child
+widgets.
+
+- [ ] Focusable
+- [X] Container
+
+## Example
+
+The example below uses a `ContentSwitcher` in combination with two `Button`s
+to create a simple tabbed view. Note how each `Button` has an ID set, and
+how each child of the `ContentSwitcher` has a corresponding ID; then a
+`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
+between the different views.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/content_switcher.py"}
+    ```
+
+=== "content_switcher.py"
+
+    ~~~python
+    --8<-- "docs/examples/widgets/content_switcher.py"
+    ~~~
+
+    1. A `Horizontal` to hold the buttons, each with a unique ID.
+    2. This button will select the `DataTable` in the `ContentSwitcher`.
+    3. This button will select the `Markdown` in the `ContentSwitcher`.
+    4. Note that the intial visible content is set by its ID, see below.
+    5. When a button is pressed, its ID is used to switch to a different widget in the `ContentSwitcher`. Remember that IDs are unique within parent, so the buttons and the widgets in the `ContentSwitcher` can share IDs.
+
+=== "content_switcher.css"
+
+    ~~~sass
+    --8<-- "docs/examples/widgets/content_switcher.css"
+    ~~~
+
+When the user presses the "Markdown" button the view is switched:
+
+```{.textual path="docs/examples/widgets/content_switcher.py" lines="40" press="tab,tab,enter"}
+```
+
+## Reactive Attributes
+
+| Name      | Type            | Default | Description                                                          |
+|-----------|-----------------|---------|----------------------------------------------------------------------|
+| `current` | `str` \| `None` | `None`  | The ID of the currently-visible child. `None` means nothing is visible. |
+
+
+## See Also
+
+* [ContentSwitcher][textual.widgets.ContentSwitcher] code reference