Skip to content

Commit

Permalink
fix overflow
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 committed Jul 3, 2020
1 parent bbda3f9 commit bbc2ae9
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 2 deletions.
3 changes: 3 additions & 0 deletions x-pack/plugins/lens/public/visualization_container.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.lnsVisualizationContainer {
overflow: auto;
}
9 changes: 9 additions & 0 deletions x-pack/plugins/lens/public/visualization_container.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,13 @@ describe('VisualizationContainer', () => {

expect(reportingEl.prop('style')).toEqual({ color: 'blue' });
});

test('combines class names with container class', () => {
const component = mount(
<VisualizationContainer className="myClass">Hello!</VisualizationContainer>
);
const reportingEl = component.find('[data-shared-item]').first();

expect(reportingEl.prop('className')).toEqual('myClass lnsVisualizationContainer');
});
});
19 changes: 17 additions & 2 deletions x-pack/plugins/lens/public/visualization_container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
*/

import React from 'react';
import classNames from 'classnames';

import './visualization_container.scss';

interface Props extends React.HTMLAttributes<HTMLDivElement> {
isReady?: boolean;
Expand All @@ -15,9 +18,21 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
* This is a convenience component that wraps rendered Lens visualizations. It adds reporting
* attributes (data-shared-item, data-render-complete, and data-title).
*/
export function VisualizationContainer({ isReady = true, reportTitle, children, ...rest }: Props) {
export function VisualizationContainer({
isReady = true,
reportTitle,
children,
className,
...rest
}: Props) {
return (
<div data-shared-item data-render-complete={isReady} data-title={reportTitle} {...rest}>
<div
data-shared-item
data-render-complete={isReady}
className={classNames(className, 'lnsVisualizationContainer')}
data-title={reportTitle}
{...rest}
>
{children}
</div>
);
Expand Down

0 comments on commit bbc2ae9

Please sign in to comment.