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