[EuiPageSection] Fix contentProps not correctly concatenating css (…

…#6365)

* [EuiPageSection] Fix `contentProps` not correctly concatenating passed cssProps

* changelog

src/components/page/page_section/page_section.test.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
@@ -109,4 +110,27 @@ describe('EuiPageSection', () => {
       });
     });
   });
+
+  // Regression test for recurring bug / unintuitive Emotion behavior
+  it('correctly merges `css` passed to `contentProps`', () => {
+    const component = render(
+      <EuiPageSection
+        contentProps={{
+          css: css`
+            color: red;
+          `,
+          'data-test-subj': 'content',
+        }}
+      />
+    );
+    const content = component.find('[data-test-subj="content"]');
+    expect(content).toMatchInlineSnapshot(`
+      <div
+        class="emotion-euiPageSection__content-l-css"
+        data-test-subj="content"
+      />
+    `);
+    expect(content.attr('class')).toContain('euiPageSection__content'); // Preserves our CSS
+    expect(content.attr('class').endsWith('-css')).toBeTruthy(); // Concatenates custom CSS
+  });
 });

src/components/page/page_section/page_section.tsx

@@ -100,11 +100,15 @@ export const EuiPageSection: FunctionComponent<EuiPageSectionProps> = ({
     bottomBorder === true && styles.border,
     alignment.toLowerCase().includes('center') && contentStyles.center,
     restrictWidth && contentStyles.restrictWidth,
+    contentProps?.css && contentProps.css,
   ];
 
   return (
     <Component css={cssStyles} {...rest}>
-      <div css={cssContentStyles} {...contentProps} style={widthStyles}>
+      {/* `css` must be merged manually after props spread on the content wrapper -
+      Emotion does not automatically correctly merge `css` on non-component JSX */}
+      {/* eslint-disable-next-line local/css_before_spread_props */}
+      <div {...contentProps} css={cssContentStyles} style={widthStyles}>
         {children}
       </div>
     </Component>

upcoming_changelogs/6365.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Re-fixed `EuiPageSection` not correctly merging `contentProps.css`