Textual 0.17.0 adds translucent screens and Option List

This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time).

What's new in this release?

There are two new notable features I want to cover. The first is a compositor effect.

Translucent screens

Textual has a concept of "screens" which you can think of as independent UI modes, each with their own user interface and logic. The App class keeps a stack of these screens so you can switch to a new screen and later return to the previous screen.

Screens

See the guide to learn more about the screens API.

Screens can be used to build modal dialogs by pushing a screen with controls / buttons, and popping the screen when the user has finished with it. The problem with this approach is that there was nothing to indicate to the user that the original screen was still there, and could be returned to.

In this release we have added alpha support to the Screen's background color which allows the screen underneath to show through, typically blended with a little color. Applying this to a screen makes it clear than the user can return to the previous screen when they have finished interacting with the modal.

Here's how you can enable this effect with CSS:

DialogScreen {
    align: center middle;
    background: $primary 30%;
}

Setting the background to $primary will make the background blue (with the default theme). The addition of 30% sets the alpha so that it will be blended with the background. Here's the kind of effect this creates:

There are 4 screens in the above screenshot, one for the base screen and one for each of the three dialogs. Note how each screen modifies the color of the screen below, but leaves everything visible.

See the docs on screen opacity if you want to add this to your apps.

Option list

Textual has had a ListView widget for a while, which is an excellent way of navigating a list of items (actually other widgets). In this release we've added an OptionList which is similar in appearance, but uses the line api under the hood. The Line API makes it more efficient when you approach thousands of items.

The Options List accepts Rich renderable, which means that anything Rich can render may be displayed in a list. Here's an Option List of tables:

We plan to build on the OptionList widget to implement drop-downs, menus, check lists, etc. But it is still very useful as it is, and you can add it to apps now.

What else?

There are a number of fixes regarding refreshing in this release. If you had issues with parts of the screen not updating, the new version should resolve it.

There's also a new logging handler, and a "thick" border type.

See release notes for the full details.

Next week

Next week we plan to take a break from building Textual to building apps with Textual. We do this now and again to give us an opportunity to step back and understand things from the perspective of a developer using Textual. We will hopefully have something interesting to show from the exercise, and new Open Source apps to share.

Join us

If you want to talk about this update or anything else Textual related, join us on our Discord server.