diff --git a/lib/popover/index.js b/lib/popover/index.js
index 9c170bd2..2bc78edf 100644
--- a/lib/popover/index.js
+++ b/lib/popover/index.js
@@ -108,6 +108,7 @@ class Popover extends React.Component {
tabIndex={0}
>
{title && {title}}
+ { title &&
}
{content}
{!noAction && this.renderActionContent()}
diff --git a/lib/popover/tests/accessibility.test.js b/lib/popover/tests/accessibility.test.js
index 1a9c20a1..b155c0cb 100644
--- a/lib/popover/tests/accessibility.test.js
+++ b/lib/popover/tests/accessibility.test.js
@@ -75,9 +75,9 @@ describe('Popover accessibility tests', () => {
.props
.children;
simulateEvent(Button, 'click');
- expect(actualValue()[2].props['aria-label']).to.equal(expectedValueBefore);
+ expect(actualValue()[3].props['aria-label']).to.equal(expectedValueBefore);
wrappedComponent.setProps({ noAction: true });
- expect(actualValue()[2]).to.equal(expectedValueAfter);
+ expect(actualValue()[3]).to.equal(expectedValueAfter);
});
it('Should not render title when title prop is not passed', () => {
diff --git a/lib/popover/theme.module.scss b/lib/popover/theme.module.scss
index faca8ef8..d6e7afb4 100644
--- a/lib/popover/theme.module.scss
+++ b/lib/popover/theme.module.scss
@@ -7,6 +7,7 @@
}
:local(.popoverWrapper) {
+ filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
margin: 2% 1%;
padding: 10px;
/*
@@ -21,16 +22,28 @@
white-space: nowrap;
max-width: 100px;
border-radius: 5px;
- background-color: $secondary-white;
+ background-color: #ffffff;
position: absolute;
- box-shadow: 1px 0px 8px 1px rgba(0, 0, 0, 0.3);
outline: none;
+ font-size: 0.9em;
z-index: 999; // render on top of any content
+ font-variant-ligatures: none;
+ -webkit-font-variant-ligatures: none;
+ text-rendering: optimizeLegibility;
+ -moz-osx-font-smoothing: grayscale;
+ font-smooth: antialiased;
+ -webkit-font-smoothing: antialiased;
+ text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
+ hr {
+ width: 100%;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.3);
+ border: none;
+ }
}
:local(.title) {
display: inline-block;
- font-size: 18px;
font-weight: bold;
text-transform: capitalize;
margin-bottom: 10px;
@@ -57,7 +70,7 @@
display: inline-block;
min-width: 12px;
min-height: 12px;
- background-color: $secondary-white;
+ background-color: #ffffff;
}
/* top positions */