Add new side prop options for Popover component (#661)

* Add new side prop options for Popover component. Add new side prop options for the popover component so that its possible to display the arrow in all corners. * Add changelog and bump react-components version to 5.34.7.
puppetlabs · Apr 3, 2024 · 5c4bc31 · 5c4bc31
1 parent 4382e0e
commit 5c4bc31
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,15 @@
+## 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))
 
 ## 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
diff --git 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
@@ -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
@@ -41,28 +41,56 @@ import Button from '../button';
     onClose={() => console.log('Lets do the time warp again')}
     style={{ marginBottom: '20px' }}
   >
-    <Heading as="h3">Just a jump to the left</Heading>
+    <Heading as="h3">left</Heading>
+  </Popover>
+  <Popover
+    side="left-bottom"
+    onClose={() => console.log('Lets do the time warp again')}
+    style={{ marginBottom: '20px' }}
+  >
+    <Heading as="h3">left-bottom</Heading>
   </Popover>
   <Popover
     side="right"
     onClose={() => console.log('Lets do the time warp again')}
     style={{ marginBottom: '20px' }}
   >
-    <Heading as="h3">And a step to the right</Heading>
+    <Heading as="h3">right</Heading>
+  </Popover>
+  <Popover
+    side="right-bottom"
+    onClose={() => console.log('Lets do the time warp again')}
+    style={{ marginBottom: '20px' }}
+  >
+    <Heading as="h3">right-bottom</Heading>
   </Popover>
   <Popover
     side="top"
     onClose={() => console.log('Lets do the time warp again')}
     style={{ marginBottom: '20px' }}
   >
-    <Heading as="h3">With your hands on your hips</Heading>
+    <Heading as="h3">top</Heading>
+  </Popover>
+  <Popover
+    side="top-right"
+    onClose={() => console.log('Lets do the time warp again')}
+    style={{ marginBottom: '20px' }}
+  >
+    <Heading as="h3">top-right</Heading>
   </Popover>
   <Popover
     side="bottom"
     onClose={() => console.log('Lets do the time warp again')}
     style={{ marginBottom: '20px' }}
   >
-    <Heading as="h3">You bring your knees in tight</Heading>
+    <Heading as="h3">bottom</Heading>
+  </Popover>
+  <Popover
+    side="bottom-right"
+    onClose={() => console.log('Lets do the time warp again')}
+    style={{ marginBottom: '20px' }}
+  >
+    <Heading as="h3">bottom-right</Heading>
   </Popover>
 </div>;
 ```

diff --git 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);
 }