Export PillV2 and Badg2V2 props and types

Author: Kubit

src/components/badgeV2/index.ts

@@ -1,13 +1,3 @@
-// interfaces and type
-export type {
-  BadgeLabelType as BadgeLabelTypeV2,
-  IBadgeStandAlone as IBadgeStandAloneV2,
-  IBadge as IBadgeV2,
-  BadgeVariantStylesType as BadgeVariantStylesTypeV2,
-  BadgeStylesType as BadgeStylesTypeV2,
-} from './types';
-
-// enums
-export { BadgeState as BadgeStateV2 } from './types';
+export * from './types';
 
 export { BadgeV2 } from './badge';

src/components/badgeV2/types/index.ts

@@ -1,3 +1,10 @@
-export type * from './badge';
-export type { BadgeVariantStylesType, BadgeStylesType } from './badgeTheme';
+export type {
+  BadgeVariantStylesType as BadgeVariantStylesTypeV2,
+  BadgeStylesType as BadgeStylesTypeV2,
+} from './badgeTheme';
 export * from './state';
+export type {
+  BadgeLabelType as BadgeLabelTypeV2,
+  IBadgeStandAlone as IBadgeStandAloneV2,
+  IBadge as IBadgeV2,
+} from './badge';

src/components/pillV2/index.ts

@@ -1,12 +1,2 @@
-export type {
-  IPill as IPillV2,
-  PillStylesType as PillStylesTypeV2,
-  PillVariantPropsStylesType as PillVariantPropsStylesTypeV2,
-  PillSizePropsStylesType as PillSizePropsStylesTypeV2,
-  PillPropsStylesType as PillPropsStylesTypeV2,
-  PillLabelType as PillLabelTypeV2,
-} from './types';
-
-export { PillStateType as PillStateTypeV2 } from './types/pillStateType';
-export { PillType as PillTypeV2 } from './types/pillType';
+export * from './types';
 export { Pill as PillV2 } from './pill';

src/components/pillV2/pill.tsx

@@ -27,14 +27,7 @@ const PillComponent = (
     : variantStyles?.[Object.keys(variantStyles)[0]]?.[state];
 
   return (
-    <PillStandAlone
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref={ref as any}
-      disabled={disabled}
-      selected={selected}
-      styles={styles}
-      {...props}
-    />
+    <PillStandAlone ref={ref} disabled={disabled} selected={selected} styles={styles} {...props} />
   );
 };
 

src/components/pillV2/pillStandAlone.tsx

@@ -19,7 +19,7 @@ import { PillType } from './types/pillType';
 
 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`;
@@ -36,7 +36,7 @@ const PillStandAloneComponent = (
       type={[PillType.BUTTON, PillType.TAB].includes(type) ? ButtonType.BUTTON : undefined}
       onClick={props.onClick}
     >
-      <PillContentContainerStyled id={pillContentId} styles={props.styles}>
+      <PillContentContainerStyled data-pill-content id={pillContentId} styles={props.styles}>
         <ElementOrIcon customIconStyles={props.styles?.leftIcon} {...props.leftIcon} />
         <Text
           component={TextComponentType.SPAN}

src/components/pillV2/types/index.ts

@@ -1,4 +1,9 @@
-export * from './pill';
-export * from './pillTheme';
-export * from './pillStateType';
-export * from './pillType';
+export type {
+  PillStylesType as PillStylesTypeV2,
+  PillVariantPropsStylesType as PillVariantPropsStylesTypeV2,
+  PillSizePropsStylesType as PillSizePropsStylesTypeV2,
+  PillPropsStylesType as PillPropsStylesTypeV2,
+} from './pillTheme';
+export type { IPill as IPillV2, PillLabelType as PillLabelTypeV2 } from './pill';
+export { PillStateType as PillStateTypeV2 } from './pillStateType';
+export { PillType as PillTypeV2 } from './pillType';

src/components/pillV2/types/pillTheme.ts

@@ -8,7 +8,7 @@ export type PillPropsStylesType = {
   rootContainer?: CommonStyleType;
   contentContainer?: CommonStyleType;
   leftIcon?: IconTypes;
-  label?: TypographyTypes;
+  label?: TypographyTypes & CommonStyleType;
   rightIcon?: IconTypes;
   input?: CommonStyleType;
 };