From 8c142b9075bc578ab7de03240d1dfab9bc685a56 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Wed, 1 Apr 2020 13:42:21 +0200
Subject: [PATCH] Forms: Add image and description to option (#23230)

* Add image and description to option

* add back flex grow on option
---
 .../components/Forms/Select/Select.story.tsx    | 10 ++++++++--
 .../src/components/Forms/Select/SelectMenu.tsx  |  6 +++++-
 .../components/Forms/Select/getSelectStyles.ts  | 17 ++++++++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
index be65a37e752..fef35ed06cd 100644
--- a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx
@@ -113,8 +113,14 @@ export const SelectWithOptionDescriptions = () => {
 
   const [value, setValue] = useState<number>();
   const options = [
-    { label: 'hello', value: 1, description: 'this is a description' },
-    { label: 'hello 2', value: 2, description: 'second description' },
+    { label: 'Basic option', value: 0 },
+    { label: 'Option with description', value: 1, description: 'this is a description' },
+    {
+      label: 'Option with description and image',
+      value: 2,
+      description: 'This is a very elaborate description, describing all the wonders in the world.',
+      imgUrl: 'https://placekitten.com/40/40',
+    },
   ];
 
   return (
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
index 078f7512a57..58828e77e4b 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
@@ -49,7 +49,11 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
         {...innerProps}
         aria-label="Select option"
       >
-        <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>
+        {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} />}
+        <div className={styles.optionBody}>
+          <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>
+          {data.description && <div className={styles.optionDescription}>{data.description}</div>}
+        </div>
         {isSelected && (
           <span>
             <Icon name="check" />
diff --git a/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
index a29abeb6208..07f3ee0c887 100644
--- a/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
@@ -21,7 +21,6 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
     option: css`
       padding: 8px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
       flex-direction: row;
       white-space: nowrap;
@@ -31,6 +30,22 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
         background: ${optionBgHover};
       }
     `,
+    optionImage: css`
+      width: 16px;
+      margin-right: 10px;
+    `,
+    optionDescription: css`
+      font-weight: normal;
+      font-size: ${theme.typography.size.sm};
+      color: ${theme.colors.textWeak};
+      white-space: normal;
+    `,
+    optionBody: css`
+      display: flex;
+      font-weight: ${theme.typography.weight.semibold};
+      flex-direction: column;
+      flex-grow: 1;
+    `,
     optionFocused: css`
       background: ${optionBgHover};
       border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);