Skip to content

Commit

Permalink
Simplify fix for abrupt panel transition
Browse files Browse the repository at this point in the history 
The previous fix implemented a method to compute the max
height of a panel by checking if the collapse button is present
and adding the height of the bottom margin of the button.

Let's simplify this by wrapping the button in a <div> block and 
adding padding to the block. Let's also remove the getMaxHeight
method and its associated tests.
  • Loading branch information
@luminousleek
luminousleek authored Feb 17, 2024
1 parent 5ca4704 commit be70d31
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 162 deletions.
20 changes: 0 additions & 20 deletions packages/vue-components/src/__tests__/Panels.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,26 +60,6 @@ describe('NestedPanels', () => {
expect(wrapper.element).toMatchSnapshot();
});

test('transition height is correctly calculated', async () => {
const wrapper = mount(NestedPanel, {
slots: {
header: 'test header',
default: 'Some panel content\nsome other text',
},
propsData: {
preload: true,
},
attachTo: document.body,
});
const panelElement = wrapper.element.querySelector('.card-collapse');
Object.defineProperty(panelElement, 'scrollHeight', { configurable: true, value: 10 });
const bottomSwitch = wrapper.element.querySelector('.card-body > .collapse-button');
bottomSwitch.style.marginBottom = '13px';
// click on header
await wrapper.find('div.card-header').trigger('click');
expect(wrapper.element).toMatchSnapshot();
});

test('should have span.anchor when id is present', async () => {
const wrapper = mount(NestedPanel, {
propsData: {
Expand Down
135 changes: 24 additions & 111 deletions packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,15 +146,19 @@ exports[`NestedPanels should not show header after expand with expandHeaderless
<!---->
<button
class="collapse-button btn btn-outline-secondary"
type="button"
<div
class="bottom-button-wrapper"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>
</div>
<hr
Expand Down Expand Up @@ -239,15 +243,19 @@ exports[`NestedPanels should show header after expand with expandHeaderless as f
<!---->
<button
class="collapse-button btn btn-outline-secondary"
type="button"
<div
class="bottom-button-wrapper"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>
</div>
<hr
Expand Down Expand Up @@ -419,98 +427,3 @@ exports[`NestedPanels should show header when collapsed with expandHeaderless as
</div>
</div>
`;

exports[`NestedPanels transition height is correctly calculated 1`] = `
<div
class="card-container"
>
<div
class="card expandable-card"
>
<div
class="card-header header-toggle bg-light"
>
<div
class="caret-wrapper"
>
<!---->
</div>
<div
class="header-wrapper card-title bg-light"
>
test header
</div>
<div
class="button-wrapper"
>
<button
class="collapse-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
<button
class="close-button btn btn-outline-secondary"
type="button"
>
<span
aria-hidden="true"
class="glyphicon glyphicon-remove"
/>
</button>
<button
class="popup-button btn btn-outline-secondary"
style="display: none;"
type="button"
>
<span
aria-hidden="true"
class="glyphicon glyphicon-new-window"
/>
</button>
</div>
</div>
<div
class="card-collapse"
style="max-height: 23px;"
>
<div
class="card-body"
>
Some panel content
some other text
<!---->
<button
class="collapse-button btn btn-outline-secondary"
style="margin-bottom: 13px;"
type="button"
>
<span
aria-hidden="true"
class="collapse-icon glyphicon glyphicon-menu-down opened"
/>
</button>
</div>
<hr
style="display: none;"
/>
</div>
<transition-stub
name="peek-read-more-fade"
>
<!---->
</transition-stub>
</div>
</div>
`;
20 changes: 13 additions & 7 deletions packages/vue-components/src/panels/NestedPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,13 @@
:fragment="fragment"
@src-loaded="retrieverUpdateMaxHeight"
/>
<panel-switch
v-show="isExpandableCard && bottomSwitchBool"
:is-open="localExpanded"
@click.native.stop.prevent="toggle(true)"
/>
<div class="bottom-button-wrapper">
<panel-switch
v-show="isExpandableCard && bottomSwitchBool"
:is-open="localExpanded"
@click.native.stop.prevent="toggle(true)"
/>
</div>
</div>
<hr v-show="isSeamless" />
</div>
Expand Down Expand Up @@ -283,13 +285,17 @@ export default {
margin-top: 0 !important;
}
.card-body > .collapse-button {
.bottom-button-wrapper {
padding-bottom: 13px;
margin-bottom: 13px;
}
.bottom-button-wrapper > .collapse-button {
margin-top: 5px;
opacity: 0.2;
}
.card-body > .collapse-button:hover {
.bottom-button-wrapper > .collapse-button:hover {
opacity: 1;
}
Expand Down
27 changes: 3 additions & 24 deletions packages/vue-components/src/panels/PanelBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default {
} else {
// Expand panel
this.$refs.panel.style.transition = 'max-height 0.5s ease-in-out';
this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
}

this.localExpanded = !this.localExpanded;
Expand All @@ -190,7 +190,7 @@ export default {
DOM update (nextTick) before setting maxHeight for transition.
*/
this.$nextTick(() => {
this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
});
});
},
Expand All @@ -212,28 +212,7 @@ export default {
}

// For expansion transition to 'continue' after src is loaded.
this.$refs.panel.style.maxHeight = `${this.getMaxHeight()}px`;
},
getMaxHeight() {
if (!this.bottomSwitchBool) {
return this.$refs.panel.scrollHeight;
}
/*
Collapse button at bottom of panel's bottom margin is not included in panel's scrollHeight.
It's bottom margin is added to the maxHeight of the panel to enable a smooth transition.
Otherwise, there would be an instant transition when reaching the end of the panel content.
*/
const bottomSwitch = document.querySelector('.card-body > .collapse-button');
if (bottomSwitch == null) {
return this.$refs.panel.scrollHeight;
}
const bottomSwitchStyle = window.getComputedStyle(bottomSwitch);
const bottomSwitchBottomMargin = parseFloat(bottomSwitchStyle.marginBottom);
if (Number.isNaN(bottomSwitchBottomMargin)) {
return this.$refs.panel.scrollHeight;
}
return this.$refs.panel.scrollHeight + bottomSwitchBottomMargin;
this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
},
initPanel() {
this.$refs.panel.addEventListener('transitionend', (event) => {
Expand Down

0 comments on commit be70d31

Please sign in to comment.