diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea0341ff6..45b51818a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## react-components 5.34.7 (2024-04-03)
+
+- [Popover] Add new side prop options to enable rendering the arrow in all corners of the box (by [@sean-mckenna](https://github.com/sean-mckenna)) in [#661](https://github.com/puppetlabs/design-system/pull/661))
+
## react-components 5.34.6 (2024-03-28)
- [Logo] Add standalone Puppet logo (by [@petergmurphy](https://github.com/petergmurphy))
@@ -5,7 +9,7 @@
## react-layouts 2.0.0-alpha.10 (2024-03-28)
- [Authentication] Fix Authentication component styling issue. This change resolves the problem where the Authentication component's
-styling was not being applied due to the stylesheet not being bundled. (by [@petergmurphy](https://github.com/petergmurphy))
+ styling was not being applied due to the stylesheet not being bundled. (by [@petergmurphy](https://github.com/petergmurphy))
- [Authentication] Change the title of the Authentication component from a `h5` to a `h3` element. (by [@petergmurphy](https://github.com/petergmurphy))
## react-components 5.34.5 (2024-03-25)
diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json
index c5e31f04c..3a8925e8e 100644
--- a/packages/react-components/package-lock.json
+++ b/packages/react-components/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@puppet/react-components",
- "version": "5.34.5",
+ "version": "5.34.7",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 67ff3a76d..229d5b790 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@puppet/react-components",
- "version": "5.34.6",
+ "version": "5.34.7",
"author": "Puppet, Inc.",
"license": "Apache-2.0",
"main": "build/library.js",
diff --git a/packages/react-components/source/react/library/popover/Popover.js b/packages/react-components/source/react/library/popover/Popover.js
index d4aea027d..7047fe4eb 100644
--- a/packages/react-components/source/react/library/popover/Popover.js
+++ b/packages/react-components/source/react/library/popover/Popover.js
@@ -12,7 +12,16 @@ const propTypes = {
/** Component children */
children: PropTypes.node,
/** Side the arrow appears on */
- side: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+ side: PropTypes.oneOf([
+ 'top',
+ 'top-right',
+ 'bottom',
+ 'bottom-right',
+ 'left',
+ 'left-bottom',
+ 'right',
+ 'right-bottom',
+ ]),
/** Popover 'elevation' visually indicated with box-shadow */
elevation: elementElevation,
};
diff --git a/packages/react-components/source/react/library/popover/Popover.md b/packages/react-components/source/react/library/popover/Popover.md
index c2fea2258..af86a0dfb 100644
--- a/packages/react-components/source/react/library/popover/Popover.md
+++ b/packages/react-components/source/react/library/popover/Popover.md
@@ -41,28 +41,56 @@ import Button from '../button';
onClose={() => console.log('Lets do the time warp again')}
style={{ marginBottom: '20px' }}
>
- Just a jump to the left
+ left
+
+ console.log('Lets do the time warp again')}
+ style={{ marginBottom: '20px' }}
+ >
+ left-bottom
console.log('Lets do the time warp again')}
style={{ marginBottom: '20px' }}
>
- And a step to the right
+ right
+
+ console.log('Lets do the time warp again')}
+ style={{ marginBottom: '20px' }}
+ >
+ right-bottom
console.log('Lets do the time warp again')}
style={{ marginBottom: '20px' }}
>
- With your hands on your hips
+ top
+
+ console.log('Lets do the time warp again')}
+ style={{ marginBottom: '20px' }}
+ >
+ top-right
console.log('Lets do the time warp again')}
style={{ marginBottom: '20px' }}
>
- You bring your knees in tight
+ bottom
+
+ console.log('Lets do the time warp again')}
+ style={{ marginBottom: '20px' }}
+ >
+ bottom-right
;
```
diff --git a/packages/react-components/source/scss/library/components/_popover.scss b/packages/react-components/source/scss/library/components/_popover.scss
index e720a1bd6..9436bc488 100644
--- a/packages/react-components/source/scss/library/components/_popover.scss
+++ b/packages/react-components/source/scss/library/components/_popover.scss
@@ -24,12 +24,20 @@ $null-shadow: 0 0 0 0 transparent;
.rc-popover-left::after,
.rc-popover-left::before,
+.rc-popover-left-bottom::after,
+.rc-popover-left-bottom::before,
.rc-popover-right::after,
.rc-popover-right::before,
+.rc-popover-right-bottom::after,
+.rc-popover-right-bottom::before,
.rc-popover-top::after,
.rc-popover-top::before,
+.rc-popover-top-right::after,
+.rc-popover-top-right::before,
.rc-popover-bottom::after,
-.rc-popover-bottom::before {
+.rc-popover-bottom::before,
+.rc-popover-bottom-right::after,
+.rc-popover-bottom-right::before {
border-style: solid;
content: '';
display: block;
@@ -55,6 +63,23 @@ $null-shadow: 0 0 0 0 transparent;
}
}
+.rc-popover-right-bottom {
+ // arrow body
+ &::after {
+ border-color: transparent transparent transparent $popover-fill-color;
+ border-width: 10px;
+ bottom: 10px;
+ left: 100%;
+ }
+ // arrow 'border'
+ &::before {
+ border-color: transparent transparent transparent $popover-border-color;
+ border-width: 11px;
+ bottom: 9px;
+ left: 100%;
+ }
+}
+
.rc-popover-left {
// arrow body
&::after {
@@ -72,6 +97,23 @@ $null-shadow: 0 0 0 0 transparent;
}
}
+.rc-popover-left-bottom {
+ // arrow body
+ &::after {
+ border-color: transparent $popover-fill-color transparent transparent;
+ border-width: 10px;
+ bottom: 10px;
+ right: 100%;
+ }
+ // arrow 'border'
+ &::before {
+ border-color: transparent $popover-border-color transparent transparent;
+ border-width: 11px;
+ bottom: 9px;
+ right: 100%;
+ }
+}
+
.rc-popover-top {
margin-top: 10px;
// arrow body
@@ -90,6 +132,24 @@ $null-shadow: 0 0 0 0 transparent;
}
}
+.rc-popover-top-right {
+ margin-top: 10px;
+ // arrow body
+ &::after {
+ border-color: transparent transparent $popover-fill-color transparent;
+ border-width: 10px;
+ bottom: 100%;
+ right: 10px;
+ }
+ // arrow 'border'
+ &::before {
+ border-color: transparent transparent $popover-border-color transparent;
+ border-width: 11px;
+ bottom: 100%;
+ right: 9px;
+ }
+}
+
.rc-popover-bottom {
margin-bottom: 10px;
// arrow body
@@ -108,6 +168,24 @@ $null-shadow: 0 0 0 0 transparent;
}
}
+.rc-popover-bottom-right {
+ margin-bottom: 10px;
+ // arrow body
+ &::after {
+ border-color: $popover-fill-color transparent transparent transparent;
+ border-width: 10px;
+ right: 10px;
+ top: 100%;
+ }
+ // arrow 'border'
+ &::before {
+ border-color: $popover-border-color transparent transparent transparent;
+ border-width: 11px;
+ right: 9px;
+ top: 100%;
+ }
+}
+
.rc-popover-elevation-0 {
@include base-shadow($null-shadow);
}