[bug] RHDS site status component icon is missing the white checkmark

[kelsS]

Describe the bug

When the component loads the icon is only showing a green circle and no checkmark. I noticed when looking in the shadow root that the path in the svg is nested within another path but on the rhds site the paths are siblings not nested and the icon is correct. I have no idea why the paths are getting nested.

Which Component?

rh-site-status

Steps to reproduce

The rh-site-status component in the footer of access.redhat.com is not live yet. The live footer is using the old hard coded status widget.

I am able to reproduce this issue by:

1. Cloning the Primer repo locally
2. Adding the import statement at the end of body in the root index.html file
3. Adding the component to the footer within the ul#status-widget__desktop li
4. Go to the project local url: https://prod.foo.redhat.com:1337/services/primer/example/
5. Scroll to the footer
6. Observe that the icon is only a green circle instead of a green circle with the checkmark.

Here is the svg that is getting loaded into Primer

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
  <!--?lit$837365295$-->
  <path d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5Z" fill="#63993D">
     <path d="M6.89999 12.1C6.69999 12.1 6.49999 12 6.39999 11.9L3.49999 9.00001C3.19999 8.70001 3.19999 8.30001 3.49999 8.00001C3.79999 7.70001 4.19999 7.70001 4.49999 8.00001L6.89999 10.4L11.5 5.80001C11.8 5.50001 12.2 5.50001 12.5 5.80001C12.8 6.10001 12.8 6.50001 12.5 6.80001L7.39999 11.9C7.19999 12 6.99999 12.1 6.89999 12.1Z" fill="white"></path>
   </path>
</svg>

Here is the svg getting loaded in the rhds demo

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><!--?lit$774017727$-->
    <path d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5Z" fill="#63993D"></path>
    <path d="M6.89999 12.1C6.69999 12.1 6.49999 12 6.39999 11.9L3.49999 9.00001C3.19999 8.70001 3.19999 8.30001 3.49999 8.00001C3.79999 7.70001 4.19999 7.70001 4.49999 8.00001L6.89999 10.4L11.5 5.80001C11.8 5.50001 12.2 5.50001 12.5 5.80001C12.8 6.10001 12.8 6.50001 12.5 6.80001L7.39999 11.9C7.19999 12 6.99999 12.1 6.89999 12.1Z" fill="white"></path>
</svg>

For some reason the one being loaded on Primer has the path nested inside of the other one instead of two separate paths at the same level.

Expected behaviour

The green circle loads with the white checkmark

Screenshots

Loading the component in Primer locally

Loading the component in the rhds demo

Element HTML

<rh-site-status></rh-site-status>

Operating System (OS)

macOS

Browser

Chrome

More browser information

Chrome 125
Mac OS (Sonoma)
RHDS v1.4.1

Additional Info

No response

[kelsS]

If anyone needs help getting Primer setup to reproduce the issue. Please reach out to me. The README that is in main for Primer is slightly outdated and the updated README is being worked on but not live yet.

[zeroedin]

Based on a diff check it appears there is a </path> close tag out of wack given the code snippets above:

https://www.diffchecker.com/Cw6VaTQx/

Given we use XML style tag closures in the code:

red-hat-design-system/elements/rh-site-status/rh-site-status.ts

Lines 71 to 82 in 8eebce6

	const STATUS_ICONS = Object.freeze({
	'ok': svg`
	<path d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5Z" fill="#63993D"/>
	<path d="M6.89999 12.1C6.69999 12.1 6.49999 12 6.39999 11.9L3.49999 9.00001C3.19999 8.70001 3.19999 8.30001 3.49999 8.00001C3.79999 7.70001 4.19999 7.70001 4.49999 8.00001L6.89999 10.4L11.5 5.80001C11.8 5.50001 12.2 5.50001 12.5 5.80001C12.8 6.10001 12.8 6.50001 12.5 6.80001L7.39999 11.9C7.19999 12 6.99999 12.1 6.89999 12.1Z" fill="white"/>
	`,
	'warn': svg`
	<path d="M0 14.6H16L8 0.400024L0 14.6Z" fill="#F5921B"/>
	<path d="M8.00005 9.80007C7.60005 9.80007 7.30005 9.50007 7.30005 9.10007V5.90007C7.30005 5.50007 7.60005 5.20007 8.00005 5.20007C8.40005 5.20007 8.70005 5.50007 8.70005 5.90007V9.20007C8.70005 9.50007 8.40005 9.80007 8.00005 9.80007ZM8.20005 12.7001C8.30005 12.7001 8.30005 12.7001 8.40005 12.7001C8.40005 12.7001 8.50005 12.7001 8.50005 12.6001L8.60005 12.5001C8.80005 12.3001 8.80005 12.1001 8.80005 11.9001C8.80005 11.7001 8.70005 11.5001 8.60005 11.3001L8.50005 11.2001L8.40005 11.1001C8.30005 11.1001 8.30005 11.1001 8.20005 11.1001C7.90005 11.0001 7.70005 11.1001 7.50005 11.3001C7.30005 11.5001 7.30005 11.7001 7.30005 11.9001C7.30005 12.1001 7.40005 12.3001 7.50005 12.5001C7.70005 12.7001 7.90005 12.7001 8.10005 12.7001C8.10005 12.7001 8.10005 12.7001 8.20005 12.7001Z" fill="white"/>
	`,
	'danger': svg`
	<path d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5Z" fill="#F4784A"/>
	<path d="M8.0001 9.80005C7.6001 9.80005 7.3001 9.50005 7.3001 9.10005V4.50005C7.3001 4.10005 7.6001 3.80005 8.0001 3.80005C8.4001 3.80005 8.7001 4.10005 8.7001 4.50005V9.10005C8.7001 9.50005 8.4001 9.80005 8.0001 9.80005ZM8.2001 12.8C8.3001 12.8 8.3001 12.8 8.4001 12.7C8.5001 12.7 8.5001 12.7 8.5001 12.6C8.6001 12.6 8.6001 12.5 8.6001 12.5C8.8001 12.3 8.9001 12.1 8.9001 11.9C8.9001 11.7 8.8001 11.5 8.6001 11.3L8.5001 11.2L8.4001 11.1C8.3001 11.1 8.3001 11.1 8.2001 11.1C7.9001 11 7.6001 11.1 7.4001 11.3L7.3001 11.4L7.2001 11.5C7.2001 11.6 7.2001 11.6 7.1001 11.7C7.1001 11.8 7.1001 11.8 7.1001 11.9C7.1001 12.1 7.2001 12.3 7.4001 12.5C7.6001 12.7 7.8001 12.8 8.0001 12.8C8.1001 12.8 8.1001 12.8 8.2001 12.8Z" fill="white"/>

I wonder if something in Primer could be parsing that weird given the discrepancy in output.

I will attempt to install the Primer project locally and take a look.

[kelsS]

@zeroedin I am just now starting to really work on the Primer repo deeply so I am not fully familiar with how everything is parsed and works. However, I will dig through the Primer code to see if I see anything interfering with the svg parsing and get back to you!.