Forms: Add image and description to option (#23230)

* Add image and description to option

* add back flex grow on option

packages/grafana-ui/src/components/Forms/Select/Select.story.tsx

@@ -113,8 +113,14 @@ export const SelectWithOptionDescriptions = () => {
 
 
   const [value, setValue] = useState<number>();
   const [value, setValue] = useState<number>();
   const options = [
   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 (
   return (

packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx

@@ -49,7 +49,11 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
         {...innerProps}
         {...innerProps}
         aria-label="Select option"
         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 && (
         {isSelected && (
           <span>
           <span>
             <Icon name="check" />
             <Icon name="check" />

packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts

@@ -21,7 +21,6 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
     option: css`
     option: css`
       padding: 8px;
       padding: 8px;
       display: flex;
       display: flex;
-      justify-content: space-between;
       align-items: center;
       align-items: center;
       flex-direction: row;
       flex-direction: row;
       white-space: nowrap;
       white-space: nowrap;
@@ -31,6 +30,22 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
         background: ${optionBgHover};
         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`
     optionFocused: css`
       background: ${optionBgHover};
       background: ${optionBgHover};
       border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
       border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);