[New feature] You can now override settings inherited from a Style

Hey everyone, we released the ability to override any appearance or layout settings inherited from a Style on the canvas. In addition, all element appearance settings will be shown in the property editor regardless of if a Style is attached. This feature is helpful for when you need to make some small adjustments to an element with an attached Style without removing the relationship with that Style.

To override a setting, simply change the value. There is a visual change to the input’s background to denote when a value is the inherited default or when it is overridden. In addition, the Style input will show that the Style is overridden. To reset any overridden values, click the “reset” button next to the Appearance settings section or the Padding section in the property editor. Resetting will change any overridden values on a tab by tab basis.

A few notes on the behavior of Style overrides:

  • Resetting will change any overridden values on a tab by tab basis
  • If you override any values, and then update the attached Style, the overridden values will not change - even if those settings on the Style were updated
  • If you override any values, and then detach the Style, the overridden values will not change
  • If you override any values, and then detach the Style, and then reattach a Style, the overridden values will be removed in favor of the new Style’s inherited values.
  • If you override any values, and then change the overridden value back to the original value, the value will still be considered an override. To “re-attach” the value, use the reset button
  • If you override any values, and then create a new Style from the element, the overridden values will carry over to the new Style
  • Conditionals cannot be overridden yet. If you want to override an inherited conditional, simply add a new style that has the behavior you want since conditionals are evaluated from top to bottom
59 Likes

THIS IS AMAZING. Been waiting for this for a while now!

1 Like

Amazing! Thank you

1 Like

This is so great, I was wishing for that for so long, thanks

1 Like

Prayers answered. :heart:

3 Likes

Wonderful! I wished for this almost every day.

Thank you!

Fantastic! A lot of conditions with if url is not empty are about to dissapear.

Where did your second image come from? Not sure if it’s referencing something in bubble or if it’s just a demonstration.

4 Likes

Is there any place where we can find the elements which are “overrridden”??
It would be great to manage any update in styles, and check if there won’t be any bugs easily

1 Like

This is just a demonstration to show the different states that can exist on an input in the property editor

Ohhhh, for some reason I thought it was referencing the hover on the element itself. It would be really cool to do hover overrides too, with the same override on the conditions tab.

Great job, love this!

OMG yes!!! :raised_hands: these quality of life updates :smiling_face_with_three_hearts:

Niiiice! :smiley: :+1:

 

@nick.carroll If I understand correctly, this works as described, but the UI is not updating. IOW, the style name still appears in italic (with “overridden” in parentheses), and the Reset button is still visible.

Simply clicking the Reset button fixes/resets the UI (but of course the element doesn’t change in appearance, as expected).

Good catch, will escalate

2 Likes

Awesome addition.

One feedback and this might be a personal choice, but having it as a collapsable toggle (from ‘Appearance settings’) rather than always displayed might keep the UI a bit tighter/cleaner overall. And then when a custom property is set e.g. justify, font size…always show all properties, even when clicked off and back on.

Just a thought, I’m sure there are use cases to always have visible and still a very welcomed addition.

Appreciate the feedback! Satisfaction with the new “show all the settings” in the pe is something we will monitor closely

1 Like

@sudsy do you mind filing a bug report?

Incredible. This is very useful.

Awesome.

Btw not sure if this is caught, but there is a bug when undoing a style property adjustment - see below
2023-04-19_12-18-19 (1)

1 Like

@nick.carroll there seems to be another problem here with regard to border settings…

If you have a style defined that uses ‘Define each border independently’ you can’t override the settings for each border:

And any existing conditional formatting relating to (independent) border styles has been removed.

This has broken a lot of conditional formatting for borders in several of my apps.

(note: if i click on the ‘define each border independently’ box to uncheck it, and then check it again, I can then change the options in the properties editor, but any existing conditional formatting on borders is no longer there, which means having to go through and re-add conditions on every element where I was using conditional border formatting.)

@adamhholmes The team is looking into it. Apologies for the effect its had on your apps, will update the thread when we have a resolution

1 Like