js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: tab group indicator offset when element is animated (#671)

Browse Source 
* fix issue 622

* run prettier
This commit is contained in:
Jake Patterson
2022-02-13 21:50:11 +00:00
committed by GitHub
parent 17627d0775
commit 2b505466ce
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/tab-group/tab-group.ts
View File

@@ -6,7 +6,6 @@ import '~/components/icon-button/icon-button';
import type SlTabPanel from '~/components/tab-panel/tab-panel';
import type SlTab from '~/components/tab/tab';
import { emit } from '~/internal/event';
import { getOffset } from '~/internal/offset';
import { scrollIntoView } from '~/internal/scroll';
import { watch } from '~/internal/watch';
import { LocalizeController } from '~/utilities/localize';
@@ -295,23 +294,32 @@ export default class SlTabGroup extends LitElement {
const width = currentTab.clientWidth;
const height = currentTab.clientHeight;
const offset = getOffset(currentTab, this.nav);
const offsetTop = offset.top + this.nav.scrollTop;
const offsetLeft = offset.left + this.nav.scrollLeft;
// offsetLeft/offsetTop cannot be used directly here due to a shadow parent issue: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
// neither can getBoundingClientRect as it gives invalid values for animating elements
const allTabs = this.getAllTabs();
const preceedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
const offset = preceedingTabs.reduce(
(previous, current) => ({
left: previous.left + current.clientWidth,
top: previous.top + current.clientHeight
}),
{ left: 0, top: 0 }
);
switch (this.placement) {
case 'top':
case 'bottom':
this.indicator.style.width = `${width}px`;
this.indicator.style.height = 'auto';
this.indicator.style.transform = `translateX(${offsetLeft}px)`;
this.indicator.style.transform = `translateX(${offset.left}px)`;
break;
case 'start':
case 'end':
this.indicator.style.width = 'auto';
this.indicator.style.height = `${height}px`;
this.indicator.style.transform = `translateY(${offsetTop}px)`;
this.indicator.style.transform = `translateY(${offset.top}px)`;
break;
}
}