From 2217a8f5fa1320a57bd9be106f66e58e25cf1aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Fri, 6 Jan 2023 16:38:31 +0000
Subject: [PATCH] Add new visibility example.

This new example shows how we can have an invisible container with visible children.
---
 .../examples/styles/visibility_containers.css | 22 ++++++++++++++
 docs/examples/styles/visibility_containers.py | 30 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 docs/examples/styles/visibility_containers.css
 create mode 100644 docs/examples/styles/visibility_containers.py

diff --git a/docs/examples/styles/visibility_containers.css b/docs/examples/styles/visibility_containers.css
new file mode 100644
index 000000000..c8b75e7ae
--- /dev/null
+++ b/docs/examples/styles/visibility_containers.css
@@ -0,0 +1,22 @@
+Horizontal {
+    padding: 1 2;     /* (1)! */
+    background: white;
+}
+
+#top {}               /* (2)! */
+
+#middle {             /* (3)! */
+    visibility: hidden;
+}
+
+#bot {                /* (4)! */
+    visibility: hidden;
+}
+
+#bot > Placeholder {  /* (5)! */
+    visibility: visible;
+}
+
+Placeholder {
+    width: 1fr;
+}
diff --git a/docs/examples/styles/visibility_containers.py b/docs/examples/styles/visibility_containers.py
new file mode 100644
index 000000000..879b916fb
--- /dev/null
+++ b/docs/examples/styles/visibility_containers.py
@@ -0,0 +1,30 @@
+from textual.app import App
+from textual.containers import Horizontal, Vertical
+from textual.widgets import Placeholder
+
+
+class VisibilityContainersApp(App):
+    def compose(self):
+        yield Vertical(
+            Horizontal(
+                Placeholder(),
+                Placeholder(),
+                Placeholder(),
+                id="top",
+            ),
+            Horizontal(
+                Placeholder(),
+                Placeholder(),
+                Placeholder(),
+                id="middle",
+            ),
+            Horizontal(
+                Placeholder(),
+                Placeholder(),
+                Placeholder(),
+                id="bot",
+            ),
+        )
+
+
+app = VisibilityContainersApp(css_path="visibility_containers.css")