From 665d2384ca7f43d89fd7e2b7b3fb7536a5e24df8 Mon Sep 17 00:00:00 2001
From: David Kudera <kudera.d@gmail.com>
Date: Thu, 8 Jul 2021 10:30:17 +0200
Subject: [PATCH] fix(split-view): redraw when primary-size change

---
 packages/split-view/src/SplitView.ts          |  4 ++++
 .../split-view/stories/split-view.stories.ts  | 11 ++++++++--
 packages/split-view/test/split-view.test.ts   | 20 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
index 9db30413b6..33370264f2 100644
--- a/packages/split-view/src/SplitView.ts
+++ b/packages/split-view/src/SplitView.ts
@@ -401,6 +401,10 @@ export class SplitView extends SpectrumElement {
 
     protected updated(changed: PropertyValues): void {
         super.updated(changed);
+        if (changed.has('primarySize')) {
+            this.splitterPos = undefined;
+            this.checkResize();
+        }
         if (
             changed.has('splitterPos') &&
             this.splitterPos !== undefined &&
diff --git a/packages/split-view/stories/split-view.stories.ts b/packages/split-view/stories/split-view.stories.ts
index aa9339d713..2d4eafeccc 100644
--- a/packages/split-view/stories/split-view.stories.ts
+++ b/packages/split-view/stories/split-view.stories.ts
@@ -19,14 +19,21 @@ export default {
     component: 'sp-split-view',
 };
 
-export const Horizontal = (): TemplateResult => {
+interface Properties {
+    primarySize?: string;
+}
+
+export const Horizontal = (args: Properties): TemplateResult => {
     return html`
-        <sp-split-view style="height: 200px" primary-size="100">
+        <sp-split-view style="height: 200px" primary-size="${args.primarySize}">
             <div>First panel</div>
             <div>Second panel</div>
         </sp-split-view>
     `;
 };
+Horizontal.args = {
+    primarySize: '100',
+};
 
 export const HorizontalResizable = (): TemplateResult => {
     return html`
diff --git a/packages/split-view/test/split-view.test.ts b/packages/split-view/test/split-view.test.ts
index 406d93c440..dcda7a6490 100644
--- a/packages/split-view/test/split-view.test.ts
+++ b/packages/split-view/test/split-view.test.ts
@@ -1031,4 +1031,24 @@ describe('SplitView', () => {
         expect(el.splitterPos || 0).to.equal(pos - 10);
         expect(changeSpy.callCount).to.equal(1);
     });
+
+    it('resizes when primarySize changes', async () => {
+        const el = await fixture<SplitView>(
+            html`
+                <sp-split-view
+                    resizable
+                    primary-size="100"
+                    style=${`height: 200px; width: 500px;`}
+                >
+                    <div>First panel</div>
+                    <div>Second panel</div>
+                </sp-split-view>
+            `
+        );
+        await elementUpdated(el);
+        expect(el.splitterPos || 0).to.equal(100);
+        el.primarySize = '300';
+        await elementUpdated(el);
+        expect(el.splitterPos || 0).to.equal(300);
+    });
 });