fix(ui-tabs): fix bottom border of Tab with scrolling overflow in secondary variant

INSTUI-4604

Author: ToMESSKa

packages/ui-tabs/src/Tabs/Tab/props.ts

@@ -50,6 +50,10 @@ type TabsTabOwnProps = {
     tabData: { index: number; id: string }
   ) => void
   children?: Renderable
+  /**
+   * Whether tabOverflow prop in Tabs is set to 'scroll'.
+   */
+  isOverflowScroll?: boolean
 }
 
 type PropKeys = keyof TabsTabOwnProps
@@ -71,7 +75,8 @@ const propTypes: PropValidators<PropKeys> = {
   isSelected: PropTypes.bool,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isOverflowScroll: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -83,7 +88,8 @@ const allowedProps: AllowedPropKeys = [
   'isSelected',
   'onClick',
   'onKeyDown',
-  'children'
+  'children',
+  'isOverflowScroll'
 ]
 
 export type { TabsTabProps, TabsTabStyle }

packages/ui-tabs/src/Tabs/Tab/styles.ts

@@ -49,7 +49,7 @@ const generateStyle = (
   componentTheme: TabsTabTheme,
   props: TabsTabProps
 ): TabsTabStyle => {
-  const { variant, isSelected, isDisabled } = props
+  const { variant, isSelected, isDisabled, isOverflowScroll } = props
 
   const variants = {
     default: {
@@ -90,7 +90,7 @@ const generateStyle = (
       padding: '0.75rem 1rem', // if horizontal padding changes, update `scrollOverlayWidthSecondary` in `Tabs/theme.js`
       color: componentTheme.secondaryColor,
       marginInlineEnd: '0.2em',
-      marginBottom: '-0.0625rem',
+      marginBottom: isOverflowScroll ? '0rem' : '-0.0625rem',
       border: '0.0625rem solid transparent',
       borderTopLeftRadius: '0.1875rem',
       borderTopRightRadius: '0.1875rem',

packages/ui-tabs/src/Tabs/index.tsx

@@ -359,6 +359,7 @@ class Tabs extends Component<TabsProps, TabsState> {
         isDisabled={panel.props.isDisabled}
         onClick={this.handleTabClick}
         onKeyDown={this.handleTabKeyDown}
+        isOverflowScroll={this.props.tabOverflow === 'scroll'}
       >
         {panel.props.renderTitle}
       </Tab>

packages/ui-tabs/src/Tabs/styles.ts

@@ -62,6 +62,10 @@ const generateStyle = (
       flexFlow: 'row wrap'
     },
     scroll: {
+      marginBottom:
+        variant === 'secondary'
+          ? `calc(${componentTheme.tabVerticalOffset} * -1)`
+          : 0,
       overflowX: 'auto',
       ...(variant === 'default' && {
         '&::-webkit-scrollbar-track': {