Add new label prop to Pill Component

Author: Kubit

src/components/pill/__tests__/pill.test.tsx

@@ -13,6 +13,7 @@ const mockProps = {
   variant: 'DEFAULT',
   size: 'LARGE',
   dataTestId: 'pillComponent',
+  label: { content: 'label' },
 };
 
 describe('Pill component', () => {

src/components/pill/pill.styled.ts

@@ -6,6 +6,14 @@ import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import type { IPillStyled } from './types';
 
+export const ParentContainerStyled = styled.div<IPillStyled>`
+  ${props => getStyles(props.styles?.parentContainer)}
+`;
+
+export const LabelContainerStyled = styled.div<IPillStyled>`
+  ${props => getStyles(props.styles?.labelContainer)}
+`;
+
 export const PillStyled = styled.div<IPillStyled & { focus?: boolean }>`
   ${props => getStyles(props.styles?.container)}
   &:focus-visible {

src/components/pill/pillStandAlone.tsx

@@ -5,7 +5,15 @@ import { InputTypeType } from '@/components/input';
 import { useId } from '@/hooks';
 import { pickAriaProps } from '@/utils/aria/aria';
 
-import { IconContainerStyled, PillInputStyled, PillLabelStyled, PillStyled } from './pill.styled';
+import { Text, TextComponentType } from '../text';
+import {
+  IconContainerStyled,
+  LabelContainerStyled,
+  ParentContainerStyled,
+  PillInputStyled,
+  PillLabelStyled,
+  PillStyled,
+} from './pill.styled';
 import { IPillStandAlone } from './types';
 import { getPillState } from './utils';
 
@@ -37,52 +45,65 @@ const PillStandAloneComponent = (
   const stateStyles = styles[state];
 
   return (
-    <PillStyled
-      ref={ref}
-      data-testid={dataTestId}
-      styles={stateStyles}
-      tabIndex={tabIndex}
-      onKeyDown={onKeyDown?.(value || '')}
-    >
-      <PillInputStyled
-        aria-checked={selected}
-        {...ariaProps}
-        checked={selected}
-        data-testid={`${dataTestId}Input`}
-        disabled={disabled}
-        id={id}
-        name={name}
+    <ParentContainerStyled styles={stateStyles}>
+      <PillStyled
+        ref={ref}
+        data-testid={dataTestId}
         styles={stateStyles}
-        tabIndex={-1}
-        type={component}
-        value={value}
-        onChange={onPillChange}
-        onFocus={onFocus}
-      />
-      {decorativeIcon && (
-        <IconContainerStyled styles={stateStyles}>
+        tabIndex={tabIndex}
+        onKeyDown={onKeyDown?.(value || '')}
+      >
+        <PillInputStyled
+          aria-checked={selected}
+          {...ariaProps}
+          checked={selected}
+          data-testid={`${dataTestId}Input`}
+          disabled={disabled}
+          id={id}
+          name={name}
+          styles={stateStyles}
+          tabIndex={-1}
+          type={component}
+          value={value}
+          onChange={onPillChange}
+          onFocus={onFocus}
+        />
+        {decorativeIcon && (
+          <IconContainerStyled styles={stateStyles}>
+            <ElementOrIcon
+              color={stateStyles?.decorativeIcon?.color}
+              dataTestId={dataTestId + 'DecorativeIcon'}
+              height={stateStyles?.decorativeIcon?.height}
+              width={stateStyles?.decorativeIcon?.width}
+              {...decorativeIcon}
+            />
+          </IconContainerStyled>
+        )}
+        <PillLabelStyled htmlFor={id} styles={stateStyles}>
+          {children}
+        </PillLabelStyled>
+        {selectedIcon && selected && (
           <ElementOrIcon
-            color={stateStyles?.decorativeIcon?.color}
-            dataTestId={dataTestId + 'DecorativeIcon'}
-            height={stateStyles?.decorativeIcon?.height}
-            width={stateStyles?.decorativeIcon?.width}
-            {...decorativeIcon}
+            color={stateStyles?.selectedIcon?.color}
+            dataTestId={dataTestId + 'SelectedIcon'}
+            height={stateStyles?.selectedIcon?.height}
+            width={stateStyles?.selectedIcon?.width}
+            {...selectedIcon}
           />
-        </IconContainerStyled>
-      )}
-      <PillLabelStyled htmlFor={id} styles={stateStyles}>
-        {children}
-      </PillLabelStyled>
-      {selectedIcon && selected && (
-        <ElementOrIcon
-          color={stateStyles?.selectedIcon?.color}
-          dataTestId={dataTestId + 'SelectedIcon'}
-          height={stateStyles?.selectedIcon?.height}
-          width={stateStyles?.selectedIcon?.width}
-          {...selectedIcon}
-        />
+        )}
+      </PillStyled>
+      {props.label?.content && props.label.content !== null && (
+        <LabelContainerStyled styles={stateStyles}>
+          <Text
+            component={TextComponentType.PARAGRAPH}
+            customTypography={stateStyles?.labelContent}
+            {...props.label}
+          >
+            {props.label.content}
+          </Text>
+        </LabelContainerStyled>
       )}
-    </PillStyled>
+    </ParentContainerStyled>
   );
 };
 

src/components/pill/stories/argtypes.ts

@@ -42,6 +42,17 @@ export const argtypes = (
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    label: {
+      description: 'Label outside of the pill',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     initialState: {
       description: 'Boolean to indicate if Pill is selected initially',
       type: { name: 'boolean' },

src/components/pill/stories/pill.stories.tsx

@@ -32,6 +32,10 @@ const commonArgs: IPillUnControlled = {
   children: 'Pill',
   decorativeIcon: { icon: ICONS.ICON_PLACEHOLDER },
   selectedIcon: { icon: ICONS.ICON_PLACEHOLDER },
+  dataTestId: 'PillTestId',
+  label: {
+    content: 'Label',
+  },
 };
 
 export const Pill: Story = {

src/components/pill/types/pill.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { IElementOrIcon } from '@/components/elementOrIcon';
+import { IText } from '@/components/text';
 import { CustomTokenTypes } from '@/types';
 
 import type { PillStateStylesType, PillStylesType, PillVariantStylesType } from './pillTheme';
@@ -19,6 +20,10 @@ type PillAriaAttributes = Pick<
   | 'aria-disabled'
 >;
 
+export type PillTextType = Omit<IText<string>, 'children'> & {
+  content: React.ReactNode;
+};
+
 export interface IPillStandAlone extends PillAriaAttributes {
   styles: PillVariantStylesType;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -34,6 +39,7 @@ export interface IPillStandAlone extends PillAriaAttributes {
   name?: string;
   tabIndex?: number;
   value?: string;
+  label?: PillTextType;
 }
 export interface IPillControlled
   extends Omit<IPillStandAlone, 'styles' | 'onPillChange'>,

src/components/pill/types/pillTheme.ts

@@ -3,6 +3,7 @@ import { CommonStyleType, IconTypes, TypographyTypes } from '@/types';
 import type { PillStateType } from './state';
 
 export type PillStateStylesType = {
+  parentContainer?: CommonStyleType;
   altVariant?: boolean;
   container?: CommonStyleType;
   container_focus?: {
@@ -14,7 +15,11 @@ export type PillStateStylesType = {
   decorativeIconContainer?: CommonStyleType;
   decorativeIcon?: IconTypes;
   selectedIcon?: IconTypes;
+  // deprecated - "label" prop is applied to children. Change this name.
   label?: TypographyTypes;
+  // deprecated - "labelContent" should be called "label". Change this name.
+  labelContent?: TypographyTypes;
+  labelContainer?: CommonStyleType;
 };
 
 export type PillVariantStylesType = {

src/components/pillSelector/pillSelectorStandAlone.tsx

@@ -52,19 +52,22 @@ const PillSelectorStandAloneComponent = (
       )}
       {props.pills.length > 1 && props.pills.length <= maxPills
         ? props.pills.map((pill, index) => {
+            // deprecated - remove this line when this props are changed
+            const { label, externalLabel, ...rest } = pill;
             const pillSelected = props.pillSelected?.includes(pill.value.toString());
             return (
               (props.pillSize || pill?.size) && (
                 <Pill
                   key={pill.value}
                   dataTestId={`${dataTestId}Pill${index}`}
                   focus={focus === index}
+                  label={externalLabel}
                   multiSelect={props.multiSelect}
                   name={props.name}
                   selected={pillSelected}
                   size={props.pillSize || ''}
                   tabIndex={pillSelected || (!isPillSelected && index === 0) ? 0 : -1}
-                  {...pill}
+                  {...rest}
                   value={pill.value.toString()}
                   variant={props.pillVariant}
                   onFocus={() => {
@@ -74,7 +77,7 @@ const PillSelectorStandAloneComponent = (
                   }}
                   onPillChange={props.onPillChange}
                 >
-                  {pill.label}
+                  {label}
                 </Pill>
               )
             );