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

[EUI+] Fix/update various docs examples to match production #8118

Merged
merged 23 commits into from
Nov 11, 2024
Merged

[EUI+] Fix/update various docs examples to match production #8118

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
21feb82
Update getting started + theming pages to remove references to Sass a…
cee-chen Nov 4, 2024
dc97d41
Fix EuiFormControlLayoutDelimited docs
cee-chen Nov 4, 2024
700879f
Update EuiDraggable portal/popover docs
cee-chen Nov 4, 2024
578be7d
Update EuiResizable docs to match prod/use `accountForScrollbars`
cee-chen Nov 4, 2024
5ba0f55
Update EuiSuperDatePicker from prod
cee-chen Nov 4, 2024
230715d
Update EuiCallOut docs to match prod
cee-chen Nov 4, 2024
7efa516
EuiIcons updates/fixes
cee-chen Nov 4, 2024
f58a363
Update/fix EuiToast docs
cee-chen Nov 4, 2024
e1437d4
Delete EuiPopover `panelClassName` example
cee-chen Nov 4, 2024
218ac57
Fix broken EuiDatePicker `className` demo
cee-chen Nov 4, 2024
ea436d2
Update EuiDatePicker display toggles to match prod
cee-chen Nov 4, 2024
3473798
Update first `EuiComboBox` example to not autoFocus/attempt to open o…
cee-chen Nov 4, 2024
4485dbb
Update various form row `display` props to match propd
cee-chen Nov 4, 2024
54344d0
Update/fix markdown links
cee-chen Nov 4, 2024
ca9ae70
Fix EuiSearchBar demos
cee-chen Nov 4, 2024
74c399a
Fix EuiDatePicker `customInput` example
cee-chen Nov 4, 2024
5dc1233
Fix EuiSuperDatePicker demos
cee-chen Nov 4, 2024
39e88b6
Fix EuiText sizing example + custom CSS
cee-chen Nov 4, 2024
deee3ec
Fix EuiAvatar icon example
cee-chen Nov 4, 2024
5b8baa9
Fix broken EuiContextMenu example
cee-chen Nov 4, 2024
750e7f2
Fix EuiEmptyPrompt multiple types example
cee-chen Nov 4, 2024
1d6a216
Update table selection demo to allow toggling uncontrolled + controll…
cee-chen Nov 5, 2024
b56e233
[PR feedback] Typo
cee-chen Nov 11, 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
199 changes: 104 additions & 95 deletions packages/website/docs/components/display/toast/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ slug: /display/toast
id: display_toast
---

import previewWrapper from './preview_wrapper';

# Toast

Be sure to read the full [toast usage guidelines](/docs/guidelines/toast).

## Toast list

```tsx interactive
import React, { useState, Fragment } from 'react';
import React, { useState } from 'react';
import {
EuiCode,
EuiGlobalToastList,
Expand All @@ -24,11 +26,11 @@ let addToastHandler;
let removeAllToastsHandler;
let toastId = 0;

export function addToast() {
const addToast = () => {
addToastHandler();
}

export function removeAllToasts() {
const removeAllToasts = () => {
removeAllToastsHandler();
}

Expand Down Expand Up @@ -56,7 +58,7 @@ export default () => {
title:
"Check it out, here's a really long title that will wrap within a narrower browser",
text: (
<Fragment>
<>
<p>
Here&rsquo;s some stuff that you need to know. We can make this
text really long so that, when viewed within a browser
Expand All @@ -66,7 +68,7 @@ export default () => {
And some other stuff on another line, just for kicks. And{' '}
<EuiLink href="#">here&rsquo;s a link</EuiLink>.
</p>
</Fragment>
</>
),
},
{
Expand All @@ -79,13 +81,13 @@ export default () => {
color: 'warning',
iconType: 'user',
text: (
<Fragment>
<>
<p>This is a security measure.</p>
<p>
Please move your mouse to show that you&rsquo;re still using
Kibana.
</p>
</Fragment>
</>
),
},
{
Expand Down Expand Up @@ -136,7 +138,6 @@ export default () => {
</div>
);
};

```

## Default
Expand All @@ -145,121 +146,129 @@ export default () => {

They should not be used for historical actions (**your report built 30 minutes ago**). This means that a user should never be greeted with toasts when starting a session. Toasts should be brief and avoid long paragraphs of text or titling.

```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';
<Demo previewWrapper={previewWrapper}>
```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

export default () => (
<div>
export default () => (
<EuiToast title="Example of a good toast" onClose={() => {}}>
<p>
A good toast message is short and to the point. It should very rarely
include multiple paragraphs.
</p>
</EuiToast>
</div>
);
```
);
```
</Demo>

## Info

For informative messages use `type="info"`.

```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

export default () => (
<EuiToast title="Icons should be rare" type="info" onClose={() => {}}>
<p>
Icons should be used rarely. They are good for warnings, but when paired
with long titles they look out of place.
</p>
</EuiToast>
);
```
<Demo previewWrapper={previewWrapper}>
```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

export default () => (
<EuiToast title="Icons should be rare" type="info" onClose={() => {}}>
<p>
Icons should be used rarely. They are good for warnings, but when paired
with long titles they look out of place.
</p>
</EuiToast>
);
```
</Demo>

## Success

For success messages use `color="success"`.

```tsx interactive
import React from 'react';
import {
EuiButton,
EuiLink,
EuiToast,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
<Demo previewWrapper={previewWrapper}>
```tsx interactive
import React from 'react';
import {
EuiButton,
EuiLink,
EuiToast,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';

export default () => (
<EuiToast
title="Created report for dashboard 'Tuba Sales by Region'"
color="success"
iconType="check"
>
<p>
While the layout will adjust properly for wrapping titles, they do not
look particularly good. Similarily, do not use a whole lot of text in your
body either. At a certain point people will not have enough time to read
these things. Like, you probably are not even reading this now.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lol, I see this for the first time 😆

</p>

export default () => (
<EuiToast
title="Created report for dashboard 'Tuba Sales by Region'"
color="success"
iconType="check"
>
<p>
While the layout will adjust properly for wrapping titles, they do not
look particularly good. Similarily, do not use a whole lot of text in your
body either. At a certain point people will not have enough time to read
these things. Like, you probably are not even reading this now.
</p>

<p>
And some other stuff on another line, just for kicks. And{' '}
<EuiLink href="#">here&rsquo;s a link</EuiLink>.
</p>

<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton size="s">Download report</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiToast>
);
```
<p>
And some other stuff on another line, just for kicks. And{' '}
<EuiLink href="#">here&rsquo;s a link</EuiLink>.
</p>

<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton size="s">Download report</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiToast>
);
```
</Demo>

## Warning

Use this callout to warn the user against decisions they might regret. Show a warning message when the program detects that **something is not behaving right, but it didn't cause any termination.** For warning messages use `color="warning"`.

```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

export default () => (
<EuiToast
title="Sometimes a title is enough!"
color="warning"
iconType="warning"
/>
);
```
<Demo previewWrapper={previewWrapper}>
```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

export default () => (
<EuiToast
title="Sometimes a title is enough!"
color="warning"
iconType="warning"
/>
);
```
</Demo>

## Danger

Use this callout to let the user know that something went wrong. For example if you want to communicate an error. You should show an error message when the issue is **terminal, this doesn't always mean that the operation stops completely, but the task is not complete**. For errors messages use `color="danger"`.

```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

const esError =
'Error: expected _scroll_id in the folling Elasticsearch response: ' +
'{"took":0,"timed_out":false,"_shards":{"total":0,"successful":0,"skipped":0,"failed":0},' +
'"hits":{"total":0,"max_score":0,"hits":[]}}';

export default () => (
<EuiToast
title="Couldn't complete the search"
color="danger"
iconType="error"
>
<p>{esError}</p>
</EuiToast>
);
```
<Demo previewWrapper={previewWrapper}>
```tsx interactive
import React from 'react';
import { EuiToast } from '@elastic/eui';

const esError =
'Error: expected _scroll_id in the folling Elasticsearch response: ' +
'{"took":0,"timed_out":false,"_shards":{"total":0,"successful":0,"skipped":0,"failed":0},' +
'"hits":{"total":0,"max_score":0,"hits":[]}}';

export default () => (
<EuiToast
title="Couldn't complete the search"
color="danger"
iconType="error"
>
<p>{esError}</p>
</EuiToast>
);
```
</Demo>

## Props

Expand Down
3 changes: 3 additions & 0 deletions packages/website/docs/components/display/toast/preview_wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default ({ children }) => (
<div style={{ maxWidth: 320 }}>{children}</div>
);