Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ca35171
feat: support icon-only-tab
saurabhdaware Jan 27, 2025
1024bda
fix: alignment of icon
tewarig Jan 27, 2025
78fbb11
chore: update borderRadius to medium
tewarig Jan 27, 2025
4c44d89
chore: remove divider from tablist according to design
tewarig Jan 27, 2025
d1ba889
chore: update background color
tewarig Jan 27, 2025
4f76377
fix: update padding for tab horizontal bordered and filled
tewarig Jan 28, 2025
3bc32a1
chore: update types
tewarig Jan 28, 2025
083717c
chore: update snap
tewarig Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/blade/src/components/Tabs/TabItem.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ const StyledTabButton = styled(BaseBox)<{
alignItems: 'center',
flexDirection: 'row',
width: isFullWidthTabItem ? '100%' : undefined,
paddingTop: makeSpace(get(theme, paddingY[_variant].horizontal.mobile[size!])),
paddingBottom: makeSpace(get(theme, paddingY[_variant].horizontal.mobile[size!])),
paddingLeft: makeSpace(get(theme, paddingX[_variant].horizontal.mobile[size!])),
paddingRight: makeSpace(get(theme, paddingX[_variant].horizontal.mobile[size!])),
paddingTop: makeSpace(get(theme, paddingY[_variant].horizontal.mobile.top[size!])),
paddingBottom: makeSpace(get(theme, paddingY[_variant].horizontal.mobile.bottom[size!])),
paddingLeft: makeSpace(get(theme, paddingX[_variant].horizontal.mobile.left[size!])),
paddingRight: makeSpace(get(theme, paddingX[_variant].horizontal.mobile.right[size!])),
};
});

Expand Down
34 changes: 19 additions & 15 deletions packages/blade/src/components/Tabs/TabItem.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,16 @@ const StyledTabButton = styled.button<{
width: isFullWidthTabItem ? '100%' : undefined,

// Padding
paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),
paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),
paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),
paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),
paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop.top[size!])),
paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop.bottom[size!])),
paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop.left[size!])),
paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop.right[size!])),

[`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {
paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),
paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),
paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),
paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),
paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile.top[size!])),
paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile.bottom[size!])),
paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile.left[size!])),
paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile.right[size!])),
},

// colors
Expand Down Expand Up @@ -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>
}
Expand Down
21 changes: 4 additions & 17 deletions packages/blade/src/components/Tabs/TabList.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand All @@ -97,20 +96,8 @@ const TabList = ({
})}
>
{variant === 'filled' && !isVertical
? React.Children.map(children, (child, index) => {
return (
<>
{index > 0 ? (
<Divider
margin="auto"
height="20px"
variant="subtle"
orientation="vertical"
/>
) : null}
{child}
</>
);
? React.Children.map(children, (child) => {
return <>{child}</>;
})
: children}
</BaseBox>
Expand Down
75 changes: 73 additions & 2 deletions packages/blade/src/components/Tabs/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
BankIcon,
CreditCardIcon,
ZapIcon,
MonitorIcon,
SmartphoneIcon,
} from '~components/Icons';
import { Counter } from '~components/Counter';
import { Box } from '~components/Box';
Expand Down Expand Up @@ -621,9 +623,16 @@ Large.args = {
size: 'large',
};

export const Filled = TabsTemplate.bind({});
Filled.args = {
export const FilledMedium = TabsTemplate.bind({});
FilledMedium.args = {
variant: 'filled',
size: 'medium',
};

export const FilledLarge = TabsTemplate.bind({});
FilledLarge.args = {
variant: 'filled',
size: 'large',
};

export const FilledVertical = TabsTemplate.bind({});
Expand Down Expand Up @@ -911,3 +920,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';
6 changes: 3 additions & 3 deletions packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button type="button" id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 dsxGFU"><p class="StyledBaseText-dVBfTO dBbFZp" data-blade-component="text">Payments</p></button><button type="button" id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 dsxGFU"><p class="StyledBaseText-dVBfTO juAXIO" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 itSyci cRvRoB"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx fNJCJA"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Refunds</p></div></div></div>"`;
exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button type="button" id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 bYGDun"><p class="StyledBaseText-dVBfTO dBbFZp" data-blade-component="text">Payments</p></button><button type="button" id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 bYGDun"><p class="StyledBaseText-dVBfTO juAXIO" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 itSyci cRvRoB"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx fNJCJA"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Refunds</p></div></div></div>"`;

exports[`<Tabs /> should render tabs ssr 2`] = `
.c0.c0.c0.c0.c0 {
Expand Down Expand Up @@ -158,8 +158,8 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
padding-top: 16px;
padding-bottom: 16px;
padding-top: 4px;
padding-bottom: 12px;
padding-left: 0px;
padding-right: 0px;
background-color: hsla(0,0%,100%,0);
Expand Down
Loading
Loading