merge

Author: willmcgugan

src/textual/app.py

@@ -482,6 +482,26 @@ class MyApp(App[None]):
     SUSPENDED_SCREEN_CLASS: ClassVar[str] = ""
     """Class to apply to suspended screens, or empty string for no class."""
 
+    HORIZONTAL_BREAKPOINTS: ClassVar[list[tuple[int, str]]] | None = []
+    """List of horizontal breakpoints for responsive classes.
+    
+    A breakpoint consists of a tuple containing the width where the class is set, and the classname to set.
+
+    Example:
+        ```python
+        # Up to 80 cells wide, the app has the class "-normal"
+        # 80 - 119 cells wide, the app has the class "-wide"
+        # 120 cells or wider, the app has the class "-very-wide"
+        [(0, "-normal"), (80, "-wide"), (120, "-very-wide")]
+        ```
+    
+    """
+    VERTICAL_BREAKPOINTS: ClassVar[list[tuple[int, str]]] | None = []
+    """List of vertical breakpoints for responsive classes.
+    
+    Contents are the same as `HORIZONTAL_BREAKPOINTS`, but the integer is compared to the height, rather than the width.
+    """
+
     _PSEUDO_CLASSES: ClassVar[dict[str, Callable[[App[Any]], bool]]] = {
         "focus": lambda app: app.app_focus,
         "blur": lambda app: not app.app_focus,

src/textual/screen.py

@@ -196,6 +196,11 @@ class Screen(Generic[ScreenResultType], Widget):
     you can set the [sub_title][textual.screen.Screen.sub_title] attribute.
     """
 
+    HORIZONTAL_BREAKPOINTS: ClassVar[list[tuple[int, str]]] | None = None
+    """Horizontal breakpoints, will override [App.HORIZONTAL_BREAKPOINTS][textual.app.App.HORIZONTAL_BREAKPOINTS] if not `None`."""
+    VERTICAL_BREAKPOINTS: ClassVar[list[tuple[int, str]]] | None = None
+    """Vertical breakpoints, will override [App.VERTICAL_BREAKPOINTS][textual.app.App.VERTICAL_BREAKPOINTS] if not `None`."""
+
     focused: Reactive[Widget | None] = Reactive(None)
     """The focused [widget][textual.widget.Widget] or `None` for no focus.
     To set focus, do not update this value directly. Use [set_focus][textual.screen.Screen.set_focus] instead."""
@@ -1354,6 +1359,41 @@ async def _on_resize(self, event: events.Resize) -> None:
         for screen in self.app._background_screens:
             screen._screen_resized(event.size)
 
+        horizontal_breakpoints = (
+            self.app.HORIZONTAL_BREAKPOINTS
+            if self.HORIZONTAL_BREAKPOINTS is None
+            else self.HORIZONTAL_BREAKPOINTS
+        ) or []
+
+        vertical_breakpoints = (
+            self.app.VERTICAL_BREAKPOINTS
+            if self.VERTICAL_BREAKPOINTS is None
+            else self.VERTICAL_BREAKPOINTS
+        ) or []
+
+        width, height = event.size
+        if horizontal_breakpoints:
+            self._set_breakpoints(width, horizontal_breakpoints)
+        if vertical_breakpoints:
+            self._set_breakpoints(height, horizontal_breakpoints)
+
+    def _set_breakpoints(
+        self, dimension: int, breakpoints: list[tuple[int, str]]
+    ) -> None:
+        """Set horizontal or vertical breakpoints.
+
+        Args:
+            dimension: Either the width or the height.
+            breakpoints: A list of breakpoints.
+
+        """
+        class_names = [class_name for _breakpoint, class_name in breakpoints]
+        self.remove_class(*class_names)
+        for breakpoint, class_name in sorted(breakpoints, reverse=True):
+            if dimension >= breakpoint:
+                self.add_class(class_name)
+                return
+
     def _update_tooltip(self, widget: Widget) -> None:
         """Update the content of the tooltip."""
         try:

tests/snapshot_tests/test_snapshots.py

@@ -4023,6 +4023,57 @@ def compose(self) -> ComposeResult:
     assert snap_compare(TintApp())
 
 
+@pytest.mark.parametrize(
+    "size",
+    [
+        (30, 40),
+        (40, 40),
+        (80, 80),
+        (130, 80),
+    ],
+)
+def test_breakpoints(snap_compare, size):
+    """Test HORIZONTAL_BREAKPOINTS
+
+    You should see four terminals of different sizes with a grid of placeholders.
+    The first should have a single column, then two columns, then 4, then 6.
+
+    """
+
+    class BreakpointApp(App):
+
+        HORIZONTAL_BREAKPOINTS = [
+            (0, "-narrow"),
+            (40, "-normal"),
+            (80, "-wide"),
+            (120, "-very-wide"),
+        ]
+
+        CSS = """
+        Screen {
+            &.-narrow {
+                Grid { grid-size: 1; }
+            }
+            &.-normal {
+                Grid { grid-size: 2; }
+            }
+            &.-wide {
+                Grid { grid-size: 4; }
+            }
+            &.-very-wide {
+                Grid { grid-size: 6; }
+            }
+        }
+        """
+
+        def compose(self) -> ComposeResult:
+            with Grid():
+                for n in range(16):
+                    yield Placeholder(f"Placeholder {n+1}")
+
+    assert snap_compare(BreakpointApp(), terminal_size=size)
+
+
 def test_compact(snap_compare):
     """Test compact styles.