Allow setting an icon to the Chip component

- Add icon prop to set an icon at the left of the Chip component.
- Add __icon pseudo-prop to style the passed icon from theme's config.

Author: maurobender

Diff for: src/components/main/Button/index.tsx

@@ -1,18 +1,10 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import Pressable from '../Pressable';
 import { HStack } from '../Stack';
 import Text from '../Text';
 import { useButtonPropsResolver } from './hooks';
-import type { IButtonIconProps, IButtonProps } from './types';
-
-const cloneIconWithProps = (
-	element: ReactElement<IButtonIconProps> | undefined,
-	props: IButtonIconProps
-) => (
-	element && React.isValidElement( element )
-		? React.cloneElement( element, { ...props, ...element.props } )
-		: null
-);
+import type { IButtonProps } from './types';
+import cloneElement from '../../utils/cloneElement';
 
 const Button = ( {
 	children,
@@ -28,8 +20,8 @@ const Button = ( {
 		rightIconProps
 	} = useButtonPropsResolver( props );
 
-	const leftIcon = cloneIconWithProps( leftIconProp, leftIconProps || {} );
-	const rightIcon = cloneIconWithProps( rightIconProp, rightIconProps || {} );
+	const leftIcon = cloneElement( leftIconProp, leftIconProps || {} );
+	const rightIcon = cloneElement( rightIconProp, rightIconProps || {} );
 
 	return (
 		<Pressable

Diff for: src/components/main/Chip/hooks.ts

@@ -20,6 +20,7 @@ export const useChipPropsResolver = ( props: Omit<IChipProps, 'label'> ) => {
 	const {
 		__stack: stackProps,
 		__label: labelProps,
+		__icon: iconProps,
 		...containerProps
 	} = useComponentPropsResolver( 'Chip', props, state ) as IChipProps;
 
@@ -33,6 +34,7 @@ export const useChipPropsResolver = ( props: Omit<IChipProps, 'label'> ) => {
 	return {
 		containerProps,
 		stackProps,
-		labelProps
+		labelProps,
+		iconProps
 	};
 };

Diff for: src/components/main/Chip/index.tsx

@@ -5,23 +5,31 @@ import { HStack } from '../Stack';
 import Text from '../Text';
 import { useChipPropsResolver } from './hooks';
 import type { IChipProps } from './types';
+import cloneElement from '../../utils/cloneElement';
 
 const Chip = ( {
-	label, testID, ...props
+	label,
+	testID,
+	icon: iconProp,
+	...props
 }: IChipProps, ref?: React.Ref<View> ) => {
 	const {
 		containerProps,
 		stackProps,
-		labelProps
+		labelProps,
+		iconProps
 	} = useChipPropsResolver( props );
 
+	const icon = cloneElement( iconProp, iconProps || {} );
+
 	return (
 		<Pressable
 			{...containerProps}
 			testID={testID}
 			ref={ref}
 		>
 			<HStack {...stackProps}>
+				<>{icon}</>
 				<Text
 					{...labelProps}
 					testID={testID ? `${testID}-label` : undefined}

Diff for: src/components/main/Chip/types.ts

@@ -1,9 +1,12 @@
+import type { ReactElement } from 'react';
 import type { ComponentStyledProps } from 'src/core/components/types';
+import type { IIconProps } from '../Icon/types';
 import type { IPressableProps } from '../Pressable/types';
 
 export interface IChipProps extends Omit<IPressableProps, 'children' | 'variant' | 'size'>,
 	ComponentStyledProps<'Chip'>
 {
 	label: string,
-	selected?: boolean
+	selected?: boolean,
+	icon?: ReactElement<IIconProps>,
 }

Diff for: src/components/utils/cloneElement.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+
+const cloneElement = <PropsType extends Partial<PropsType> & React.Attributes>(
+	element: ReactElement<PropsType> | undefined,
+	props: PropsType
+) => (
+		element && React.isValidElement( element )
+			? React.cloneElement( element, { ...props, ...element.props } )
+			: null
+	);
+
+export default cloneElement;

Diff for: src/core/components/types/pseudoProps.ts

@@ -58,7 +58,8 @@ interface ITextInputPseudoProps {
 // CHIP pseudoprops
 interface IChipPseudoProps {
 	__stack: ComponentBaseStyledProps<'Stack'>,
-	__label: ComponentBaseStyledProps<'Text'>
+	__label: ComponentBaseStyledProps<'Text'>,
+	__icon: ComponentBaseStyledProps<'Icon'>
 }
 
 // Pseudoprops config for all components

Diff for: src/core/theme/defaultTheme/components/Chip.ts

@@ -12,6 +12,10 @@ export default {
 			color: 'primary.900',
 			variant: 'small-bold'
 		},
+		__icon: {
+			size: 'xs',
+			marginRight: '2'
+		},
 		__disabled: {
 			backgroundColor: 'primary.50',
 			__label: {

Diff for: tests/components/main/Chip.test.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import WithThemeProvider from '../../support/withThemeProvider';
+import FakeBaseIcon from '../../support/FakeBaseIcon';
 
+import Icon from '../../../src/components/main/Icon';
 import Chip from '../../../src/components/main/Chip';
 
 const { itBehavesLike } = require( '../../support/sharedExamples' );
 
+const TestIcon = () => (
+	<Icon name="test" testID="test-icon" as={FakeBaseIcon} />
+);
+
 describe( 'Chip', () => {
 	const label = 'Label';
 
@@ -24,6 +30,11 @@ describe( 'Chip', () => {
 		expect( getByTestId( 'test-chip' ) ).toHaveStyle( { borderColor: '#01164D' } );
 	} );
 
+	it( 'shows an icon when it\'s set', () => {
+		const { queryByTestId } = renderChip( { label, icon: <TestIcon /> } );
+		expect( queryByTestId( 'test-icon' ) ).not.toBeUndefined();
+	} );
+
 	itBehavesLike(
 		'aStyledSystemComponent',
 		{