From 3d9a88c7afbb1cee081159060a91cd8615e10472 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Fri, 24 Apr 2020 17:25:39 +0300
Subject: [PATCH] Grafana-UI: Extend Layout props (#23771)

* Grafana-UI: Extend Layout props

* Grafana-UI: Merge container styles

* Search: Fix prop types

* Grafana-UI: remove className prop
---
 packages/grafana-ui/src/components/Layout/Layout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx
index 8114a4a0762..586ea4f9348 100644
--- a/packages/grafana-ui/src/components/Layout/Layout.tsx
+++ b/packages/grafana-ui/src/components/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
@@ -11,7 +11,7 @@ type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';
 type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
 type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
 
-export interface LayoutProps {
+export interface LayoutProps extends Omit<HTMLProps<HTMLDivElement>, 'align' | 'children' | 'wrap'> {
   children: React.ReactNode[] | React.ReactNode;
   orientation?: Orientation;
   spacing?: Spacing;
@@ -34,11 +34,12 @@ export const Layout: React.FC<LayoutProps> = ({
   align = 'normal',
   wrap = false,
   width = 'auto',
+  ...rest
 }) => {
   const theme = useTheme();
   const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
   return (
-    <div className={styles.layout} style={{ width }}>
+    <div className={styles.layout} style={{ width }} {...rest}>
       {React.Children.toArray(children)
         .filter(Boolean)
         .map((child, index) => {
@@ -110,7 +111,6 @@ const getStyles = stylesFactory(
         margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
         display: flex;
         align-items: ${align};
-        // height: 100%;
 
         &:last-child {
           margin-bottom: 0;