Skip to content

Commit

Permalink
fix(TabGroup): address QA comments and designs (#1938)
Browse files Browse the repository at this point in the history 
- increase size of highlight bar
- round corners of tabs for interactive treatments
- add tests
  • Loading branch information
@booc0mtaco
booc0mtaco authored May 14, 2024
1 parent d96ab79 commit 48e92d4
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 518 deletions.
9 changes: 5 additions & 4 deletions src/components/TabGroup/TabGroup.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,8 @@
flex-shrink: 0;
position: relative;
overflow: hidden;
/* border-radius: 0.125rem; */
border-top-left-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
border-top-right-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);

&.eds-is-active {
font-weight: 500;
Expand Down Expand Up @@ -185,7 +186,7 @@
.tabs__item.eds-is-active & {
position: absolute;
bottom: 0;
height: 0.125rem;
height: 0.25rem;
width: 100%;

background-color: var(--eds-theme-color-text-utility-interactive-primary);
Expand All @@ -199,8 +200,8 @@
}

.tabs--has-divider & {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
Expand Down
283 changes: 0 additions & 283 deletions src/components/TabGroup/TabGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,289 +236,6 @@ export const WithTabIllustrations: StoryObj<Args> = {
},
};

const IconTab = ({ isActive, title }: { isActive: boolean; title: string }) => (
<div className="flex flex-col items-center">
<div className="fpo h-16 w-16"></div>
<Text className="pt-2" preset="caption-lg">{`${
isActive ? '●' : '◦'
} ${title}`}</Text>
</div>
);

/**
* If you require advanced control over the tab content, you can use a render prop and `Tab.Button` to
* handle the inputs for each tab. This should only be used sparingly.
*/
export const CustomTabGroup: StoryObj<Args> = {
decorators: [(Story) => <div className="p-8">{Story()}</div>],
parameters: {
docs: {
source: {
code: `
<TabGroup>
<TabGroup.Tab title="Tab Title 1">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 1
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
<TabGroup.Tab title="Tab Title 2">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 2
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
<TabGroup.Tab title="Tab Title 3">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 3
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
<TabGroup.Tab title="Tab Title 4">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 4
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
<TabGroup.Tab title="Tab Title 5">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 5
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
<TabGroup.Tab title="Tab Title 6">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab
icon={active ? 'person' : 'people'}
isActive={isActive}
title={title}
/>
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Tab 6
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
</TabGroup>
`,
},
},
},
args: {
children: (
<>
<TabGroup.Tab title="Tab Title 1">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 1
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>

<TabGroup.Tab title="Tab Title 2">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 2
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>

<TabGroup.Tab title="Tab Title 3">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 3
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>

<TabGroup.Tab title="Tab Title 4">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 4
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>

<TabGroup.Tab title="Tab Title 5">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 5
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>

<TabGroup.Tab title="Tab Title 6">
<TabGroup.Tab.Button>
{({ isActive, title }) => (
<IconTab isActive={isActive} title={title} />
)}
</TabGroup.Tab.Button>
<div className="max-w-xl">
<Heading as="h3" className="mb-6">
Tab 6
</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex{' '}
</Text>
</div>
</TabGroup.Tab>
</>
),
},
};

/**
* For Chromatic visual regression testing of the masks on both sides of the TabGroup. Currently does not work properly on local.
*/
Expand Down
Loading

0 comments on commit 48e92d4

Please sign in to comment.