In swapping components, min/max size condition shouldn't remain on the element

*Cricket’s Sound*

Hi!

Not sure if this is related but I’ve experience pretty funky behavior with min-width on components that utilise sub-components. It just doesn’t feel very robust if any kind of inheritance and interactions are involved.

I have a basic button component that is based on a sub component that sets the basic look, states, styles and interactions of the button. This subcomponent is then used as a basis for the main button component which has properties like size and type (small, large, text-only, icon-only…). The text type button needs a min-width property to be set while the icon type does not.

The button components works as expected when used on their own.

It is when I utilise these buttons in other components (let’s say a toolbar component that consists of a few buttons) the min-width behaves very erratic on these instances when hovering on the buttons. Initially the button has the min-width applied to it but on hover the button loses the min-width and defaults to whatever text is set in the button, causing the width to fluctuate. If I have set the min-width on the top level component, should it not retain that property even during interactions set in the sub-component? Otherwise, what is the point?

I’ve been playing with these setups for a while now and I’m starting to suspect there are maybe some issues in property inheritance. Especially with min-width (probably max-width as well).

I had the same problem. Created a checkbox group component with checkbox components arranged in columns. For this I used an Autolayout: Wrap together with min-width on the checkboxes. Works like a charm, when I resize it goes from three columns, to two, to one for mobile viewports. I can change the state of the individual checkboxes to “checked”.

Problem starts when I include the Checkbox group component in a Form component. Everything works well to begin with, but when I change the state of a checkbox to “checked”, the min-width is lost and the layout collapses.

I’ve made a bug report with examples related to this. Figma said they’re aware of the issue and are looking for a fix. Due to the apparent complexity of the issue no promises as to when it might be fixed though.

Yes, please. It’s a annoying bug!

Coming across this issue now too, seems like it should be a relatively easy bug for Figma to squash yet here we are a year later 🫠

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