Button hover regression with 6.1.0 or desired change in behaviour?

[sbellon]

Consider the following code:

#!/usr/bin/env -S uv run -s
# /// script
# requires-python = ">=3.13"
# dependencies = [
#   "textual==6.1.0"
# ]
# ///
 
from textual.app import App, ComposeResult
from textual.widgets import Button
 
 
class FocusButton(Button):
    DEFAULT_CSS = """
    FocusButton {
        background: $background;
        border: $background;
        &:focus {
            color: $foreground;
            background: $background;
            border: round $primary;
        }
        &:hover {
            background: red;
            border: round yellow;
        }
    }
    """
 
 
class TestApp(App):
    def compose(self) -> ComposeResult:
        yield FocusButton()
 
 
if __name__ == "__main__":
    TestApp().run()

With 6.0.0 this worked perfectly fine, but with 6.1.0 the hover style does not work: the background is completely ignored and the border is strangely not applied to the top.

Is this a regression and I should file an issue, or is it a desired change in behaviour and I'll have to adjust my code? If the latter, how?

Thanks in advance for any insights!

[TomJGooding]

In the meantime, you can try adding this to your CSS:

    FocusButton {
        &.-style-default {
            /* Your CSS here... */
    }

[sbellon]

Thanks, that works. Is this required from now on forward, or is the current 6.1.0 state a regression that will get fixed for future releases? In that case, I'll rather pin textual<=6.1.0.

[sbellon]

Also with 6.2.0 the &.-style-default is required. Therefore I'd like to ask my question again: Is this now a change which is required moving forward, or is this a regression and the old CSS should still work?

[willmcgugan]

If you use DEFAULT_CSS it requires you know a little about the CSS of the base class: class names, specificity etc. If you didn't author the base class, you might find something breaks with another release.

A solution is to not inherit the CSS, and simply copy it:

class MyButton(Button, inherit_css=False):
    DEFAULT_CSS = """
        # Copy of Button CSS
    """
    ...

Or copy the entire Button class to your code.

Ultimately Textual doesn't guarantee that the CSS of the default widgets won't change. If you don't want to use the above technique, you might want to write a snapshot test so you can catch any potential changes. And keep an eye on Textual's release notes.

[sbellon]

I'm a bit slow right now, sorry, please bear with me ... so how would the code from my initial posting look like, written independently of whether textual 6.0.0 or 6.1.0 is being used? I don't understand it yet.

[willmcgugan]

If you wanted to ensure your CSS will not update, you could copy the CSS from https://github.com/Textualize/textual/blob/main/src/textual/widgets/_button.py#L50

I'm actually surprised you need to modify the button at all. There are a number of semantic styles which should cover most requirements.