Skip to main content

I last used a prototype on Thursday 17 November 22 and has no issue, however since then a bug has appeared relating to the colour of icons within interactive components (i have not made any edits or changes to the prototype or components since last using).


I have a centralised component library, I also have a centralised style library. Within the component library I have an interactive chip with default, hover and active states. Here’s how it looks within the component library:


(edit see below for image)


This component then gets pulled through to my product files and text/icons are overridden. On first view they seem fine, but as soon as the state changes a random override is applied to the icon colour and a new colour (from the style library) is applied to it. This colour exists in the style library, but it has never been assigned to this component or its icon. This occurs no matter what file im in - whether I bring in a new instance of the component or am editing an already existing instance. It is also happening with my button components (though a different colour is being pulled through for those icons), but its always the icon.


When viewing a prototype, as soon as an interaction hits that component the new (wrong) colour persists back to ‘default’ mode.


(edit see below for image)


I can see no workarounds to this, and it makes my prototype appear broken, and in the case of buttons where the colour turns white instead of red, its provides a very poor user experience. The purpose of these sessions is to gain feedback on designs, and this bug is now distracting from the main topic.


Please reach out to me directly if you need links to prototypes or files etc to investigate this. To reiterate, the last time I was in this prototype was on Thursday 17 November when this issue did not occur.


EDIT - new users can only add 1 media item per post, so here are the two images combined


Screenshot 2022-11-23 at 11.46.15


Thanks

Digging into this a bit further - the dark red colour is actually being pulled through from the base component. As we have a couple of different chip types - the base component is styled differently, then overrides applied for the interactive variant of it. So this seems to be a base component issue specificially

Sorry to keep adding to this, but I think i’ve found the main issue. SO - this issue is down to the use of base components. When I apply an override its fine, however when I apply an override and then change the variant the icon is reverting back to the default value from the base component.


In the example below I inserted an instance of the component, I then duplicated it, changed nothing then changed the colour variant. All works fine.


I then copied the first instance and applied overrides to the icon, and text, when I then change the colour variant, the icon reverts to the default value from the base component.


If i change the colour variant and then apply the override there is no issue, so its the switching of variants when an override is applied where the issue is occurring.


Screenshot 2022-11-23 at 12.16.30

To follow up, I’ve found a few open tickets about this same issue. I’ve managed to find a fix (I think) for anyone else reading this with the same issue.


Go to your base component and reset any colour overrides you have on the icon (so its got the default colour values from the icon component).


Make sure the top level components that consume the base component have the overrides applied and that should work - it is for me from what I can tell so far.


Screenshot 2022-11-24 at 12.33.04

Hi there! I noticed a similar bug to some of my button components in the Prototype interactions. I also have the states: DEFAULT and HOVER. I noticed that at some cases after hovering on the button, the “hover” color stayed on the design and it didn’t change back to default. Here’s what I discovered:



  • By making alterations on an instance, all interactions work fine on the Prototype.

  • BUT when you swap or change an instance within an instance of a component which has interactions, there is a bug on these interactions.

Interactive Prototypes are a buggy mess right now…

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

Terms & ConditionsCookie settings