Merge pull request #5778 from Textualize/compact-widgets

Compact widgets

Author: willmcgugan

CHANGELOG.md

@@ -5,10 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
 ### Fixed
 
 - Fixed `OptionList` causing excessive redrawing https://github.com/Textualize/textual/pull/5766
 
+### Added
+
+- Added `toggle_class` parameter to reactives https://github.com/Textualize/textual/pull/5778
+- Added `compact` parameter and reactive to `Button`, `Input`, `ToggleButton`, `RadioSet`, `OptionList`, `TextArea` https://github.com/Textualize/textual/pull/5778
+
+### Changed
+
+- `RadioSet` now has a default width of `1fr` https://github.com/Textualize/textual/pull/5778
+
 ## [3.1.1] - 2025-04-22
 
 ### Fixed

src/textual/reactive.py

@@ -111,6 +111,7 @@ class Reactive(Generic[ReactiveType]):
         compute: Run compute methods when attribute is changed.
         recompose: Compose the widget again when the attribute changes.
         bindings: Refresh bindings when the reactive changes.
+        toggle_class: An optional TCSS classname(s) to toggle based on the truthiness of the value.
     """
 
     _reactives: ClassVar[dict[str, object]] = {}
@@ -126,6 +127,7 @@ def __init__(
         compute: bool = True,
         recompose: bool = False,
         bindings: bool = False,
+        toggle_class: str | None = None,
     ) -> None:
         self._default = default
         self._layout = layout
@@ -135,6 +137,7 @@ def __init__(
         self._run_compute = compute
         self._recompose = recompose
         self._bindings = bindings
+        self._toggle_class = toggle_class
         self._owner: Type[MessageTarget] | None = None
         self.name: str
 
@@ -175,6 +178,7 @@ def _initialize_reactive(self, obj: Reactable, name: str) -> None:
             name: Name of attribute.
         """
         _rich_traceback_omit = True
+
         internal_name = f"_reactive_{name}"
         if hasattr(obj, internal_name):
             # Attribute already has a value
@@ -308,6 +312,11 @@ def _set(self, obj: Reactable, value: ReactiveType, always: bool = False) -> Non
         public_validate_function = getattr(obj, f"validate_{name}", None)
         if callable(public_validate_function):
             value = public_validate_function(value)
+
+        # Toggle the classes using the value's truthiness
+        if (toggle_class := self._toggle_class) is not None:
+            obj.set_class(bool(value), *toggle_class.split())
+
         # If the value has changed, or this is the first time setting the value
         if always or self._always_update or current_value != value:
             # Store the internal value
@@ -407,6 +416,7 @@ class reactive(Reactive[ReactiveType]):
         always_update: Call watchers even when the new value equals the old value.
         recompose: Compose the widget again when the attribute changes.
         bindings: Refresh bindings when the reactive changes.
+        toggle_class: An optional TCSS classname(s) to toggle based on the truthiness of the value.
     """
 
     def __init__(
@@ -419,6 +429,7 @@ def __init__(
         always_update: bool = False,
         recompose: bool = False,
         bindings: bool = False,
+        toggle_class: str | None = None,
     ) -> None:
         super().__init__(
             default,
@@ -428,6 +439,7 @@ def __init__(
             always_update=always_update,
             recompose=recompose,
             bindings=bindings,
+            toggle_class=toggle_class,
         )
 
 
@@ -439,6 +451,7 @@ class var(Reactive[ReactiveType]):
         init: Call watchers on initialize (post mount).
         always_update: Call watchers even when the new value equals the old value.
         bindings: Refresh bindings when the reactive changes.
+        toggle_class: An optional TCSS classname(s) to toggle based on the truthiness of the value.
     """
 
     def __init__(
@@ -447,6 +460,7 @@ def __init__(
         init: bool = True,
         always_update: bool = False,
         bindings: bool = False,
+        toggle_class: str | None = None,
     ) -> None:
         super().__init__(
             default,
@@ -455,6 +469,7 @@ def __init__(
             init=init,
             always_update=always_update,
             bindings=bindings,
+            toggle_class=toggle_class,
         )
 
 

src/textual/widgets/_button.py

@@ -59,6 +59,10 @@ class Button(Widget, can_focus=True):
         text-style: bold;
         line-pad: 1;
 
+        &.-textual-compact {
+            border: none !important;
+        }
+
         &:disabled {            
             text-opacity: 0.6;
         }
@@ -160,6 +164,9 @@ class Button(Widget, can_focus=True):
     variant = reactive("default", init=False)
     """The variant name for the button."""
 
+    compact = reactive(False, toggle_class="-textual-compact")
+    """Make the button compact (without borders)."""
+
     class Pressed(Message):
         """Event sent when a `Button` is pressed and there is no Button action.
 
@@ -191,6 +198,7 @@ def __init__(
         disabled: bool = False,
         tooltip: RenderableType | None = None,
         action: str | None = None,
+        compact: bool = False,
     ):
         """Create a Button widget.
 
@@ -203,6 +211,7 @@ def __init__(
             disabled: Whether the button is disabled or not.
             tooltip: Optional tooltip.
             action: Optional action to run when clicked.
+            compact: Enable compact button style.
         """
         super().__init__(name=name, id=id, classes=classes, disabled=disabled)
 
@@ -212,6 +221,7 @@ def __init__(
         self.label = Content.from_text(label)
         self.variant = variant
         self.action = action
+        self.compact = compact
         self.active_effect_duration = 0.2
         """Amount of time in seconds the button 'press' animation lasts."""
 

src/textual/widgets/_input.py

@@ -177,9 +177,19 @@ class Input(ScrollView):
         height: 3;
         scrollbar-size-horizontal: 0;
 
+        &.-textual-compact {
+            border: none !important;
+            height: 1;
+            padding: 0;
+            &.-invalid {
+                background-tint: $error 20%;
+            }
+        }
+
         &:focus {
-            border: tall $border;
+            border: tall $border;            
             background-tint: $foreground 5%;
+            
         }
         &>.input--cursor {
             background: $input-cursor-background;
@@ -253,6 +263,8 @@ def cursor_position(self, position: int) -> None:
     """The maximum length of the input, in characters."""
     valid_empty = var(False)
     """Empty values should pass validation."""
+    compact = reactive(False, toggle_class="-textual-compact")
+    """Make the input compact (without borders)."""
 
     @dataclass
     class Changed(Message):
@@ -342,6 +354,7 @@ def __init__(
         classes: str | None = None,
         disabled: bool = False,
         tooltip: RenderableType | None = None,
+        compact: bool = False,
     ) -> None:
         """Initialise the `Input` widget.
 
@@ -366,6 +379,7 @@ def __init__(
             classes: Optional initial classes for the widget.
             disabled: Whether the input is disabled or not.
             tooltip: Optional tooltip.
+            compact: Enable compact style (without borders).
         """
         super().__init__(name=name, id=id, classes=classes, disabled=disabled)
 
@@ -431,6 +445,8 @@ def __init__(
         if tooltip is not None:
             self.tooltip = tooltip
 
+        self.compact = compact
+
         self.select_on_focus = select_on_focus
 
     def _position_to_cell(self, position: int) -> int:

src/textual/widgets/_option_list.py

@@ -139,6 +139,13 @@ class OptionList(ScrollView, can_focus=True):
         border: tall $border-blurred;
         padding: 0 1;
         background: $surface;
+        &.-textual-compact {
+            border: none !important;
+            padding: 0;
+            & > .option-list--option {
+                padding: 0;
+            }
+        }
         & > .option-list--option-highlighted {
             color: $block-cursor-blurred-foreground;
             background: $block-cursor-blurred-background;
@@ -192,6 +199,9 @@ class OptionList(ScrollView, can_focus=True):
     _mouse_hovering_over: reactive[int | None] = reactive(None)
     """The index of the option under the mouse or `None`."""
 
+    compact: reactive[bool] = reactive(False, toggle_class="-textual-compact")
+    """Enable compact display?"""
+
     class OptionMessage(Message):
         """Base class for all option messages."""
 
@@ -252,6 +262,7 @@ def __init__(
         classes: str | None = None,
         disabled: bool = False,
         markup: bool = True,
+        compact: bool = False,
     ):
         """Initialize an OptionList.
 
@@ -262,9 +273,11 @@ def __init__(
             classes: Initial CSS classes.
             disabled: Disable the widget?
             markup: Strips should be rendered as content markup if `True`, or plain text if `False`.
+            compact: Enable compact style?
         """
         super().__init__(name=name, id=id, classes=classes, disabled=disabled)
         self._markup = markup
+        self.compact = compact
         self._options: list[Option] = []
         """List of options."""
         self._id_to_option: dict[str, Option] = {}

src/textual/widgets/_radio_set.py

@@ -12,7 +12,7 @@
 from textual.containers import VerticalScroll
 from textual.events import Click, Mount
 from textual.message import Message
-from textual.reactive import var
+from textual.reactive import reactive, var
 from textual.widgets._radio_button import RadioButton
 
 
@@ -32,14 +32,20 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
     RadioSet {
         border: tall $border-blurred;
         background: $surface;
-        padding: 0 1;
+        padding: 0 1;        
         height: auto;
-        width: auto;
+        width: 1fr;
+
+        &.-textual-compact {
+            border: none !important;
+            padding: 0;
+        }
 
         & > RadioButton {
             background: transparent;
             border: none;
             padding: 0;
+            width: 1fr;
 
             & > .toggle--button {
                 color: $panel-darken-2;
@@ -87,6 +93,9 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
     _selected: var[int | None] = var[Optional[int]](None)
     """The index of the currently-selected radio button."""
 
+    compact: reactive[bool] = reactive(False, toggle_class="-textual-compact")
+    """Enable compact display?"""
+
     @rich.repr.auto
     class Changed(Message):
         """Posted when the pressed button in the set changes.
@@ -133,6 +142,7 @@ def __init__(
         classes: str | None = None,
         disabled: bool = False,
         tooltip: RenderableType | None = None,
+        compact: bool = False,
     ) -> None:
         """Initialise the radio set.
 
@@ -143,6 +153,7 @@ def __init__(
             classes: The CSS classes of the radio set.
             disabled: Whether the radio set is disabled or not.
             tooltip: Optional tooltip.
+            compact: Enable compact radio set style
 
         Note:
             When a `str` label is provided, a
@@ -163,6 +174,7 @@ def __init__(
         )
         if tooltip is not None:
             self.tooltip = tooltip
+        self.compact = compact
 
     def _on_mount(self, _: Mount) -> None:
         """Perform some processing once mounted in the DOM."""