fix(academic-portfolio): enrollment drawer

searching by tags should show search icon instead of add icon. fix: Add prop to TagsInput to accept an alternative left icon of the main action button --------- Reviewed-by: @MIGUELez11 Refs: #146 Co-authored-by: paola-p <> Co-authored-by: MIGUELez11 <[email protected]>
leemonade · Apr 26, 2024 · 5624811 · 5624811
1 parent f66c24b
commit 5624811
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/components/src/form/TagsInput/TagsInput.constants.js b/packages/components/src/form/TagsInput/TagsInput.constants.js
@@ -25,4 +25,5 @@ export const TAGS_INPUT_PROP_TYPES = {
   onChange: PropTypes.func,
   onSearch: PropTypes.func,
   waitToSearch: PropTypes.number,
+  ButtonLeftIcon: PropTypes.node,
 };
diff --git a/packages/components/src/form/TagsInput/TagsInput.js b/packages/components/src/form/TagsInput/TagsInput.js
@@ -13,7 +13,7 @@ import { TagsInputStyles } from './TagsInput.styles';
 import { TAGS_INPUT_DEFAULT_PROPS, TAGS_INPUT_PROP_TYPES } from './TagsInput.constants';
 import { ImageLoader } from '../../misc';
 
-const OptionRenderer = forwardRef(({ label, value, icon, ...props }, ref) => (
+const OptionRenderer = forwardRef(({ label, value, icon, buttonLeftIcon, ...props }, ref) => (
   <Box
     sx={(theme) => ({
       display: 'flex',
@@ -34,6 +34,7 @@ OptionRenderer.propTypes = {
   label: PropTypes.string,
   value: PropTypes.string,
   icon: PropTypes.string,
+  buttonLeftIcon: PropTypes.node,
 };
 
 const TagsInput = forwardRef(
@@ -52,6 +53,7 @@ const TagsInput = forwardRef(
       canAddNewSuggestions = true,
       onChange = () => {},
       onSearch,
+      ButtonLeftIcon,
       ...props
     },
     ref,
@@ -175,7 +177,12 @@ const TagsInput = forwardRef(
             />
           </Box>
           <Box skipFlex>
-            <Button variant="link" size="sm" leftIcon={<AddCircleIcon />} onClick={() => addTag()}>
+            <Button
+              variant="link"
+              size="sm"
+              leftIcon={ButtonLeftIcon || <AddCircleIcon />}
+              onClick={() => addTag()}
+            >
               {labels.addButton}
             </Button>
           </Box>