fix(leadspace): be explicit about svg closing tags

[andy-blum]

Related Ticket(s)

Closes #11690

https://jsw.ibm.com/browse/ADCMS-4848

Description

Updates leadspace background gradient stops to use explicit closing tabs. Previously gradient stops were authored as self-closing tabs which seem to render as nested stops

Testing Instructions

Replace the tagged releases in this codepen with the preview CDN URLs

Changelog

Changed

• Fixes a bug where leadspace gradients don't render correctly

[ibmdotcom-bot]

Deploy preview created for package React: https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components: https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[ibmdotcom-bot]

Deploy preview created for package Web Components: https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper): https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[ibmdotcom-bot]

Deploy preview created for package Deploy Preview CDN: https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[andy-blum]

Codepen for verification: https://codepen.io/andy-blum/pen/eYoPJOO/26189acfec3414ad0afc9ac6831f7f23

[ibmdotcom-bot]

Deploy preview created for package Carbon web components (RTL): https://carbon-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[ibmdotcom-bot]

Deploy preview created for package Web Components (RTL): https://ibmdotcom-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11696/index.html

Built with commit: 2368b562cfb7c58c34798d24431bee8392642609

[m4olivei]

I had been trying in the last few commits to address the wrong direction on the gradient for the RTL Storybook build. Locally, I found the fix was https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11696/commits/169524a35af7fa4086f8be0e49d12418afad13ce . The core issue there is that in the Webpack config, the sass-loader would minify and strip comments by default. postcss and rtlcss comes after the sass-loader, so rtlcss couldn't handle the directives b/c they weren't there. By setting the outputStyle: 'expanded' option, sass-loader would leave the comments in, allowing rtlcss to do the proper processing. At least locally, that was my finding. I'm not sure why the RTL Storybook here didn't reflect that. In any case, the primary issue here for us is the CDN builds.

The CDN builds have been fixed by using explicit end tags for the <stop> tags in https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11696/commits/24fb70dc8162fcef909f337e923bc2ec3a69c245. That means Roolup parses it correctly and we get proper syntax for the <stop> tags, and all is well. Rollup doesn't have the same problem with rtlcss as Webpack does, so the CDN builds are looking good, shown by @andy-blum 's CodePen:

https://codepen.io/andy-blum/pen/eYoPJOO/26189acfec3414ad0afc9ac6831f7f23