Re-render options in OptionList

[willmcgugan]

The OptionList will render all the options, and then apply styles to them post render to indicate a highlight.

The problem with this approach is that alpha / dim etc are not taken in to account. The result is that text with alpha, or the dim style, don't apply to the new highlight background.

I think we can re-render highlighted items so that the alpha applies.

[rodrigogiraoserrao]

If I'm interpreting the issue correctly, it isn't just OptionList that has this problem.
There are other widgets where I can't set text opacity, for example DataTable and Checkbox.
The three lines of italic text should not be readable because that text has its TCSS set with text-opacity: 0%.

Code for the app above.

from textual.app import App, ComposeResult
from textual.widgets import Checkbox, Footer, Header, DataTable, OptionList
from textual.widgets.option_list import Option


class OptionListApp(App[None]):
    CSS = """
    OptionList > .option-list--option-hover {
        # background: red;
        text-opacity: 0%;
        opacity: 0%;
        text-style: italic;
    }

    DataTable > .datatable--header {
        text-opacity: 0%;
        text-style: italic;
    }

    Checkbox > .toggle--label {
        text-opacity: 0%;
        text-style: italic;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header()
        yield OptionList(
            Option("Aerilon", id="aer"),
            Option("Aquaria", id="aqu"),
        )
        dt = DataTable()
        dt.add_column("oi")
        yield dt
        yield Checkbox("text")
        yield Footer()


if __name__ == "__main__":
    OptionListApp().run()

[willmcgugan]

This will require a fairly substantial refactor.

Essentially the approach of pre-rendering content, and then applying styles to get modifiers like select / hover, isn't going to take alpha in to account.

We need to re-render options with different component classes.

This may be one for @davep since he built the original.

[rodrigogiraoserrao]

I can do it, no problem.
But if everyone thinks it's better, I'll yield to Dave.

[rodrigogiraoserrao]

TL;DR: This will likely be fixed if Textual#3342 is fixed first.

[willmcgugan]

Recently fixed

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.