Merge pull request #714 from davidjerleke/bug/#713

[Bug]: Synced tabs doesn't always restore scroll position when selected tab changes
davidjerleke · Jan 23, 2024 · bfa61e2 · bfa61e2
2 parents da28e69 + cd753c3
commit bfa61e2
Show file tree

Hide file tree

Showing 24 changed files with 491 additions and 307 deletions.
diff --git a/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts b/packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts
@@ -2,7 +2,8 @@ import styled from 'styled-components'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
 import { PRISM_HIGHLIGHT_CLASS_NAME } from 'consts/prismHighlight'
-import { TabsWrapper, TabPanel } from 'components/Tabs/Tabs'
+import { TabsWrapper } from 'components/Tabs/Tabs'
+import { TabsPanelWrapper } from 'components/Tabs/TabsPanel'
 import { AdmonitionWrapper, AdmonitionContent } from '../Components/Admonition'
 import { headingStyles } from './heading'
 import { blockquoteStyles } from './blockquote'
@@ -19,7 +20,7 @@ export const MdxStyles = styled.div`
 
   color: ${COLORS.TEXT_BODY};
 
-  ${TabPanel} >,
+  ${TabsPanelWrapper} >,
   ${AdmonitionContent} >,
   > {
     ${listStyles};
@@ -53,13 +54,13 @@ export const MdxStyles = styled.div`
     }
   }
 
-  ${TabPanel} > *:first-child,
+  ${TabsPanelWrapper} > *:first-child,
   ${AdmonitionContent} > *:first-child,
   > *:first-child {
     margin-top: 0;
   }
 
-  ${TabPanel} > *:last-child, 
+  ${TabsPanelWrapper} > *:last-child, 
   ${AdmonitionContent} > *:last-child, 
   > *:last-child {
     margin-bottom: 0;

diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationMenuCompact.tsx
@@ -7,10 +7,14 @@ import { HEADER_HEIGHT } from 'components/Header/Header'
 import { PAGE_FRAME_SPACING } from 'components/Page/PageFrame'
 import { LAYERS } from 'consts/layers'
 import { BORDER_RADIUSES, BORDER_SIZES } from 'consts/border'
+import { TABS_SITE_NAVIGATION } from 'consts/tabs'
 import { TableOfContents } from 'components/TableOfContents/TableOfContents'
 import { FooterLinks } from 'components/Footer/FooterLinks'
 import { TabsItem } from 'components/Tabs/TabsItem'
-import { Tab, TabList, TabPanel, Tabs } from 'components/Tabs/Tabs'
+import { Tabs } from 'components/Tabs/Tabs'
+import { TabsList } from 'components/Tabs/TabsList'
+import { TabsButtonWrapper } from 'components/Tabs/TabsButton'
+import { TabsPanelWrapper } from 'components/Tabs/TabsPanel'
 import { SiteNavigationSubMenus } from './SiteNavigationSubMenus'
 import { useKeyNavigating } from 'hooks/useKeyNavigating'
 import { useTheme } from 'hooks/useTheme'
@@ -49,7 +53,7 @@ const MenuTabs = styled(Tabs)<{
 }>`
   height: 100%;
 
-  ${TabList} {
+  ${TabsList} {
     height: ${HEADER_HEIGHT};
     z-index: ${LAYERS.STEP * 2};
     position: absolute;
@@ -65,7 +69,7 @@ const MenuTabs = styled(Tabs)<{
     justify-content: center;
   }
 
-  ${TabPanel} {
+  ${TabsPanelWrapper} {
     position: relative;
     height: 100%;
     outline-offset: -${BORDER_SIZES.OUTLINE};
@@ -95,7 +99,7 @@ const MenuTabs = styled(Tabs)<{
     }
   }
 
-  ${Tab} {
+  ${TabsButtonWrapper} {
     flex-grow: 1;
     justify-content: center;
     max-width: calc(${MAX_WIDTH_COMPACT} / 2);
@@ -164,7 +168,7 @@ export const SiteNavigationMenuCompact = () => {
   return (
     <SiteNavigationMenuCompactWrapper>
       <MenuTabs $isKeyNavigating={isKeyNavigating}>
-        <TabsItem label="Main menu" value="main-menu">
+        <TabsItem tab={TABS_SITE_NAVIGATION.TABS.MAIN_MENU}>
           <ScrollArea>
             <ul>
               <SiteNavigationSubMenus />
@@ -185,8 +189,7 @@ export const SiteNavigationMenuCompact = () => {
         </TabsItem>
 
         <TabsItem
-          label="On this page"
-          value="table-of-contents"
+          tab={TABS_SITE_NAVIGATION.TABS.ON_THIS_PAGE}
           disabled={!showTableOfContents}
         >
           <ScrollArea>

diff --git a/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx b/packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationSubMenu.tsx
@@ -33,7 +33,7 @@ const SiteNavigationSubMenuWrapper = styled.div`
 `
 
 const Toggle = styled(ButtonBare)<{ $isActive: boolean }>`
-  font-weight: ${FONT_WEIGHTS.BOLD};
+  font-weight: ${FONT_WEIGHTS.SEMI_BOLD};
   color: ${COLORS.TEXT_BODY};
   padding: ${ITEM_SPACING} 0 ${ITEM_SPACING}
     calc(${TOGGLE_SVG_SIZE} + ${SPACINGS.TWO});

diff --git a/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx b/packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsMenu.tsx
@@ -39,7 +39,7 @@ const Heading = styled.div`
   color: ${COLORS.TEXT_BODY};
   padding-top: ${SPACINGS.ONE};
   padding-bottom: ${SPACINGS.TWO};
-  font-weight: ${FONT_WEIGHTS.BOLD};
+  font-weight: ${FONT_WEIGHTS.SEMI_BOLD};
   text-transform: uppercase;
 
   ${MEDIA.COMPACT} {