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
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
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.
@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).
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.
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.)