Skip to main content
Question

Component property inheritance broken with subcomponents?

  • September 25, 2023
  • 2 replies
  • 567 views
Mikko_Pekkarinen

Hi!

I’ve been trying to find a reason for the following behavior but I can’t either fully understand the property inheritance logic or there is a bug in how properties are inherited from within a deeper component structure.

Figma component property inheritance issue

I have set up a button component using a base subcomponent that defines the states (default, hover, active), interactions between states, and styles (default, primary) of the button. Then using this as a base I have the master component that defines the type of the button (text, icon or text + icon). The master component has some overrides to the state component like custom padding on the icon button and min-width on the text-only button. I expect these overrides to apply at all times to all variants of the subcomponent.

If I use the button component as is, everything seems to be working fine and property inheritance and overrides are working.

It is when I start using the button component within other components that I start to notice some of the property overrides not being respected. The deeper the subcomponent structure, the worse/stranger the degradation gets. In this case it is the min-width but I have observed other properties being broken depending on how the subcomponents are set up.

Anyone else had this – and how have you solved this?

Figma file:

Figma – 25 Sep 23

2 replies

Oussama_BK
  • Oussama_BK
  • 14 replies
  • September 25, 2023

Hello @Mikko_Pekkarinen

The containing frame from your Button component is the one making this problem.
Since you have a containing frame that is set to “Hug contents” in the prototype that action will always try to play its role which gives you that bad-looking animation.

To solve that just set the content to “fill container”, so it will always get its container’s size

image

Please note that this is just a solution to your current work, and there are better ways to design components and organize your states for a button.

Mikko_Pekkarinen
1 person likes this
  • Mikko_Pekkarinen
    Mikko_Pekkarinen
Mikko_Pekkarinen

Hi @Oussama_BK and thanks for the tip!

It seems that the “fill container” is indeed holding the buttons in check now in the component instances. However I now lose the button’s ability to stretch if the text is longer than the min-width as this change sets the main component’s width as “fixed” – this is something that I don’t want.

image

I have been checking various ways of building a robust button component and the subcomponent approach seems the most tidy and clean for me, yet it seems to have some drawbacks. I could build one massive button component containing all possible variant permutations but that doesn’t seem like a very elegant solution. On the other hand, if that is considered the best approach then I will have to consider it, even if I don’t like it 🙂 What other methods are there?

I would prefer to expose only one button component from the asset library and handle customising it with properties.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings