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

[Tooltip] Component and Hook #264

Merged
merged 64 commits into from
May 29, 2024
Merged

[Tooltip] Component and Hook #264

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
64 commits
Select commit Hold shift + click to select a range
e9af242
Fix lockfile
atomiks Apr 24, 2024
66b64a3
[Tooltip] Component and Hook
atomiks Apr 3, 2024
775bc92
Docs
atomiks May 1, 2024
df2b267
Update APIs to trigger
atomiks May 3, 2024
4e3212c
Fix lockfile
atomiks May 3, 2024
5d0f55f
Sync style with Popover
atomiks May 3, 2024
20bc7ee
Rewrite docs to new template
atomiks May 6, 2024
389b1ed
Fix wording
atomiks May 6, 2024
cf6bf0c
Wait for microtasks when rendering
atomiks May 7, 2024
32ad0b5
Feedback
atomiks May 7, 2024
d2bdfb2
Fix codegen
atomiks May 7, 2024
c365955
Rename Content to Popup
atomiks May 8, 2024
93fbc1a
Update docs
atomiks May 8, 2024
dcd4965
Docgen
atomiks May 8, 2024
4793dca
Rename contentEl to popupEl
atomiks May 8, 2024
50204cf
Import useEnhancedEffect from utils
atomiks May 8, 2024
5d56633
Refactor popup hook logic
atomiks May 9, 2024
2eb69ff
Codegen
atomiks May 9, 2024
a2555bb
Update TransitionStatus
atomiks May 9, 2024
aeffa72
Refactor use Root API
atomiks May 13, 2024
8b4d70f
Refactor to use Root API
atomiks May 13, 2024
d112305
Pass delay params
atomiks May 13, 2024
d2bc9ec
Refactor Arrow API
atomiks May 15, 2024
b25e9b8
Refactor animation API
atomiks May 21, 2024
e35a7e8
Refactor animations
atomiks May 22, 2024
51ea374
Unmount animation hook
atomiks May 22, 2024
6463842
Add animated prop
atomiks May 23, 2024
cd88970
Remove useAnimationUnmount directory
atomiks May 23, 2024
6109db4
Update tests
atomiks May 23, 2024
3b4dc5e
Pass animated logic, codegen
atomiks May 23, 2024
3d28ca4
Adopt useComponentRenderer
atomiks May 23, 2024
adf35bc
Use non-breaking space
atomiks May 23, 2024
36d8d3b
Add TooltipPopupRoot component
atomiks May 23, 2024
6050a25
Update
atomiks May 23, 2024
1b4d3ed
Use main APIs
atomiks May 23, 2024
debef29
Fix lockfile
atomiks May 23, 2024
ae9ae10
Fix Group delay
atomiks May 23, 2024
3640f34
Codegen
atomiks May 23, 2024
d6a6b38
Feedback
atomiks May 24, 2024
2861154
Update useTransitionStatus
atomiks May 24, 2024
7b1925a
Omit hook params from component
atomiks May 24, 2024
ae6820f
Split types
atomiks May 24, 2024
af22269
Improve JSDocs
atomiks May 24, 2024
c14b7cd
Remove propGetter
atomiks May 24, 2024
8e47fdd
Update JSDocs
atomiks May 24, 2024
2f59183
Refactor animations hooks
atomiks May 27, 2024
16d8fef
Remove async
atomiks May 27, 2024
918e2eb
Update docs
atomiks May 27, 2024
5a5e47e
Update corejs
atomiks May 27, 2024
a229163
Allow Tooltip.Root to override Tooltip.Provider delays
atomiks May 27, 2024
62a2520
Refactor to TooltipPositioner API
atomiks May 28, 2024
9f6b247
Fix tests
atomiks May 28, 2024
a053fbc
Fix tests
atomiks May 28, 2024
9e4a5d7
Fix italic demo
atomiks May 28, 2024
61c658e
Update JSDocs
atomiks May 28, 2024
73c23bc
Update docs
atomiks May 28, 2024
bf5f50f
Fix prop-types and docs
atomiks May 28, 2024
9c66bd1
Update docs
atomiks May 28, 2024
1a7588d
Update docs
atomiks May 28, 2024
e9511b9
Update docs
atomiks May 28, 2024
fe09b08
Apply aria-hidden to arrow
atomiks May 28, 2024
74e8d17
Update docs
atomiks May 28, 2024
a1d9bcf
Improve docs consistency
atomiks May 28, 2024
e31058a
Refactor
atomiks May 28, 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
8 changes: 6 additions & 2 deletions docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,15 @@ export default function UnstyledTooltipDelayGroup() {
<Tooltip.Provider delay={1000} closeDelay={500}>
<Tooltip.Root>
<AnchorButton>Anchor A</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip A</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip A</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton>Anchor B</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip B</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip B</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</Tooltip.Provider>
</div>
Expand Down
8 changes: 6 additions & 2 deletions docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,15 @@ export default function UnstyledTooltipDelayGroup() {
<Tooltip.Provider delay={1000} closeDelay={500}>
atomiks marked this conversation as resolved.
Show resolved Hide resolved
<Tooltip.Root>
<AnchorButton>Anchor A</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip A</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip A</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton>Anchor B</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip B</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip B</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</Tooltip.Provider>
</div>
Expand Down
8 changes: 6 additions & 2 deletions docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<Tooltip.Provider delay={1000} closeDelay={500}>
<Tooltip.Root>
<AnchorButton>Anchor A</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip A</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip A</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton>Anchor B</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip B</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip B</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</Tooltip.Provider>
4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default function UnstyledTooltipFollowCursor() {
<div style={{ display: 'flex', gap: 12 }}>
<Tooltip.Root followCursorAxis="both">
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default function UnstyledTooltipFollowCursor() {
<div style={{ display: 'flex', gap: 12 }}>
<Tooltip.Root followCursorAxis="both">
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<Tooltip.Root followCursorAxis="both">
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
50 changes: 43 additions & 7 deletions docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,37 @@ import { styled } from '@mui/system';

export default function UnstyledTooltipIntroduction() {
return (
<Tooltip.Root>
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={7}>
Tooltip
<TooltipArrow />
</TooltipPopup>
</Tooltip.Root>
<div style={{ display: 'flex', gap: 10 }}>
<Tooltip.Provider closeDelay={100}>
<Tooltip.Root>
<AnchorButton aria-label="bold">B</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Bold
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton aria-label="italic">I</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Italic
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton aria-label="underline">U</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Underline
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</Tooltip.Provider>
</div>
);
}

Expand Down Expand Up @@ -48,6 +72,18 @@ export const AnchorButton = styled(Tooltip.Trigger)`
&[data-state='open'] {
background: ${blue[800]};
}

&[aria-label='bold'] {
font-weight: bold;
}

&[aria-label='italics'] {
font-style: italic;
}

&[aria-label='underline'] {
text-decoration: underline;
}
`;

export const TooltipArrow = styled(Tooltip.Arrow)`
Expand Down
50 changes: 43 additions & 7 deletions docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,37 @@ import { styled } from '@mui/system';

export default function UnstyledTooltipIntroduction() {
return (
<Tooltip.Root>
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={7}>
Tooltip
<TooltipArrow />
</TooltipPopup>
</Tooltip.Root>
<div style={{ display: 'flex', gap: 10 }}>
<Tooltip.Provider closeDelay={100}>
<Tooltip.Root>
<AnchorButton aria-label="bold">B</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Bold
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton aria-label="italic">I</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Italic
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
<Tooltip.Root>
<AnchorButton aria-label="underline">U</AnchorButton>
<Tooltip.Positioner sideOffset={7}>
<TooltipPopup>
Underline
<TooltipArrow />
</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</Tooltip.Provider>
</div>
);
}

Expand Down Expand Up @@ -48,6 +72,18 @@ export const AnchorButton = styled(Tooltip.Trigger)`
&[data-state='open'] {
background: ${blue[800]};
}

&[aria-label='bold'] {
font-weight: bold;
}

&[aria-label='italics'] {
font-style: italic;
}

&[aria-label='underline'] {
text-decoration: underline;
}
`;

export const TooltipArrow = styled(Tooltip.Arrow)`
Expand Down
7 changes: 0 additions & 7 deletions docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx.preview
View file
Open in desktop

This file was deleted.

4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default function UnstyledTooltipTransition() {
<div style={{ display: 'flex', gap: 12 }}>
<Tooltip.Root>
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default function UnstyledTooltipTransition() {
<div style={{ display: 'flex', gap: 12 }}>
<Tooltip.Root>
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion docs/data/base/components/tooltip/UnstyledTooltipTransition.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<Tooltip.Root>
<AnchorButton>Anchor</AnchorButton>
<TooltipPopup sideOffset={5}>Tooltip</TooltipPopup>
<Tooltip.Positioner sideOffset={5}>
<TooltipPopup>Tooltip</TooltipPopup>
</Tooltip.Positioner>
</Tooltip.Root>
Loading