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

chore: Sample story to repro Tooltip not working when wrapping Tab component #833

Closed
wants to merge 3 commits into from
Closed

chore: Sample story to repro Tooltip not working when wrapping Tab component #833

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65ba250
chore: Sample story to repro Tooltip not working when wrapping Tab co…
engfragui Jul 26, 2024
5622d77
chore: Simplify story
engfragui Jul 26, 2024
e2b56f8
Update src/tabs/tabs.stories.mdx
engfragui Jul 26, 2024
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
34 changes: 34 additions & 0 deletions src/tabs/tabs.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Tabs, TabList, Tab, TabPanel, TabAwareSlot } from './tabs'
import { Box } from '../box'
import { Text } from '../text'
import { Columns, Column } from '../columns'
import { Tooltip } from '../tooltip'

<Meta
title="Design system/Tabs"
Expand Down Expand Up @@ -291,3 +292,36 @@ Note that when combined with the `renderMode="active"` prop, the entire tabpanel
</Tabs>
</Story>
</Canvas>

### Wrapped by Tooltip component

This is just a sample story to show you that Tooltip outside Tab does not work, but Tooltip inside Tab works.

<Canvas withToolbar>
<Story parameters={{ docs: { source: { type: 'code' } } }} name="Wrapped by Tooltip component">
<Tabs>
<TabList aria-label="Wrapped by Tooltip component">
<Tooltip content="Tooltip outside Tab">
<Tab id="tab1">
<Box>Tab 1</Box>
</Tab>
</Tooltip>
<Tab id="tab2">
<Tooltip content="Tooltip inside Tab">
<Box>Tab 2</Box>
</Tooltip>
</Tab>
</TabList>
<TabPanel id="tab1">
<Box paddingX="small" paddingY="xlarge">
<Text>Content of tab 1</Text>
</Box>
</TabPanel>
<TabPanel id="tab2">
<Box paddingX="small" paddingY="xlarge">
<Text>Content of tab 2</Text>
</Box>
</TabPanel>
</Tabs>
</Story>
</Canvas>
Loading