Skip to content

Commit ed78d21

Browse files
matyasfmatyasf
committed
refactor(ui-tray,ui-motion,ui-dialog): update animation-related documentation
1 parent 5184d8c commit ed78d21

File tree

3 files changed

+106
-134
lines changed

3 files changed

+106
-134
lines changed

‎packages/ui-dialog/src/Dialog/props.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ type DialogOwnProps = {
4646
*/
4747
label?: string
4848
/**
49-
* Whether or not the `<Dialog />` is open
49+
* Controls whether the `<Dialog />` is open. If this prop is changed, the focus region will be updated
50+
* a bit later with `requestAnimationFrame()` to ensure that the elements in the `Dialog` are in the focus region.
5051
*/
5152
open?: boolean
5253
/**

‎packages/ui-motion/src/Transition/README.md‎

Lines changed: 103 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,43 @@
22
describes: Transition
33
---
44

5-
The `Transition` wrapper helps you easily transition elements in and out of
6-
your UI. The component defaults to the `fade` opacity transition.
5+
The `Transition` wrapper helps you easily transition elements in and out of your UI. The component defaults to the `fade` opacity transition.
6+
7+
> This component uses `setTimeout()` to fire events when the animations end (the duration is set in the theme).
78
89
```js
910
---
1011
type: example
1112
---
12-
class Example extends React.Component {
13-
constructor (props) {
14-
super(props)
15-
this.state = {
16-
in: true
17-
}
18-
}
13+
const Example = () => {
14+
const [isIn, setIsIn] = useState(true)
1915

20-
handleButtonClick = () => {
21-
this.setState((state) => {
22-
return {
23-
in: !state.in
24-
}
25-
})
26-
};
16+
const handleButtonClick = () => {
17+
setIsIn((prevIsIn) => !prevIsIn)
18+
}
2719

28-
render () {
29-
return (
20+
return (
21+
<div>
3022
<div>
31-
<div>
32-
<Button margin="small 0" size="small" onClick={this.handleButtonClick}>
33-
<div aria-live="polite">Fade {this.state.in ? 'Out' : 'In'}</div>
34-
</Button>
35-
</div>
36-
<Transition
37-
transitionOnMount
38-
in={this.state.in}
39-
type="fade"
40-
>
41-
<Avatar name="Fade" />
42-
</Transition>
23+
<Button margin="small 0" size="small" onClick={handleButtonClick}>
24+
<div aria-live="polite">Fade {isIn ? 'Out' : 'In'}</div>
25+
</Button>
4326
</div>
44-
)
45-
}
27+
<Transition
28+
onEnter={()=>console.log('onEnter')}
29+
onEntered={()=>console.log('onEntered')}
30+
onEntering={()=>console.log('onEntering')}
31+
onExit={()=>console.log('onExit')}
32+
onExited={()=>console.log('onExited')}
33+
onExiting={()=>console.log('onExiting')}
34+
onTransition={(to, from)=>console.log('onTransition', to, from)}
35+
in={isIn}
36+
type="fade"
37+
>
38+
<Avatar name="Fade" />
39+
</Transition>
40+
</div>
41+
)
4642
}
4743

4844
render(<Example />)
@@ -54,41 +50,30 @@ render(<Example />)
5450
---
5551
type: example
5652
---
57-
class Example extends React.Component {
58-
constructor (props) {
59-
super(props)
60-
this.state = {
61-
in: true
62-
}
63-
}
53+
const Example = () => {
54+
const [isIn, setIsIn] = useState(true)
6455

65-
handleButtonClick = () => {
66-
this.setState((state) => {
67-
return {
68-
in: !state.in
69-
}
70-
})
71-
};
56+
const handleButtonClick = () => {
57+
setIsIn((prevIsIn) => !prevIsIn)
58+
}
7259

73-
render () {
74-
return (
60+
return (
61+
<div>
7562
<div>
76-
<div>
77-
<Button margin="small 0" size="small" onClick={this.handleButtonClick}>
78-
<div aria-live="polite">{this.state.in ? 'Collapse' : 'Expand'}</div>
79-
</Button>
80-
</div>
81-
<Transition
82-
transitionOnMount
83-
unmountOnExit
84-
in={this.state.in}
85-
type="scale"
86-
>
87-
<Avatar name="Collapse" />
88-
</Transition>
63+
<Button margin="small 0" size="small" onClick={handleButtonClick}>
64+
<div aria-live="polite">{isIn ? 'Collapse' : 'Expand'}</div>
65+
</Button>
8966
</div>
90-
)
91-
}
67+
<Transition
68+
transitionOnMount
69+
unmountOnExit
70+
in={isIn}
71+
type="scale"
72+
>
73+
<Avatar name="Collapse" />
74+
</Transition>
75+
</div>
76+
)
9277
}
9378

9479
render(<Example />)
@@ -102,87 +87,73 @@ internationalized for right to left (rtl) languages. The following example uses
10287
---
10388
type: example
10489
---
105-
class Example extends React.Component {
106-
107-
static contextType = TextDirectionContext
90+
const Example = () => {
91+
const textDirection = useContext(TextDirectionContext)
92+
const [direction, setDirection] = useState('left')
93+
const [isIn, setIsIn] = useState(true)
94+
95+
const handleDirectionChange = (e, value) => {
96+
setDirection(value)
97+
setIsIn(true)
98+
}
10899

109-
constructor (props) {
110-
super(props)
111-
this.state = {
112-
direction: 'left',
113-
in: true
114-
}
100+
const handleButtonClick = () => {
101+
setIsIn((prevIsIn) => !prevIsIn)
115102
}
116103

117-
handleDirectionChange = (e, value) => {
118-
this.setState({
119-
direction: value,
120-
in: true
121-
})
122-
};
123-
124-
handleButtonClick = () => {
125-
this.setState((state) => {
126-
return {
127-
in: !state.in
128-
}
129-
})
130-
};
131-
132-
mirrorDirection (direction) {
104+
const mirrorDirection = (direction) => {
133105
const mirror = {
134106
left: 'right',
135107
right: 'left',
136108
up: 'up',
137109
down: 'down'
138110
}
139111
return mirror[direction]
140-
};
141-
142-
render () {
143-
const rtl = this.context === 'rtl'
144-
const direction = rtl ? this.mirrorDirection(this.state.direction) : this.state.direction
145-
const directionVariants = [
146-
{value: 'left', label: 'Start'},
147-
{value: 'right', label: 'End'},
148-
{value: 'down', label: 'Down'},
149-
{value: 'up', label: 'Up'}
150-
]
151-
return (
112+
}
113+
114+
const rtl = textDirection === 'rtl'
115+
const finalDirection = rtl ? mirrorDirection(direction) : direction
116+
const directionVariants = [
117+
{value: 'left', label: 'Start'},
118+
{value: 'right', label: 'End'},
119+
{value: 'down', label: 'Down'},
120+
{value: 'up', label: 'Up'}
121+
]
122+
123+
return (
124+
<div>
152125
<div>
153-
<div>
154-
<RadioInputGroup
155-
onChange={this.handleDirectionChange}
156-
name="slideExample"
157-
description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
158-
value={direction}
159-
variant="toggle"
160-
>
161-
{directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
162-
</RadioInputGroup>
163-
<Button size="small" margin="medium none small" onClick={this.handleButtonClick}>
164-
<div aria-live="polite">Slide {this.state.in ? 'Out' : 'In'}</div>
165-
</Button>
166-
</div>
167-
<div style={{
168-
position: 'relative',
169-
overflow: 'hidden',
170-
height: '15rem',
171-
display: 'flex',
172-
justifyContent: (this.state.direction === 'right') ? 'flex-end' : 'flex-start'
173-
}}>
174-
<Transition
175-
transitionOnMount
176-
unmountOnExit
177-
in={this.state.in}
178-
type={`slide-${direction}`}
179-
>
180-
<Avatar name="Slide" />
181-
</Transition>
182-
</div>
126+
<RadioInputGroup
127+
onChange={handleDirectionChange}
128+
name="slideExample"
129+
description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
130+
value={finalDirection}
131+
variant="toggle"
132+
>
133+
{directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
134+
</RadioInputGroup>
135+
<Button size="small" margin="medium none small" onClick={handleButtonClick}>
136+
<div aria-live="polite">Slide {isIn ? 'Out' : 'In'}</div>
137+
</Button>
183138
</div>
184-
)
185-
}
139+
<div style={{
140+
position: 'relative',
141+
overflow: 'hidden',
142+
height: '15rem',
143+
display: 'flex',
144+
justifyContent: (direction === 'right') ? 'flex-end' : 'flex-start'
145+
}}>
146+
<Transition
147+
transitionOnMount
148+
unmountOnExit
149+
in={isIn}
150+
type={`slide-${finalDirection}`}
151+
>
152+
<Avatar name="Slide" />
153+
</Transition>
154+
</div>
155+
</div>
156+
)
186157
}
187158

188159
render(<Example />)

‎packages/ui-tray/src/Tray/props.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ type TrayOwnProps = {
4747
*/
4848
placement?: 'top' | 'bottom' | 'start' | 'end' | 'center'
4949
/**
50-
* Whether or not the `<Tray />` is open
50+
* Whether the `<Tray />` is open or not
5151
*/
5252
open?: boolean
5353
/**

0 commit comments

Comments
 (0)