Skip to main content

File for reference: https://www.figma.com/file/v9PuyvEWCmWZ631e3KpWo5/Error?type=design&node-id=0%3A1&mode=design&t=3uOJJX0KDqEZ405s-1


I created a dialog box that uses a nested component called “footer” where I added two instances of the button component.


The buttons have a minimum size, as the footer is supposed to wrap if the container gets too small.


The component works fine, until I change one of the button variants. I have a variant called “Error” for one of the buttons (don’t come after me with variables, it doesn’t allow for enough modes to use it for button states). When I change the button variant, it breaks the wrap and both buttons are smushed together in a single row. I can get them to wrap again but only if I change them to “hug”, but I need them to fill each of their lines.

Hi, CamilaB. It seems to work fine with me when I detached the instance and use the _Dialog/Footer component you created in the file. Have you checked the original Dialog component or the nested _Dialog/Footer you put originally in the original Dialog component? I’m not entirely sure if this is a bug or not.



Hi Raphael, thanks for testing. I have added the minimum width for the buttons in the _Dialog/Footer component and it seems to be ignored whenever I change the button variant. You are correct, it seems to work correctly when I detach the parent component (Dialog), it fixes it automatically even. I don’t believe this is the expected behaviour. I avoid detaching my components, so it would be best (in my case, at least) that it acted the same.



Hi, Camila. I’m not entirely sure regarding this. You may check with the Figma mods to see if they can help. For me, I think this is a bug.

Reply


Terms & ConditionsCookie settings