Merge branch 'main' into fix-datatable-change-max-height-back-to-100-…

…percent

CHANGELOG.md

@@ -9,12 +9,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fix priority bindings not appearing in footer when key clashes with focused widget https://github.com/Textualize/textual/pull/4342
+- Reverted auto-width change https://github.com/Textualize/textual/pull/4369
+
+### Changed
+
 - Exceptions inside `Widget.compose` or workers weren't bubbling up in tests https://github.com/Textualize/textual/issues/4282
 - Fixed `DataTable` scrolling issues by changing `max-height` back to 100% https://github.com/Textualize/textual/issues/4286
+- Fixed `Button` not rendering correctly with console markup https://github.com/Textualize/textual/issues/4328
 
 ### Added
 
 - Added `Document.start` and `end` location properties for convenience https://github.com/Textualize/textual/pull/4267
+- Added support for JavaScript, Golang, Rust, Bash, Java and Kotlin to `TextArea` https://github.com/Textualize/textual/pull/4350
+- Added `inline` parameter to `run` and `run_async` to run app inline (under the prompt). https://github.com/Textualize/textual/pull/4343
+- Added `mouse` parameter to disable mouse support https://github.com/Textualize/textual/pull/4343
 
 ## [0.54.0] - 2024-03-26
 

docs/examples/how-to/inline01.py

@@ -0,0 +1,31 @@
+from datetime import datetime
+
+from textual.app import App, ComposeResult
+from textual.widgets import Digits
+
+
+class ClockApp(App):
+    CSS = """
+    Screen {
+        align: center middle;
+    }
+    #clock {
+        width: auto;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Digits("", id="clock")
+
+    def on_ready(self) -> None:
+        self.update_clock()
+        self.set_interval(1, self.update_clock)
+
+    def update_clock(self) -> None:
+        clock = datetime.now().time()
+        self.query_one(Digits).update(f"{clock:%T}")
+
+
+if __name__ == "__main__":
+    app = ClockApp()
+    app.run(inline=True)  #  (1)!

docs/examples/how-to/inline02.py

@@ -0,0 +1,38 @@
+from datetime import datetime
+
+from textual.app import App, ComposeResult
+from textual.widgets import Digits
+
+
+class ClockApp(App):
+    CSS = """
+    Screen {
+        align: center middle;
+        &:inline {
+            border: none;
+            height: 50vh;
+            Digits {
+                color: $success;
+            }
+        }
+    }
+    #clock {
+        width: auto;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Digits("", id="clock")
+
+    def on_ready(self) -> None:
+        self.update_clock()
+        self.set_interval(1, self.update_clock)
+
+    def update_clock(self) -> None:
+        clock = datetime.now().time()
+        self.query_one(Digits).update(f"{clock:%T}")
+
+
+if __name__ == "__main__":
+    app = ClockApp()
+    app.run(inline=True)

docs/examples/widgets/clock.py

@@ -28,4 +28,4 @@ def update_clock(self) -> None:
 
 if __name__ == "__main__":
     app = ClockApp()
-    app.run()
+    app.run(inline=True)

docs/guide/CSS.md

@@ -321,12 +321,13 @@ The `background: green` is only applied to the Button underneath the mouse curso
 
 Here are some other pseudo classes:
 
+- `:blur` Matches widgets which *do not* have input focus.
+- `:dark` Matches widgets in dark mode (where `App.dark == True`).
 - `:disabled` Matches widgets which are in a disabled state.
 - `:enabled` Matches widgets which are in an enabled state.
-- `:focus` Matches widgets which have input focus.
-- `:blur` Matches widgets which *do not* have input focus.
 - `:focus-within` Matches widgets with a focused child widget.
-- `:dark` Matches widgets in dark mode (where `App.dark == True`).
+- `:focus` Matches widgets which have input focus.
+- `:inline` Matches widgets when the app is running in inline mode.
 - `:light` Matches widgets in dark mode (where `App.dark == False`).
 
 ## Combinators

docs/guide/animation.md

@@ -1,6 +1,6 @@
 # Animation
 
-Ths chapter discusses how to use Textual's animation system to create visual effects such as movement, blending, and fading.
+This chapter discusses how to use Textual's animation system to create visual effects such as movement, blending, and fading.
 
 
 ## Animating styles

docs/guide/app.md

@@ -38,6 +38,14 @@ If you hit ++ctrl+c++ Textual will exit application mode and return you to the c
 
     A side effect of application mode is that you may no longer be able to select and copy text in the usual way. Terminals typically offer a way to bypass this limit with a key modifier. On iTerm you can select text if you hold the ++option++ key. See the documentation for your terminal software for how to select text in application mode.
 
+#### Run inline
+
+!!! tip "Added in version 0.45.0"
+
+You can also run apps in _inline_ mode, which will cause the app to appear beneath the prompt (and won't go in to application mode).
+Inline apps are useful for tools that integrate closely with the typical workflow of a terminal.
+
+To run an app in inline mode set the `inline` parameter to `True` when you call [App.run()][textual.app.App.run]. See [Style Inline Apps](../how-to/style-inline-apps.md) for how to apply additional styles to inline apps.
 
 ## Events
 

docs/how-to/style-inline-apps.md

@@ -0,0 +1,37 @@
+# Style Inline Apps
+
+Version 0.55.0 of Textual added support for running apps *inline* (below the prompt).
+Running an inline app is as simple as adding `inline=True` to [`run()`][textual.app.App.run].
+
+<iframe width="100%" style="aspect-ratio:757/804;" src="https://www.youtube.com/embed/dxAf3vDr4aQ" title="Textual Inline mode" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Your apps will typically run inline without modification, but you may want to make some tweaks for inline mode, which you can do with a little CSS.
+This How-To will explain how.
+
+Let's look at an inline app.
+The following app displays the the current time (and keeps it up to date).
+
+```python hl_lines="31"
+--8<-- "docs/examples/how-to/inline01.py"
+```
+
+1. The `inline=True` runs the app inline.
+
+With Textual's default settings, this clock will be displayed in 5 lines; 3 for the digits and 2 for a top and bottom border.
+
+You can change the height or the border with CSS and the `:inline` pseudo-selector, which only matches rules in inline mode.
+Let's update this app to remove the default border, and increase the height:
+
+```python hl_lines="11-17"
+--8<-- "docs/examples/how-to/inline02.py"
+```
+
+The highlighted CSS targets online inline mode.
+By setting the `height` rule on Screen we can define how many lines the app should consume when it runs.
+Setting `border: none` removes the default border when running in inline mode.
+
+We've also added a rule to change the color of the clock when running inline.
+
+## Summary
+
+Most apps will not require modification to run inline, but if you want to tweak the height and border you can write CSS that targets inline mode with the `:inline` pseudo-selector.

docs/widgets/selection_list.md

@@ -30,8 +30,8 @@ my_selection_list: SelectionList[int] =  SelectionList(*selections)
 ## Examples
 
 A selection list is designed to be built up of single-line prompts (which
-can be [Rich renderables](../guide/widgets.md#rich-renderables)) and an
-associated unique value.
+can be [Rich `Text`](https://rich.readthedocs.io/en/stable/text.html)) and
+an associated unique value.
 
 ### Selections as tuples
 

examples/calculator.py

@@ -168,4 +168,4 @@ def pressed_equals(self) -> None:
 
 
 if __name__ == "__main__":
-    CalculatorApp().run()
+    CalculatorApp().run(inline=True)

examples/calculator.tcss

@@ -12,6 +12,10 @@ Screen {
     min-height: 25;
     min-width: 26;
     height: 100%;
+
+    &:inline {
+        margin: 0 2;
+    }
 }
 
 Button {

examples/code_browser.tcss

@@ -1,5 +1,8 @@
 Screen {
     background: $surface-darken-1;
+    &:inline {
+        height: 50vh;
+    }
 }
 
 #tree-view {

mkdocs-nav.yml

@@ -223,6 +223,7 @@ nav:
       - "how-to/design-a-layout.md"
       - "how-to/package-with-hatch.md"
       - "how-to/render-and-compose.md"
+      - "how-to/style-inline-apps.md"
   - "FAQ.md"
   - "roadmap.md"
   - "Blog":