feat: Badge component improvements (#737)

CHANGELOG.md

@@ -5,6 +5,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc
 # next
 
 -   [Feat] New `Modal` prop `portalElement`, to enable consumers of the `Modal` component to have some control on where the modal portal is rendered.
+-   [Feat] The `Badge` component now supports being rendered inside other elements. It renders as an inline element, which also makes it more versatile in common situations when it's needed.
 
 # v17.7.0
 

src/new-components/badge/badge.module.css

@@ -2,7 +2,7 @@
     --reactist-badge-neutral-background: rgb(238, 238, 238);
     --reactist-badge-neutral-foreground: rgb(102, 102, 102);
 
-    --reactist-badge-positive-background: rgba(5, 133, 39, 0.1);
+    --reactist-badge-positive-background: rgb(224, 241, 228);
     --reactist-badge-positive-foreground: rgb(5, 133, 39);
 
     --reactist-badge-color-background: rgb(250, 234, 209);
@@ -11,11 +11,10 @@
 
 .badge {
     font-family: var(--reactist-font-family);
-    font-size: 10px;
     font-weight: var(--reactist-font-weight-medium);
+    font-size: 10px;
     border-radius: 3px;
     padding: 3px var(--reactist-spacing-xsmall);
-    text-transform: uppercase;
 }
 
 .badge-neutral {

src/new-components/badge/badge.stories.mdx

@@ -1,6 +1,11 @@
 import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
 
+import { Box } from '../box'
+import { Button } from '../button'
 import { Columns, Column } from '../columns'
+import { Stack } from '../stack'
+import { TextLink } from '../text-link'
+
 import { Badge } from './badge'
 
 <Meta
@@ -19,10 +24,10 @@ The use of variants does not provide extra semantic meaning and is strictly visu
 
 <Canvas>
     <Story
+        name="Main demo"
         parameters={{
             docs: { source: { type: 'code' } },
         }}
-        name="Main demo"
     >
         <Columns space="large">
             <Column width="content">
@@ -38,6 +43,34 @@ The use of variants does not provide extra semantic meaning and is strictly visu
     </Story>
 </Canvas>
 
+## Inside other elements
+
+<Canvas>
+    <Story
+        name="Inside other elements"
+        parameters={{
+            docs: { source: { type: 'code' } },
+        }}
+    >
+        <Stack space="medium" paddingX="medium">
+            <Box marginX="-large">
+                <Button variant="quaternary" size="large">
+                    Reminders <Badge variant="positive">Pro</Badge>
+                </Button>
+            </Box>
+            <div>
+                You can have badges inside{' '}
+                <TextLink>
+                    links <Badge variant="positive">nice</Badge>
+                </TextLink>
+                .
+            </div>
+        </Stack>
+    </Story>
+</Canvas>
+
+## Props
+
 <ArgsTable of={Badge} />
 
 ## Colors

src/new-components/badge/badge.tsx

@@ -2,23 +2,28 @@ import * as React from 'react'
 
 import { Box } from '../box'
 
-import type { PropsWithChildren } from 'react'
-
 import styles from './badge.module.css'
+import { polymorphicComponent } from '../../utils/polymorphism'
 
-type Props = {
+type BadgeProps = {
     variant: 'neutral' | 'positive' | 'color'
-    'aria-label'?: string
 }
 
-function Badge({ variant = 'neutral', children, ...rest }: PropsWithChildren<Props>) {
-    const variantClassName = styles[`badge-${variant}`]
-
+const Badge = polymorphicComponent<'div', BadgeProps>(function Badge(
+    { variant = 'neutral', children, exceptionallySetClassName, ...rest },
+    ref,
+) {
     return (
-        <Box {...rest} className={[styles.badge, variantClassName]}>
+        <Box
+            {...rest}
+            ref={ref}
+            display="inline"
+            className={[styles.badge, styles[`badge-${variant}`], exceptionallySetClassName]}
+        >
             {children}
         </Box>
     )
-}
+})
 
 export { Badge }
+export type { BadgeProps }