feat: Add scroll snapping to responsive tabs

cloudscape-design · Nov 18, 2024 · 26ce08b · 26ce08b
1 parent b044406
commit 26ce08b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/src/tabs/__integ__/tabs.test.ts b/src/tabs/__integ__/tabs.test.ts
@@ -223,6 +223,7 @@ test(
     await page.setWindowSize({ width: 500, height: 1000 });
     await page.click('#add-tab');
     await page.click(page.paginationButton('right', true));
+    await page.click(page.paginationButton('right', true));
     await page.click(wrapper.findTabLinkByIndex(7).toSelector());
     await page.waitForAssertion(async () =>
       expect(await page.isExisting(page.paginationButton('right', true))).toBe(false)

diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
@@ -29,6 +29,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   overflow-y: hidden;
   position: relative;
   inline-size: 100%;
+  scroll-snap-type: inline proximity;
   // do not use pointer-events none because it disables scroll by sliding
 
   // Hide scrollbar in all browsers
@@ -74,6 +75,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   flex-shrink: 0;
   display: flex;
   max-inline-size: calc(90% - awsui.$space-l);
+  scroll-snap-align: start;
 }
 
 .tabs-tab-label {
@@ -205,6 +207,7 @@ $label-horizontal-spacing: awsui.$space-xs;
 // Remediate focus shadow
 .tabs-tab:first-child {
   margin-inline-start: 1px;
+  scroll-margin-inline-start: 1px;
   & > .tabs-tab-header-container {
     padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
   }
@@ -213,6 +216,7 @@ $label-horizontal-spacing: awsui.$space-xs;
 // Remediate focus shadow
 .tabs-tab:last-child {
   margin-inline-end: 1px;
+  scroll-margin-inline-end: 1px;
   & > .tabs-tab-header-container {
     padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
   }