From c2794e6a6929db887329c79ff7b94dacc9785059 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 5 Mar 2019 16:29:56 +0100
Subject: [PATCH 01/10] -added inline prop on the Popup component

---
 packages/react/src/components/Popup/Popup.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 1394aeff38..6dd09e4750 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -63,6 +63,9 @@ export interface PopupProps
   /** Initial value for 'open'. */
   defaultOpen?: boolean
 
+  /** Whether the Popup should be rendered inline with the trigger or in the body. */
+  inline?: boolean
+
   /** Delay in ms for the mouse leave event, before the popup will be closed. */
   mouseLeaveDelay?: number
 
@@ -220,6 +223,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     rtl,
     accessibility,
   }: RenderResultConfig<PopupProps>): React.ReactNode {
+    const { inline } = this.props
     const popupContent = this.renderPopupContent(classes.popup, rtl, accessibility)
 
     return (
@@ -229,7 +233,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
         {this.state.open &&
           Popup.isBrowserContext &&
           popupContent &&
-          ReactDOM.createPortal(popupContent, document.body)}
+          (inline ? popupContent : ReactDOM.createPortal(popupContent, document.body))}
       </>
     )
   }

From 1fe73b2b6976564867827ee1f9574108f8625a7f Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 5 Mar 2019 17:03:37 +0100
Subject: [PATCH 02/10] -added test for covering the inline prop

---
 .../specs/components/Popup/Popup-test.tsx     | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx
index 86a80b6ea9..ca6879e100 100644
--- a/packages/react/test/specs/components/Popup/Popup-test.tsx
+++ b/packages/react/test/specs/components/Popup/Popup-test.tsx
@@ -247,4 +247,28 @@ describe('Popup', () => {
       document.body.removeChild(attachTo)
     })
   })
+
+  describe('inline', () => {
+    beforeEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('renders the content in the document body the inline prop is not provided', () => {
+      mountWithProvider(<Popup trigger={<button />} content={<div id={contentId} />} open={true} />)
+      expect(document.body.firstElementChild.getAttribute('id')).toEqual(contentId)
+    })
+
+    test('renders the content next to the trigger element if the inline prop is provided', () => {
+      const wrapper = mountWithProvider(
+        <Popup
+          trigger={<button id={triggerId} />}
+          inline
+          content={<div id={contentId} />}
+          open={true}
+        />,
+      )
+      expect(wrapper.find(`#${contentId}`).exists()).toEqual(true)
+      expect(document.body.firstElementChild).toEqual(null)
+    })
+  })
 })

From 5c58bb1715ac446ea2709571084ef752546c6c03 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 5 Mar 2019 17:26:22 +0100
Subject: [PATCH 03/10] -updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a7c34f088..f47d59a2e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Set `aria-modal` attribute for both Dialog and Popup with focus trap @sophieH29 ([#995](https://github.com/stardust-ui/react/pull/995))
 - Allow arrays as shorthand for the Components containing prop of type `CollectionShorthand` @mnajdova ([#996](https://github.com/stardust-ui/react/pull/996))
 - Allow to pass `children` and `content` to `MenuDivider` @layershifter ([#1009](https://github.com/stardust-ui/react/pull/1009))
+- Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([]())
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))

From be9e4f06e16ad33a0235dd4f0cc9144099639d91 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 5 Mar 2019 18:01:30 +0100
Subject: [PATCH 04/10] Update Popup-test.tsx

Updated test for the inline prop
---
 .../specs/components/Popup/Popup-test.tsx     | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx
index ca6879e100..db3d73e0a5 100644
--- a/packages/react/test/specs/components/Popup/Popup-test.tsx
+++ b/packages/react/test/specs/components/Popup/Popup-test.tsx
@@ -249,26 +249,24 @@ describe('Popup', () => {
   })
 
   describe('inline', () => {
-    beforeEach(() => {
-      document.body.innerHTML = ''
-    })
-
     test('renders the content in the document body the inline prop is not provided', () => {
       mountWithProvider(<Popup trigger={<button />} content={<div id={contentId} />} open={true} />)
       expect(document.body.firstElementChild.getAttribute('id')).toEqual(contentId)
     })
 
     test('renders the content next to the trigger element if the inline prop is provided', () => {
-      const wrapper = mountWithProvider(
-        <Popup
-          trigger={<button id={triggerId} />}
-          inline
-          content={<div id={contentId} />}
-          open={true}
-        />,
+      const wrapper = mountWithProvider(
+        <Popup
+          trigger={<button id={triggerId} />}
+          inline
+          content='FOO'
+          open={true}
+        />,
       )
-      expect(wrapper.find(`#${contentId}`).exists()).toEqual(true)
-      expect(document.body.firstElementChild).toEqual(null)
+      const contentElement = wrapper.getDOMNode().nextSibling as HTMLDivElement
+
+      expect(wrapper.find(PopupContent).exists()).toEqual(true)
+      expect(contentElement.classList.contains(PopupContent.className)).toEqual(true)
     })
   })
 })

From 37d352dfb2a3265c8712c8267ea34173f2a548b3 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 5 Mar 2019 18:02:29 +0100
Subject: [PATCH 05/10] Update CHANGELOG.md

updated changelog with PR link
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f47d59a2e2..d81697a735 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,7 +46,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Set `aria-modal` attribute for both Dialog and Popup with focus trap @sophieH29 ([#995](https://github.com/stardust-ui/react/pull/995))
 - Allow arrays as shorthand for the Components containing prop of type `CollectionShorthand` @mnajdova ([#996](https://github.com/stardust-ui/react/pull/996))
 - Allow to pass `children` and `content` to `MenuDivider` @layershifter ([#1009](https://github.com/stardust-ui/react/pull/1009))
-- Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([]())
+- Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017))
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))

From 7be0a46cf7090289cc7c3f989af8843be31a70f5 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 5 Mar 2019 18:31:28 +0100
Subject: [PATCH 06/10] -updated tests

---
 .../specs/components/Popup/Popup-test.tsx     | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx
index db3d73e0a5..f3109d9449 100644
--- a/packages/react/test/specs/components/Popup/Popup-test.tsx
+++ b/packages/react/test/specs/components/Popup/Popup-test.tsx
@@ -250,23 +250,20 @@ describe('Popup', () => {
 
   describe('inline', () => {
     test('renders the content in the document body the inline prop is not provided', () => {
-      mountWithProvider(<Popup trigger={<button />} content={<div id={contentId} />} open={true} />)
-      expect(document.body.firstElementChild.getAttribute('id')).toEqual(contentId)
+      mountWithProvider(<Popup trigger={<button />} content="Content" open={true} />)
+      expect(document.body.firstElementChild.classList.contains(Popup.Content.className)).toEqual(
+        true,
+      )
     })
 
     test('renders the content next to the trigger element if the inline prop is provided', () => {
-      const wrapper = mountWithProvider(
-        <Popup
-          trigger={<button id={triggerId} />}
-          inline
-          content='FOO'
-          open={true}
-        />,
+      const wrapper = mountWithProvider(
+        <Popup trigger={<button id={triggerId} />} inline content="Content" open={true} />,
       )
-      const contentElement = wrapper.getDOMNode().nextSibling as HTMLDivElement
+      const contentElement = wrapper.getDOMNode().nextSibling as HTMLDivElement
 
-      expect(wrapper.find(PopupContent).exists()).toEqual(true)
-      expect(contentElement.classList.contains(PopupContent.className)).toEqual(true)
+      expect(wrapper.find(Popup.Content).exists()).toEqual(true)
+      expect(contentElement.classList.contains(Popup.Content.className)).toEqual(true)
     })
   })
 })

From f5a7fe54ac2ab5ada8035a98725717e8b36cf578 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 6 Mar 2019 11:38:14 +0100
Subject: [PATCH 07/10] -updated changelog -added example

---
 CHANGELOG.md                                         |  4 +++-
 .../Popup/Types/PopupExampleInline.shorthand.tsx     | 12 ++++++++++++
 .../components/Popup/Types/PopupExampleInline.tsx    | 10 ++++++++++
 docs/src/examples/components/Popup/Types/index.tsx   |  5 +++++
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
 create mode 100644 docs/src/examples/components/Popup/Types/PopupExampleInline.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62e34f9ec4..4d8c6e3156 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017))
+
 <!--------------------------------[ v0.23.0 ]------------------------------- -->
 ## [v0.23.0](https://github.com/stardust-ui/react/tree/v0.23.0) (2019-03-06)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.22.1...v0.23.0)
@@ -51,7 +54,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Allow arrays as shorthand for the Components containing prop of type `CollectionShorthand` @mnajdova ([#996](https://github.com/stardust-ui/react/pull/996))
 - Allow to pass `children` and `content` to `MenuDivider` @layershifter ([#1009](https://github.com/stardust-ui/react/pull/1009))
 - Add `AutoFocusZone` component, for focusing inner element on mount @mnajdova ([#1015](https://github.com/stardust-ui/react/pull/1015))
-- Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017))
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))
diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
new file mode 100644
index 0000000000..34a37e19e5
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Button, Popup } from '@stardust-ui/react'
+
+const PopupExample = () => (
+  <Popup
+    trigger={<Button icon="expand" />}
+    content="This popup is rendered next to the trigger."
+    inline
+  />
+)
+
+export default PopupExample
diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
new file mode 100644
index 0000000000..6e13abf547
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Button, Popup } from '@stardust-ui/react'
+
+const PopupExample = () => (
+  <Popup content="This popup is rendered next to the trigger." inline>
+    <Button icon="expand" />
+  </Popup>
+)
+
+export default PopupExample
diff --git a/docs/src/examples/components/Popup/Types/index.tsx b/docs/src/examples/components/Popup/Types/index.tsx
index 26582e6889..6639fac9e8 100644
--- a/docs/src/examples/components/Popup/Types/index.tsx
+++ b/docs/src/examples/components/Popup/Types/index.tsx
@@ -30,6 +30,11 @@ const Types = () => (
       description="By default Popup uses trigger element as the one it is displayed for, but it is possible to provide any DOM element as popup's target."
       examplePath="components/Popup/Types/PopupCustomTargetExample"
     />
+    <ComponentExample
+      title="Inline"
+      description="The content of the popup can be rendered next to the trigger element instead of the body."
+      examplePath="components/Popup/Types/PopupExampleInline"
+    />
   </ExampleSection>
 )
 

From c6a8f9b8d9b3cbd8de568ef0fcb02960350fed10 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 6 Mar 2019 11:49:16 +0100
Subject: [PATCH 08/10] -added inline in the prop types as well

---
 packages/react/src/components/Popup/Popup.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 379e09897c..fe1b57fd10 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -150,6 +150,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     align: PropTypes.oneOf(ALIGNMENTS),
     defaultOpen: PropTypes.bool,
     defaultTarget: PropTypes.any,
+    inline: PropTypes.bool,
     mouseLeaveDelay: PropTypes.number,
     on: PropTypes.oneOfType([
       PropTypes.oneOf(['hover', 'click', 'focus']),

From a27e12e9f457df6ae0c993cd5235c14a6f82aa17 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 6 Mar 2019 12:35:59 +0100
Subject: [PATCH 09/10] -addressed comments

---
 .../examples/components/Popup/Types/PopupExampleInline.tsx  | 4 ++--
 packages/react/test/specs/components/Popup/Popup-test.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
index 6e13abf547..1d973ab032 100644
--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
-const PopupExample = () => (
+const PopupExampleInline = () => (
   <Popup content="This popup is rendered next to the trigger." inline>
     <Button icon="expand" />
   </Popup>
 )
 
-export default PopupExample
+export default PopupExampleInline
diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx
index f3109d9449..d953ce3fc4 100644
--- a/packages/react/test/specs/components/Popup/Popup-test.tsx
+++ b/packages/react/test/specs/components/Popup/Popup-test.tsx
@@ -251,9 +251,9 @@ describe('Popup', () => {
   describe('inline', () => {
     test('renders the content in the document body the inline prop is not provided', () => {
       mountWithProvider(<Popup trigger={<button />} content="Content" open={true} />)
-      expect(document.body.firstElementChild.classList.contains(Popup.Content.className)).toEqual(
-        true,
-      )
+      const contentElement = document.body.firstElementChild
+
+      expect(contentElement.classList.contains(Popup.Content.className)).toEqual(true)
     })
 
     test('renders the content next to the trigger element if the inline prop is provided', () => {

From 4efd4a8464360fe09c04c333e65f3455b9c54b13 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 6 Mar 2019 12:46:52 +0100
Subject: [PATCH 10/10] -changed example component name

---
 .../components/Popup/Types/PopupExampleInline.shorthand.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
index 34a37e19e5..51eaa06ce4 100644
--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
-const PopupExample = () => (
+const PopupExampleInline = () => (
   <Popup
     trigger={<Button icon="expand" />}
     content="This popup is rendered next to the trigger."
@@ -9,4 +9,4 @@ const PopupExample = () => (
   />
 )
 
-export default PopupExample
+export default PopupExampleInline