From 2797e24a53314276020b411337e060fd624325b0 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Tue, 26 Mar 2024 16:07:08 -0400 Subject: [PATCH 1/3] fix: split-panel now properly calculates it size when it goes from hidden to being shown. --- src/components/split-panel/split-panel.component.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts index 2154e7721f..66184e4532 100644 --- a/src/components/split-panel/split-panel.component.ts +++ b/src/components/split-panel/split-panel.component.ts @@ -189,6 +189,14 @@ export default class SlSplitPanel extends ShoelaceElement { const { width, height } = entries[0].contentRect; this.size = this.vertical ? height : width; + // There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when + // a split-panel goes from `display: none;` to showing. + if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) { + this.cachedPositionInPixels = Number(this.getAttribute("position-in-pixels")) + this.positionInPixels = Number(this.getAttribute("position-in-pixels")) + this.position = this.pixelsToPercentage(this.positionInPixels); + } + // Resize when a primary panel is set if (this.primary) { this.position = this.pixelsToPercentage(this.cachedPositionInPixels); From e8908201c24f7ccb0d9a9cfbdc7a1cb6f7e78b9c Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Tue, 26 Mar 2024 16:09:11 -0400 Subject: [PATCH 2/3] chore: add changelog note --- docs/pages/resources/changelog.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 80a7267180..40bc6cf1f0 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,6 +12,10 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). +## Next + +- Fixed a bug in `` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#] + ## 2.15.0 - Added the Slovenian translation [#1893] @@ -1738,4 +1742,4 @@ The following pages demonstrate why this change was necessary. ## 2.0.0-beta.1 -- Initial release +- Initial release \ No newline at end of file From ad2478bce7b6bf0e99ebc3cf3a5d9e5b5252431b Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Tue, 26 Mar 2024 16:34:13 -0400 Subject: [PATCH 3/3] prettier --- docs/pages/resources/changelog.md | 2 +- src/components/split-panel/split-panel.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 40bc6cf1f0..41fb7dc9d4 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -1742,4 +1742,4 @@ The following pages demonstrate why this change was necessary. ## 2.0.0-beta.1 -- Initial release \ No newline at end of file +- Initial release diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts index 66184e4532..bf8af30dfa 100644 --- a/src/components/split-panel/split-panel.component.ts +++ b/src/components/split-panel/split-panel.component.ts @@ -192,8 +192,8 @@ export default class SlSplitPanel extends ShoelaceElement { // There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when // a split-panel goes from `display: none;` to showing. if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) { - this.cachedPositionInPixels = Number(this.getAttribute("position-in-pixels")) - this.positionInPixels = Number(this.getAttribute("position-in-pixels")) + this.cachedPositionInPixels = Number(this.getAttribute('position-in-pixels')); + this.positionInPixels = Number(this.getAttribute('position-in-pixels')); this.position = this.pixelsToPercentage(this.positionInPixels); }