Improve pillSelector and Pill styles and features

Author: Kubit

src/components/pillSelector/pillSelectorStandAlone.tsx

@@ -33,9 +33,13 @@ const PillSelectorStandAloneComponent = (
 
   const isPillSelected = props.pillSelected?.length !== 0;
 
-  React.useImperativeHandle(ref, () => {
-    return listEl.current as HTMLDivElement;
-  }, []);
+  React.useImperativeHandle(
+    ref,
+    () => {
+      return listEl.current as HTMLDivElement;
+    },
+    []
+  );
 
   return (
     <PillSelectorWrapper

src/components/pillSelectorV2/__tests__/pillSelector.test.tsx

@@ -20,7 +20,7 @@ const mockProps: IPillSelectorUnControlled = {
   size: PillSelectorSizeTypeV2.LARGE,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],
@@ -140,7 +140,7 @@ const mockPropsControlled: IPillSelectorControlled = {
   size: PillSelectorSizeTypeV2.LARGE,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillSelectorV2/pillSelectorStandAlone.tsx

@@ -10,7 +10,7 @@ const PillSelectorStandAloneComponent = (
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
-    <RootContainerStyled ref={ref} styles={props.styles}>
+    <RootContainerStyled ref={ref} data-testid={dataTestId} styles={props.styles}>
       {props.pills?.map((pill, index) => {
         const selected =
           props.type === PillSelectorType.SELECTOR_MULTIPLE

src/components/pillSelectorV2/stories/argtypes.ts

@@ -11,7 +11,7 @@ export const argtypes = (
   return {
     variant: {
       description: 'Variant',
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       control: { type: 'select' },
       options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
       table: {
@@ -59,7 +59,7 @@ export const argtypes = (
       },
     },
     selectedIcon: {
-      description: 'Icon to show when the pill is selected',
+      description: 'Icon to show when a pill is selected',
       type: { name: 'object' },
       table: {
         type: {
@@ -119,7 +119,7 @@ export const argtypes = (
         type: {
           summary: 'string',
         },
-        defaultValue: { summary: 'segmentedControl' },
+        defaultValue: { summary: 'pillSelector' },
         category: CATEGORY_CONTROL.TESTING,
       },
     },

src/components/pillSelectorV2/stories/controlled/argtypes.ts

@@ -11,7 +11,7 @@ export const argtypes = (
   return {
     variant: {
       description: 'Variant',
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       control: { type: 'select' },
       options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
       table: {

src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx

@@ -30,7 +30,7 @@ const commonPillSelectorProps: IPillSelectorControlled = {
   )[0] as string,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillSelectorV2/stories/pillSelector.stories.tsx

@@ -31,7 +31,7 @@ const commonPillSelectorProps: IPillSelectorUnControlled = {
   )[0] as string,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillV2/pill.tsx

@@ -9,7 +9,7 @@ import { getPillState } from './utils';
 
 const PillComponent = (
   { variant, size, ctv, selected = false, disabled = false, ...props }: IPill,
-  ref: React.ForwardedRef<HTMLButtonElement>
+  ref: React.ForwardedRef<HTMLDivElement>
 ) => {
   const variantStyles = useStylesV2<PillVariantPropsStylesType>({
     styleName: STYLES_NAME.PILL_V2,

src/components/pillV2/pillStandAlone.tsx

@@ -18,7 +18,7 @@ import { IPillStandAlone, PillType } from './types';
 
 const PillStandAloneComponent = (
   { dataTestId = 'pill', type = PillType.BUTTON, ...props }: IPillStandAlone,
-  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   const id = useId('pill');
   const pillContentId = `${id}-content`;