Navigation User Avatar Background Color and CSP

DavidJantz — Fri, 13 Jun 2025 22:43:47 GMT

First, the Avatar component has a --calcite-avatar-background-color style option. This is not documented as an option for Navigation User but it does seem to work.

Second, I'm having trouble with CSP's style-src directive when using the Navigation User component, although this seems to apply equally to Avatar too. These dynamically set an inline style for background colors.

The violation occurs because the component uses element.setAttribute('style', 'background-color:var(--calcite-avatar-background-color, hsl(63, 60%, 90%));') to apply the style. I assume the default value is randomly generated based on the username property.

This then requires using 'unsafe-inline' or hashes for specific style strings (like the example above, and for empty strings used to clear styles) which isn't preferred.

Can these components be updated to not require inline styles? Or what is the recommended approach for configuring style-src in CSP to work smoothly with Calcite's dynamic styling?

Thank you!

Re: Navigation User Avatar Background Color and CSP

KittyHurley — Fri, 20 Jun 2025 19:33:17 GMT

Thanks for reaching out, @DavidJantz!

With regards to the CSS variable, added an enhancement for the team to consider a more streamlined solution with #12371 by adding a new CSS variable/component token for Navigation User.

For the second part of your comment above, this is a great topic to submit a case to Esri Support, where you can report bugs in released versions of Calcite and request enhancements. Submitted cases help you troubleshoot issues, provide tracking progress of bugs, and help build cases to help prioritize enhancements requests.

Learn more about submitting cases, including how to become an authorized caller to report an issue.

topic Re: Navigation User Avatar Background Color and CSP in Calcite Design System Questions

Navigation User Avatar Background Color and CSP

Re: Navigation User Avatar Background Color and CSP