Button styles

[willmcgugan]

The button widget could use a number of different semantic styles, namely default, success, warn, fail

These should be modelled in Button.CSS and use the design system colors. We also need dark variations for each.

In the css, the class -success etc should set the style. We could let the dev set the style with Button(classes="success") but consider some other parameter like Button(variant="success") or alt constructor like Button.success()

[darrenburns]

What's the - prefix on success for? Seems surprising to me (and like something I'd forget about constantly).

[willmcgugan]

It's a convention from a CSS style guide (I forget which) that says it's a modifier rule. Something you might toggle on and off.

[darrenburns]

I'm not really following where this would be used vs where it wouldn't. A "success" attribute on a button doesn't seem like something that's primarily intended to be toggled to me. I mean, it _can _ of course be added/removed, but so can any CSS class. I do understand this convention it for things like focused vs not-focused, visible vs not-visible, active vs inactive (although don't particularly like it 😄).

[willmcgugan]

When I said "toggle" that was probably misleading. It's more that it is a modifier, and more likely to be use dynamically.

Think of a button class that makes a div (or Widget) look like a button. That class is relatively static, you are unlikely to remove it once applied it and it is relatively self contained. Something like -success modifies button, and may be wrapped in some kind of condition. The -success class probably wouldn't do anything useful without the button class.

The prefix on -success suggests don't just add me to anything and expect it to indicate success.

It kind of makes sense to me. It was part of a larger CSS style guide, that I can't seem to locate now.

[github-actions[bot]]

Did we solve your problem?

Glad we could help!