New Footer missing space between key and description

[TomJGooding]

Originally discussed in #4555, it looks like the new Footer doesn't have any space between the key and the description, which doesn't as nice if you've added a background style for the key.

I appreciate however that the default styling (without any background for the key) would perhaps then look like it has too much spacing.

What do you think?

from textual.app import App, ComposeResult
from textual.widgets import ClassicFooter, Footer, Label


class FooterApp(App):
    BINDINGS = [("space", "switch_footer", "Switch Footer")]

    CSS = """
    Screen {
        align: center middle;
    }

    Footer {
        background: $accent;
    }

    Footer > FooterKey {
        background: $accent;
        color: $text;
        .footer-key--key {
            background: $accent-darken-2;
            color: $text;
        }
    }
    """

    footer_type = "classic"

    def compose(self) -> ComposeResult:
        yield Label(
            f"{self.footer_type.title()} Footer",
            id="footer-type-label",
        )
        yield ClassicFooter()

    def action_switch_footer(self) -> None:
        if self.footer_type == "classic":
            self.query_one(ClassicFooter).remove()
            self.mount(Footer())
            self.footer_type = "new"
        else:
            self.query_one(Footer).remove()
            self.mount(ClassicFooter())
            self.footer_type = "classic"

        self.query_one(Label).update(
            f"{self.footer_type.title()} Footer",
        )


if __name__ == "__main__":
    app = FooterApp()
    app.run()

[github-actions]

We found the following entry in the FAQ which you may find helpful:

• How do I center a widget in a screen?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[jessebot]

In case anyone is following up on this. I think the current suggested solution is this, #4601 (comment):

The component style could have padding, which you could look up like this:

self.get_component_style("footer-key--key").padding

The user could then add the space with something like this:

Footer>footer-key--key {
    padding-right: 1;
}

But it still needs a PR.

[TomJGooding]

My understanding of component classes is that they are intended for Rich Style objects to allow styling of non-Widget` renderables in Textual. Using the component class to add padding just feels wrong to me, and might set the wrong precedent for other component classes in Textual.

Perhaps my understanding is wrong and I confess I don't have any better suggestions. If it helps I'm happy to look at a PR that adds the Padding instances or similar, but wanted to check I had fully understood the suggested solution first.

[willmcgugan]

Generally it is, but you can extract any CSS attribute from a component style, and use that in any way you like. Pretty sure there is precedence in the builtin widgets.

A downside is that you have to handle these things manually. i.e. if the widget doesn't explicitly handle padding in a component class then it won't appear. That can be solved by documenting the styles that work.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.