Chore: Added optional Icon to ButtonCascader (#26852)

## ButtonCascader

### added
- new prop `icon` with type `IconName`

### changed
- `icon` style is now `icons` with properties `left` and `right` for the respective icons

## ButtonCascader Story

### added
- new story `withIcon`
- new knob `icon`

### changed
- `icon` style is now `icons` with properties `left` and `right` for the respective icons

closes #23755

packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, object, select } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonCascader } from '@grafana/ui';
 
@@ -13,6 +13,7 @@ const getKnobs = () => {
   return {
     disabled: boolean('Disabled', false),
     text: text('Button Text', 'Click me!'),
+    icon: select('Icon', ['plus', 'minus', 'table'], 'plus'),
     options: object('Options', [
       {
         label: 'A',
@@ -35,3 +36,12 @@ export const simple = () => {
     </ButtonCascader>
   );
 };
+
+export const withIcon = () => {
+  const { disabled, text, options, icon } = getKnobs();
+  return (
+    <ButtonCascader disabled={disabled} options={options} value={['A']} icon={icon}>
+      {text}
+    </ButtonCascader>
+  );
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
+import { IconName } from '../../types/icon';
 import { css, cx } from 'emotion';
 
 // @ts-ignore
@@ -12,6 +13,7 @@ import { GrafanaTheme } from '@grafana/data';
 export interface ButtonCascaderProps {
   options: CascaderOption[];
   children: string;
+  icon?: IconName;
   disabled?: boolean;
   value?: string[];
   fieldNames?: { label: string; value: string; children: string };
@@ -27,14 +29,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       label: popup;
       z-index: ${theme.zIndex.dropdown};
     `,
-    icon: css`
-      margin: 1px 0 0 4px;
-    `,
+    icons: {
+      right: css`
+        margin: 1px 0 0 4px;
+      `,
+      left: css`
+        margin: -1px 4px 0 0;
+      `,
+    },
   };
 });
 
 export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
-  const { onChange, className, loadData, ...rest } = props;
+  const { onChange, className, loadData, icon, ...rest } = props;
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -47,7 +54,9 @@ export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
       expandIcon={null}
     >
       <button className={cx('gf-form-label', className)} disabled={props.disabled}>
-        {props.children} <Icon name="angle-down" className={styles.icon} />
+        {icon && <Icon name={icon} className={styles.icons.left} />}
+        {props.children}
+        <Icon name="angle-down" className={styles.icons.right} />
       </button>
     </RCCascader>
   );