Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new side prop options for Popover component #661

Merged
merged 2 commits into from
Apr 3, 2024
Merged

Add new side prop options for Popover component #661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b3dd24
Add new side prop options for Popover component.
sean-mckenna Apr 3, 2024
8944701
Add changelog and bump react-components version to 5.34.7.
sean-mckenna Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
11 changes: 10 additions & 1 deletion packages/react-components/source/react/library/popover/Popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would it be worth going with top-left, top-right etc just to be more explicit?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had thought about it, but that would be a breaking change and would require a major version bump. We could target that kind of change in v6.

'top',
'top-right',
'bottom',
'bottom-right',
'left',
'left-bottom',
'right',
'right-bottom',
]),
/** Popover 'elevation' visually indicated with box-shadow */
elevation: elementElevation,
};
Expand Down
36 changes: 32 additions & 4 deletions packages/react-components/source/react/library/popover/Popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
```
Expand Down
80 changes: 79 additions & 1 deletion packages/react-components/source/scss/library/components/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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);
}
Expand Down