feat(chip): minor changes aligning the stages

packages/components/chip/src/Chip.tsx

@@ -9,7 +9,6 @@ import React, {
 } from 'react'
 
 import { chipStyles, type ChipStylesProps } from './Chip.styles'
-import { ChipContent } from './ChipContent'
 import { ChipContext } from './useChipContext'
 import { useChipElement } from './useChipElement'
 
@@ -21,8 +20,14 @@ const findElement =
   (children: React.ReactNode) =>
   (...values: string[]) => {
     const validChildren = Children.toArray(children).filter(isValidElement)
+    debugger
 
-    return validChildren.find(child => values.includes(getDisplayName(child) || ''))
+    return validChildren.find(child => {
+      const displayName = getDisplayName(child)
+      debugger
+
+      return values.includes(displayName || '')
+    })
   }
 
 export interface ChipProps
@@ -78,10 +83,11 @@ export const Chip = forwardRef<HTMLButtonElement | HTMLDivElement, ChipProps>(
 
     const findChipElement = findElement(children)
 
-    const hasClearButton = findChipElement('Chip.ClearButton')
-    const hasContent = findChipElement('Chip.Content')
+    const leadingIcon = findChipElement('Chip.LeadingIcon')
+    const content = findChipElement('Chip.Content')
+    const clearButton = findChipElement('Chip.ClearButton')
 
-    const Content = hasContent ? Fragment : ChipContent
+    console.log({ leadingIcon, content, clearButton })
 
     return (
       <ChipContext.Provider value={{ disabled, design, intent }}>
@@ -92,15 +98,17 @@ export const Chip = forwardRef<HTMLButtonElement | HTMLDivElement, ChipProps>(
             design,
             disabled,
             intent,
-            hasClearButton: !!hasClearButton,
+            hasClearButton: !!clearButton,
           })}
           {...{
             ...chipProps,
             ...otherProps,
           }}
           data-spark-component="chip"
         >
-          <Content>{children}</Content>
+          {leadingIcon}
+          {content || <span className="inline-block grow truncate">{children}</span>}
+          {clearButton}
         </ChipElement>
       </ChipContext.Provider>
     )

packages/components/chip/src/ChipClearButton.styles.tsx

@@ -1,7 +1,10 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 
+// eslint-disable-next-line tailwindcss/no-custom-classname
 export const chipClearButtonWrapperStyles = cva(
-  ['flex h-full items-center justify-center', 'ml-md focus-visible:outline-none'],
+  [
+    'ml-md flex h-full items-center justify-center opacity-dim-3 hover:opacity-none focus-visible:outline-none',
+  ],
   {
     variants: {
       disabled: {

packages/components/chip/src/ChipClearButton.tsx

@@ -16,14 +16,18 @@ export interface ChipClearButtonProps
 }
 
 export const ChipClearButton = forwardRef<HTMLSpanElement, ChipClearButtonProps>(
-  ({
-    onClick,
-    children = (
-      <Icon label="close" className="opacity-dim-3">
-        <DeleteFill />
-      </Icon>
-    ),
-  }) => {
+  (
+    {
+      onClick,
+      children = (
+        <Icon label="close" className="opacity-dim-3">
+          <DeleteFill />
+        </Icon>
+      ),
+      tabIndex = -1,
+    },
+    forwardedRef
+  ) => {
     const { design, disabled } = useChipContext()
 
     const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -38,8 +42,14 @@ export const ChipClearButton = forwardRef<HTMLSpanElement, ChipClearButtonProps>
           disabled: !!disabled,
         })}
         onClick={onClearHandler}
+        ref={forwardedRef}
       >
-        <button type="button" disabled={!!disabled} className={chipClearButtonStyles({ disabled })}>
+        <button
+          tabIndex={tabIndex}
+          type="button"
+          disabled={!!disabled}
+          className={chipClearButtonStyles({ disabled })}
+        >
           {children}
         </button>
       </span>

packages/components/chip/src/ChipContent.tsx

@@ -4,8 +4,12 @@ import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
 export type ChipContentProps = ComponentPropsWithoutRef<'span'>
 
 export const ChipContent = forwardRef<HTMLSpanElement, ChipContentProps>(
-  ({ children, className }) => {
-    return <span className={cx('inline-block grow truncate', className)}>{children}</span>
+  ({ children, className }, forwardedRef) => {
+    return (
+      <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>
+        {children}
+      </span>
+    )
   }
 )
 

packages/components/chip/src/ChipLeadingIcon.tsx

@@ -2,10 +2,14 @@ import { cx } from 'class-variance-authority'
 import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 export type ChipLeadingIconProps = ComponentPropsWithoutRef<'span'>
+
 export const ChipLeadingIcon = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<'span'>>(
-  ({ children, className }) => {
+  ({ children, className }, forwardedRef) => {
     return (
-      <span className={cx('mr-sm flex h-full items-center justify-center', className)}>
+      <span
+        className={cx('mr-sm flex h-full items-center justify-center', className)}
+        ref={forwardedRef}
+      >
         {children}
       </span>
     )

packages/components/chip/src/index.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { Chip as Root, ChipProps } from './Chip'
+import { Chip as Root, type ChipProps } from './Chip'
 import { ChipClearButton } from './ChipClearButton'
 import { ChipContent } from './ChipContent'
 import { ChipLeadingIcon } from './ChipLeadingIcon'
@@ -9,13 +9,16 @@ export { type ChipClearButtonProps } from './ChipClearButton'
 export { type ChipContentProps } from './ChipContent'
 export { type ChipLeadingIconProps } from './ChipLeadingIcon'
 
-ChipClearButton.displayName = 'Chip.ClearButton'
 export const Chip: FC<ChipProps> & {
-  ClearButton: typeof ChipClearButton
   Content: typeof ChipContent
   LeadingIcon: typeof ChipLeadingIcon
+  ClearButton: typeof ChipClearButton
 } = Object.assign(Root, {
-  ClearButton: ChipClearButton,
   Content: ChipContent,
   LeadingIcon: ChipLeadingIcon,
+  ClearButton: ChipClearButton,
 })
+
+Chip.ClearButton.displayName = 'Chip.ClearButton'
+Chip.Content.displayName = 'Chip.Content'
+Chip.LeadingIcon.displayName = 'Chip.LeadingIcon'