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

* feat: adds codecov * fix: adds codecov token * feat: adds codecov badge to README.mc * fix: removes community package * chore: adds violated components to forbid config * feat(notifications): fixes csp violations * feat(tearsheet): fixes csp violations * feat: draft 1 adding isomorphic styles hook * chore: reverts to prev changes * fix: package.json error * fix: linting issues * refactor(pageheader): tests * feat(ts): adds props namespace * feat: adds types to module declaration * fix: module declarations * fix: module declarations * fix: type declarations * fix: type declarations * fix: type declarations * fix: type declarations * fix: type declarations * fix: type declarations * fix: type declarations * fix(pageheader): styles that broke * fix: changed icon import * fix: type declarations * fix(notifications-panel): animation * chore: removes console.log * fix: removes comment * fix(tearsheet): styles * chore: remove console.log --------- Co-authored-by: elysia <elysia.hwang@gmail.com>
carbon-design-system · Jan 14, 2025 · 4e11b90 · 4e11b90
1 parent 24eeecc
commit 4e11b90
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 40 deletions.
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { TextAreaProps, TextInputProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/react/icons';
+import { CarbonIconType } from '@carbon/icons-react';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import {
   Dispatch,

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
@@ -789,16 +789,16 @@ export const DataSpreadsheetBody = forwardRef(
       [
         prepareRow,
         renderRowHeader,
-        renderRowHeaderDirection,
         rows,
         hasCustomRowHeader,
         activeCellCoordinates?.row,
         selectionAreas,
         handleRowHeaderClickEvent,
         handleBodyCellClickEvent,
         handleBodyCellHoverEvent,
-        defaultColumn,
         columns,
+        defaultColumn,
+        renderRowHeaderDirection,
       ]
     );
 

diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -33,7 +33,11 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
 import { timeAgo } from './utils';
-import { useClickOutside, usePreviousValue } from '../../global/js/hooks';
+import {
+  useClickOutside,
+  useIsomorphicEffect,
+  usePreviousValue,
+} from '../../global/js/hooks';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion';
 import wrapFocus from '../../global/js/utils/wrapFocus';
 
@@ -646,6 +650,18 @@ export let NotificationsPanel = React.forwardRef(
       },
     ]);
 
+    useIsomorphicEffect(() => {
+      // setTimeout ensures that this gets run
+      const timeout = setTimeout(() => {
+        if (notificationPanelRef.current && !reducedMotion) {
+          notificationPanelRef.current.style.animation = open
+            ? 'fade-in 250ms'
+            : 'fade-out forwards 250ms';
+        }
+      }, 0);
+      return () => clearTimeout(timeout);
+    }, [open, reducedMotion]);
+
     return shouldRender ? (
       <>
         <button
@@ -668,11 +684,6 @@ export let NotificationsPanel = React.forwardRef(
           }
           id={blockClass}
           className={cx(blockClass, className, `${blockClass}__container`)}
-          style={{
-            animation: !reducedMotion
-              ? `${open ? 'fade-in 250ms' : 'fade-out forwards 250ms'}`
-              : undefined,
-          }}
           onAnimationEnd={onAnimationEnd}
           ref={
             (ref as MutableRefObject<HTMLDivElement | null>) ||

diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.test.js b/packages/ibm-products/src/components/PageHeader/PageHeader.test.js
@@ -1,3 +1,5 @@
+/* eslint react/forbid-component-props: 0 */
+
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -337,10 +339,11 @@ describe('PageHeader', () => {
     ).toHaveLength(1);
 
     // When withoutBackground is false this should result in the value 1 for opacity
-    const regStyle = new RegExp(
-      `--${prefix}--page-header--background-opacity: 1`
-    );
-    expect(header.getAttribute('style')).toMatch(regStyle);
+    const backgroundOpacity = window
+      .getComputedStyle(header)
+      .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+
+    expect(backgroundOpacity).toBe('1');
   });
 
   const dataTestId = 'data-testid';
@@ -711,10 +714,10 @@ describe('PageHeader', () => {
     const header = screen.getByTestId(dataTestId);
 
     // When withoutBackground is true this should result in the value 0 for opacity
-    const regStyle = new RegExp(
-      `--${prefix}--page-header--background-opacity: 0`
-    );
-    expect(header.getAttribute('style')).toMatch(regStyle);
+    const backgroundOpacity = window
+      .getComputedStyle(header)
+      .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+    expect(backgroundOpacity).toBe('0');
   });
 
   it('Works, for now, with deprecated props', async () =>
@@ -731,10 +734,10 @@ describe('PageHeader', () => {
       const header = screen.getByTestId(dataTestId);
 
       // When hasBackgroundAlways is false this should result in the value 0 for opacity
-      const regStyle = new RegExp(
-        `--${prefix}--page-header--background-opacity: 0`
-      );
-      expect(header.getAttribute('style')).toMatch(regStyle);
+      const backgroundOpacity = window
+        .getComputedStyle(header)
+        .getPropertyValue(`--${prefix}--page-header--background-opacity`);
+      expect(backgroundOpacity).toBe('0');
     }));
 
   it('PageHeader grid settings narrow and fullWidth', async () => {

diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
@@ -39,7 +39,11 @@ import {
   deprecateProp,
   prepareProps,
 } from '../../global/js/utils/props-helper';
-import { useNearestScroll, useWindowResize } from '../../global/js/hooks';
+import {
+  useIsomorphicEffect,
+  useNearestScroll,
+  useWindowResize,
+} from '../../global/js/hooks';
 
 import { ActionBar } from '../ActionBar/';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
@@ -421,6 +425,10 @@ interface Metrics {
   navigationRowHeight?: number;
 }
 
+interface HTMLElementStyled extends HTMLElement {
+  style: CSSStyleDeclaration;
+}
+
 export let PageHeader = React.forwardRef(
   (
     {
@@ -476,8 +484,9 @@ export let PageHeader = React.forwardRef(
     });
 
     // refs
-    const localHeaderRef = useRef(null);
-    const headerRef = ref || localHeaderRef;
+    const localHeaderRef = useRef<HTMLDivElement | null>(null);
+    const headerRef = (ref ||
+      localHeaderRef) as MutableRefObject<HTMLElementStyled>;
     const sizingContainerRef: MutableRefObject<HTMLDivElement | null> =
       useRef(null);
     const offsetTopMeasuringRef = useRef(null);
@@ -903,6 +912,17 @@ export let PageHeader = React.forwardRef(
 
     const displayedBreadcrumbs = getBreadcrumbs();
 
+    useIsomorphicEffect(() => {
+      Object.keys(pageHeaderStyles).forEach((key) => {
+        // check if style is a css var
+        if (key.startsWith('--')) {
+          headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
+        } else {
+          headerRef.current.style[key] = pageHeaderStyles[key];
+        }
+      });
+    }, [headerRef, pageHeaderStyles]);
+
     const subtitleRef = useRef<HTMLSpanElement>(null);
     const isOverflowing = checkHeightOverflow(subtitleRef.current);
     const subtitleContent = (
@@ -928,7 +948,6 @@ export let PageHeader = React.forwardRef(
               [`${blockClass}--has-navigation-tags-only`]: !navigation && tags,
             },
           ])}
-          style={pageHeaderStyles}
           ref={headerRef}
           {...getDevtoolsProps(componentName)}
         >

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -39,8 +39,8 @@ import {
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
+import { useIsomorphicEffect, usePreviousValue } from '../../global/js/hooks';
 import { claimFocus, useFocus } from '../../global/js/hooks/useFocus';
-import { usePreviousValue } from '../../global/js/hooks';
 import { TearsheetAction } from './Tearsheet';
 
 // The block part of our conventional BEM class names (bc__E--M).
@@ -384,6 +384,28 @@ export const TearsheetShell = React.forwardRef(
       };
     }, [open, size]);
 
+    const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
+
+    useIsomorphicEffect(() => {
+      const setScaleValues = () => {
+        if (!areAllSameSizeVariant()) {
+          return {
+            [`--${bc}--stacking-scale-factor-single`]: 1,
+            [`--${bc}--stacking-scale-factor-double`]: 1,
+          };
+        }
+        return {
+          [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
+          [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
+        };
+      };
+      if (modalRef.current) {
+        Object.entries(setScaleValues()).map(([key, value]) => {
+          modalRef.current.style.setProperty(key, String(value));
+        });
+      }
+    }, [modalRef, width]);
+
     if (position <= depth) {
       // Include a modal header if and only if one or more of these is given.
       // We can't use a Wrap for the ModalHeader because ComposedModal requires
@@ -401,18 +423,6 @@ export const TearsheetShell = React.forwardRef(
 
       const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
 
-      const setScaleValues = () => {
-        if (!areAllSameSizeVariant()) {
-          return {
-            [`--${bc}--stacking-scale-factor-single`]: 1,
-            [`--${bc}--stacking-scale-factor-double`]: 1,
-          };
-        }
-        return {
-          [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
-          [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
-        };
-      };
       return renderPortalUse(
         <FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
           <ComposedModal
@@ -435,7 +445,6 @@ export const TearsheetShell = React.forwardRef(
               [`${bc}--has-close`]: effectiveHasCloseIcon,
             })}
             decorator={decorator || deprecated_slug}
-            style={setScaleValues()}
             containerClassName={cx(`${bc}__container`, {
               [`${bc}__container--lower`]: verticalPosition === 'lower',
               [`${bc}__container--mixed-size-stacking`]:

diff --git a/packages/ibm-products/src/custom-typings/index.d.ts b/packages/ibm-products/src/custom-typings/index.d.ts
@@ -212,7 +212,6 @@ declare module '@carbon/react' {
     usePrefix,
   } from '@carbon/react';
 }
-
 declare module '@carbon/colors';
 declare module '@carbon/motion';
 declare module '@carbon/feature-flags';