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>

Author: 3 people

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 = {

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'
               />