NewPanelEdit: Side options collapse/expand design update (#23161)

* WIP: Panel options search

* Panel options search

* Minor update

* Fixed ts issues

* StatPanel: Fixed duplicate option exception

* Added some polish

* Updated snapshot

* Minor fix

* updated snapshot

packages/grafana-ui/src/components/Forms/Input/Input.tsx

@@ -211,7 +211,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
 });
 
 export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
-  const { addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
+  const { className, addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
   /**
    * Prefix & suffix are positioned absolutely within inputWrapper. We use client rects below to apply correct padding to the input
    * when prefix/suffix is larger than default (28px = 16px(icon) + 12px(left/right paddings)).
@@ -224,7 +224,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const styles = getInputStyles({ theme, invalid: !!invalid });
 
   return (
-    <div className={cx(styles.wrapper, inputSizes()[size])}>
+    <div className={cx(styles.wrapper, inputSizes()[size], className)}>
       {!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
 
       <div className={styles.inputWrapper}>

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -13,11 +13,13 @@ export interface IconProps {
 const getIconStyles = stylesFactory(() => {
   return {
     icon: css`
-      display: inline-block;
+      display: inline-flex;
       width: 16px;
+      align-items: center;
       height: 16px;
       text-align: center;
       font-size: 14px;
+
       &:before {
         vertical-align: middle;
       }

packages/grafana-ui/src/components/Icon/types.ts

@@ -89,6 +89,7 @@ export type IconType =
   | 'times-circle-o'
   | 'check-circle-o'
   | 'ban'
+  | 'remove'
   | 'arrow-left'
   | 'arrow-right'
   | 'arrow-up'

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -24,6 +24,8 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false)
       position: relative;
       top: 1px;
       display: flex;
+      // Sometimes TabsBar is rendered without any tabs, and should preserve height
+      height: 41px;
     `,
   };
 });