Change element of remove button

teamleadercrm · Dec 5, 2023 · 7d4d23e · 7d4d23e
1 parent f2c2fe7
commit 7d4d23e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -141,6 +141,7 @@ const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Opt
       onRemoveClick={onClick}
       onRemoveMouseDown={onMouseDown}
       onRemoveMouseUp={onMouseUp}
+      removeElement="div"
       {...rest}
     >
       {children}

diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
@@ -17,11 +17,24 @@ export interface TagProps extends Omit<BoxProps, 'className' | 'size'> {
   onRemoveClick?: React.MouseEventHandler;
   onRemoveMouseDown?: React.MouseEventHandler;
   onRemoveMouseUp?: React.MouseEventHandler;
+  removeElement?: React.ElementType;
   size?: TagSize;
 }
 
 const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
-  ({ children, className, onRemoveClick, onRemoveMouseDown, onRemoveMouseUp, size = 'medium', ...others }, ref) => {
+  (
+    {
+      children,
+      className,
+      onRemoveClick,
+      onRemoveMouseDown,
+      onRemoveMouseUp,
+      removeElement,
+      size = 'medium',
+      ...others
+    },
+    ref,
+  ) => {
     const classNames = cx(theme[`is-${size}`], theme['wrapper'], className);
 
     const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
@@ -40,6 +53,7 @@ const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
         </TextElement>
         {onRemoveClick && (
           <IconButton
+            element={removeElement}
             className={theme['remove-button']}
             flexShrink={0}
             icon={<IconCloseSmallOutline />}