fix: remove Tabs scroll styling

- Used non-standard CSS - Not much benefit (if any)
chanzuckerberg · Sep 29, 2022 · 38cdaa2 · 38cdaa2
1 parent f494708
commit 38cdaa2
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 96 deletions.
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
@@ -20,33 +20,6 @@
   padding-bottom: var(--eds-size-2);
 }
 
-/**
- * Fade scrollable indicators to display if there is scrollable area on either side.
- *
- * The color "white" is arbitrary and any non transparent color can be used here.
- */
-.tabs--scrollable-left {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white var(--eds-size-8)
-  );
-}
-
-.tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(right, transparent);
-}
-
-.tabs--scrollable-left.tabs--scrollable-right {
-  -webkit-mask-image: -webkit-linear-gradient(
-    left,
-    transparent,
-    white var(--eds-size-8),
-    white calc(100% - var(--eds-size-8)),
-    transparent 100%
-  );
-}
-
 /**
  * Tabs list
  *

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,8 +1,6 @@
 import clsx from 'clsx';
-import debounce from 'lodash.debounce';
 import React, {
   type ReactNode,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -64,10 +62,7 @@ export const Tabs = ({
 }: Props) => {
   const getUID = useUIDSeed();
   const activeTabPanelId = useUID();
-  const headerRef = useRef<HTMLDivElement>(null);
   const [activeIndexState, setActiveIndexState] = useState(activeIndex);
-  const [scrollableLeft, setScrollableLeft] = useState<boolean>(false);
-  const [scrollableRight, setScrollableRight] = useState<boolean>(false);
 
   /** Children that are actually tabs. Any others are ignored. */
   const tabs = useMemo(() => {
@@ -90,56 +85,6 @@ export const Tabs = ({
     }
   }, [prevActiveIndex, activeIndex, tabRefs]);
 
-  /**
-   * Handles if scroll fade indicators should be displayed.
-   */
-  const handleTabsScroll = useCallback((headerEl: HTMLDivElement) => {
-    const scrollLeft = headerEl.scrollLeft;
-    const width = headerEl.clientWidth;
-    const scrollWidth = headerEl.scrollWidth;
-
-    if (scrollLeft > 0) {
-      setScrollableLeft(true);
-    } else {
-      setScrollableLeft(false);
-    }
-
-    if (scrollWidth > width && scrollLeft + width < scrollWidth) {
-      setScrollableRight(true);
-    } else {
-      setScrollableRight(false);
-    }
-  }, []);
-
-  /**
-   * Listens for window resize to display scroll fade indicators.
-   */
-  useEffect(() => {
-    if (headerRef && headerRef.current) {
-      const resizeHandleTabs = debounce(
-        () => {
-          if (headerRef.current) {
-            handleTabsScroll(headerRef.current);
-          }
-        },
-        100,
-        { leading: true },
-      );
-
-      /**
-       * The event listener actually calls the callback once when initiated, but the event listener
-       * is not triggered with prop changes so this line is required.
-       * This means the callback may be called twice on initial paint, which is fine, and
-       * is better than it not being called at all.
-       */
-      resizeHandleTabs();
-      window.addEventListener('resize', resizeHandleTabs);
-      return () => {
-        window.removeEventListener('resize', resizeHandleTabs);
-      };
-    }
-  }, [handleTabsScroll]);
-
   function handleClick(index: number) {
     setActiveIndexState(index);
 
@@ -174,26 +119,14 @@ export const Tabs = ({
     }
   }
 
-  const componentClassName = clsx(styles['tabs'], className);
-
-  const headerClassName = clsx(
-    styles['tabs__header'],
-    scrollableLeft && styles['tabs--scrollable-left'],
-    scrollableRight && styles['tabs--scrollable-right'],
-  );
-
   const activeTabPanel = React.cloneElement(tabs[activeIndexState], {
     id: activeTabPanelId,
     'aria-labelledby': tabIds[activeIndexState],
   });
 
   return (
-    <div className={componentClassName} {...other}>
-      <div
-        className={headerClassName}
-        onScroll={(e) => handleTabsScroll(e.target as HTMLDivElement)}
-        ref={headerRef}
-      >
+    <div className={clsx(styles['tabs'], className)} {...other}>
+      <div className={styles['tabs__header']}>
         <ul
           aria-labelledby={ariaLabelledBy}
           className={styles['tabs__list']}