Merge branch 'main' into fix-1309

Author: willmcgugan

CHANGELOG.md

@@ -12,15 +12,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Added "inherited bindings" -- BINDINGS classvar will be merged with base classes, unless inherit_bindings is set to False
 - Added `Tree` widget which replaces `TreeControl`.
+- Added widget `Placeholder` https://github.com/Textualize/textual/issues/1200.
 
 ### Changed
 
 - Rebuilt `DirectoryTree` with new `Tree` control.
 - Empty containers with a dimension set to `"auto"` will now collapse instead of filling up the available space.
+- Container widgets now have default height of `1fr`.
+- The default `width` of a `Label` is now `auto`.
 
 ### Fixed
 
 - Type selectors can now contain numbers https://github.com/Textualize/textual/issues/1253
+- Fixed visibility not affecting children https://github.com/Textualize/textual/issues/1313
 
 ## [0.5.0] - 2022-11-20
 

docs/api/placeholder.md

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

docs/examples/guide/dom4.css

@@ -1,6 +1,7 @@
 
 /* The top level dialog (a Container) */
 #dialog {
+    height: 100%;
     margin: 4 8;
     background: $panel;
     color: $text;

docs/examples/widgets/placeholder.css

@@ -0,0 +1,50 @@
+Placeholder {
+    height: 100%;
+}
+
+#top {
+    height: 50%;
+    width: 100%;
+    layout: grid;
+    grid-size: 2 2;
+}
+
+#left {
+    row-span: 2;
+}
+
+#bot {
+    height: 50%;
+    width: 100%;
+    layout: grid;
+    grid-size: 8 8;
+}
+
+#c1 {
+    row-span: 4;
+    column-span: 8;
+}
+
+#col1, #col2, #col3 {
+    width: 1fr;
+}
+
+#p1 {
+    row-span: 4;
+    column-span: 4;
+}
+
+#p2 {
+    row-span: 2;
+    column-span: 4;
+}
+
+#p3 {
+    row-span: 2;
+    column-span: 2;
+}
+
+#p4 {
+    row-span: 1;
+    column-span: 2;
+}

docs/examples/widgets/placeholder.py

@@ -0,0 +1,39 @@
+from textual.app import App, ComposeResult
+from textual.containers import Container, Horizontal, Vertical
+from textual.widgets import Placeholder
+
+
+class PlaceholderApp(App):
+
+    CSS_PATH = "placeholder.css"
+
+    def compose(self) -> ComposeResult:
+        yield Vertical(
+            Container(
+                Placeholder("This is a custom label for p1.", id="p1"),
+                Placeholder("Placeholder p2 here!", id="p2"),
+                Placeholder(id="p3"),
+                Placeholder(id="p4"),
+                Placeholder(id="p5"),
+                Placeholder(),
+                Horizontal(
+                    Placeholder(variant="size", id="col1"),
+                    Placeholder(variant="text", id="col2"),
+                    Placeholder(variant="size", id="col3"),
+                    id="c1",
+                ),
+                id="bot"
+            ),
+            Container(
+                Placeholder(variant="text", id="left"),
+                Placeholder(variant="size", id="topright"),
+                Placeholder(variant="text", id="botright"),
+                id="top",
+            ),
+            id="content",
+        )
+
+
+if __name__ == "__main__":
+    app = PlaceholderApp()
+    app.run()

docs/widgets/placeholder.md

@@ -0,0 +1,47 @@
+# Placeholder
+
+
+A widget that is meant to have no complex functionality.
+Use the placeholder widget when studying the layout of your app before having to develop your custom widgets.
+
+The placeholder widget has variants that display different bits of useful information.
+Clicking a placeholder will cycle through its variants.
+
+- [ ] Focusable
+- [ ] Container
+
+## Example
+
+The example below shows each placeholder variant.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/placeholder.py"}
+    ```
+
+=== "placeholder.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/placeholder.py"
+    ```
+
+=== "placeholder.css"
+
+    ```css
+    --8<-- "docs/examples/widgets/placeholder.css"
+    ```
+
+## Reactive Attributes
+
+| Name       | Type   | Default     | Description                                        |
+| ---------- | ------ | ----------- | -------------------------------------------------- |
+| `variant`  | `str`  | `"default"` | Styling variant. One of `default`, `size`, `text`. |
+
+
+## Messages
+
+This widget sends no messages.
+
+## See Also
+
+* [Placeholder](../api/placeholder.md) code reference

mkdocs.yml

@@ -98,6 +98,7 @@ nav:
       - "widgets/index.md"
       - "widgets/input.md"
       - "widgets/label.md"
+      - "widgets/placeholder.md"
       - "widgets/static.md"
       - "widgets/tree.md"
   - API:

src/textual/_arrange.py

@@ -41,7 +41,6 @@ def arrange(
 
     placements: list[WidgetPlacement] = []
     add_placement = placements.append
-    region = size.region
 
     _WidgetPlacement = WidgetPlacement
     top_z = TOP_Z
@@ -50,7 +49,9 @@ def arrange(
     get_dock = attrgetter("styles.dock")
     styles = widget.styles
 
+    layer_region = size.region
     for widgets in dock_layers.values():
+        region = layer_region
 
         layout_widgets, dock_widgets = partition(get_dock, widgets)
 

src/textual/_compositor.py

@@ -347,6 +347,7 @@ def add_widget(
             order: tuple[tuple[int, ...], ...],
             layer_order: int,
             clip: Region,
+            visible: bool,
         ) -> None:
             """Called recursively to place a widget and its children in the map.
 
@@ -356,7 +357,12 @@ def add_widget(
                 order (tuple[int, ...]): A tuple of ints to define the order.
                 clip (Region): The clipping region (i.e. the viewport which contains it).
             """
-            widgets.add(widget)
+            visibility = widget.styles.get_rule("visibility")
+            if visibility is not None:
+                visible = visibility == "visible"
+
+            if visible:
+                widgets.add(widget)
             styles_offset = widget.styles.offset
             layout_offset = (
                 styles_offset.resolve(region.size, clip.size)
@@ -420,32 +426,34 @@ def add_widget(
                             widget_order,
                             layer_order,
                             sub_clip,
+                            visible,
                         )
                         layer_order -= 1
 
-                # Add any scrollbars
-                for chrome_widget, chrome_region in widget._arrange_scrollbars(
-                    container_region
-                ):
-                    map[chrome_widget] = MapGeometry(
-                        chrome_region + layout_offset,
+                if visible:
+                    # Add any scrollbars
+                    for chrome_widget, chrome_region in widget._arrange_scrollbars(
+                        container_region
+                    ):
+                        map[chrome_widget] = MapGeometry(
+                            chrome_region + layout_offset,
+                            order,
+                            clip,
+                            container_size,
+                            container_size,
+                            chrome_region,
+                        )
+
+                    map[widget] = MapGeometry(
+                        region + layout_offset,
                         order,
                         clip,
+                        total_region.size,
                         container_size,
-                        container_size,
-                        chrome_region,
+                        virtual_region,
                     )
 
-                map[widget] = MapGeometry(
-                    region + layout_offset,
-                    order,
-                    clip,
-                    total_region.size,
-                    container_size,
-                    virtual_region,
-                )
-
-            else:
+            elif visible:
                 # Add the widget to the map
                 map[widget] = MapGeometry(
                     region + layout_offset,
@@ -457,7 +465,15 @@ def add_widget(
                 )
 
         # Add top level (root) widget
-        add_widget(root, size.region, size.region, ((0,),), layer_order, size.region)
+        add_widget(
+            root,
+            size.region,
+            size.region,
+            ((0,),),
+            layer_order,
+            size.region,
+            True,
+        )
         return map, widgets
 
     @property
@@ -630,11 +646,6 @@ def _get_renders(
         if not self.map:
             return
 
-        def is_visible(widget: Widget) -> bool:
-            """Return True if the widget is (literally) visible by examining various
-            properties which affect whether it can be seen or not."""
-            return widget.visible and widget.styles.opacity > 0
-
         _Region = Region
 
         visible_widgets = self.visible_widgets
@@ -644,13 +655,13 @@ def is_visible(widget: Widget) -> bool:
             widget_regions = [
                 (widget, region, clip)
                 for widget, (region, clip) in visible_widgets.items()
-                if crop_overlaps(clip) and is_visible(widget)
+                if crop_overlaps(clip) and widget.styles.opacity > 0
             ]
         else:
             widget_regions = [
                 (widget, region, clip)
                 for widget, (region, clip) in visible_widgets.items()
-                if is_visible(widget)
+                if widget.styles.opacity > 0
             ]
 
         intersection = _Region.intersection

src/textual/containers.py

@@ -6,6 +6,7 @@ class Container(Widget):
 
     DEFAULT_CSS = """
     Container {
+        height: 1fr;
         layout: vertical;
         overflow: auto;
     }
@@ -17,6 +18,7 @@ class Vertical(Widget):
 
     DEFAULT_CSS = """
     Vertical {
+        height: 1fr;
         layout: vertical;
         overflow-y: auto;
     }
@@ -28,6 +30,7 @@ class Horizontal(Widget):
 
     DEFAULT_CSS = """
     Horizontal {
+        height: 1fr;
         layout: horizontal;
         overflow-x: hidden;
     }
@@ -39,6 +42,7 @@ class Grid(Widget):
 
     DEFAULT_CSS = """
     Grid {
+        height: 1fr;
         layout: grid;
     }    
     """
@@ -49,6 +53,7 @@ class Content(Widget, can_focus=True, can_focus_children=False):
 
     DEFAULT_CSS = """
     Vertical {
+        height: 1fr;
         layout: vertical;
         overflow-y: auto;
     }