diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py index 01aff311f9..9c79544d10 100644 --- a/src/textual/widgets/_footer.py +++ b/src/textual/widgets/_footer.py @@ -83,6 +83,7 @@ def render(self) -> Text: key_style = self.get_component_rich_style("footer-key--key") description_style = self.get_component_rich_style("footer-key--description") key_display = self.key_display + key_padding = self.get_component_styles("footer-key--key").padding if self.upper_case_keys: key_display = key_display.upper() if self.ctrl_to_caret and key_display.lower().startswith("ctrl+"): @@ -94,7 +95,10 @@ def render(self) -> Text: ) else: label_text = Text.assemble( - (f" {key_display} ", key_style), (description, description_style), " " + (f" {key_display} ", key_style), + " " * key_padding.right, + (description, description_style), + " ", ) label_text.stylize_before(self.rich_style) return label_text diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr index d39d170cce..3eb956b79e 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr +++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr @@ -20996,6 +20996,163 @@ ''' # --- +# name: test_footer_classic_styling + ''' + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ClassicFooterStylingApp + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +  CTRL+T Toggle Dark mode CTRL+Q Quit + + + + + ''' +# --- # name: test_footer_render ''' diff --git a/tests/snapshot_tests/snapshot_apps/footer_classic_styling.py b/tests/snapshot_tests/snapshot_apps/footer_classic_styling.py new file mode 100644 index 0000000000..37fd9c8141 --- /dev/null +++ b/tests/snapshot_tests/snapshot_apps/footer_classic_styling.py @@ -0,0 +1,47 @@ +from textual.app import App, ComposeResult +from textual.widgets import Footer + + +class ClassicFooterStylingApp(App): + """ + This app attempts to replicate the styling of the classic footer in + Textual before v0.63.0, in particular the distinct background color + for the binding keys and padding between the key and binding description. + + Regression test for https://github.com/Textualize/textual/issues/4557 + """ + + CSS = """ + Footer { + background: $accent; + + FooterKey { + background: $accent; + color: $text; + + .footer-key--key { + background: $accent-darken-2; + color: $text; + padding-right: 1; + } + } + } + """ + + BINDINGS = [ + ("ctrl+t", "app.toggle_dark", "Toggle Dark mode"), + ("ctrl+q", "quit", "Quit"), + ] + + def compose(self) -> ComposeResult: + yield Footer() + + def on_mount(self) -> None: + footer = self.query_one(Footer) + footer.upper_case_keys = True + footer.ctrl_to_caret = False + + +if __name__ == "__main__": + app = ClassicFooterStylingApp() + app.run() diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py index 07c8d4eb27..50230624d6 100644 --- a/tests/snapshot_tests/test_snapshots.py +++ b/tests/snapshot_tests/test_snapshots.py @@ -1288,3 +1288,8 @@ def test_hatch(snap_compare): def test_rules(snap_compare): """Test rules.""" assert snap_compare(SNAPSHOT_APPS_DIR / "rules.py") + + +def test_footer_classic_styling(snap_compare): + """Regression test for https://github.com/Textualize/textual/issues/4557""" + assert snap_compare(SNAPSHOT_APPS_DIR / "footer_classic_styling.py")