Text override of variant inside the component instance

Since you’ve made changes to the properties of an instance, thus making overrides, the only solution is to reset the overrides so that the instance can inherit the changes in the master component.

By changes, do you mean switching states back and forth?

The problem is that the main component in my case is much more complicated, and consists of lots of elements, resetting it will reset all variant components back to the original one.

Yes, switching variants is changing the properties of a component.

You can reset the overrides not for the “Main component”, but for the “Text input field” nested within it.

Or so that your text can be changed in one place, then you need to redo the concept. For example: create a “Text” component, nest it in the “Text input field” variants (in one of them, override the text color). Now you can change the text in the “Text” component, and all changes will be reflected in all elements.

I think i’m having the same issue here so I’ll try to elaborate with some examples.

What i’m trying to accomplish is a text input field using components and their variants.

So I have a component with tho following variants:

• placeholder only
• filled text

Those states are linked together so when the user clicks the field, I change the component state to the filled one with success. All instances of this component work as well.

The issue starts when I want different data on each instance. For an example, in a CRUD I want to reuse this component several times, and each of its instances should have different data both on the placeholder only and the filled text variants.

This seem to work well on design mode, but when I go to see my prototype, all but the original variant on the screen lose their overridden text values defaulting back to my component default text on that variant.

The weird thing for me is that this only occur on text that is not the same in both variants. So for an example, the label of the field stays overridden, but the text which replaces the placeholder gets defaulted back to original.

i have exactly the same issue - have you found a solution for the problem?

I found it here:

Short Version:
You need to have every element in every variant.
If you need to hide something, like an email adress in a forms field - you need to hide the element, instead of deleting it in the component.

That fixed it for me.

Wow, yeah not exactly a solution more of a workaround. I did not know that but the workaround I used is based on the same principle. Basically if you keep the same string on both states the overridden text will stay put on both states on each instance. But your method seems to be better because you can have a different string for each state.

Thanks!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.