[EuiPageSidebar] Fix inline styles not updating if sticky is not set (

#6191)

* Add unit tests to illustrate broken behavior

- first test should fail, second test should pass

* Fix inline styles not correctly updating if `sticky` prop is not set

* Changelog

src/components/page/page_sidebar/page_sidebar.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 import { PADDING_SIZES } from '../../../global_styling';
@@ -44,4 +44,47 @@ describe('EuiPageSidebar', () => {
       });
     });
   });
+
+  describe('inline styles', () => {
+    it('updates correctly when `sticky` is not set', () => {
+      const component = mount(<EuiPageSidebar data-test-subj="sidebar" />);
+
+      expect(
+        component.find('[data-test-subj="sidebar"]').last().prop('style')
+      ).toEqual({ minInlineSize: 248 });
+
+      component.setProps({ minWidth: 100 });
+      component.update();
+
+      expect(
+        component.find('[data-test-subj="sidebar"]').last().prop('style')
+      ).toEqual({ minInlineSize: 100 });
+    });
+
+    it('updates correctly when `sticky` is set', () => {
+      const component = mount(
+        <EuiPageSidebar sticky data-test-subj="sidebar" />
+      );
+
+      expect(
+        component.find('[data-test-subj="sidebar"]').last().prop('style')
+      ).toEqual({
+        insetBlockStart: 0,
+        maxBlockSize: 'calc(100vh - 0px)',
+        minInlineSize: 248,
+      });
+
+      component.setProps({ style: { color: 'red' } });
+      component.update();
+
+      expect(
+        component.find('[data-test-subj="sidebar"]').last().prop('style')
+      ).toEqual({
+        color: 'red',
+        insetBlockStart: 0,
+        maxBlockSize: 'calc(100vh - 0px)',
+        minInlineSize: 248,
+      });
+    });
+  });
 });

src/components/page/page_sidebar/page_sidebar.tsx

@@ -81,6 +81,11 @@ export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps> = ({
   });
 
   useEffect(() => {
+    let updatedStyles = {
+      ...style,
+      ...logicalStyle('min-width', isResponding ? '100%' : minWidth),
+    };
+
     if (sticky) {
       const euiHeaderFixedCounter = Number(
         document.body.dataset.fixedHeaders ?? 0
@@ -91,13 +96,14 @@ export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps> = ({
           ? sticky?.offset
           : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
 
-      setInlineStyles({
-        ...style,
-        ...logicalStyle('min-width', isResponding ? '100%' : minWidth),
+      updatedStyles = {
+        ...updatedStyles,
         ...logicalStyle('top', offset),
         ...logicalStyle('max-height', `calc(100vh - ${offset}px)`),
-      });
+      };
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
 
   return (

upcoming_changelogs/6191.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiPageSidebar` bug where inline styles were not correctly updating