Skip to content

Refactor logo used in Header and Footer#577

Merged
mkernohanbc merged 5 commits intomainfrom
574-refactor-bc-logo-icon
Dec 9, 2025
Merged

Refactor logo used in Header and Footer#577
mkernohanbc merged 5 commits intomainfrom
574-refactor-bc-logo-icon

Conversation

@mkernohanbc
Copy link
Copy Markdown
Contributor

This PR makes a change to SvgBcLogo, an icon component consumed by the Header and Footer components.

It removes various inline style attributes from the SVG of the B.C. Mark. These are used to set the colour of various parts of the logo. It moves these styles into a separate CSS file, and applies them as classes within the SVG.

So this:

<path
d="M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z"
style={{ fill: "#fff", strokeWidth: "0px" }}
/>

Becomes:

<path
d="M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z"
className="bcds-bc-logo--whiteFill"
/>

It is intended to partially resolve the issues identified in #574, where inline styles in components will be blocked by a restrictive Content Security Policy.

07f61c2 and f7ad847 do some cleanup on our dev app to give us a cleaner testbed.

Testing this change with style-src 'self' CSP (using BCDS Header, Footer and Button components only) shows no violations from these components:

Screenshot 2025-12-08 at 2 07 11 PM

Copy link
Copy Markdown
Contributor

@ty2k ty2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

One note from testing: In the kitchen sink app, I do find that the Button component will cause a CSP violation when using style-src: self;. This is expected right now due to the usePress hook usage discussed in #574. I think in your example, the Button elements in the Header example aren't being rendered because of your viewport size (you're getting the list of three items with "Link" text instead).

Here's the Vite preview showing no CSP errors with just <Header/>s and the default <Footer/> at a wider viewport:

Screen Shot 2025-12-08 at 4 13 24 PM

Here's what happens when I shrink the viewport width and the "Menu" <Button/> instance appears in the third <Header/>:
Screen Shot 2025-12-08 at 4 29 56 PM

Similarly, if I just drop a <Button/> instance on to the page so it's always rendered, I get the CSP violation from usePress:
Screen Shot 2025-12-08 at 4 21 49 PM
Screen Shot 2025-12-08 at 4 21 55 PM

@mkernohanbc
Copy link
Copy Markdown
Contributor Author

Good flag — thanks for investigating. As you said elsewhere, we're at a bit of a standstill with the onPress CSP issue, until the React Aria team figures out a way forward.

@mkernohanbc mkernohanbc merged commit 34914bc into main Dec 9, 2025
5 checks passed
@mkernohanbc mkernohanbc deleted the 574-refactor-bc-logo-icon branch December 9, 2025 19:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Components Changes or issues affect the design-system-react-components package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: replace inline styles with CSS classes in Header/Footer components for CSP compliance

2 participants