Carbon: [Icons] Checkmark and Indeterminate icon should have editable inner fill in sketch.

[laurenmrice]

There is an override for a fill option for the background but not for the checkmark itself. We need to have this ability to edit the inner fill (specifically when used on a background other than white.)

---

This is an example of 32/checkmark--filled that is working correctly and has both a Fill and Inner fill override option.

[laurenmrice]

The info icon should also have an inner fill. I am wondering if we need to look at all icons with inner fills to make sure they can be editable .

[tw15egan]

@laurenmrice Should this be here or in the Design Kit repo?

[laurenmrice]

this needs to be fixed with the plugin rendering updates for icons. its not technically a design kit issue design can fix on our end.

[tw15egan]

Gotcha! Thanks for the update

[laurenmrice]

These are all the icons we need to have a Fill as well as an Inner fill for these (check all sizes)

• [x] 32/checkbox--checked--filled
• [x] 32/checkbox--indeterminate--filled
• [x] 32/help--filled
• [x] 32/information--filled
• [x] 32/warning--alt--filled

[laurenmrice]

With joshes latest build the 16/close--filled does not have an override for inner fill anymore. (the 20px does though which is good)

[joshblack]

@laurenmrice I think this is a bug in the asset as it does not have a layer named inner-path.

16/close--filled.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;}
</style>
<title>misuse</title>
<path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L8,8.8l-2.7,2.7l-0.8-0.8L7.2,8L4.5,5.3l0.8-0.8L8,7.2
    l2.7-2.7l0.8,0.8L8.8,8l2.7,2.7L10.7,11.5z"/>
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>
</svg>

32/closed--filled.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
    .st0{opacity:0;fill:#FFFFFF;}
    .st1{fill:none;}
</style>
<path d="M16,2C8.2,2,2,8.2,2,16s6.2,14,14,14s14-6.2,14-14S23.8,2,16,2z M21.4,23L16,17.6L10.6,23L9,21.4l5.4-5.4L9,10.6L10.6,9
    l5.4,5.4L21.4,9l1.6,1.6L17.6,16l5.4,5.4L21.4,23z"/>
<polyline id="inner-path" class="st0" points="14.4,16 9,10.6 10.6,9 16,14.4 21.4,9 23,10.6 17.6,16 23,21.4 21.4,23 16,17.6 
    10.6,23 9,21.4 14.4,16 "/>
<rect id="_Transparent_Rectangle_" class="st1" width="32" height="32"/>
</svg>

Note the layer with id="inner-path" is what causes this behavior to work

[laurenmrice]

Okay got it, this is not super high priority, but glad we know what the problem is. This may need to be edited by Brand.

[conradennis]

will go through them today and add an inner-path layer, that should do the trick. will include in the PR for the latest batch of icons later this week.

[conradennis]

wanted to note that
32/checkbox--undeterminate--filled is a duplicate icon that should be deprecated since "undeterminate" isn't actually a word lol so I'll only update 32/checkbox--indeterminate--filled

[laurenmrice]

Correct! I need to make a separate issue around those.^

[joshblack]

@conradennis are you adding the deprecated/duplicate icon to your batch of icons? Similar to the arrow duplicate you noted the other day :eyes: or should I go ahead and add it?

[renmaddox]

@conradennis Looks like only the 32 versions got updated, or at least 16/warning--alt--filled.svg does not appear to be updated.

[conradennis]

@renmaddox i'm pretty sure bespoke 16px versions of icons are being deprecated in favor of using the 32px versions as the source and then scaling them to their respective sizes in code. @joshblack @laurenmrice is that correct?

[renmaddox]

I had not heard that. Currently, @carbon/icons-react seems to export 16, 20, 24, and 32 sizes for most icons.

[renmaddox]

Additionally, I just updated to use the scaled 32px version of WarningAltFilled, and it still doesn't have the inner-path. Perhaps the issue is not with the icons, but rather with the way @carbon/icons-react handles them.

[renmaddox]

@conradennis @joshblack @laurenmrice Should I just create a new issue for the @carbon/icons-react version of WarningAltFilled not having the inner-path?

[renmaddox]

I just realized that my issue may be that this hasn't actually released yet; rather it appears to be targeted for 10.12. I guess I will wait for that and see how things are then.

[joshblack]

Hey there @renmaddox! 👋 So sorry about the delay here. Checking in on warning--alt--filled it seems that the 32x32 asset has it over in https://github.com/carbon-design-system/carbon/blob/master/packages/icons/src/svg/32/warning--alt--filled.svg?short_path=9588029#L11

But the 16x16 asset does not have it in: https://github.com/carbon-design-system/carbon/blob/master/packages/icons/src/svg/16/warning--alt--filled.svg?short_path=0235129

I'll re-open this issue to see if we can get it added for the 16px variant 👀

[laurenmrice]

Updated bespoke icons in code to scale down from the 32px assets. Now all sizes will have inner fills.