fix(Pageheader,Tearsheet,Notifications): resolves CSP violations #6340

AlexanderMelox · 2024-10-31T15:46:28Z

Closes #6190

This PR resolves CSP violation issues

What did you change?

Moved inline styles to useIsomorphicEffect

How did you test and verify your work?

Storybook

netlify · 2024-10-31T15:46:44Z

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	`ab8da41`
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/678671eb8d277f000871e812
😎 Deploy Preview	https://deploy-preview-6340--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-10-31T15:46:44Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`ab8da41`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/678671eb9141c9000885dbe6
😎 Deploy Preview	https://deploy-preview-6340--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…s-page-header

AlexanderMelox · 2024-11-01T17:01:36Z

Everything is good, just having issues getting this TS type error

matthewgallo · 2024-11-01T18:33:02Z

I think I found a way to work around this with the following added to page header:

interface HTMLElementStyled extends HTMLElement {
  style: CSSStyleDeclaration;
}
const headerRef = (ref || localHeaderRef) as MutableRefObject<HTMLElementStyled>;

I just extended HTMLElement because when using it directly, I kept getting this read only error. Ideally you could just use HTMLSectionElement since the ref is being passed to a <section> but that doesn't exist 😱

AlexanderMelox · 2024-11-01T18:43:01Z

Interesting, thank you! Matt to the rescue 🛟

…s-page-header

matthewgallo · 2025-01-10T15:50:23Z

packages/ibm-products/src/components/APIKeyModal/APIKeyModal.tsx

@@ -31,7 +31,7 @@ import {
  Copy,
  ErrorFilled,
  CheckmarkFilled,
-} from '@carbon/react/icons';
+} from '@carbon/icons-react';


Not sure about this change? All icons should now be imported from @carbon/react/icons

It was giving me a build error and somehow changing the import fixes it

Can you share what the error was?

When importing from @carbon/icons-react it fixes

We had a convo with Carbon core a while back and I don't know where we landed with this, FYI @tay1orjones

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts

matthewgallo

Lets see if we can import icons from @carbon/react/icons, also the styles in the page header seem to have been affected by these changes

AlexanderMelox · 2025-01-10T17:58:13Z

@matthewgallo fixed page header styles !

matthewgallo · 2025-01-10T18:26:35Z

Sorry, one more style change! I just noticed that the entrance animation for the notification panel is also missing with the current changes.

…s-page-header

matthewgallo

Just spotted one more style change in the stacked tearsheets that looks unintended.

AlexanderMelox · 2025-01-13T22:04:10Z

Just spotted one more style change in the stacked tearsheets that looks unintended.

I see its the same issue when using CSS properties, nice catch

AlexanderMelox · 2025-01-13T22:12:41Z

@matthewgallo fixed, i assume it was the size of the tearsheet?

Before:

After:

packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx

AlexanderMelox and others added 12 commits October 16, 2024 10:37

feat: adds codecov

8670f1c

Merge branch 'main' into 6108--codecov-tooling

e5b4ad5

fix: adds codecov token

68d3a6e

feat: adds codecov badge to README.mc

a0adc76

Merge branch 'main' into 6108--codecov-tooling

9dc5534

fix: removes community package

2f5f9c3

Merge branch 'main' into 6108--codecov-tooling

ec3de4c

Merge branch 'main' into 6108--codecov-tooling

0beb5ab

chore: adds violated components to forbid config

174e5bb

feat(notifications): fixes csp violations

15ae1c2

feat(tearsheet): fixes csp violations

1b342a7

feat: draft 1 adding isomorphic styles hook

bb1d3a6

AlexanderMelox requested review from elycheea, matthewgallo, kennylam and a team as code owners October 31, 2024 15:46

AlexanderMelox changed the title ~~6190 csp spreadsheet tearsheet notifications page header~~ fix(Pageheader,Tearsheet,Notifications): resolves CSP violations Oct 31, 2024

Merge branch 'main' into 6190--csp-spreadsheet-tearsheet-notification…

9b5d06a

…s-page-header

AlexanderMelox marked this pull request as draft October 31, 2024 18:07

AlexanderMelox and others added 3 commits October 31, 2024 14:19

chore: reverts to prev changes

2bf6969

fix: package.json error

8e9ad89

Merge branch 'main' into 6190--csp-spreadsheet-tearsheet-notification…

e6faf48

…s-page-header

AlexanderMelox marked this pull request as ready for review November 1, 2024 16:58

Merge branch 'main' into 6190--csp-spreadsheet-tearsheet-notification…

0ddb611

…s-page-header

davidmenendez previously approved these changes Jan 10, 2025

View reviewed changes

davidmenendez added the status: one more review 👀 label Jan 10, 2025

matthewgallo reviewed Jan 10, 2025

View reviewed changes

packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts Show resolved Hide resolved

matthewgallo requested changes Jan 10, 2025

View reviewed changes

fix: type declarations

de8e0bf

AlexanderMelox dismissed davidmenendez’s stale review via de8e0bf January 10, 2025 16:59

fix(pageheader): styles that broke

d814951

AlexanderMelox removed the status: blocked 🧱 label Jan 10, 2025

fix: changed icon import

51facfd

AlexanderMelox and others added 5 commits January 10, 2025 13:29

fix: type declarations

8d92cef

fix(notifications-panel): animation

f0f60d6

chore: removes console.log

81f06fb

Merge branch 'main' into 6190--csp-spreadsheet-tearsheet-notification…

d408b0b

…s-page-header

fix: removes comment

894d755

matthewgallo approved these changes Jan 13, 2025

View reviewed changes

matthewgallo requested changes Jan 13, 2025

View reviewed changes

fix(tearsheet): styles

7337458

AlexanderMelox commented Jan 14, 2025

View reviewed changes

packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx Outdated Show resolved Hide resolved

chore: remove console.log

ab8da41

matthewgallo approved these changes Jan 14, 2025

View reviewed changes

davidmenendez approved these changes Jan 14, 2025

View reviewed changes

carbon-automation bot removed the status: one more review 👀 label Jan 14, 2025

matthewgallo added this pull request to the merge queue Jan 14, 2025

Merged via the queue into carbon-design-system:main with commit 4e11b90 Jan 14, 2025
31 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Pageheader,Tearsheet,Notifications): resolves CSP violations #6340

fix(Pageheader,Tearsheet,Notifications): resolves CSP violations #6340

AlexanderMelox commented Oct 31, 2024

netlify bot commented Oct 31, 2024 •

edited

Loading

netlify bot commented Oct 31, 2024 •

edited

Loading

AlexanderMelox commented Nov 1, 2024

matthewgallo commented Nov 1, 2024 •

edited

Loading

AlexanderMelox commented Nov 1, 2024

matthewgallo Jan 10, 2025

AlexanderMelox Jan 10, 2025

matthewgallo Jan 10, 2025

AlexanderMelox Jan 10, 2025

AlexanderMelox Jan 10, 2025

AlexanderMelox Jan 10, 2025

matthewgallo left a comment •

edited

Loading

AlexanderMelox commented Jan 10, 2025

matthewgallo commented Jan 10, 2025

matthewgallo left a comment

AlexanderMelox commented Jan 13, 2025

AlexanderMelox commented Jan 13, 2025

fix(Pageheader,Tearsheet,Notifications): resolves CSP violations #6340

fix(Pageheader,Tearsheet,Notifications): resolves CSP violations #6340

Conversation

AlexanderMelox commented Oct 31, 2024

What did you change?

How did you test and verify your work?

netlify bot commented Oct 31, 2024 • edited Loading

✅ Deploy Preview for ibm-products-web-components ready!

netlify bot commented Oct 31, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

AlexanderMelox commented Nov 1, 2024

matthewgallo commented Nov 1, 2024 • edited Loading

AlexanderMelox commented Nov 1, 2024

matthewgallo Jan 10, 2025

Choose a reason for hiding this comment

AlexanderMelox Jan 10, 2025

Choose a reason for hiding this comment

matthewgallo Jan 10, 2025

Choose a reason for hiding this comment

AlexanderMelox Jan 10, 2025

Choose a reason for hiding this comment

AlexanderMelox Jan 10, 2025

Choose a reason for hiding this comment

AlexanderMelox Jan 10, 2025

Choose a reason for hiding this comment

matthewgallo left a comment • edited Loading

Choose a reason for hiding this comment

AlexanderMelox commented Jan 10, 2025

matthewgallo commented Jan 10, 2025

matthewgallo left a comment

Choose a reason for hiding this comment

AlexanderMelox commented Jan 13, 2025

AlexanderMelox commented Jan 13, 2025

netlify bot commented Oct 31, 2024 •

edited

Loading

netlify bot commented Oct 31, 2024 •

edited

Loading

matthewgallo commented Nov 1, 2024 •

edited

Loading

matthewgallo left a comment •

edited

Loading