Skip to content

Commit

Permalink
fix(TabGroup): address QA comments and designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@booc0mtaco
booc0mtaco committed May 14, 2024
1 parent d96ab79 commit bbf20e6
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 517 deletions.
7 changes: 4 additions & 3 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 @@ -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 bbf20e6

Please sign in to comment.