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

A couple quick fixes to Popover and input styles #969

Merged
merged 4 commits into from
Jul 4, 2018
Merged

A couple quick fixes to Popover and input styles #969

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4b1b33a
Cleaning up some popover styles
Jul 4, 2018
63898cd
Fixing background transition on inputs
Jul 4, 2018
0904301
Putting buffer back in (at 0)
Jul 4, 2018
f4afa63
changelog
Jul 4, 2018
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
5 changes: 3 additions & 2 deletions src/components/form/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

/**
* 1. Ensure the icon padding remains when in readOnly mode
* 2. Must supply both values to background-size or some browsers apply the single value to both directions
*/

@mixin euiFormControlSize($height: $euiFormControlHeight) {
Expand Down Expand Up @@ -49,7 +50,7 @@
@mixin euiFormControlDefaultShadow($borderOnly: false) {
background-color: $euiFormBackgroundColor;
background-repeat: no-repeat;
background-size: 0%;
background-size: 0% 100%; /* 2 */

@if ($borderOnly) {
box-shadow: inset 0 0 0 1px $euiFormBorderColor;
Expand All @@ -70,7 +71,7 @@
@mixin euiFormControlFocusStyle($borderOnly: false) {
background-color: tintOrShade($euiColorEmptyShade, 0%, 50%);
background-image: euiFormControlGradient();
background-size: 100%;
background-size: 100% 100%; /* 2 */

@if ($borderOnly) {
box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .84);
Expand Down
12 changes: 6 additions & 6 deletions src/components/popover/__snapshots__/popover.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover--anchorDownCenter"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-null"
style="top:50px;left:50px"
>
<div
Expand All @@ -117,7 +117,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover--anchorDownCenter"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-null"
style="top:50px;left:50px"
>
<div
Expand All @@ -143,11 +143,11 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
class="euiScreenReaderOnly"
role="alert"
>
You are in a popup menu. To exit this menu hit escape.
You are in a popup. To exit this popup, hit escape.
</p>
<div
aria-live="off"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover--anchorDownCenter"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-null"
style="top:50px;left:50px"
tabindex="0"
>
Expand All @@ -172,7 +172,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover--anchorDownCenter test"
class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel euiPopover__panel-null test"
style="top:50px;left:50px"
>
<div
Expand All @@ -196,7 +196,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
<div>
<div
aria-live="assertive"
class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel euiPopover--anchorDownCenter"
class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel euiPopover__panel-null"
style="top:50px;left:50px"
>
<div
Expand Down
1 change: 1 addition & 0 deletions src/components/popover/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import 'variables';
@import 'mixins';
@import 'popover';
@import 'popover_title';
171 changes: 43 additions & 128 deletions src/components/popover/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,19 @@
backface-visibility: hidden;
pointer-events: none;
transition: /* 2 */
opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
visibility $euiAnimSlightBounce $euiAnimSpeedSlow,
opacity $euiAnimSlightBounce $euiAnimSpeedNormal,
visibility $euiAnimSlightBounce $euiAnimSpeedNormal,
transform $euiAnimSlightBounce $euiAnimSpeedSlow;
opacity: 0; /* 2 */
visibility: hidden; /* 2 */
transform: translateY(0) translateZ(0); /* 2 */
transform: translateY(0) translateX(0) translateZ(0); /* 2 */

&.euiPopover__panel-isOpen {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

// This fakes a border on the arrow.
&:before {
position: absolute;
content: "";
height: 0;
width: 0;
}

// This part of the arrow matches the panel.
&:after {
position: absolute;
content: "";
height: 0;
width: 0;
}

.euiPopover__panel__arrow {
position: absolute;
width: 0;
Expand All @@ -78,87 +62,74 @@

&.euiPopover__panel__arrow-top {
&:before {
bottom: -$euiSize + 1;
border-left: $euiSize solid transparent;
border-right: $euiSize solid transparent;
border-top: $euiSize solid $euiBorderColor;
bottom: -$euiPopoverArrowSize + 1;
border-left: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid transparent;
border-top: $euiPopoverArrowSize solid $euiBorderColor;
}

&:after {
bottom: -$euiSize + 2;
border-left: $euiSize solid transparent;
border-right: $euiSize solid transparent;
border-top: $euiSize solid $euiColorEmptyShade;
bottom: -$euiPopoverArrowSize + 2;
border-left: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid transparent;
border-top: $euiPopoverArrowSize solid $euiColorEmptyShade;
}
}

&.euiPopover__panel__arrow-right {
&:before {
left: -$euiSize;
left: -$euiPopoverArrowSize;
top: 50%;
border-top: $euiSize solid transparent;
border-bottom: $euiSize solid transparent;
border-right: $euiSize solid $euiBorderColor;
border-top: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid $euiBorderColor;
}

&:after {
left: -$euiSize + 1;
left: -$euiPopoverArrowSize + 1;
top: 50%;
border-top: $euiSize solid transparent;
border-bottom: $euiSize solid transparent;
border-right: $euiSize solid $euiColorEmptyShade;
border-top: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid $euiColorEmptyShade;
}
}

&.euiPopover__panel__arrow-bottom {
&:before {
top: -$euiSize;
border-left: $euiSize solid transparent;
border-right: $euiSize solid transparent;
border-bottom: $euiSize solid $euiBorderColor;
top: -$euiPopoverArrowSize;
border-left: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid $euiBorderColor;
}

&:after {
top: -$euiSize + 1;
border-left: $euiSize solid transparent;
border-right: $euiSize solid transparent;
border-bottom: $euiSize solid $euiColorEmptyShade;
top: -$euiPopoverArrowSize + 1;
border-left: $euiPopoverArrowSize solid transparent;
border-right: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid $euiColorEmptyShade;
}
}

&.euiPopover__panel__arrow-left {
&:before {
right: -$euiSize + 1;
right: -$euiPopoverArrowSize + 1;
top: 50%;
border-top: $euiSize solid transparent;
border-bottom: $euiSize solid transparent;
border-left: $euiSize solid $euiBorderColor;
border-top: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid transparent;
border-left: $euiPopoverArrowSize solid $euiBorderColor;
}

&:after {
right: -$euiSize + 2;
right: -$euiPopoverArrowSize + 2;
top: 50%;
border-top: $euiSize solid transparent;
border-bottom: $euiSize solid transparent;
border-left: $euiSize solid $euiColorEmptyShade;
border-top: $euiPopoverArrowSize solid transparent;
border-bottom: $euiPopoverArrowSize solid transparent;
border-left: $euiPopoverArrowSize solid $euiColorEmptyShade;
}
}
}
}

.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorUpCenter,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorUpLeft,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorUpRight
{
transform: translateY($euiSizeS) translateZ(0);
}

// Anchor DOWN
// Anchor DOWN
// Anchor DOWN
// Anchor DOWN
// Anchor DOWN

.euiPopover__panel.euiPopover__panel-withTitle {
.euiPopover__panel__arrow {
&.euiPopover__panel__arrow-bottom:after {
Expand All @@ -175,74 +146,18 @@
}
}

.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorDownCenter,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorDownLeft,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorDownRight
{
transform: translateY(-$euiSizeS) translateZ(0);
}

// Anchor LEFT
// Anchor LEFT
// Anchor LEFT
// Anchor LEFT
// Anchor LEFT

.euiPopover--withTitle.euiPopover--anchorLeftCenter .euiPopover__panel:after,
.euiPopover--withTitle.euiPopover--anchorLeftUp .euiPopover__panel:after,
.euiPopover--withTitle.euiPopover--anchorLeftDown .euiPopover__panel:after
{
border-left-color: $euiColorLightestShade;
}

.euiPopover--withTitle.euiPopover--anchorLeftUp .euiPopover__panel {
top: 0;

&:before {
top: $euiSizeXS;
}

&:after {
top: $euiSizeXS;
}
}

.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorLeftCenter,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorLeftUp,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorLeftDown
{
transform: translateX($euiSizeS) translateZ(0);
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-top {
transform: translateY($euiPopoverTranslateDistance) translateZ(0);
}

// Anchor RIGHT
// Anchor RIGHT
// Anchor RIGHT
// Anchor RIGHT
// Anchor RIGHT

.euiPopover--withTitle.euiPopover--anchorRightCenter .euiPopover__panel:after,
.euiPopover--withTitle.euiPopover--anchorRightUp .euiPopover__panel:after,
.euiPopover--withTitle.euiPopover--anchorRightDown .euiPopover__panel:after
{
border-right-color: $euiColorLightestShade;
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-bottom {
transform: translateY(-$euiPopoverTranslateDistance) translateZ(0);
}

.euiPopover--withTitle.euiPopover--anchorRightUp .euiPopover__panel {
top: 0;

&:before {
top: $euiSizeXS;
}

&:after {
top: $euiSizeXS;
}
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-left {
transform: translateX($euiPopoverTranslateDistance) translateZ(0);
}


.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorRightCenter,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorRightUp,
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover--anchorRightDown
{
transform: translateX(-$euiSizeS) translateZ(0);
.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-right {
transform: translateX(-$euiPopoverTranslateDistance) translateZ(0);
}
2 changes: 2 additions & 0 deletions src/components/popover/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
$euiPopoverArrowSize: $euiSizeM !default;
$euiPopoverTranslateDistance: $euiSizeS !default;
13 changes: 6 additions & 7 deletions src/components/popover/popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,14 +184,13 @@ export class EuiPopover extends Component {
popover: this.panel,
offset: 16,
arrowConfig: {
arrowWidth: 32,
arrowBuffer: 5,
arrowWidth: 24,
Copy link
Contributor

@chandlerprall chandlerprall Jul 4, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

arrowBuffer is required, even if it's set to 0. Without it the popover won't slide over.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

}
});

// the popver's z-index must inherit from the button
// this keeps a button's popver under a flyover that would cover the button
// but a popover triggered inside a flyover will appear over that flyover
// this keeps a button's popover under a flyout that would cover the button
// but a popover triggered inside a flyout will appear over that flyout
const zIndex = getElementZIndex(this.button, this.panel);

const popoverStyles = {
Expand Down Expand Up @@ -245,16 +244,16 @@ export class EuiPopover extends Component {
const classes = classNames(
'euiPopover',
anchorPositionToClassNameMap[anchorPosition],
className,
{
'euiPopover-isOpen': this.state.isOpening,
'euiPopover--withTitle': withTitle,
},
className,
);

const panelClasses = classNames(
'euiPopover__panel',
anchorPositionToClassNameMap[anchorPosition],
`euiPopover__panel-${this.state.arrowPosition}`,
{ 'euiPopover__panel-isOpen': this.state.isOpening },
{ 'euiPopover__panel-withTitle': withTitle },
panelClassName
Expand All @@ -280,7 +279,7 @@ export class EuiPopover extends Component {
if (ownFocus) {
focusTrapScreenReaderText = (
<EuiScreenReaderOnly>
<p role="alert">You are in a popup menu. To exit this menu hit escape.</p>
<p role="alert">You are in a popup. To exit this popup, hit escape.</p>
</EuiScreenReaderOnly>
);
}
Expand Down