Fix(web-react): Remove unsupported style props from modified props in…

… style hook refs #DS-1339
lmc-eu · Jun 18, 2024 · 44385d1 · 44385d1
1 parent c453b87
commit 44385d1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 20 deletions.
diff --git a/packages/web-react/src/hooks/__tests__/styleProps.test.ts b/packages/web-react/src/hooks/__tests__/styleProps.test.ts
@@ -21,30 +21,52 @@ describe('styleProps', () => {
       expect(result.current.styleProps).toEqual(expected);
     });
 
-    it('should warn when using unsupported `style` prop', () => {
-      const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
-
+    describe('unsupported `style` prop', () => {
       const props = { style: { 'vertical-align': 'center' } };
-      renderHook(() => useStyleProps(props as StyleProps));
 
-      expect(consoleWarnMock).toHaveBeenCalledWith(
-        'Warning: The style prop is unsafe and is unsupported in Spirit Web React. Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.',
-      );
+      it('should warn when using unsupported `style` prop', () => {
+        const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
+        renderHook(() => useStyleProps(props as StyleProps));
 
-      consoleWarnMock.mockRestore();
-    });
+        expect(consoleWarnMock).toHaveBeenCalledWith(
+          'Warning: The style prop is unsafe and is unsupported in Spirit Web React. Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.',
+        );
+
+        consoleWarnMock.mockRestore();
+      });
+
+      it('should not pass unsupported `style` prop when using it', () => {
+        const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
+        const { result } = renderHook(() => useStyleProps(props as StyleProps));
+
+        expect(result.current.props).toEqual({});
 
-    it('should warn when using unsupported `className` prop', () => {
-      const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
+        consoleWarnMock.mockRestore();
+      });
+    });
 
+    describe('unsupported `className` prop', () => {
       const props = { className: 'Button' };
-      renderHook(() => useStyleProps(props as StyleProps));
 
-      expect(consoleWarnMock).toHaveBeenCalledWith(
-        'Warning: The className prop is unsafe and is unsupported in Spirit Web React. Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.',
-      );
+      it('should warn when using unsupported `className` prop', () => {
+        const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
+        renderHook(() => useStyleProps(props as StyleProps));
+
+        expect(consoleWarnMock).toHaveBeenCalledWith(
+          'Warning: The className prop is unsafe and is unsupported in Spirit Web React. Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. Note that this may break in future versions due to DOM structure changes.',
+        );
+
+        consoleWarnMock.mockRestore();
+      });
+
+      it('should not pass unsupported `className` prop when using it', () => {
+        const consoleWarnMock = jest.spyOn(global.console, 'warn').mockImplementation();
+        const { result } = renderHook(() => useStyleProps(props as StyleProps));
+
+        expect(result.current.props).toEqual({});
 
-      consoleWarnMock.mockRestore();
+        consoleWarnMock.mockRestore();
+      });
     });
 
     it('should return correct utility class for simple spacing prop', () => {

diff --git a/packages/web-react/src/hooks/styleProps.ts b/packages/web-react/src/hooks/styleProps.ts
@@ -19,7 +19,7 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
 
   // Want to check if className prop exists, but not to define it in StyleProps type
   // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
-  if (otherProps.className) {
+  if (modifiedProps.className) {
     warning(
       false,
       'The className prop is unsafe and is unsupported in Spirit Web React. ' +
@@ -28,12 +28,12 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
     );
 
     // @ts-expect-error same as above, let me live my life
-    delete otherProps.className;
+    delete modifiedProps.className;
   }
 
   // Want to check if style prop exists, but not to define it in StyleProps type
   // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
-  if (otherProps.style) {
+  if (modifiedProps.style) {
     warning(
       false,
       'The style prop is unsafe and is unsupported in Spirit Web React. ' +
@@ -42,7 +42,7 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
     );
 
     // @ts-expect-error same as above, let me live my life
-    delete otherProps.style;
+    delete modifiedProps.style;
   }
 
   const styleProps = {