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

Tabs styles #182

Closed
wants to merge 1 commit into from
Closed

Tabs styles #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 17 additions & 3 deletions src/layout/Tabs/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ export interface TabProps extends PropsWithChildren {
*/
size?: 'small' | 'medium' | 'large';

/**
* The variant of the tab.
*/
variant?: 'text' | 'button';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whats this for ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have two different styles in figma:
image
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And thats set internally?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, for tertiary tabs variant


/**
* Theme for the Tabs.
*/
Expand All @@ -64,22 +69,26 @@ export const Tab: FC<TabProps> = ({
disabled,
onSelect,
size = 'medium',
variant = 'text',
theme: customTheme
}) => {
const theme: TabsTheme = useComponentTheme('tabs', customTheme);

return (
<span className={cn(theme.list.tab.base, containerClassName)}>
<span className={cn('flex-1', theme.list.tab.base, containerClassName)}>
<Button
className={cn(
'relative z-10 rounded-none',
theme.list.tab.button,
className,
theme.list.tab.variant[variant],
{
[theme.list.tab.disabled]: disabled,
[theme.list.tab.selected]: selected
},
theme.list.tab.size?.[size]
)}
fullWidth
disabled={disabled}
role="tab"
variant="text"
Expand All @@ -96,8 +105,13 @@ export const Tab: FC<TabProps> = ({
{selected && (
<motion.div
className={cn(
theme.list.indicator?.base,
theme.list.indicator?.size?.[size]
theme.list.indicator.base,
theme.list.indicator?.size?.[size],
{
[theme.list.indicator.variant.line]: variant === 'text',
[theme.list.indicator.variant.card]: variant === 'button',
'h-full': variant === 'button'
}
)}
layoutId={`${id}-tabs-underline`}
/>
Expand Down
26 changes: 19 additions & 7 deletions src/layout/Tabs/TabList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export interface TabListProps extends PropsWithChildren {
* The variant of the tabs.
* @private
*/
variant?: 'primary' | 'secondary';
variant?: 'primary' | 'secondary' | 'tertiary';

/**
* The size of the tabs.
Expand Down Expand Up @@ -74,9 +74,15 @@ export const TabList: FC<TabListProps> = ({
<nav
role="tablist"
className={twMerge(
classNames(className, theme.list.base, {
'justify-end': direction === 'rtl'
})
classNames(
'overflow-hidden',
className,
theme.list.base,
theme.list.variant[variant].base,
{
'justify-end': direction === 'rtl'
}
)
)}
>
{childs.map(({ children, ...rest }, index) => (
Expand All @@ -87,13 +93,19 @@ export const TabList: FC<TabListProps> = ({
selected={index === selectedIndex}
onSelect={() => onSelect(index)}
size={size}
variant={variant === 'tertiary' ? 'button' : 'text'}
>
{children}
</Tab>
))}
<hr
className={cn(theme.list.divider, theme.list.variant[variant].divider)}
/>
{variant !== 'tertiary' && (
<hr
className={cn(
theme.list.divider,
theme.list.variant[variant].divider
)}
/>
)}
</nav>
);
};
13 changes: 11 additions & 2 deletions src/layout/Tabs/Tabs.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Tabs } from './Tabs';
import { TabList } from './TabList';
import { Tab } from './Tab';
import { TabPanel } from './TabPanel';
import { Stack } from '../Stack';

export default {
title: 'Components/Layout/Tabs',
Expand All @@ -29,7 +28,7 @@ export const Simple = () => (
);

export const Variants = () => (
<div className="flex flex-col gap-12">
<div className="flex flex-col gap-12 bg-panel p-40">
<Tabs variant="primary">
<TabList>
<Tab>Tab 1</Tab>
Expand All @@ -50,6 +49,16 @@ export const Variants = () => (
<TabPanel>This is content for secondary tab 2</TabPanel>
<TabPanel>This is content for secondary tab 3</TabPanel>
</Tabs>
<Tabs variant="tertiary">
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanel>This is content for secondary tab 1</TabPanel>
<TabPanel>This is content for secondary tab 2</TabPanel>
<TabPanel>This is content for secondary tab 3</TabPanel>
</Tabs>
</div>
);

Expand Down
2 changes: 1 addition & 1 deletion src/layout/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export interface TabsProps extends PropsWithChildren {
/**
* The variant of the tabs.
*/
variant?: 'primary' | 'secondary';
variant?: 'primary' | 'secondary' | 'tertiary';

/**
* The size of the tabs.
Expand Down
32 changes: 29 additions & 3 deletions src/layout/Tabs/TabsTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ export interface TabsTheme {
base: string;
indicator: {
base: string;
variant: {
line: string;
card: string;
};
size: {
small: string;
medium: string;
Expand All @@ -13,17 +17,26 @@ export interface TabsTheme {
divider: string;
variant: {
primary: {
base: string;
divider: string;
};
secondary: {
base: string;
divider: string;
};
tertiary: {
base: string;
};
};
tab: {
base: string;
button: string;
selected: string;
disabled: string;
variant: {
text: string;
button: string;
};
size: {
small: string;
medium: string;
Expand All @@ -39,7 +52,11 @@ const baseTheme: TabsTheme = {
list: {
base: 'flex text-center flex-wrap -mb-px',
indicator: {
base: 'bg-primary absolute bottom-0 left-0 right-0',
base: 'absolute bottom-0 left-0 right-0',
variant: {
line: 'bg-primary',
card: 'bg-gray-900 light:bg-gray-100'
},
size: {
small: 'h-0.5',
medium: 'h-0.5',
Expand All @@ -49,18 +66,27 @@ const baseTheme: TabsTheme = {
divider: 'w-full h-px border-0',
variant: {
primary: {
base: '',
divider: 'bg-surface'
},
secondary: {
base: '',
divider: 'bg-gradient-to-r from-transparent to-transparent via-primary'
},
tertiary: {
base: 'border border-solid border-gray-700 rounded light:border-gray-200'
}
},
tab: {
base: 'relative',
button:
'transition-colors text-panel-secondary-content font-bold hover:text-primary-hover',
button: 'transition-colors text-panel-secondary-content',
selected: 'text-panel-content',
disabled: 'cursor-not-allowed opacity-40',
variant: {
text: 'font-bold hover:text-primary-hover',
button:
'font-medium hover:bg-primary-hover hover:text-black light:hover:text-white'
},
size: {
small: 'pb-1 text-sm',
medium: 'pb-2 text-lg',
Expand Down
Loading