Chip supports prefix as props (#1406)

* first commit

* add prefix to Chip prop

* prop pefix added to Chip

* update prefix to add space

* added test

Author: laraharrow

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- update Chip to receive prop prefix
 - `useClickable` hook
 - `InputColor` now includes `name` in `onChange` response event
 - `InputChips` and `SelectMulti` chip selection and copy-pasting

packages/components/src/Chip/Chip.test.tsx

@@ -36,6 +36,11 @@ test('Chip renders disabled', () => {
   assertSnapshot(<Chip disabled>chip</Chip>)
 })
 
+test('Chip accepts a prefix and renders it with correct style', () => {
+  const { getByText } = renderWithTheme(<Chip prefix="role">admin</Chip>)
+  expect(getByText(/\brole\b/)).toHaveStyle('font-weight: 400')
+})
+
 test('Chip onDelete renders correctly', () => {
   const onDeleteTrigger = jest.fn()
 

packages/components/src/Chip/Chip.tsx

@@ -47,6 +47,7 @@ export interface ChipProps
   extends GenericClickProps<HTMLSpanElement>,
     TruncateProps {
   children: ReactNode
+  prefix?: string
   onDelete?: (
     e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>
   ) => void
@@ -111,6 +112,7 @@ const ChipJSX = forwardRef(
       onDelete,
       onKeyUp,
       onKeyDown,
+      prefix,
       truncate = true,
       ...props
     }: ChipProps,
@@ -138,7 +140,10 @@ const ChipJSX = forwardRef(
         ref={ref}
         {...props}
       >
-        <ChipLabel truncate={truncate}>{children}</ChipLabel>
+        <ChipLabel truncate={truncate}>
+          {prefix && <ChipLabel fontWeight="normal">{prefix}: </ChipLabel>}
+          {children}
+        </ChipLabel>
         {onDelete && !disabled && (
           <IconButton
             disabled={disabled}

storybook/src/Chip.stories.tsx

@@ -38,6 +38,7 @@ export const All = () => (
     <ClickAndDelete />
     <ChipButtons />
     <Removable />
+    <ChipPrefix />
   </SpaceVertical>
 )
 
@@ -68,6 +69,19 @@ export const ClickAndDelete = () => {
   )
 }
 
+export const ChipPrefix = () => {
+  return (
+    <>
+      <Heading>Prefix</Heading>
+      <Space>
+        <Chip>no prefix</Chip>
+        <Chip prefix="role">admin</Chip>
+        <Chip prefix="color">purple,purple:neat</Chip>
+      </Space>
+    </>
+  )
+}
+
 export const ChipButtons = () => {
   const handleClick = () => alert('Clicked!')
   const handleDelete = () => alert('Deleted!')