From 66021a80a6310264c4150cce42ee77b513103ca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Wed, 16 Feb 2022 10:34:15 -0300
Subject: [PATCH] feat(fuselage): Add custom Icon to Select Component (#639)

* Add addonIcon prop to Select

* improve: prevent list to open clicking on addon

* chore: remove fluted code

Co-authored-by: dougfabris <devfabris@gmail.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 .../fuselage/src/components/Select/Select.stories.tsx  | 10 ++++++++++
 packages/fuselage/src/components/Select/Select.tsx     |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
index ff908c7733..f31068e1b1 100644
--- a/packages/fuselage/src/components/Select/Select.stories.tsx
+++ b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -100,6 +100,16 @@ WithEmptyOptions.args = {
   options: [],
 };
 
+export const WithAddon: ComponentStory<typeof Select> = TemplateWithFilter.bind(
+  {}
+);
+WithAddon.args = {
+  width: '250px',
+  placeholder: 'Placeholder here...',
+  options,
+  addonIcon: 'magnifier',
+};
+
 export const CustomEmpty: ComponentStory<typeof Select> =
   TemplateWithFilter.bind({});
 CustomEmpty.args = {
diff --git a/packages/fuselage/src/components/Select/Select.tsx b/packages/fuselage/src/components/Select/Select.tsx
index f0aa5c342f..d0a6c08469 100644
--- a/packages/fuselage/src/components/Select/Select.tsx
+++ b/packages/fuselage/src/components/Select/Select.tsx
@@ -73,6 +73,7 @@ export type SelectProps = Omit<ComponentProps<typeof Box>, 'onChange'> & {
   filter?: string;
   renderOptions?: ElementType;
   customEmpty?: string;
+  addonIcon?: ComponentProps<typeof Icon>['name'];
 };
 
 export const Select = forwardRef(
@@ -89,6 +90,7 @@ export const Select = forwardRef(
       getLabel = ([_, label] = ['', '']) => label,
       placeholder = '',
       renderOptions: _Options = Options,
+      addonIcon,
       customEmpty,
       ...props
     }: SelectProps,
@@ -201,7 +203,7 @@ export const Select = forwardRef(
                 name={
                   visible === AnimatedVisibility.VISIBLE
                     ? 'cross'
-                    : 'chevron-down'
+                    : addonIcon || 'chevron-down'
                 }
                 size='x20'
               />