From 5c9799b6177bfe806140874dd435196a045f4671 Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Thu, 9 Apr 2026 16:52:06 -0700 Subject: [PATCH 1/3] fix(unity-bootstrap-theme): prevent tab vertical scroll --- .../src/js/tabbed-panels.js | 20 ++++++++++++++----- .../TabbedPanels/TabbedPanels.stories.jsx | 2 +- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js index 2b30abbf01..3bb7a1cdfb 100644 --- a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js +++ b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js @@ -25,6 +25,20 @@ function initTabbedPanels() { e.target.focus(); } }; + const scrollIntoViewHorizontally = (container, child) => { + const childOffsetRight = child.offsetLeft + child.offsetWidth; + const containerScrollRight = container.scrollLeft + container.offsetWidth; + + // is child behind (left) + if (container.scrollLeft > child.offsetLeft) { + container.scrollLeft = child.offsetLeft; + } + + // is child ahead (right) + if (containerScrollRight < childOffsetRight) { + container.scrollLeft += childOffsetRight - containerScrollRight; + } + }; document .querySelectorAll(DOM_ELEMENT_UDS_TABBED_PANELS) @@ -99,12 +113,11 @@ function initTabbedPanels() { ? CSS_DISPLAY_NONE : CSS_DISPLAY_BLOCK; }); - // }); // handle focus event for tabs titles navItems.forEach(tabTitle => { tabTitle.addEventListener(EVENT_FOCUS, function (e) { - tabTitle.scrollIntoView(); + scrollIntoViewHorizontally(tabTitle.parentElement, tabTitle); }); }); @@ -123,7 +136,6 @@ function initTabbedPanels() { }); // hide prev button on load - prevButton.style.display = CSS_DISPLAY_NONE; // width of all tabs @@ -140,6 +152,4 @@ function initTabbedPanels() { EventHandler.on(window, "load.uds.tabs", initTabbedPanels); -// window.addEventListener("load.uds.tabs", initTabs, true); - export { initTabbedPanels }; diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx index fe42f732b2..68f90e2d2a 100644 --- a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx +++ b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx @@ -12,7 +12,7 @@ export default { const Template = () => { return ( -
+
From dc792d39b84c9efda87805dc9862101e150d382e Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Thu, 9 Apr 2026 17:19:49 -0700 Subject: [PATCH 2/3] fix(unity-bootstrap-theme): tab allow scroll all viewports --- .../src/js/tabbed-panels.js | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js index 3bb7a1cdfb..f416aaf39a 100644 --- a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js +++ b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js @@ -25,18 +25,19 @@ function initTabbedPanels() { e.target.focus(); } }; - const scrollIntoViewHorizontally = (container, child) => { - const childOffsetRight = child.offsetLeft + child.offsetWidth; + const scrollIntoViewHorizontally = tab => { + const container = tab.parentElement; + const tabOffsetRight = tab.offsetLeft + tab.offsetWidth; const containerScrollRight = container.scrollLeft + container.offsetWidth; - // is child behind (left) - if (container.scrollLeft > child.offsetLeft) { - container.scrollLeft = child.offsetLeft; + // is tab behind (left) + if (container.scrollLeft > tab.offsetLeft) { + container.scrollLeft = tab.offsetLeft; } - // is child ahead (right) - if (containerScrollRight < childOffsetRight) { - container.scrollLeft += childOffsetRight - containerScrollRight; + // is tab ahead (right) + if (containerScrollRight < tabOffsetRight) { + container.scrollLeft += tabOffsetRight - containerScrollRight; } }; @@ -117,22 +118,18 @@ function initTabbedPanels() { // handle focus event for tabs titles navItems.forEach(tabTitle => { tabTitle.addEventListener(EVENT_FOCUS, function (e) { - scrollIntoViewHorizontally(tabTitle.parentElement, tabTitle); + scrollIntoViewHorizontally(tabTitle); }); }); // click of the next button nextButton.addEventListener(EVENT_CLICK, function (e) { - if (window.innerWidth > LG_BREAKPOINT) { - slideNav(this, e, -1); - } + slideNav(this, e, -1); }); // click of the prev button prevButton.addEventListener(EVENT_CLICK, function (e) { - if (window.innerWidth > LG_BREAKPOINT) { - slideNav(this, e, 1); - } + slideNav(this, e, 1); }); // hide prev button on load @@ -153,3 +150,4 @@ function initTabbedPanels() { EventHandler.on(window, "load.uds.tabs", initTabbedPanels); export { initTabbedPanels }; + From 34598f13402c6261a8249bab480c120f3b6e2916 Mon Sep 17 00:00:00 2001 From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com> Date: Fri, 10 Apr 2026 11:34:28 -0700 Subject: [PATCH 3/3] chore(unity-bootstrap-theme): lint error --- packages/unity-bootstrap-theme/src/js/tabbed-panels.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js index f416aaf39a..9b3f0e7da0 100644 --- a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js +++ b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js @@ -150,4 +150,3 @@ function initTabbedPanels() { EventHandler.on(window, "load.uds.tabs", initTabbedPanels); export { initTabbedPanels }; -