fix(DrawerPanelContent): fix issue with styles overriding (#12039)

* fix(DrawerPanelContent): fix issue with styles overriding

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

* added tests

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

---------

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

Author: gitdallas

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -77,6 +77,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   widths,
   colorVariant = DrawerColorVariant.default,
   focusTrap,
+  style,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = useRef<HTMLDivElement>(undefined);
@@ -381,9 +382,10 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               }
             }}
             hidden={hidden}
-            {...((defaultSize || minSize || maxSize) && {
-              style: boundaryCssVars as React.CSSProperties
-            })}
+            style={{
+              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
+              ...style
+            }}
             {...props}
             ref={panel}
           >

packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -121,3 +121,40 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
 
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
+
+test('Applies style prop as expected', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent style={{ backgroundColor: 'red', padding: '20px' }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({ backgroundColor: 'red', padding: '20px' });
+});
+
+test('Style prop overrides boundaryCssVars', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent
+        defaultSize="200px"
+        minSize="100px"
+        maxSize="400px"
+        style={{
+          '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+        }}
+      >
+        Drawer panel content
+      </DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({
+    '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+  });
+});