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();
+
+ 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(
+
+ );
+
+ 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,
+ });
+ });
+ });
});
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 = ({
});
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 = ({
? 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 (
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