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

Composite: add "With Tooltip" storybook example #65817

Merged
merged 6 commits into from
Oct 3, 2024
Merged

Composite: add "With Tooltip" storybook example #65817

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0e96bf0
Composite: add "With Tooltip" storybook example
ciampo Oct 2, 2024
b317648
Only use one way to compose Tooltip and Composite
ciampo Oct 2, 2024
9e31128
Simplify code (no need for custom render)
ciampo Oct 2, 2024
c0a6246
Rewrite Story JSDocs
ciampo Oct 2, 2024
ad4f4f3
Use third item as an example to render with a custom component
ciampo Oct 2, 2024
50466a8
Do not use Button for thir composite item
ciampo Oct 2, 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
42 changes: 42 additions & 0 deletions packages/components/src/composite/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useContext, useMemo } from '@wordpress/element';
*/
import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import { Composite } from '..';
import { Tooltip } from '../../tooltip';

const meta: Meta< typeof Composite > = {
title: 'Components/Composite',
Expand Down Expand Up @@ -353,3 +354,44 @@ const Fill = ( { children } ) => {
},
},
};

/**
* Combining the `Tooltip` and `Composite` component has a few caveats. And while there are a few ways to compose these two components, our recommendation is to render `Composite.Item` as a child of `Tooltip`.
*
* ```jsx
* // 🔴 Does not work
* <Composite.Item
* render={
* <Tooltip text="Tooltip">
* <button>Item</button>
* </Tooltip>
* }
* />
*
* // 🟢 Good
* <Tooltip text="Tooltip one">
* <Composite.Item>
* Item one
* </Composite.Item>
* </Tooltip>
* ```
*/
export const WithTooltips: StoryObj< typeof Composite > = {
...Default,
args: {
...Default.args,
children: (
<>
<Tooltip text="Tooltip one">
<Composite.Item>Item one</Composite.Item>
</Tooltip>
<Tooltip text="Tooltip two">
<Composite.Item>Item two</Composite.Item>
</Tooltip>
<Tooltip text="Tooltip three">
<Composite.Item>Item three</Composite.Item>
</Tooltip>
</>
),
},
};
Loading