I was updating my UI-Kit, & I ran into a problem. I made two different components named “icon button” and “button”. the button has a min-width condition but the “icon button” does not, I was swapping my button with Icon-button, but the result was not what I wanted, my icon button was wider than what I wanted. And I realized the min-width of the previous instance was projected in this new one.
I can assure you that I didn’t override the component manually, this happens every time.
I believe it’s a bug and it should be fixed. what do you think?
Edit: I changed the category to “share an idea” I guess votes give this post a boost. this is a problem that should be seen
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!