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

-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 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 Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
 type Align = 'normal' | 'flex-start' | 'flex-end' | '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;
   children: React.ReactNode[] | React.ReactNode;
   orientation?: Orientation;
   orientation?: Orientation;
   spacing?: Spacing;
   spacing?: Spacing;
@@ -34,11 +34,12 @@ export const Layout: React.FC<LayoutProps> = ({
   align = 'normal',
   align = 'normal',
   wrap = false,
   wrap = false,
   width = 'auto',
   width = 'auto',
+  ...rest
 }) => {
 }) => {
   const theme = useTheme();
   const theme = useTheme();
   const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
   const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
   return (
   return (
-    <div className={styles.layout} style={{ width }}>
+    <div className={styles.layout} style={{ width }} {...rest}>
       {React.Children.toArray(children)
       {React.Children.toArray(children)
         .filter(Boolean)
         .filter(Boolean)
         .map((child, index) => {
         .map((child, index) => {
@@ -110,7 +111,6 @@ const getStyles = stylesFactory(
         margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
         margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
         display: flex;
         display: flex;
         align-items: ${align};
         align-items: ${align};
-        // height: 100%;
 
 
         &:last-child {
         &:last-child {
           margin-bottom: 0;
           margin-bottom: 0;