Fix Line appearing under selected tab at larger zoom (#4122)

* feat(tokens): update border tokens related to tabs * feat(tabs): fix underline bug on trackpad zoom * feat(tokens): add changesets * feat(Tabs): add changesets * feat(tokens): update changesets * feat(tabs): fix build issue * feat(tabs): update changeset * feat(tabs): update typedocs * feat(tabs): update tests * feat(tabs): update typedocs * feat(tabs): update tokens * feat(tabs): update tests * feat(tabs): update token * feat(tabs): try different solution * feat(tabs): add different background for inverse * feat(tabs): add changes from review * feat(tabs): update tests * feat(tabs): implement changes from review * feat(tabs): update token name
twilio-labs · Nov 1, 2024 · c23bb4c · c23bb4c
1 parent a150cf7
commit c23bb4c
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 27 deletions.
diff --git a/.changeset/dirty-mails-kick.md b/.changeset/dirty-mails-kick.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/in-page-navigation": patch
+"@twilio-paste/core": patch
+---
+
+[In Page Navigation]: Fix underline bug caused due to pixel rounding
diff --git a/.changeset/lucky-fireants-complain.md b/.changeset/lucky-fireants-complain.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Tokens]: Add new tokens related to box shadow of Tabs component
diff --git a/.changeset/tender-bugs-itch.md b/.changeset/tender-bugs-itch.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/code-block": patch
+"@twilio-paste/core": patch
+---
+
+[Code Block]: Fix underline bug caused due to pixel rounding
diff --git a/.changeset/tricky-jeans-collect.md b/.changeset/tricky-jeans-collect.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/tabs": patch
+"@twilio-paste/core": patch
+---
+
+[Tabs]: Fix underline bug caused due to pixel rounding
diff --git a/packages/paste-core/components/code-block/src/OverflowButton.tsx b/packages/paste-core/components/code-block/src/OverflowButton.tsx
@@ -1,6 +1,7 @@
 import { Box, BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import { ChevronLeftIcon } from "@twilio-paste/icons/esm/ChevronLeftIcon";
 import { ChevronRightIcon } from "@twilio-paste/icons/esm/ChevronRightIcon";
+import { BoxShadow } from "@twilio-paste/style-props";
 import { useTheme } from "@twilio-paste/theme";
 import React from "react";
 
@@ -31,6 +32,14 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
   const Chevron = position === "left" ? ChevronLeftIcon : ChevronRightIcon;
   if (!visible && position === "right") return null;
 
+  const determineShadow = (): BoxShadow | undefined => {
+    if (visible && showShadow) {
+      if (position === "left") return theme.shadows.shadowLeftInverse;
+      return theme.shadows.shadowRightInverse;
+    }
+    return undefined;
+  };
+
   return (
     <Box
       onClick={onClick}
@@ -41,9 +50,10 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       width="sizeIcon40"
       padding="space20"
       position="relative"
-      boxShadow={visible && showShadow ? theme.shadows.shadowScrollInverse : undefined}
+      boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
       cursor={visible ? "pointer" : "none"}
+      zIndex="zIndex10"
       {...Styles}
     >
       {/* For left button to align with spacing of header we hide icon */}

diff --git a/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx b/packages/paste-core/components/in-page-navigation/src/OverflowButton.tsx
@@ -46,7 +46,8 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
 
   const determineShadow = (): BoxShadow | undefined => {
     if (showShadow) {
-      return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll;
+      if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft;
+      return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight;
     }
     return undefined;
   };
@@ -62,6 +63,7 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       padding="space20"
       boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
+      zIndex="zIndex10"
       {...(isInverse ? InverseStyles : Styles)}
     >
       <Chevron decorative={true} />

diff --git a/packages/paste-core/components/tabs/src/OverflowButton.tsx b/packages/paste-core/components/tabs/src/OverflowButton.tsx
@@ -47,7 +47,8 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
 
   const determineShadow = (): BoxShadow | undefined => {
     if (showShadow) {
-      return isInverse ? theme.shadows.shadowScrollInverse : theme.shadows.shadowScroll;
+      if (position === "left") return isInverse ? theme.shadows.shadowLeftInverse : theme.shadows.shadowLeft;
+      return isInverse ? theme.shadows.shadowRightInverse : theme.shadows.shadowRight;
     }
     return undefined;
   };
@@ -63,6 +64,7 @@ export const OverflowButton: React.FC<OverflowButtonProps> = ({
       padding="space20"
       boxShadow={determineShadow()}
       element={`${element}_OVERFLOW_BUTTON_${position.toUpperCase()}`}
+      zIndex="zIndex10"
       {...(isInverse ? InverseStyles : Styles)}
     >
       <Chevron decorative={true} />

diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/packages/paste-core/components/tabs/src/Tab.tsx
@@ -126,6 +126,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
           borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest",
           color: isInverse ? "colorTextInverse" : "colorTextPrimary",
           boxShadow: isInverse ? "shadowBorderTopInverseStrongest" : "shadowBorderTopPrimary",
+          backgroundColor: isInverse ? "colorBackgroundInverse" : "colorBackgroundBody",
         },
         /* Disabled state */
         _disabled: {
@@ -139,7 +140,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
         },
         _selected_hover: {
           color: isInverse ? "colorTextInverse" : "colorTextPrimaryStronger",
-          borderBottomColor: isInverse ? "colorBorderInverseWeakest" : "colorBorderWeakest",
+          borderBottomColor: "transparent",
           boxShadow: isInverse ? "shadowBorderTopPrimary" : "shadowBorderTopPrimaryStrongest",
         },
         /* Focus states */
@@ -159,6 +160,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
           borderColor: isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak",
           boxShadow: "none",
           borderBottom: "none",
+          overflow: "clip",
         },
       };
   }

diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/packages/paste-core/components/tabs/src/TabList.tsx
@@ -107,17 +107,25 @@ const HorizontalTabList: React.FC<React.PropsWithChildren<{ variant?: Variants;
       <Box as={StyledTabList as any} ref={scrollableRef} flexGrow={1} element={`${element}_SCROLL_WRAPPER`}>
         <Box
           ref={ref}
+          position="relative"
           whiteSpace="nowrap"
           element={element}
           display="flex"
-          borderBottomStyle="solid"
-          borderBottomWidth="borderWidth10"
           columnGap="space20"
-          borderBottomColor={isInverse ? "colorBorderInverseWeaker" : "colorBorderWeak"}
+          // @ts-expect-error 1px is not available in tokens
+          paddingTop="1px"
+          boxShadow={isInverse ? "shadowBorderBottomInverseWeakerInset" : "shadowBorderBottomWeakInset"}
           // Scrollable element needs borderto stretch to full contianer width. Non scrollable needs to stretch border to parent width.
           width={elementOutOBoundsRight || elementOutOBoundsLeft ? "max-content" : "auto"}
         >
           {children}
+          <Box
+            position="absolute"
+            width="100%"
+            height="1px"
+            backgroundColor={isInverse ? "colorBackgroundInverse" : "colorBackgroundBody"}
+            bottom="-1px"
+          />
         </Box>
       </Box>
       <OverflowButton

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 69 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 73 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,