fix: DC-5428 Update mobile tab component (#7127)

* update tab mobile layout- there's still a bug

* Update tab mobile

* Update with resize

* remove log

* Update calculatewidth

* invert chevrons

* Update per reviews

* Update tab mobile

* Update borders
Update text primary
Paddings

Author: carlagn

src/css/all.css

@@ -792,6 +792,10 @@
   content: "\f078";
 }
 
+.fa-chevron-up::before {
+  content: "\f077";
+}
+
 .fa-circle-exclamation::before {
   content: "\f06a";
 }

src/css/custom.css

@@ -1775,3 +1775,7 @@ code:not(pre > code) {
   padding: 2px 5px;
   text-transform: capitalize;
 }
+
+.mantine-Modal-body code {
+  background-color: var(--mantine-color-gray-1) !important;
+}

src/pages/index.module.scss

@@ -483,4 +483,4 @@
       border: 0.75px solid var(--border-color);
     }
   }
-}
+}

src/theme/Tabs/index.tsx

@@ -1,15 +1,46 @@
-import React, { cloneElement, useEffect } from "react";
-import clsx from "clsx";
-import {
-  useScrollPositionBlocker,
-  useTabs,
-  sanitizeTabsChildren,
-} from "@docusaurus/theme-common/internal";
+import { sanitizeTabsChildren, useScrollPositionBlocker, useTabs } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+import React, { cloneElement, useEffect, useRef, useState } from "react";
+
 import styles from "./styles.module.scss";
+import { Icon } from "@site/src/components/Icon";
+
 function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   const tabRefs = [];
   const { blockElementScrollPositionUntilNextRender } = useScrollPositionBlocker();
+  const [open, setOpen] = useState(false);
+  const [overflowing, setOverflowing] = useState(false);
+  const [width, setWidth] = useState(0);
+  const ulvalues = useRef(null);
+
+  const calculateWidth = () => {
+    if (typeof document === "undefined") return 0;
+    return ((document.body.getBoundingClientRect().width - 300) * 0.75) - 48; // 48 is padding, 0.75 is 75% of content
+  };
+
+  useEffect(() => {
+    setWidth(calculateWidth());
+    checkForOverflow();
+  }, [width]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newWidth = calculateWidth();
+      setWidth(newWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const checkForOverflow = () => {
+    if (ulvalues.current && width > 0) {
+      const contentWidth = ulvalues.current.getBoundingClientRect().width;
+      setOverflowing(contentWidth > width);
+    }
+  };
+
+
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
@@ -18,6 +49,7 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
       blockElementScrollPositionUntilNextRender(newTab);
       selectValue(newTabValue);
     }
+    setOpen(false);
   };
   const handleKeydown = (event) => {
     let focusElement = null;
@@ -41,6 +73,12 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
     }
     focusElement?.focus();
   };
+  const handleOpen = (event) => {
+    const list = event.currentTarget;
+    setOpen(!open);
+    blockElementScrollPositionUntilNextRender(list);
+  }
+
   return (
     <ul
       role="tablist"
@@ -53,24 +91,41 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
         className
       )}
     >
-      {tabValues.map(({ value, label, attributes }) => (
-        <li
-          // TODO extract TabListItem
-          role="tab"
-          tabIndex={selectedValue === value ? 0 : -1}
-          aria-selected={selectedValue === value}
-          key={value}
-          ref={(tabControl) => tabRefs.push(tabControl)}
-          onKeyDown={handleKeydown}
-          onClick={handleTabChange}
-          {...attributes}
-          className={clsx("tabs__item", styles.tabItem, attributes?.className, {
-            [`tabs__item--active ${styles.activeTab}`]: selectedValue === value,
-          })}
-        >
-          {label ?? value}
-        </li>
-      ))}
+      <button 
+        className={clsx(styles.display, overflowing && styles.overflow)} 
+        onClick={(e) => handleOpen(e)}
+        aria-expanded={open}
+        aria-controls="tab-list-content"
+        type="button"
+      >
+        <span>{selectedValue}</span>
+        <Icon icon={`fa-regular fa-chevron-${open ? "up" : "down"}`} size="inherit" />
+      </button>
+      <div 
+        id="tab-list-content"
+        ref={ulvalues} 
+        className={clsx(styles.ulContent, overflowing && styles.overflow, open && styles.open)}
+        aria-hidden={!open && overflowing}
+      >
+        {tabValues.map(({ value, label, attributes }) => (
+          <li
+            // TODO extract TabListItem
+            role="tab"
+            tabIndex={selectedValue === value ? 0 : -1}
+            aria-selected={selectedValue === value}
+            key={value}
+            ref={(tabControl) => tabRefs.push(tabControl)}
+            onKeyDown={handleKeydown}
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx("tabs__item", styles.tabItem, attributes?.className, {
+              [`tabs__item--active ${styles.activeTab}`]: selectedValue === value,
+            })}
+          >
+            {label ?? value}
+          </li>
+        ))}
+      </div>
     </ul>
   );
 }

src/theme/Tabs/styles.module.scss

@@ -3,16 +3,76 @@
   border-color: #e2e8f0;
 }
 
+.display {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  border-radius: 8px;
+  align-items: center;
+  outline: 1px solid var(--border-color);
+  border: none;
+  width: 100%;
+  padding: 6px 12px;
+  margin-bottom: 4px;
+  background: var(--surface-brand-grey-strong);
+  color: var(--primary-font-color);
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  font-weight: 600;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  @media (min-width: 940px) {
+    display: none;
+    &.overflow {
+      display: flex;
+    }
+  }
+}
+
+.ulContent {
+  display: flex;
+  border-radius: 8px;
+  @media (max-width: 939px) {
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+    display: block;
+    width: 100%;
+  }
+  &.overflow {
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+    display: block;
+    width: 100%;
+    top: 100%;
+  }
+  &.open {
+    opacity: 1;
+    z-index: 2;
+    top: 100%;
+    pointer-events: auto;
+    li {
+      @media (max-width: 939px) {
+        width: 100%;
+      }
+    }
+  }
+}
+
 .tabList {
   margin-bottom: var(--ifm-leading);
   width: fit-content;
   margin: 1rem 0;
   max-width: 100%;
-  &:has(.full-width) {
-    width: 100%;
-  }
+  width: 100%;
   > ul {
     overflow: unset;
+    position: relative;
   }
   > div {
     padding: 32px;
@@ -29,13 +89,21 @@
     &:has(.code-children) {
       padding: 0;
     }
+    &:has(.overflow) {
+      border-radius: 8px;
+    }
   }
   &:has(.code-children) {
     width: auto;
   }
   p {
     margin: 0
   }
+  &:has(.overflow) {
+    .full-width {
+      border-radius: 8px;
+    }
+  }
 }
 
 .tabItem {
@@ -44,6 +112,7 @@
   margin-right: 4px;
   margin-bottom: -1px;
   font-weight: 600;
+  white-space: nowrap;
   font-size: 0.875rem;
   align-items: center;
   border-radius: 4px 4px 0px 0px !important;
@@ -73,6 +142,7 @@
     z-index: 2;
     background: var(--surface-brand-grey);
     position: relative;
+    color: var(--primary-font-color);
     &::after {
       content: "";
       background: var(--surface-brand-grey);
@@ -112,3 +182,4 @@
     width: 100%;
   }
 }
+