Fix(web-react): Do not render empty style prop

lmc-eu · Jan 10, 2024 · 5bd5dfa · 5bd5dfa
1 parent 05b5803
commit 5bd5dfa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/web-react/src/hooks/__tests__/styleProps.test.ts b/packages/web-react/src/hooks/__tests__/styleProps.test.ts
@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { useStyleProps } from '../styleProps';
 import { StyleProps } from '../../types';
+import { useStyleProps } from '../styleProps';
 
 describe('styleProps', () => {
   describe('#useStyleProps', () => {
@@ -9,11 +9,12 @@ describe('styleProps', () => {
         { UNSAFE_style: { 'vertical-align': 'center' }, UNSAFE_className: 'Button' },
         { className: 'Button', style: { 'vertical-align': 'center' } },
       ],
-      [{ role: 'button' }, { UNSAFE_className: undefined, style: {} }],
+      [{ role: 'button' }, { UNSAFE_className: undefined, style: undefined }],
       [
         { role: 'button', UNSAFE_style: { 'vertical-align': 'center' } },
         { className: undefined, style: { 'vertical-align': 'center' } },
       ],
+      [{ role: 'button' }, { className: undefined, style: undefined }],
     ])('should use UNSAFE_style and UNSAFE_className props', (input, expected) => {
       expect(useStyleProps(input as StyleProps).styleProps).toEqual(expected);
     });

diff --git a/packages/web-react/src/hooks/styleProps.ts b/packages/web-react/src/hooks/styleProps.ts
@@ -40,7 +40,7 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
   }
 
   const styleProps = {
-    style,
+    style: Object.keys(style).length > 0 ? style : undefined,
     className: UNSAFE_className,
   };
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       const styleProps = {
-        style,
+        style: Object.keys(style).length > 0 ? style : undefined,
         className: UNSAFE_className,
       };
@@ Expand Down @@