[FX-5607] Allow to customize the color of icon (#4399)

toptal · Jul 10, 2024 · 3b4fc59 · 3b4fc59
1 parent 0b9d930
commit 3b4fc59
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/.changeset/modern-sheep-help.md b/.changeset/modern-sheep-help.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-tag': patch
+'@toptal/picasso': patch
+---
+
+### Tag
+
+- allow to customize the color of an icon
diff --git a/packages/base/Tag/src/Tag/Tag.tsx b/packages/base/Tag/src/Tag/Tag.tsx
@@ -40,6 +40,33 @@ export interface Props extends BaseProps, TextLabelProps, DivOrAnchorProps {
   endAdornment?: ReactNode
 }
 
+type IconProps = {
+  className?: string
+  color?: string
+}
+
+const DeleteIcon = ({ onClick }: { onClick: (event: MouseEvent) => void }) => (
+  <span
+    aria-label='delete icon'
+    role='button'
+    className='w-min h-min flex items-center cursor-pointer -ml-2 mr-2'
+    onClick={onClick}
+  >
+    <CloseMinor16 />
+  </span>
+)
+
+const cloneIcon = (icon: ReactNode, disabled?: boolean) => {
+  if (!icon || !React.isValidElement<IconProps>(icon)) {
+    return null
+  }
+
+  return React.cloneElement(icon, {
+    color: disabled ? 'grey' : icon.props.color || 'darkGrey',
+    className: twMerge('flex items-center -mr-1 ml-3', icon.props.className),
+  })
+}
+
 export const Tag = forwardRef<HTMLDivElement, Props>(function Tag(props, ref) {
   const {
     as: Root = 'div',
@@ -56,14 +83,12 @@ export const Tag = forwardRef<HTMLDivElement, Props>(function Tag(props, ref) {
     role,
     ...rest
   } = props
+
   const titleCase = useTitleCase(propsTitleCase)
+  const isInteractive = onDelete || onClick
 
   const handleDelete = (event: MouseEvent) => {
-    if (disabled) {
-      return
-    }
-
-    if (onDelete) {
+    if (!disabled && onDelete) {
       event.preventDefault()
 
       /**
@@ -72,44 +97,31 @@ export const Tag = forwardRef<HTMLDivElement, Props>(function Tag(props, ref) {
        * options list.
        */
       event.stopPropagation()
-
       onDelete()
     }
   }
 
-  let iconCloned = null
-
-  if (icon && React.isValidElement(icon)) {
-    iconCloned = React.cloneElement(icon as ReactElement<BaseProps>, {
-      className: twMerge(
-        'flex items-center -mr-1 ml-3',
-        disabled ? 'text-gray-500' : 'text-graphite-700',
-        (icon.props as BaseProps).className
-      ),
-    })
-  }
+  const clonedIcon = cloneIcon(icon, disabled)
 
   return (
     <Root
-      role={role || (onDelete || onClick ? 'button' : undefined)}
+      role={role || (isInteractive ? 'button' : undefined)}
       aria-disabled={disabled}
       ref={ref}
       className={twMerge(
         `text-lg transition-none border border-solid rounded-[6.25rem]
-          h-6 max-w-full inline-flex justify-center items-center cursor-default bg-white
-          group align-middle`,
-        'leading-[inherit]',
+        h-6 max-w-full inline-flex justify-center items-center cursor-default bg-white
+        group align-middle leading-[inherit]`,
         classByVariant[variant],
         className,
         disabled && 'text-gray-500 border-gray-200 pointer-events-none'
       )}
       style={style}
       onClick={onClick}
-      tabIndex={onDelete || onClick ? 0 : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
       {...rest}
     >
-      {iconCloned}
-
+      {clonedIcon}
       <span className='flex gap-2 px-3 overflow-hidden items-center'>
         <Typography
           size='xsmall'
@@ -122,20 +134,9 @@ export const Tag = forwardRef<HTMLDivElement, Props>(function Tag(props, ref) {
         >
           {children}
         </Typography>
-
         {endAdornment}
       </span>
-
-      {onDelete && (
-        <span
-          aria-label='delete icon'
-          role='button'
-          className='w-min h-min flex items-center cursor-pointer -ml-2 mr-2'
-          onClick={handleDelete}
-        >
-          <CloseMinor16 />
-        </span>
-      )}
+      {onDelete && <DeleteIcon onClick={handleDelete} />}
     </Root>
   )
 })

diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -133,7 +133,7 @@ exports[`Tag renders with connection and icon 1`] = `
       data-testid="tag"
     >
       <svg
-        class="PicassoSvgSettings16-root flex items-center -mr ml-3 text-graphite"
+        class="PicassoSvgSettings16-root flex items-center -mr ml-3 PicassoSvgSettings16-darkGrey"
         style="min-width: 16px; min-height: 16px;"
         viewBox="0 0 16 16"
       >