From 0aeecf07d8b51c1ceb9e25c972d417fc86b1178f Mon Sep 17 00:00:00 2001
From: Marcus Notheis <marcus.notheis@sap.com>
Date: Tue, 19 May 2020 15:51:54 +0200
Subject: [PATCH 1/2] docs(Toast): explain how a toast can be shown

Closes #519
---
 .../main/src/webComponents/Toast/Toast.mdx    | 31 +++++++++++++
 .../src/webComponents/Toast/Toast.stories.tsx | 44 ++++++++++++-------
 2 files changed, 59 insertions(+), 16 deletions(-)
 create mode 100644 packages/main/src/webComponents/Toast/Toast.mdx

diff --git a/packages/main/src/webComponents/Toast/Toast.mdx b/packages/main/src/webComponents/Toast/Toast.mdx
new file mode 100644
index 00000000000..a8d14f55fde
--- /dev/null
+++ b/packages/main/src/webComponents/Toast/Toast.mdx
@@ -0,0 +1,31 @@
+import { Story, Props, Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks';
+
+<Title />
+<Subtitle />
+<Description />
+<br />
+
+## Show a toast
+The `Toast` component has an imperative API for getting displayed. It will not be displayed just because it is part of the DOM.
+In order to show the Toast, you have to get a reference to the `Toast` DOM element and call the `show`-method.
+Just can either access the DOM element by using a React `ref` or you can work with IDs.
+
+**Example**
+```jsx
+export const MyComponentWithAToast() {
+  const toast = useRef();
+
+  const showToast = () => {
+    toast.current.show();
+  };
+  return (
+    <ThemeProvider>
+      <Button onClick={showToast}>Show Toast</Button>
+      <Toast ref={toast}>This is my Toast!</Toast>
+    </ThemeProvider>
+  );
+}
+```
+<Story id="ui5-web-components-toast--generated-default-story"/>
+
+<Props />
diff --git a/packages/main/src/webComponents/Toast/Toast.stories.tsx b/packages/main/src/webComponents/Toast/Toast.stories.tsx
index bdebeb06c64..57c1ca199c0 100644
--- a/packages/main/src/webComponents/Toast/Toast.stories.tsx
+++ b/packages/main/src/webComponents/Toast/Toast.stories.tsx
@@ -2,11 +2,17 @@ import { number, select } from '@storybook/addon-knobs';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { Toast } from '@ui5/webcomponents-react/lib/Toast';
 import { ToastPlacement } from '@ui5/webcomponents-react/lib/ToastPlacement';
-import React from 'react';
+import React, { useRef } from 'react';
+import mdx from './Toast.mdx';
 
 export default {
   title: 'UI5 Web Components / Toast',
-  component: Toast
+  component: Toast,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
 };
 
 const showToast = () => {
@@ -14,20 +20,26 @@ const showToast = () => {
   document.querySelector('#web_components_react_toast_demo').show();
 };
 
-export const generatedDefaultStory = () => (
-  <>
-    <Toast
-      // @ts-ignore
-      id="web_components_react_toast_demo"
-      duration={number('duration', 3000)}
-      placement={select('placement', ToastPlacement, ToastPlacement.BottomCenter)}
-    >
-      Some Content
-    </Toast>
-    <Button onClick={showToast}>Show Toast</Button>
-  </>
-);
+export const generatedDefaultStory = () => {
+  const toast = useRef();
+
+  const showToast = () => {
+    toast.current.show();
+  };
+  return (
+    <>
+      <Toast
+        ref={toast}
+        duration={number('duration', 3000)}
+        placement={select('placement', ToastPlacement, ToastPlacement.BottomCenter)}
+      >
+        Some Content
+      </Toast>
+      <Button onClick={showToast}>Show Toast</Button>
+    </>
+  );
+};
 
 generatedDefaultStory.story = {
-  name: 'Generated default story'
+  name: 'Default story'
 };

From 9436c8d41fdbbfc996c00608201f62625383b39d Mon Sep 17 00:00:00 2001
From: Marcus Notheis <marcus.notheis@sap.com>
Date: Tue, 19 May 2020 19:53:18 +0200
Subject: [PATCH 2/2] Update packages/main/src/webComponents/Toast/Toast.mdx

Co-authored-by: Lukas Harbarth <lukas742@gmx.net>
---
 packages/main/src/webComponents/Toast/Toast.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/webComponents/Toast/Toast.mdx b/packages/main/src/webComponents/Toast/Toast.mdx
index a8d14f55fde..d9121368001 100644
--- a/packages/main/src/webComponents/Toast/Toast.mdx
+++ b/packages/main/src/webComponents/Toast/Toast.mdx
@@ -8,7 +8,7 @@ import { Story, Props, Title, Subtitle, Description, Primary, Stories } from '@s
 ## Show a toast
 The `Toast` component has an imperative API for getting displayed. It will not be displayed just because it is part of the DOM.
 In order to show the Toast, you have to get a reference to the `Toast` DOM element and call the `show`-method.
-Just can either access the DOM element by using a React `ref` or you can work with IDs.
+You can either access the DOM element by using a React `ref` or work with IDs.
 
 **Example**
 ```jsx