-
Notifications
You must be signed in to change notification settings - Fork 839
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.
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
Updating Popovers to use Panel Padding vars #229
Changes from 8 commits
0c4dcf0
9eb945f
93a4a0d
70bd675
0131c65
ff4b42f
841058d
655ae74
b4e45c4
c94c4c7
3f866df
bb89192
46073f0
97dd332
b6f8e45
7df7069
38c7e7a
21b5568
4a2938e
174bf8a
6afd194
2a2df38
26a173f
9cc4c0e
a7af4d2
5047dd5
e933daa
5c7d42f
93923a3
0536246
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,179 @@ | ||
import React, { | ||
Component, | ||
} from 'react'; | ||
|
||
import { | ||
EuiPopover, | ||
EuiPopoverTitle, | ||
EuiButton, | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiText | ||
} from '../../../../src/components'; | ||
|
||
export default class extends Component { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.state = { | ||
isPopoverOpen: false, | ||
}; | ||
} | ||
|
||
onButtonClick1() { | ||
this.setState({ | ||
isPopoverOpen1: !this.state.isPopoverOpen1, | ||
}); | ||
} | ||
|
||
closePopover1() { | ||
this.setState({ | ||
isPopoverOpen1: false, | ||
}); | ||
} | ||
|
||
onButtonClick2() { | ||
this.setState({ | ||
isPopoverOpen2: !this.state.isPopoverOpen2, | ||
}); | ||
} | ||
|
||
closePopover2() { | ||
this.setState({ | ||
isPopoverOpen2: false, | ||
}); | ||
} | ||
|
||
onButtonClick3() { | ||
this.setState({ | ||
isPopoverOpen3: !this.state.isPopoverOpen3, | ||
}); | ||
} | ||
|
||
closePopover3() { | ||
this.setState({ | ||
isPopoverOpen3: false, | ||
}); | ||
} | ||
|
||
onButtonClick4() { | ||
this.setState({ | ||
isPopoverOpen4: !this.state.isPopoverOpen4, | ||
}); | ||
} | ||
|
||
closePopover4() { | ||
this.setState({ | ||
isPopoverOpen4: false, | ||
}); | ||
} | ||
|
||
render() { | ||
return ( | ||
<EuiFlexGroup wrap={true}> | ||
<EuiFlexItem grow={false}> | ||
<EuiPopover | ||
id="titleWithSmallPadding" | ||
ownFocus | ||
button={( | ||
<EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick2.bind(this)}> | ||
Title and small padding | ||
</EuiButton> | ||
)} | ||
isOpen={this.state.isPopoverOpen2} | ||
closePopover={this.closePopover2.bind(this)} | ||
anchorPosition="upCenter" | ||
withTitle | ||
panelPaddingSize="s" | ||
> | ||
<EuiPopoverTitle>Hello, I’m a popover title</EuiPopoverTitle> | ||
<div style={{ width: '300px' }}> | ||
<EuiText> | ||
<p> | ||
Popover content | ||
</p> | ||
</EuiText> | ||
</div> | ||
</EuiPopover> | ||
</EuiFlexItem> | ||
|
||
<EuiFlexItem grow={false}> | ||
<EuiPopover | ||
id="titleWithDefaultPadding" | ||
ownFocus | ||
button={( | ||
<EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick1.bind(this)}> | ||
Title and default padding (m) | ||
</EuiButton> | ||
)} | ||
isOpen={this.state.isPopoverOpen1} | ||
closePopover={this.closePopover1.bind(this)} | ||
anchorPosition="upCenter" | ||
withTitle | ||
> | ||
<EuiPopoverTitle>Hello, I’m a popover title</EuiPopoverTitle> | ||
<div style={{ width: '300px' }}> | ||
<EuiText> | ||
<p> | ||
Popover content | ||
</p> | ||
</EuiText> | ||
</div> | ||
</EuiPopover> | ||
</EuiFlexItem> | ||
|
||
<EuiFlexItem grow={false}> | ||
<EuiPopover | ||
id="titleWithLargePadding" | ||
ownFocus | ||
button={( | ||
<EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick4.bind(this)}> | ||
Title and large padding | ||
</EuiButton> | ||
)} | ||
isOpen={this.state.isPopoverOpen4} | ||
closePopover={this.closePopover4.bind(this)} | ||
anchorPosition="upCenter" | ||
withTitle | ||
panelPaddingSize="l" | ||
> | ||
<EuiPopoverTitle>Hello, I’m a popover title</EuiPopoverTitle> | ||
<div style={{ width: '300px' }}> | ||
<EuiText> | ||
<p> | ||
Popover content | ||
</p> | ||
</EuiText> | ||
</div> | ||
</EuiPopover> | ||
</EuiFlexItem> | ||
|
||
<EuiFlexItem grow={false}> | ||
<EuiPopover | ||
id="titleWithNoPadding" | ||
ownFocus | ||
button={( | ||
<EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick3.bind(this)}> | ||
Title and no padding | ||
</EuiButton> | ||
)} | ||
isOpen={this.state.isPopoverOpen3} | ||
closePopover={this.closePopover3.bind(this)} | ||
anchorPosition="upCenter" | ||
withTitle | ||
panelPaddingSize="none" | ||
> | ||
<EuiPopoverTitle>As the title, I keep my padding</EuiPopoverTitle> | ||
<div style={{ width: '300px' }}> | ||
<EuiText> | ||
<p> | ||
Popover content | ||
</p> | ||
</EuiText> | ||
</div> | ||
</EuiPopover> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,14 @@ | ||
/** | ||
* Padding map referenced in: | ||
* - Popover | ||
*/ | ||
$euiPanelPaddingModifiers: ( | ||
"--paddingSmall": $euiSizeS, | ||
"--paddingMedium": $euiSize, | ||
"--paddingLarge": $euiSizeL | ||
) !default; | ||
|
||
|
||
.euiPanel { | ||
@include euiBottomShadowSmall; | ||
|
||
|
@@ -6,16 +17,10 @@ | |
border-radius: $euiBorderRadius; | ||
flex-grow: 1; | ||
|
||
&.euiPanel--paddingSmall { | ||
padding: $euiSizeS; | ||
} | ||
|
||
&.euiPanel--paddingMedium { | ||
padding: $euiSize; | ||
} | ||
|
||
&.euiPanel--paddingLarge { | ||
padding: $euiSizeL; | ||
@each $modifier, $amount in $euiPanelPaddingModifiers { | ||
&.euiPanel#{$modifier} { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think I see your point. Could we make one last change and put the |
||
padding: $amount; | ||
} | ||
} | ||
|
||
&.euiPanel--shadow { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,9 @@ | ||
@mixin euiPopoverTitle { | ||
background-color: $euiColorLightestShade; | ||
border-bottom: $euiBorderThin; | ||
padding: $euiSizeM; | ||
|
||
// Subtract 1px from the border radius since it's inside another container that also has the border radius | ||
// -- makes for better rounded corners | ||
border-top-left-radius: $euiBorderRadius - 1px; | ||
border-top-right-radius: $euiBorderRadius - 1px; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,17 @@ | ||
@import '../panel/panel'; // grab the $euiPanelPaddingModifiers map | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we move the variables into a |
||
|
||
.euiPopoverTitle { | ||
@include euiPopoverTitle; | ||
} | ||
|
||
// If the popover's containing panel has padding applied, | ||
// ensure the title expands to cover that padding and | ||
// take on the same amount of padding horizontally | ||
|
||
@each $modifier, $amount in $euiPanelPaddingModifiers { | ||
.euiPopover__panel.euiPanel#{$modifier} & { | ||
padding: $euiSizeM $amount; | ||
margin: ($amount * -1) ($amount * -1) $amount; | ||
} | ||
} | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also update the text of the buttons to also reflect that each one demonstrates a different padding size?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We're also missing an example of small padding, aren't we? Maybe we should just create a section dedicated to demonstrating the different padding options.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I'll just create a new section