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 */