feat(Chip): allow using badge in selectable chips

src/__private_stories__/skin-components-story.tsx

@@ -237,6 +237,9 @@ export const Default: StoryComponent<Args> = ({variant}) => {
 
                     {/** Chip */}
                     <Inline space={16} wrap>
+                        <Chip badge={10} Icon={IconLightningRegular}>
+                            Default chip
+                        </Chip>
                         <Chip Icon={IconLightningRegular} active>
                             Active chip
                         </Chip>

src/__screenshot_tests__/chip-screenshot-test.tsx

@@ -26,16 +26,20 @@ test.each(CHIP_OPTIONS)('Chip - %s', async (option) => {
 });
 
 test.each`
-    selection     | inverse
-    ${'single'}   | ${false}
-    ${'single'}   | ${true}
-    ${'multiple'} | ${false}
-    ${'multiple'} | ${true}
-`('Chip - $selection selection (inverse = $inverse)', async ({selection, inverse}) => {
+    selection     | inverse  | badge
+    ${'single'}   | ${false} | ${undefined}
+    ${'single'}   | ${true}  | ${undefined}
+    ${'multiple'} | ${false} | ${undefined}
+    ${'multiple'} | ${true}  | ${undefined}
+    ${'single'}   | ${false} | ${2}
+    ${'single'}   | ${true}  | ${2}
+    ${'multiple'} | ${false} | ${2}
+    ${'multiple'} | ${true}  | ${2}
+`('Chip - $selection selection (inverse = $inverse, badge = $badge)', async ({selection, inverse, badge}) => {
     const page = await openStoryPage({
         id: `components-chip--${selection}-selection`,
         device: 'DESKTOP',
-        args: {inverse, withIcon: true},
+        args: {inverse, withIcon: true, badge},
     });
 
     const story = await screen.findByTestId(`chip-${selection}-selection`);

src/__stories__/chip-story.tsx

@@ -67,9 +67,10 @@ export const Default: StoryComponent<Args> = ({inverse, withIcon, closable, badg
     );
 };
 
-export const SingleSelection: StoryComponent<Omit<Args, 'closable' | 'badge'>> = ({inverse, withIcon}) => {
+export const SingleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, withIcon}) => {
     const props = {
         Icon: withIcon ? IconLightningFilled : undefined,
+        badge: badge !== 'undefined' ? +badge : undefined,
     };
 
     return (
@@ -106,9 +107,10 @@ export const SingleSelection: StoryComponent<Omit<Args, 'closable' | 'badge'>> =
     );
 };
 
-export const MultipleSelection: StoryComponent<Omit<Args, 'closable' | 'badge'>> = ({inverse, withIcon}) => {
+export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, withIcon}) => {
     const props = {
         Icon: withIcon ? IconLightningFilled : undefined,
+        badge: badge !== 'undefined' ? +badge : undefined,
     };
 
     return (
@@ -150,15 +152,19 @@ const defaultArgs = {
     closable: false,
 };
 
-Default.storyName = 'Chip';
-
-Default.argTypes = {
+const defaultArgTypes = {
     badge: {
         options: badgeOptions,
         control: {type: 'select'},
     },
 };
 
+Default.storyName = 'Chip';
+Default.argTypes = defaultArgTypes;
 Default.args = defaultArgs;
-SingleSelection.args = {...(({closable, badge, ...o}) => o)(defaultArgs)};
-MultipleSelection.args = {...(({closable, badge, ...o}) => o)(defaultArgs)};
+
+SingleSelection.argTypes = defaultArgTypes;
+SingleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};
+
+MultipleSelection.argTypes = defaultArgTypes;
+MultipleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};

src/chip.tsx

@@ -47,13 +47,6 @@ const Chip: React.FC<ChipProps> = (props: ChipProps) => {
     const paddingRight = {mobile: 20, desktop: 12} as const;
     const paddingIcon = {mobile: 16, desktop: 8} as const;
 
-    const renderBadge = () => {
-        if (!badge) {
-            return null;
-        }
-        return <>{badge === true ? <Badge /> : <Badge value={badge} />}</>;
-    };
-
     const body = (
         <>
             {Icon && (
@@ -69,22 +62,6 @@ const Chip: React.FC<ChipProps> = (props: ChipProps) => {
         </>
     );
 
-    if (badge) {
-        return (
-            <Box
-                className={classnames(
-                    overAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
-                    styles.chipWrapper
-                )}
-                paddingLeft={paddingLeft}
-                paddingRight={paddingIcon}
-                {...getPrefixedDataAttributes(dataAttributes, 'Chip')}
-            >
-                {body}
-                {renderBadge()}
-            </Box>
-        );
-    }
     if (onClose) {
         return (
             <Box
@@ -118,6 +95,13 @@ const Chip: React.FC<ChipProps> = (props: ChipProps) => {
 
     const chipDataAttributes = {'component-name': 'Chip', ...dataAttributes};
 
+    const renderBadge = () => {
+        if (!badge) {
+            return null;
+        }
+        return <>{badge === true ? <Badge /> : <Badge value={badge} />}</>;
+    };
+
     const renderContent = (dataAttributes?: DataAttributes) => (
         <Box
             className={classnames(
@@ -129,10 +113,11 @@ const Chip: React.FC<ChipProps> = (props: ChipProps) => {
                 }
             )}
             paddingLeft={paddingLeft}
-            paddingRight={paddingRight}
+            paddingRight={badge ? paddingIcon : paddingRight}
             dataAttributes={dataAttributes}
         >
             {body}
+            {renderBadge()}
         </Box>
     );