SOLVED: Button Border Radius can not work

Bricks Version: 1.5.3
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (a link to a page that illustrates the issue would be really helpful)

[Please describe in as much detail as possible how we can replicate this bug]

THEME STYLES > ELEMENT - BUTTON > BORDER > Radius can not display correct, please check if it’s a bug. Thanks!

1 Like

I’m also experiencing this since updating to 1.5.3.

When I set a border radius on buttons via theme styles, that radius is not inherited by the actual buttons. Setting a border radius on the button elements themselves does work.

1 Like

There is also a problem with the Border Width Linking option. It doesn’t work.
Plus the Border width, when set manually in Theme styles, is forgotten once you leave it.

I confirm, this is a regression.

Setting border-radius or any other border style on each button style works, but default is not inherited anylonger by other styles :frowning:

2 Likes

There are many strange things going on in the theme settings.

removing .bricks-background-primary will do the trick and your settings from theme styles will be active, just did not find out yet where and why .bricks-background-primary is applied at all when the element has a style in the theme styles.

Hi guys,
Thanks so much for your reports!

When we remove the Theme Style Colors, we need to address the buttons anyway. As for the “Default” button, I think it’s a definition issue. As far as I understand it, the default button is currently used when no other button style (Primary, Secondary, etc.) is selected. But that doesn’t mean that e.g. the primary button takes the border-radius from the default button.

As I said - we’ll have to look at it again when the Theme Style Colors are discontinued.

@alanj Which browser are you using? I cannot reproduce the problem.
@Claudio Looking forward to your (reproducible) reports :slight_smile:

Best regards,
timmse

hey @timmse I push the button again :slightly_smiling_face: and ask you how i can set the border radius for a default > muted button in the theme styles?

In the Theme Styles? Not at all. This will cause you problems at the latest when the theme style colors are gone. Therefore I would recommend you to work with classes instead, which is the most bulletproof solution, and you have full control over it (now and in the future).

For example (written as regular CSS, but you can easily create these classes with Bicks):

.btn { ... contains general styling as e.g. padding... }
.btn-rounded { ... contains your border-radius... }
.btn-muted { ...contains the muted background-color / color }
.btn-primary { ...contains the primary background-color / color }

Best regards,
timmse

@timmse So, still no idea?

The use classes “idea” works today until forever @wildworm :wink:

I would expect “default” to mean the one that the other styles pull from if they have not been modified in a certain way. In fact that’s how it works for typography I noticed already (so at the very least there’s an inconsistency here which is a defect IMO)…

…if I set default to a typo weight of 800 for example, then all the other button styles immediately get the 800 weight even though it wasn’t specified beyond the default style.

As that behaviour is shown for typography, I’d expect the same behaviour in the border radius as another example, and currently that isn’t happening. This is a defect IMO.

Notice in the screenshot below… I have set the typography in default, but not in primary or secondary, but notice they still have the heavier font weight as specified from default. However that is not the behaviour seen for border-radius (set on default but not set on other styles).

Hopefully it’ll be resolved very soon. :slight_smile: Thank you.

Is this problem solved? It still doesn’t seem to be working properly.

No, the “improved border-radius” is something else and has nothing to do with the buttons.

I noticed this is still in a “WAIT” state… is this not in a “WIP” state instead? Is this a defect being worked on currently?

1 Like

@timmse, can we please get an update on this one? Is this not a bug being worked on? I’d expect this to be in WIP rather than WAIT state. If you need a recent detailed explanation of the defect, please review this comment: WAIT: Button Border Radius can not work - #12 by d19dotca

Hey guys, experiencing the same issue: Bricks Community | Facebook. Would be awesome to know you guys are on top of this. Any progress, by any chance?

It seems to be working for me,
make sure to assign the style and condition,
i tested on new version



image

I think you misunderstood the issue (or I’ve misunderstood your screenshot). The border-radius works fine if set explicitly like it looks like it was in your case. However if you set it on “default” only, then it isn’t inherited by the other styles, despite all the other settings being inherited such as typography. This means it doesn’t behave the same way as it doesn’t for the other settings under the default style where the others inherit it, it seems to stick to default only which means the workaround for now is it needs to be set explicitly on every style that needs a radius.

@timmse - Is it possible to get an update on this? This issue has been long-standing. It’s currently set in WAIT status but I’d like to hope this is in the bug backlog and thus WIP status instead. Is this currently waiting on any users input at all or is this with the Bricks team currently for hopefully a fix in the next version or two?