+ ),
+ }}
+ key={`${position}-${align}`}
+ />
+ ))}
+
+)
+
+export default PopupExamplePosition
diff --git a/docs/src/examples/components/Popup/Variations/index.tsx b/docs/src/examples/components/Popup/Variations/index.tsx
index eb0a83d66a..1ba1f32107 100644
--- a/docs/src/examples/components/Popup/Variations/index.tsx
+++ b/docs/src/examples/components/Popup/Variations/index.tsx
@@ -10,6 +10,11 @@ const Variations = () => (
description="A popup can be positioned around its trigger and aligned relative to the trigger's margins. Click on a button to open a popup on a specific position and alignment."
examplePath="components/Popup/Variations/PopupExamplePosition"
/>
+
)
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 1a421c12d7..76f783204b 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -54,6 +54,15 @@ export interface PopupProps
/** Initial value for 'open'. */
defaultOpen?: boolean
+ /** Offset value to apply to rendered popup. Accepts the following units:
+ * - px or unit-less, interpreted as pixels
+ * - % or %r, percentage relative to the length of the trigger element
+ * - %p, percentage relative to the length of the popup element
+ * - vw, CSS viewport width unit
+ * - vh, CSS viewport height unit
+ */
+ offset?: string
+
/** Defines whether popup is displayed. */
open?: boolean
@@ -245,17 +254,23 @@ export default class Popup extends AutoControlledComponent
)
)
@@ -316,4 +331,14 @@ export default class Popup extends AutoControlledComponent
Date: Wed, 12 Dec 2018 23:57:41 +0100
Subject: [PATCH 2/3] correct description of supported values
---
src/components/Popup/Popup.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 76f783204b..3876f75dde 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -56,7 +56,7 @@ export interface PopupProps
/** Offset value to apply to rendered popup. Accepts the following units:
* - px or unit-less, interpreted as pixels
- * - % or %r, percentage relative to the length of the trigger element
+ * - %, percentage relative to the length of the trigger element
* - %p, percentage relative to the length of the popup element
* - vw, CSS viewport width unit
* - vh, CSS viewport height unit
From 47ad701f51e62cd19518e04d9546c688cf5c4662 Mon Sep 17 00:00:00 2001
From: kuzhelov
Date: Thu, 13 Dec 2018 20:13:41 +0100
Subject: [PATCH 3/3] update changelog
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5c8b50b22..1c2d426822 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Export `call-recording` SVG icon @Bugaa92 ([#585](https://github.com/stardust-ui/react/pull/585))
- Export `canvas-add-page` SVG icon @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601))
- Add `sizeModifier` variable (with `x` and `xx` values) to `Icon`'s Teams theme styles @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601))
+- Add `offset` prop to `Popup` to extend set of popup positioning options @kuzhelov ([#606](https://github.com/stardust-ui/react/pull/606))
### Documentation
- Add `prettier` support throughout the docs @levithomason ([#568](https://github.com/stardust-ui/react/pull/568))