Skip to content

Commit 4043b0e

Browse files
mnajdovamnajdova
authored
[docs] Fix CI build (mui#34589)
1 parent 389c837 commit 4043b0e

File tree

3 files changed

+284
-6
lines changed

3 files changed

+284
-6
lines changed

‎docs/data/base/components/snackbar/snackbar-pt.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
product: base
3+
title: Unstyled React Snackbar component and hook
4+
components: SnackbarUnstyled
5+
githubLabel: 'component: snackbar'
6+
---
7+
8+
# Unstyled snackbar
9+
10+
<p class="description">The SnackbarUnstyled component informs users that an action has been or will be performed by the app.</p>
11+
12+
## Introduction
13+
14+
A snackbar provides users with a brief, temporary message about app processes without interrupting their activity or experience.
15+
16+
The `SnackbarUnstyled` component is built to appear on-screen to inform users about an action that the app is taking.
17+
18+
{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
19+
20+
## Component
21+
22+
### Usage
23+
24+
After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
25+
26+
```jsx
27+
import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
28+
29+
export default function MyApp() {
30+
return <SnackbarUnstyled>{/* snackbar text */}</SnackbarUnstyled>;
31+
}
32+
```
33+
34+
### Basics
35+
36+
`SnackbarUnstyled` doesn't impose any restrictions on its implementation—it's up to you to design it so that it doesn't interrupt the user experience, and disappears after a set amount of time without requiring the user to take action.
37+
38+
Use the `autoHideDuration` prop to set the time (in milliseconds) that the snackbar remains on the screen.
39+
40+
:::info
41+
You may want to implement `SnackbarUnstyled` with [`ClickAwayListener`](/base/react-click-away-listener/), so that the user can choose to dismiss the snackbar before its time is up by clicking anywhere outside of it.
42+
But this behavior is optional for a snackbar.
43+
:::
44+
45+
The following demo illustrates the basic usage of `SnackbarUnstyled`.
46+
Click **Open snackbar** to see how it behaves:
47+
48+
{{"demo": "UnstyledSnackbar.js", "defaultCodeOpen": false}}
49+
50+
### Anatomy
51+
52+
The `SnackbarUnstyled` component is composed of a single root `<div>` slot with no interior slots:
53+
54+
```html
55+
<div role="presentation" className="BaseSnackbar-root">snackbar content</div>
56+
```
57+
58+
### Slot props
59+
60+
:::info
61+
The following props are available on all non-utility Base components.
62+
See [Usage](/base/getting-started/usage/) for full details.
63+
:::
64+
65+
Use the `component` prop to override the root slot with a custom element:
66+
67+
```jsx
68+
<SnackbarUnstyled component="span" />
69+
```
70+
71+
Use the `components` prop to override any interior slots in addition to the root:
72+
73+
```jsx
74+
<SnackbarUnstyled components={{ Root: 'span' }} />
75+
```
76+
77+
:::warning
78+
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
79+
:::
80+
81+
Use the `componentsProps` prop to pass custom props to internal slots.
82+
The following code snippet applies a CSS class called `my-snackbar` to the root slot:
83+
84+
```jsx
85+
<SnackbarUnstyled componentsProps={{ root: { className: 'my-snackbar' } }} />
86+
```
87+
88+
:::warning
89+
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
90+
:::
91+
92+
## Hook
93+
94+
```js
95+
import { useSnackbar } from '@mui/base/SnackbarUnstyled';
96+
```
97+
98+
The `useSnackbar` hook lets you apply the functionality of `SnackbarUnstyled` to a fully custom component.
99+
100+
It returns props to be placed on the custom component, along with fields representing the component's internal state.
101+
102+
Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
103+
104+
If you use a [`ClickAwayListener`](/base/react-click-away-listener/) to let the user close the snackbar by clicking outside of it, make sure to pass the `onClickAway` handler returned by this hook to the `ClickAwayListener`.
105+
106+
Pass the `open` state to the hook and use it to show and hide the snackbar.
107+
108+
The demo below shows how to build a fully custom component with the `useSnackbar` hook that also incorporates the `ClickAwayListener` component:
109+
110+
{{"demo": "UseSnackbar.js", "defaultCodeOpen": false}}
111+
112+
:::info
113+
Hooks give you the most room for customization, but require more work to implement.
114+
With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
115+
116+
You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
117+
:::
118+
119+
## Customization
120+
121+
:::info
122+
The following features can be used with both components and hooks.
123+
For the sake of simplicity, demos and code snippets primarily feature components.
124+
:::
125+
126+
### Transitions
127+
128+
You can animate the open and close states of the snackbar with a render prop child and a transition component, as long as the component meets these conditions:
129+
130+
- Is a direct child descendent of the snackbar
131+
- Has an `in` prop—this corresponds to the open state
132+
- Passes the `exited` prop to `SnackbarUnstyled`
133+
- Calls the `onEnter` callback prop when the enter transition starts—sets `exited` to false
134+
- Calls the `onExited` callback prop when the exit transition is completed—sets `exited` to true
135+
136+
These two callbacks allow the snackbar to unmount the child content when closed and keep it fully transitioned.
137+
This is only applicable if you are using transition components using [react-transition-group](https://github.com/reactjs/react-transition-group) library internally.
138+
139+
The demo below shows how to create a snackbar with custom transitions:
140+
141+
{{"demo": "TransitionComponentSnackbar.js", "defaultCodeOpen": false}}

‎docs/data/base/components/snackbar/snackbar-zh.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
product: base
3+
title: Unstyled React Snackbar component and hook
4+
components: SnackbarUnstyled
5+
githubLabel: 'component: snackbar'
6+
---
7+
8+
# Unstyled snackbar
9+
10+
<p class="description">The SnackbarUnstyled component informs users that an action has been or will be performed by the app.</p>
11+
12+
## Introduction
13+
14+
A snackbar provides users with a brief, temporary message about app processes without interrupting their activity or experience.
15+
16+
The `SnackbarUnstyled` component is built to appear on-screen to inform users about an action that the app is taking.
17+
18+
{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
19+
20+
## Component
21+
22+
### Usage
23+
24+
After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements:
25+
26+
```jsx
27+
import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
28+
29+
export default function MyApp() {
30+
return <SnackbarUnstyled>{/* snackbar text */}</SnackbarUnstyled>;
31+
}
32+
```
33+
34+
### Basics
35+
36+
`SnackbarUnstyled` doesn't impose any restrictions on its implementation—it's up to you to design it so that it doesn't interrupt the user experience, and disappears after a set amount of time without requiring the user to take action.
37+
38+
Use the `autoHideDuration` prop to set the time (in milliseconds) that the snackbar remains on the screen.
39+
40+
:::info
41+
You may want to implement `SnackbarUnstyled` with [`ClickAwayListener`](/base/react-click-away-listener/), so that the user can choose to dismiss the snackbar before its time is up by clicking anywhere outside of it.
42+
But this behavior is optional for a snackbar.
43+
:::
44+
45+
The following demo illustrates the basic usage of `SnackbarUnstyled`.
46+
Click **Open snackbar** to see how it behaves:
47+
48+
{{"demo": "UnstyledSnackbar.js", "defaultCodeOpen": false}}
49+
50+
### Anatomy
51+
52+
The `SnackbarUnstyled` component is composed of a single root `<div>` slot with no interior slots:
53+
54+
```html
55+
<div role="presentation" className="BaseSnackbar-root">snackbar content</div>
56+
```
57+
58+
### Slot props
59+
60+
:::info
61+
The following props are available on all non-utility Base components.
62+
See [Usage](/base/getting-started/usage/) for full details.
63+
:::
64+
65+
Use the `component` prop to override the root slot with a custom element:
66+
67+
```jsx
68+
<SnackbarUnstyled component="span" />
69+
```
70+
71+
Use the `components` prop to override any interior slots in addition to the root:
72+
73+
```jsx
74+
<SnackbarUnstyled components={{ Root: 'span' }} />
75+
```
76+
77+
:::warning
78+
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
79+
:::
80+
81+
Use the `componentsProps` prop to pass custom props to internal slots.
82+
The following code snippet applies a CSS class called `my-snackbar` to the root slot:
83+
84+
```jsx
85+
<SnackbarUnstyled componentsProps={{ root: { className: 'my-snackbar' } }} />
86+
```
87+
88+
:::warning
89+
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
90+
:::
91+
92+
## Hook
93+
94+
```js
95+
import { useSnackbar } from '@mui/base/SnackbarUnstyled';
96+
```
97+
98+
The `useSnackbar` hook lets you apply the functionality of `SnackbarUnstyled` to a fully custom component.
99+
100+
It returns props to be placed on the custom component, along with fields representing the component's internal state.
101+
102+
Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
103+
104+
If you use a [`ClickAwayListener`](/base/react-click-away-listener/) to let the user close the snackbar by clicking outside of it, make sure to pass the `onClickAway` handler returned by this hook to the `ClickAwayListener`.
105+
106+
Pass the `open` state to the hook and use it to show and hide the snackbar.
107+
108+
The demo below shows how to build a fully custom component with the `useSnackbar` hook that also incorporates the `ClickAwayListener` component:
109+
110+
{{"demo": "UseSnackbar.js", "defaultCodeOpen": false}}
111+
112+
:::info
113+
Hooks give you the most room for customization, but require more work to implement.
114+
With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
115+
116+
You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
117+
:::
118+
119+
## Customization
120+
121+
:::info
122+
The following features can be used with both components and hooks.
123+
For the sake of simplicity, demos and code snippets primarily feature components.
124+
:::
125+
126+
### Transitions
127+
128+
You can animate the open and close states of the snackbar with a render prop child and a transition component, as long as the component meets these conditions:
129+
130+
- Is a direct child descendent of the snackbar
131+
- Has an `in` prop—this corresponds to the open state
132+
- Passes the `exited` prop to `SnackbarUnstyled`
133+
- Calls the `onEnter` callback prop when the enter transition starts—sets `exited` to false
134+
- Calls the `onExited` callback prop when the exit transition is completed—sets `exited` to true
135+
136+
These two callbacks allow the snackbar to unmount the child content when closed and keep it fully transitioned.
137+
This is only applicable if you are using transition components using [react-transition-group](https://github.com/reactjs/react-transition-group) library internally.
138+
139+
The demo below shows how to create a snackbar with custom transitions:
140+
141+
{{"demo": "TransitionComponentSnackbar.js", "defaultCodeOpen": false}}

‎docs/pages/base/react-snackbar.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import * as React from 'react';
22
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
3-
import {
4-
demos,
5-
docs,
6-
demoComponents,
7-
} from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown';
3+
import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown';
84

95
export default function Page() {
10-
return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
6+
return <MarkdownDocs {...pageProps} />;
117
}

0 commit comments

Comments
 (0)