From 299efb7eed49d6315c32b176e79e494791e4fa27 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 29 Aug 2022 15:14:38 -0700
Subject: [PATCH 1/3] Add unit tests to illustrate broken behavior

- first test should fail, second test should pass
---
 .../page/page_sidebar/page_sidebar.test.tsx   | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/components/page/page_sidebar/page_sidebar.test.tsx b/src/components/page/page_sidebar/page_sidebar.test.tsx
index 62518c92cdf..960d7acd42c 100644
--- a/src/components/page/page_sidebar/page_sidebar.test.tsx
+++ b/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,
+      });
+    });
+  });
 });

From fab1d60609c5bd16211c961def580d2c1ce6e8b5 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 29 Aug 2022 15:16:38 -0700
Subject: [PATCH 2/3] Fix inline styles not correctly updating if `sticky` prop
 is not set

---
 src/components/page/page_sidebar/page_sidebar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/page/page_sidebar/page_sidebar.tsx b/src/components/page/page_sidebar/page_sidebar.tsx
index bd39401dbf5..80ecc9c7f98 100644
--- a/src/components/page/page_sidebar/page_sidebar.tsx
+++ b/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 (

From b17f1b57cdae0044e681532ea3cff98adbb3befd Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 29 Aug 2022 15:21:17 -0700
Subject: [PATCH 3/3] Changelog

---
 upcoming_changelogs/6191.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6191.md

diff --git a/upcoming_changelogs/6191.md b/upcoming_changelogs/6191.md
new file mode 100644
index 00000000000..5fe2dcfe09f
--- /dev/null
+++ b/upcoming_changelogs/6191.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiPageSidebar` bug where inline styles were not correctly updating