[Progress indicator]: Add viewBox attr to svg to allow scaling

[annawen1]

Summary

We are bumping up icon sizes to 20px by 20px for the expressive theme changes. Ticket here: carbon-design-system/carbon-for-ibm-dotcom#1039

However the some svgs for the progress indicator component don't scale correctly.

Looking at the code it seems that there are no attributes for the svg elements

if (current) {
      return (
        <svg>
          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
          <title>{description}</title>
        </svg>
      );
    }
    
     ....

    return (
      <svg>
        <title>{description}</title>
        <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
      </svg>

If the viewBox attribute is added to the svg elements, that would allow for the current and incomplete indicator icons to scale to 20x20.

Justification

This is needed for the expressive theme changes by the DDS team.

"Must have" functionality

• svgs should have viewBox attribute defined

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an
upcoming release?

It would be great to have this in during our next sprint (Sprint 20-02) which ends on January 31st.

NB: The Carbon team will try to work with your timeline, but it's not
guaranteed. The earlier you make a request in advance of a desired delivery
date, the better!

[asudoh]

Beginning with v10, Carbon icons library provide ones for various sizes. So if you want a difference size having an API to render another icon seems to help you. If you search for renderIcon in the codebase, you'll find how such kind of API is implemented for other components in Carbon library.

[annawen1]

@asudoh Thanks for getting back to me! When I search renderIcon in the codebase I see it's a prop that a lot of the components take in. Issue with the Progress Indicator is that the icons I'm trying to change are hardcoded and not dependent on the renderIcon prop or the icons API.

With the expressive theme we currently are applying scss styles when an expressive flag is turned on. For example:

@mixin combo-box-expressive {
  .#{$prefix}--list-box__invalid-icon,
  .#{$prefix}--list-box__selection svg {
    width: carbon--rem(20px);
    height: carbon--rem(20px);
  }
}

This would change the icon size for the combo-box via scss.

We're not tampering with the carbon components too much, mostly the styles and props being passed in but not the actual code of the components. All I need for the above to work properly is for the viewBox attribute to be set for those hardcoded svg icons.

[asudoh]

When I search renderIcon in the codebase I see it's a prop that a lot of the components take in. Issue with the Progress Indicator is that the icons I'm trying to change are hardcoded and not dependent on the renderIcon prop or the icons API.

You are right, my suggestion is implementing renderIcon prop support, taking a cue from other components. A PR will be nice!

[annawen1]

@asudoh Ah gotcha, ok PR coming up! I'll link it to this issue, thanks!