Skip to content

Commit fcd8754

Browse files
author
chenyueban
committed
feat(Toast): New component Toast
1 parent 02d7e3f commit fcd8754

11 files changed

Lines changed: 253 additions & 9 deletions

File tree

‎packages/fluent-ui.com/src/components/docs/content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { StyledTitleA } from './content.styled'
1717

1818
interface TypographyComponentProps {
1919
id?: string
20-
children?: React.ReactNode
20+
children: React.ReactNode
2121
}
2222

2323
const H1 = (props: TypographyComponentProps): React.ReactElement => (

‎packages/fluent-ui.com/src/components/docs/nav.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -199,17 +199,20 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
199199
</Navigation>
200200
)
201201

202-
const isMobile = useMedia('xs')
203-
204202
React.useEffect((): void => {
205203
const activeElement = document.querySelector('.active-item')
206204
if (activeElement) {
207205
activeElement.scrollIntoView()
208206
if (rootRef.current) rootRef.current.scrollTop = 0
209207
}
210-
}, [drawerVisible, isMobile])
208+
}, [drawerVisible])
211209

212-
return isMobile ? mobileChild : pcChild
210+
return (
211+
<>
212+
{mobileChild}
213+
{pcChild}
214+
</>
215+
)
213216
}
214217

215218
export default Nav

‎packages/fluent-ui.com/src/docs/components/Progress/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Progress
33
components: Progress
4-
type: Progress
4+
type: Feedback
55
---
66

77
# Progress

‎packages/fluent-ui.com/src/docs/components/Spinner/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Spinner
33
components: Spinner
4-
type: Progress
4+
type: Feedback
55
---
66

77
# Spinner

‎packages/fluent-ui.com/src/docs/components/Toast/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Toast
3+
components: Toast
4+
type: Feedback
5+
---
6+
7+
# Toast
8+
9+
## Default
10+
11+
```jsx
12+
() => {
13+
const [visible, set] = React.useState(false)
14+
function handleChange() {
15+
set(v => !v)
16+
}
17+
return (
18+
<Box>
19+
<Button onClick={handleChange}>open</Button>
20+
<Toast
21+
visible={visible}
22+
actions={
23+
<IconButton onClick={handleChange}>
24+
<Icon.Cancel />
25+
</IconButton>
26+
}
27+
>
28+
message...
29+
</Toast>
30+
</Box>
31+
)
32+
}
33+
```
34+
35+
## Placement
36+
37+
```jsx
38+
() => {
39+
const [visible, setVisible] = React.useState(false)
40+
const [placement, setPlacement] = React.useState('top')
41+
function handleVisibleChange() {
42+
setVisible(v => !v)
43+
}
44+
function handlePlacementChange(p) {
45+
setPlacement(p)
46+
}
47+
return (
48+
<>
49+
<Box>
50+
<Button onClick={handleVisibleChange}>open</Button>
51+
</Box>
52+
<Radio value="top-start" checked={placement === 'top-start'} onChange={handlePlacementChange}>
53+
top-start
54+
</Radio>
55+
<Radio value="top" checked={placement === 'top'} onChange={handlePlacementChange}>
56+
top
57+
</Radio>
58+
<Radio value="top-end" checked={placement === 'top-end'} onChange={handlePlacementChange}>
59+
top-end
60+
</Radio>
61+
<Radio
62+
value="bottom-start"
63+
checked={placement === 'bottom-start'}
64+
onChange={handlePlacementChange}
65+
>
66+
bottom-start
67+
</Radio>
68+
<Radio value="bottom" checked={placement === 'bottom'} onChange={handlePlacementChange}>
69+
bottom
70+
</Radio>
71+
<Radio
72+
value="bottom-end"
73+
checked={placement === 'bottom-end'}
74+
onChange={handlePlacementChange}
75+
>
76+
bottom-end
77+
</Radio>
78+
<Radio value="center" checked={placement === 'center'} onChange={handlePlacementChange}>
79+
center
80+
</Radio>
81+
82+
<Toast
83+
visible={visible}
84+
actions={
85+
<IconButton onClick={handleVisibleChange}>
86+
<Icon.Cancel />
87+
</IconButton>
88+
}
89+
placement={placement}
90+
>
91+
message...
92+
</Toast>
93+
</>
94+
)
95+
}
96+
```

‎packages/fluent-ui.com/src/docs/components/Toast/api.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Toast
3+
components: Toast
4+
api: true
5+
---
6+
7+
## API
8+
9+
```
10+
import Toast from '@fluent-ui/core/Toast'
11+
// or
12+
import { Toast } from '@fluent-ui/core'
13+
```
14+
15+
### Props
16+
17+
| Name | Type | Default | Description |
18+
| --- | --- | --- | --- |
19+
| children | React.ReactChild | | The content of the `Toast`. |
20+
| visible | boolean | false | If `true`, the `Toast` is shown. |
21+
| actions | React.ReactElement &or; React.ReactElement[] | | The action to display. |
22+
| placement | 'top-start' &or; 'top' &or; 'top-end' &or; 'bottom-end' &or; 'bottom' &or; 'bottom-start' &or; 'center' | 'top' | The placement of the `Toast`. |

‎packages/fluent-ui/src/Toast/Toast.styled.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { styled, th, variant, css } from '../styles/styled'
2+
import Box from '../Box'
3+
import { Placement } from './Toast.type'
4+
5+
const baseSpace = 24
6+
const placement = variant({
7+
prop: 'placement',
8+
default: 'top',
9+
variants: {
10+
'top-start': css`
11+
top: ${baseSpace}px;
12+
left: ${baseSpace}px;
13+
right: auto;
14+
`,
15+
top: css`
16+
top: ${baseSpace}px;
17+
left: 50%;
18+
right: auto;
19+
transform: translateX(-50%);
20+
`,
21+
'top-end': css`
22+
top: ${baseSpace}px;
23+
left: auto;
24+
right: ${baseSpace}px;
25+
`,
26+
'bottom-start': css`
27+
bottom: ${baseSpace}px;
28+
left: ${baseSpace}px;
29+
right: auto;
30+
`,
31+
bottom: css`
32+
bottom: ${baseSpace}px;
33+
left: 50%;
34+
right: auto;
35+
transform: translateX(-50%);
36+
`,
37+
'bottom-end': css`
38+
bottom: ${baseSpace}px;
39+
left: auto;
40+
right: ${baseSpace}px;
41+
`,
42+
center: css`
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
`
47+
}
48+
})
49+
50+
export const StyledToast = styled(Box)<{ placement: Placement }>`
51+
position: fixed;
52+
z-index: 1001;
53+
background-color: ${th.color('white.default')};
54+
border-radius: 2px;
55+
padding: 6px 16px;
56+
display: flex;
57+
align-items: center;
58+
justify-content: space-between;
59+
60+
${placement}
61+
`
62+
63+
export const StyledToastContainer = styled.div`
64+
padding: 8px 0;
65+
line-height: 1.5;
66+
flex: 1;
67+
`
68+
69+
export const StyledToastActions = styled.div``

‎packages/fluent-ui/src/Toast/Toast.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react'
2+
import { StyledToast, StyledToastContainer, StyledToastActions } from './Toast.styled'
3+
import Portal from '../Portal'
4+
import Transition from '../Transition'
5+
import { ToastProps } from './Toast.type'
6+
7+
const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
8+
(
9+
{ children, visible = false, actions, placement = 'top', ...rest }: ToastProps,
10+
ref
11+
): React.ReactElement => {
12+
return (
13+
<Portal>
14+
<Transition visible={visible} wrapper={false} mountOnEnter unmountOnExit>
15+
<StyledToast
16+
ref={ref}
17+
boxShadow="3"
18+
width={{ xs: '288px', sm: 'auto' }}
19+
minWidth={{ xs: '288px', sm: '340px' }}
20+
placement={placement}
21+
{...rest}
22+
>
23+
<StyledToastContainer>{children}</StyledToastContainer>
24+
<StyledToastActions>{actions}</StyledToastActions>
25+
</StyledToast>
26+
</Transition>
27+
</Portal>
28+
)
29+
}
30+
)
31+
32+
Toast.displayName = 'FToast'
33+
34+
export default Toast

‎packages/fluent-ui/src/Toast/Toast.type.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from 'react'
2+
3+
export type Placement =
4+
| 'top-start'
5+
| 'top'
6+
| 'top-end'
7+
| 'bottom-end'
8+
| 'bottom'
9+
| 'bottom-start'
10+
| 'center'
11+
12+
export interface ToastProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
13+
children: React.ReactChild
14+
visible: boolean
15+
actions?: React.ReactElement | React.ReactElement[]
16+
placement?: Placement
17+
}

‎packages/fluent-ui/src/Toast/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './Toast'
2+
export * from './Toast.type'

0 commit comments

Comments
 (0)