feat(Tabs): Support icon-only tab (#2496)

* feat: support icon-only-tab

* fix: alignment of icon

* chore: update borderRadius to medium

* chore: remove divider from tablist according to design

* chore: update background color

* fix: update padding for tab horizontal bordered and filled

* chore: update types

* chore: update snap

* Revert "fix: update padding for tab horizontal bordered and filled"

This reverts commit 4f76377.

* chore: update snaps

* chore: unused code

---------

Co-authored-by: tewarig <[email protected]>

Author: saurabhdaware

packages/blade/src/components/Tabs/TabItem.web.tsx

@@ -165,13 +165,17 @@ const TabItem = ({
           {Leading ? (
             <Leading size={iconSizeMap[size!]} color={iconColor[selectedState][interaction]} />
           ) : null}
-          <Text
-            color={textColor[selectedState][interaction]}
-            size={size === 'medium' ? 'medium' : 'large'}
-            weight="semibold"
-          >
-            {children}
-          </Text>
+
+          {children ? (
+            <Text
+              color={textColor[selectedState][interaction]}
+              size={size === 'medium' ? 'medium' : 'large'}
+              weight="semibold"
+            >
+              {children}
+            </Text>
+          ) : null}
+
           {validatedTrailingComponent}
         </StyledTabButton>
       }

packages/blade/src/components/Tabs/TabList.web.tsx

@@ -6,7 +6,6 @@ import { TabIndicator } from './TabIndicator';
 import { trackColor } from './tabTokens';
 import BaseBox from '~components/Box/BaseBox';
 import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
-import { Divider } from '~components/Divider';
 import { Box } from '~components/Box';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { getStyledProps } from '~components/Box/styledProps';
@@ -84,9 +83,9 @@ const TabList = ({
                   overflow={isVertical ? 'hidden' : undefined}
                   {...(isFilled
                     ? {
-                        borderRadius: 'small',
+                        borderRadius: 'medium',
                         borderWidth: 'thin',
-                        borderColor: 'interactive.border.gray.faded',
+                        borderColor: 'interactive.border.gray.default',
                         padding: 'spacing.2',
                         gap: isVertical ? 'spacing.0' : 'spacing.1',
                         backgroundColor: 'surface.background.gray.intense',
@@ -96,23 +95,7 @@ const TabList = ({
                         gap: isVertical ? 'spacing.0' : { base: 'spacing.7', m: 'spacing.8' },
                       })}
                 >
-                  {variant === 'filled' && !isVertical
-                    ? React.Children.map(children, (child, index) => {
-                        return (
-                          <>
-                            {index > 0 ? (
-                              <Divider
-                                margin="auto"
-                                height="20px"
-                                variant="subtle"
-                                orientation="vertical"
-                              />
-                            ) : null}
-                            {child}
-                          </>
-                        );
-                      })
-                    : children}
+                  {children}
                 </BaseBox>
               </BaseBox>
             );

packages/blade/src/components/Tabs/Tabs.stories.tsx

@@ -16,6 +16,8 @@ import {
   BankIcon,
   CreditCardIcon,
   ZapIcon,
+  MonitorIcon,
+  SmartphoneIcon,
 } from '~components/Icons';
 import { Counter } from '~components/Counter';
 import { Box } from '~components/Box';
@@ -911,3 +913,65 @@ const ProductUseCase3Template: StoryFn<(props: StoryControlProps) => React.React
 
 export const ProductUseCase3 = ProductUseCase3Template.bind({});
 ProductUseCase3.storyName = 'Product Usecase: React Router';
+
+const ProductUseCase4Template: StoryFn<(props: StoryControlProps) => React.ReactElement> = () => {
+  return (
+    <Box height={isReactNative() ? '100%' : undefined}>
+      <Card marginTop="spacing.6" elevation="none" padding="spacing.0">
+        <CardBody height="100%">
+          <Tabs isFullWidthTabItem={false} variant="filled" defaultValue="desktop">
+            <Box
+              padding="spacing.6"
+              minHeight="300px"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              paddingBottom="spacing.6"
+            >
+              <TabPanel value="desktop">
+                <Box
+                  elevation="midRaised"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  width="400px"
+                  height="200px"
+                  borderRadius="large"
+                  borderColor="surface.border.gray.muted"
+                  borderWidth="thin"
+                >
+                  <Text>Desktop Preview</Text>
+                </Box>
+              </TabPanel>
+              <TabPanel value="mobile">
+                <Box
+                  elevation="midRaised"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  width="140px"
+                  height="200px"
+                  borderRadius="large"
+                  borderColor="surface.border.gray.muted"
+                  borderWidth="thin"
+                >
+                  <Text>Mobile Preview</Text>
+                </Box>
+              </TabPanel>
+            </Box>
+
+            <Box width="200px" padding="spacing.6">
+              <TabList>
+                <TabItem value="desktop" leading={MonitorIcon} />
+                <TabItem value="mobile" leading={SmartphoneIcon} />
+              </TabList>
+            </Box>
+          </Tabs>
+        </CardBody>
+      </Card>
+    </Box>
+  );
+};
+
+export const ProductUseCase4 = ProductUseCase4Template.bind({});
+ProductUseCase4.storyName = 'Product Usecase: Icon only tabs';