fix(split-view): redraw when primary-size change

adobe · Jul 16, 2021 · 665d238 · 665d238
1 parent 86d0ab2
commit 665d238
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
+    });
 });