From e4885cc76f75be2697d592238e566b62693d2058 Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Sat, 8 Aug 2020 10:25:40 +0200
Subject: [PATCH] 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
---
 .../ButtonCascader/ButtonCascader.story.tsx   | 12 +++++++++++-
 .../ButtonCascader/ButtonCascader.tsx         | 19 ++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
index 7e92c5dcf0b..9849450b63a 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
+++ b/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>
+  );
+};
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index 69a15ad2577..e9b7779f783 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/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>
   );