Skip to content

[Tabs] Add animation support for content #1346

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

Merged
benoitgrelard merged 6 commits into from
May 20, 2022
Merged

[Tabs] Add animation support for content #1346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f554d3b
Add presence to tabs
andy-hook Apr 27, 2022
0198e28
Versions
andy-hook Apr 27, 2022
46e1d53
Add deps
andy-hook Apr 27, 2022
14d94ca
Move story style dec
andy-hook Apr 27, 2022
1c7377b
Simplify animation prevention
andy-hook May 20, 2022
d3bf507
Story code style
andy-hook May 20, 2022
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
5 changes: 5 additions & 0 deletions .yarn/versions/9dea0877.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
releases:
"@radix-ui/react-tabs": minor

declined:
- primitives
1 change: 1 addition & 0 deletions packages/react/tabs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@radix-ui/react-context": "workspace:*",
"@radix-ui/react-direction": "workspace:*",
"@radix-ui/react-id": "workspace:*",
"@radix-ui/react-presence": "workspace:*",
"@radix-ui/react-primitive": "workspace:*",
"@radix-ui/react-roving-focus": "workspace:*",
"@radix-ui/react-use-controllable-state": "workspace:*"
Expand Down
113 changes: 109 additions & 4 deletions packages/react/tabs/src/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { DirectionProvider } from '@radix-ui/react-direction';
import { css } from '../../../../stitches.config';
import { css, keyframes } from '../../../../stitches.config';
import * as Tabs from '@radix-ui/react-tabs';

export default { title: 'Components/Tabs' };
Expand Down Expand Up @@ -68,6 +68,70 @@ export const Styled = () => (
</>
);

export const Animated = () => (
<>
<h1>Horizontal (automatic activation)</h1>
<Tabs.Root defaultValue="tab1" className={rootClass()}>
<Tabs.List aria-label="tabs example" className={listClass()}>
<Tabs.Trigger value="tab1" className={triggerClass()}>
Tab 1
</Tabs.Trigger>
<Tabs.Trigger value="tab2" disabled className={triggerClass()}>
Tab 2
</Tabs.Trigger>
<Tabs.Trigger value="tab3" className={triggerClass()}>
Tab 3
</Tabs.Trigger>
</Tabs.List>

<Tabs.Content value="tab1" className={animatedContentClass()}>
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
</Tabs.Content>
<Tabs.Content value="tab2" className={animatedContentClass()}>
You'll never find me!
</Tabs.Content>
<Tabs.Content value="tab3" className={animatedContentClass()}>
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
</Tabs.Content>
</Tabs.Root>

<h1>Vertical (manual activation)</h1>
<Tabs.Root
defaultValue="tab1"
className={rootClass()}
orientation="vertical"
activationMode="manual"
>
<Tabs.List aria-label="tabs example" className={listClass()}>
<Tabs.Trigger value="tab1" className={triggerClass()}>
Tab 1
</Tabs.Trigger>
<Tabs.Trigger value="tab2" disabled className={triggerClass()}>
Tab 2
</Tabs.Trigger>
<Tabs.Trigger value="tab3" className={triggerClass()}>
Tab 3
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="tab1" className={animatedContentClass()}>
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
</Tabs.Content>
<Tabs.Content value="tab2" className={animatedContentClass()}>
You'll never find me!
</Tabs.Content>
<Tabs.Content value="tab3" className={animatedContentClass()}>
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
</Tabs.Content>
</Tabs.Root>
</>
);

export const Chromatic = () => (
<>
<h1>Uncontrolled</h1>
Expand Down Expand Up @@ -213,6 +277,38 @@ export const Chromatic = () => (
</Tabs.Root>
</DirectionProvider>

<h1>Animated</h1>
<p>Should not animate on initial mount</p>
<Tabs.Root value="tab1" className={rootClass()}>
<Tabs.List aria-label="tabs example" className={listClass()}>
<Tabs.Trigger value="tab1" className={triggerClass()}>
Tab 1
</Tabs.Trigger>
<Tabs.Trigger value="tab2" disabled className={triggerClass()}>
Tab 2
</Tabs.Trigger>
<Tabs.Trigger value="tab3" className={triggerClass()}>
Tab 3
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content
value="tab1"
className={animatedContentClass()}
style={{ animationDuration: '3000ms' }}
>
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
</Tabs.Content>
<Tabs.Content value="tab2" className={animatedContentClass()}>
You'll never find me!
</Tabs.Content>
<Tabs.Content value="tab3" className={animatedContentClass()}>
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
</Tabs.Content>
</Tabs.Root>

<h1>State attributes</h1>
<Tabs.Root defaultValue="tab3" className={rootAttrClass()}>
<Tabs.List aria-label="tabs example" className={listAttrClass()}>
Expand Down Expand Up @@ -253,6 +349,7 @@ const RECOMMENDED_CSS__TABS__ROOT = {

const rootClass = css({
...RECOMMENDED_CSS__TABS__ROOT,
border: '1px solid #eee',
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
maxWidth: '20rem',
Expand Down Expand Up @@ -312,17 +409,25 @@ const RECOMMENDED_CSS__TABS__CONTENT = {

const contentClass = css({
...RECOMMENDED_CSS__TABS__CONTENT,

padding: '1em',
border: '1px solid #eee',
fontWeight: '300',
fontSize: '0.85em',
lineHeight: '1.65',

'&[data-orientation="horizontal"]': { borderTop: 'none' },
'&[data-orientation="vertical"]': { borderLeft: 'none' },
});

const show = keyframes({
from: { opacity: 0, transform: 'translateY(10px)' },
to: { opacity: 1, transform: 'translateY(0px)' },
});

const animatedContentClass = css(contentClass, {
'&[data-state="active"]': {
animation: `${show} 400ms ease`,
},
});

const styles = {
backgroundColor: 'rgba(0, 0, 255, 0.3)',
border: '2px solid blue',
Expand Down
48 changes: 32 additions & 16 deletions packages/react/tabs/src/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import * as React from 'react';
import { composeEventHandlers } from '@radix-ui/primitive';
import { createContextScope } from '@radix-ui/react-context';
import { useControllableState } from '@radix-ui/react-use-controllable-state';
import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
import { Presence } from '@radix-ui/react-presence';
import { Primitive } from '@radix-ui/react-primitive';
import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
import { useId } from '@radix-ui/react-id';
import { useDirection } from '@radix-ui/react-direction';
import { useControllableState } from '@radix-ui/react-use-controllable-state';
import { useId } from '@radix-ui/react-id';

import type * as Radix from '@radix-ui/react-primitive';
import type { Scope } from '@radix-ui/react-context';
Expand Down Expand Up @@ -225,20 +226,35 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
const triggerId = makeTriggerId(context.baseId, value);
const contentId = makeContentId(context.baseId, value);
const isSelected = value === context.value;
const isMountAnimationPreventedRef = React.useRef(isSelected);

React.useEffect(() => {
const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));
return () => cancelAnimationFrame(rAF);
}, []);

return (
<Primitive.div
data-state={isSelected ? 'active' : 'inactive'}
data-orientation={context.orientation}
role="tabpanel"
aria-labelledby={triggerId}
hidden={!isSelected}
id={contentId}
tabIndex={0}
{...contentProps}
ref={forwardedRef}
>
{isSelected && children}
</Primitive.div>
<Presence present={isSelected}>
{({ present }) => (
<Primitive.div
data-state={isSelected ? 'active' : 'inactive'}
data-orientation={context.orientation}
role="tabpanel"
aria-labelledby={triggerId}
hidden={!present}
id={contentId}
tabIndex={0}
{...contentProps}
ref={forwardedRef}
style={{
...props.style,
animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,
}}
>
{present && children}
</Primitive.div>
)}
</Presence>
);
}
);
Expand Down
1 change: 1 addition & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3692,6 +3692,7 @@ __metadata:
"@radix-ui/react-context": "workspace:*"
"@radix-ui/react-direction": "workspace:*"
"@radix-ui/react-id": "workspace:*"
"@radix-ui/react-presence": "workspace:*"
"@radix-ui/react-primitive": "workspace:*"
"@radix-ui/react-roving-focus": "workspace:*"
"@radix-ui/react-use-controllable-state": "workspace:*"
Expand Down