Grommet Icon site renders certain icons as filled

[taysea]

Gromemt icon site is rendering certain icons as filled (which would be regressions on how the icons should render). However, I'm not seeing that issue on Design System site (which pulls in the stable branch of grommet icons).

site:

design system site:

[halocline]

<CircleAlert /> was another I ran into. It rendered properly in Codesandbox using most recent release (i.e. not stable), so potentially related to the Icons site?

A quick glance looks like it is affecting several dozens of icons.

[taysea]

Agreed that it feels potentially isolated to icons site.

[jcfilben]

related issue: https://github.com/grommet/grommet-icons/issues/253

[jcfilben]

I attempted to upgrade the yarn.lock on grommet-icons-site locally to ensure that it was fetching that latest versions of grommet stable and grommet-icons stable but the issue is still persisting

[jcfilben]

The problem is that when some icons have color='plain' they become filled in. On grommet site we are setting all the icons to have color='plain'. See codesandbox: https://codesandbox.io/s/grommet-v2-template-forked-qm322x?file=/index.js

[mshepel]

@jcfilben Some 'status' icons (https://icons.grommet.io/?s=status) are filled even with no color="plain" prop passed. See https://codesandbox.io/s/grommet-v2-template-forked-ifqwhq?file=/index.js. The example of impact are icons inside the toast notifications: https://design-system.hpe.design/templates/toast-notifications?q=toast

[jcfilben]

Hi @mshepel so when using the small version of status icons, these are intentionally filled. So I think the behavior shown in the codesandbox and notifications page is correct. See the 'Filled' section on the icons figma file for more info https://www.figma.com/file/G99KGffGLFKICy8xRs51lW/HPE-Icons?node-id=582%3A6