From c80f88a330388500e5dcda45c75f9f57168a0bb6 Mon Sep 17 00:00:00 2001 From: Kubit Date: Tue, 13 Aug 2024 08:54:50 +0200 Subject: [PATCH 1/6] Include scroll styles --- src/types/styles/index.ts | 2 ++ src/types/styles/scroll.ts | 20 ++++++++++++ src/utils/getStyles/getStyles.ts | 53 ++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 src/types/styles/scroll.ts diff --git a/src/types/styles/index.ts b/src/types/styles/index.ts index b3ff82e6..dbd473a9 100644 --- a/src/types/styles/index.ts +++ b/src/types/styles/index.ts @@ -9,6 +9,7 @@ export enum Styles { POSITION = 'position', TYPOGRAPHY = 'typography', POINTER = 'pointer', + SCROLL = 'scroll', } export * from './padding'; @@ -25,3 +26,4 @@ export * from './illustration'; export * from './pointer'; export * from './commonStyle'; export * from './wordWrap'; +export * from './scroll'; diff --git a/src/types/styles/scroll.ts b/src/types/styles/scroll.ts new file mode 100644 index 00000000..ba8857f0 --- /dev/null +++ b/src/types/styles/scroll.ts @@ -0,0 +1,20 @@ +export type ScrollTypes = { + scrollbar_width?: string; + scrollbar_color?: string; + overflow_block?: string; + overflow_inline?: string; + overflow_x?: string; + overflow_y?: string; + overflow?: string; + overflow_clip_margin?: string; + scrollbar_gutter?: string; + scroll_behavior?: string; + scroll_margin?: string; + scroll_padding?: string; + scroll_snap_align?: string; + scroll_snap_stop?: string; + scroll_snap_type?: string; + webkit_scrollbar?: string; // ::-webkit-scrollbar pseudo-element + scroll_container?: string; // scroll container glossary term + scrollbar_aria_role?: string; // scrollbar ARIA role +}; diff --git a/src/utils/getStyles/getStyles.ts b/src/utils/getStyles/getStyles.ts index bfeed897..234d8bd5 100644 --- a/src/utils/getStyles/getStyles.ts +++ b/src/utils/getStyles/getStyles.ts @@ -12,11 +12,63 @@ import { PaddingTypes, PointerTypes, PositionTypes, + ScrollTypes, TypographyTypes, WordWrapTypes, } from '@/types/styles'; import { AnimationType } from '@/types/styles/animation'; +/** + * Get scroll styles. + * @param {ScrollTypes} prop - scroll styles + */ +export const getScrollStyles = (prop?: ScrollTypes): CSSProp => { + if (!prop) { + return css``; + } + const { + scrollbar_width, + scrollbar_color, + overflow_block, + overflow_inline, + overflow_x, + overflow_y, + overflow, + overflow_clip_margin, + scrollbar_gutter, + scroll_behavior, + scroll_margin, + scroll_padding, + scroll_snap_align, + scroll_snap_stop, + scroll_snap_type, + webkit_scrollbar, + scroll_container, + scrollbar_aria_role, + } = prop; + + return css` + ${scrollbar_width && `scrollbar-width: ${scrollbar_width};`} + ${scrollbar_color && `scrollbar-color: ${scrollbar_color};`} + ${overflow_block && `overflow-block: ${overflow_block};`} + ${overflow_inline && `overflow-inline: ${overflow_inline};`} + ${overflow_x && `overflow-x: ${overflow_x};`} + ${overflow_y && `overflow-y: ${overflow_y};`} + ${overflow && `overflow: ${overflow};`} + ${overflow_clip_margin && `overflow-clip-margin: ${overflow_clip_margin};`} + ${scrollbar_gutter && `scrollbar-gutter: ${scrollbar_gutter};`} + ${scroll_behavior && `scroll-behavior: ${scroll_behavior};`} + ${scroll_margin && `scroll-margin: ${scroll_margin};`} + ${scroll_padding && `scroll-padding: ${scroll_padding};`} + ${scroll_snap_align && `scroll-snap-align: ${scroll_snap_align};`} + ${scroll_snap_stop && `scroll-snap-stop: ${scroll_snap_stop};`} + ${scroll_snap_type && `scroll-snap-type: ${scroll_snap_type};`} + ${webkit_scrollbar && `::-webkit-scrollbar: ${webkit_scrollbar};`} + ${scroll_container && `scroll-container: ${scroll_container};`} + ${scrollbar_aria_role && `scrollbar-aria-role: ${scrollbar_aria_role};`} + `; +}; + /** * Returns the background styles. * @param {BackgroundTypes} prop - The background properties. @@ -520,6 +572,7 @@ const getGenericStyles = (styles?: CommonStyleType): CSSProp => { ${getPointerStyles(styles)} ${getWordWrapStyles(styles)} ${getAnimationStyles(styles)} + ${getScrollStyles(styles)} `; }; From 15c3bc2a8e113578a4138aa030cf49ba410ad6b8 Mon Sep 17 00:00:00 2001 From: Kubit Date: Tue, 13 Aug 2024 08:55:45 +0200 Subject: [PATCH 2/6] Add new styles and features to Pagination --- .../helpers/getMaxCountersNumber.ts | 2 +- src/components/pagination/pagination.tsx | 10 ++++- src/components/pagination/stories/argtypes.ts | 8 ++-- .../pagination/stories/pagination.stories.tsx | 43 ++++++++++++++++++- 4 files changed, 55 insertions(+), 8 deletions(-) diff --git a/src/components/pagination/helpers/getMaxCountersNumber.ts b/src/components/pagination/helpers/getMaxCountersNumber.ts index 6418108f..aca7616f 100644 --- a/src/components/pagination/helpers/getMaxCountersNumber.ts +++ b/src/components/pagination/helpers/getMaxCountersNumber.ts @@ -20,7 +20,7 @@ export const buildstepsNumber = ( let currentPosition = currentStep + 1; - if (currentPosition >= maxCounters) { + if (currentPosition >= maxCounters && maxSteps !== maxCounters) { maxCounters--; startWith = [1, '...']; } diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index bfe2837c..ce548d11 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -22,10 +22,18 @@ const PaginationComponent = React.forwardRef( const limitCurrentStep = Math.max(0, Math.min(currentStep, maxStepsNumber - 1)); + let paginationCountersNumber = styles.paginationCountersNumber?.[device]?.counters ?? 5; + + if (maxCountersNumber && maxCountersNumber < maxStepsNumber) { + paginationCountersNumber = maxCountersNumber; + } else { + paginationCountersNumber = Math.min(maxStepsNumber, paginationCountersNumber); + } + const stepsNumber = buildstepsNumber( limitCurrentStep, maxStepsNumber, - styles.paginationCountersNumber?.[device]?.counters, + paginationCountersNumber, maxCountersNumber ); const stepActive = stepsNumber.indexOf(limitCurrentStep + 1); diff --git a/src/components/pagination/stories/argtypes.ts b/src/components/pagination/stories/argtypes.ts index bee27715..c69933de 100644 --- a/src/components/pagination/stories/argtypes.ts +++ b/src/components/pagination/stories/argtypes.ts @@ -24,7 +24,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): currentStep: { control: { type: 'number' }, type: { name: 'number', required: true }, - description: 'Indicate the parent current position', + description: 'Indicate the parent current position. The max value is maxStepsNumber', table: { type: { summary: 'number', @@ -33,9 +33,9 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): }, }, maxStepsNumber: { - control: { type: 'number' }, + control: { type: 'number', min: 2 }, type: { name: 'number', required: true }, - description: 'Set the max steps number', + description: 'Set the max steps number. The min value is 2', table: { type: { summary: 'number', @@ -46,7 +46,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): maxCountersNumber: { control: { type: 'number' }, type: { name: 'number' }, - description: 'Set the custom steps number to show', + description: 'Set the custom steps number to show. The min value is 2', table: { type: { summary: 'number', diff --git a/src/components/pagination/stories/pagination.stories.tsx b/src/components/pagination/stories/pagination.stories.tsx index 6e577286..11902401 100644 --- a/src/components/pagination/stories/pagination.stories.tsx +++ b/src/components/pagination/stories/pagination.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import * as React from 'react'; +import React, { useEffect } from 'react'; import { ICONS } from '@/assets'; import { STYLES_NAME } from '@/constants'; @@ -17,6 +17,12 @@ const meta = { component: Story, parameters: { layout: 'centered', + docs: { + description: { + component: + 'Pagination is a controlled component. This story is an example of how to use it. To see other examples or modify the component behavior, visit the other stories in Pagination section or change the props in the controls.', + }, + }, }, tags: ['autodocs'], argTypes: argtypes(variantsObject, themeSelected), @@ -29,7 +35,13 @@ type Story = StoryObj & { args: { themeArgs?: object } }; const StoryWithHooks = args => { const [step, setStep] = React.useState(0); - const maxSteps = 10; + const maxSteps = args.maxStepsNumber ? args.maxStepsNumber : 35; + + useEffect(() => { + if (args.currentStep) { + setStep(args.currentStep - 1); + } + }, [args.currentStep]); const leftEdge = step <= 0; const rightEdge = step >= maxSteps; @@ -80,6 +92,33 @@ export const Pagination = { variantsObject[themeSelected].PaginationVariantsTheme || {} )[0] as string, themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION], + currentStep: 1, + maxStepsNumber: 35, + maxCountersNumber: 5, + }, +}; + +export const PaginationWithTwoSteps = { + args: { + variant: Object.values( + variantsObject[themeSelected].PaginationVariantsTheme || {} + )[0] as string, + themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION], + currentStep: 1, + maxStepsNumber: 2, + maxCountersNumber: 2, + }, +}; + +export const PaginationWithFiveSteps = { + args: { + variant: Object.values( + variantsObject[themeSelected].PaginationVariantsTheme || {} + )[0] as string, + themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION], + currentStep: 1, + maxStepsNumber: 5, + maxCountersNumber: 5, }, }; From 7828eb41e671af7a284316b156d2f362bd0919ca Mon Sep 17 00:00:00 2001 From: Kubit Date: Tue, 13 Aug 2024 08:56:15 +0200 Subject: [PATCH 3/6] Improve pillSelector and Pill styles and features --- src/components/pillSelector/pillSelectorStandAlone.tsx | 10 +++++++--- .../pillSelectorV2/__tests__/pillSelector.test.tsx | 4 ++-- .../pillSelectorV2/pillSelectorStandAlone.tsx | 2 +- src/components/pillSelectorV2/stories/argtypes.ts | 6 +++--- .../pillSelectorV2/stories/controlled/argtypes.ts | 2 +- .../stories/controlled/pillSelector.stories.tsx | 2 +- .../pillSelectorV2/stories/pillSelector.stories.tsx | 2 +- src/components/pillV2/pill.tsx | 2 +- src/components/pillV2/pillStandAlone.tsx | 2 +- 9 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/pillSelector/pillSelectorStandAlone.tsx b/src/components/pillSelector/pillSelectorStandAlone.tsx index 6fc34e51..b0d4a39f 100644 --- a/src/components/pillSelector/pillSelectorStandAlone.tsx +++ b/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 ( | undefined | null ): JSX.Element => { return ( - + {props.pills?.map((pill, index) => { const selected = props.type === PillSelectorType.SELECTOR_MULTIPLE diff --git a/src/components/pillSelectorV2/stories/argtypes.ts b/src/components/pillSelectorV2/stories/argtypes.ts index 4501c414..00006fe8 100644 --- a/src/components/pillSelectorV2/stories/argtypes.ts +++ b/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, }, }, diff --git a/src/components/pillSelectorV2/stories/controlled/argtypes.ts b/src/components/pillSelectorV2/stories/controlled/argtypes.ts index f89112ec..60ca0564 100644 --- a/src/components/pillSelectorV2/stories/controlled/argtypes.ts +++ b/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: { diff --git a/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx b/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx index 41422927..eeeabf3c 100644 --- a/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx +++ b/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' }, ], diff --git a/src/components/pillSelectorV2/stories/pillSelector.stories.tsx b/src/components/pillSelectorV2/stories/pillSelector.stories.tsx index 3d50190e..da0a80a0 100644 --- a/src/components/pillSelectorV2/stories/pillSelector.stories.tsx +++ b/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' }, ], diff --git a/src/components/pillV2/pill.tsx b/src/components/pillV2/pill.tsx index 54aa7e9d..64e1fee5 100644 --- a/src/components/pillV2/pill.tsx +++ b/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 + ref: React.ForwardedRef ) => { const variantStyles = useStylesV2({ styleName: STYLES_NAME.PILL_V2, diff --git a/src/components/pillV2/pillStandAlone.tsx b/src/components/pillV2/pillStandAlone.tsx index 031144ac..17e402c7 100644 --- a/src/components/pillV2/pillStandAlone.tsx +++ b/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 | undefined | null + ref: React.ForwardedRef | undefined | null ): JSX.Element => { const id = useId('pill'); const pillContentId = `${id}-content`; From 51d416ae25e7b5844ac6c4677bd8a74b9739f94d Mon Sep 17 00:00:00 2001 From: Kubit Date: Tue, 13 Aug 2024 08:56:33 +0200 Subject: [PATCH 4/6] Add aria-hidden to Icon interface --- src/components/icon/types/icon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/icon/types/icon.ts b/src/components/icon/types/icon.ts index d5869ade..b9482a72 100644 --- a/src/components/icon/types/icon.ts +++ b/src/components/icon/types/icon.ts @@ -18,7 +18,7 @@ export interface IIconComplex { type IconAriaAttributes = Pick< React.AriaAttributes, - 'aria-label' | 'aria-controls' | 'aria-checked' + 'aria-label' | 'aria-controls' | 'aria-checked' | 'aria-hidden' >; export interface IIconStandAlone extends IconAriaAttributes { From 5199f9a8b5bcc8c4376b4fa2a63ba65f650b6714 Mon Sep 17 00:00:00 2001 From: Kubit Date: Tue, 13 Aug 2024 09:00:54 +0200 Subject: [PATCH 5/6] Fix eslint errors --- src/components/pillSelector/pillSelectorStandAlone.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/pillSelector/pillSelectorStandAlone.tsx b/src/components/pillSelector/pillSelectorStandAlone.tsx index b0d4a39f..6fc34e51 100644 --- a/src/components/pillSelector/pillSelectorStandAlone.tsx +++ b/src/components/pillSelector/pillSelectorStandAlone.tsx @@ -33,13 +33,9 @@ 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 ( Date: Tue, 13 Aug 2024 09:03:32 +0200 Subject: [PATCH 6/6] Update package and fix typescript errors --- package.json | 42 +++++++++++++----------- src/components/pillV2/pill.tsx | 2 +- src/components/pillV2/pillStandAlone.tsx | 2 +- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 4d69a103..6df749bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kubit-ui-web/react-components", - "version": "1.10.0", + "version": "1.10.1", "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience", "author": { "name": "Kubit", @@ -39,7 +39,11 @@ "web-components", "react", "storybook", - "typescript" + "typescript", + "kubit", + "kubit-ui", + "kubit-react", + "kubit-components" ], "scripts": { "jest": "jest", @@ -88,17 +92,17 @@ "@babel/preset-typescript": "^7.24.7", "@eslint/compat": "^1.1.1", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "^9.8.0", - "@storybook/addon-a11y": "^8.2.7", - "@storybook/addon-controls": "^8.2.7", + "@eslint/js": "^9.9.0", + "@storybook/addon-a11y": "^8.2.9", + "@storybook/addon-controls": "^8.2.9", "@storybook/addon-coverage": "^1.0.4", - "@storybook/addon-essentials": "^8.2.7", - "@storybook/addon-interactions": "^8.2.7", - "@storybook/addon-links": "^8.2.7", - "@storybook/addon-themes": "^8.2.7", - "@storybook/blocks": "^8.2.7", - "@storybook/react": "^8.2.7", - "@storybook/react-vite": "^8.2.7", + "@storybook/addon-essentials": "^8.2.9", + "@storybook/addon-interactions": "^8.2.9", + "@storybook/addon-links": "^8.2.9", + "@storybook/addon-themes": "^8.2.9", + "@storybook/blocks": "^8.2.9", + "@storybook/react": "^8.2.9", + "@storybook/react-vite": "^8.2.9", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/react-hooks": "^8.0.1", @@ -111,18 +115,18 @@ "@types/react-dom": "^18.3.0", "@types/styled-components": "^5.1.34", "@types/ungap__structured-clone": "^1.2.0", - "@typescript-eslint/eslint-plugin": "^8.0.1", - "@typescript-eslint/parser": "^8.0.1", + "@typescript-eslint/eslint-plugin": "^8.1.0", + "@typescript-eslint/parser": "^8.1.0", "@ungap/structured-clone": "^1.2.0", "@vitejs/plugin-react": "^4.3.1", "babel-jest": "^29.7.0", "cpy-cli": "^5.0.0", - "eslint": "^9.8.0", + "eslint": "^9.9.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard-with-typescript": "^43.0.1", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jest": "^28.7.0", + "eslint-plugin-jest": "^28.8.0", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-n": "^17.10.2", "eslint-plugin-node": "^11.1.0", @@ -132,7 +136,7 @@ "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-storybook": "^0.8.0", - "eslint-plugin-unused-imports": "^4.0.1", + "eslint-plugin-unused-imports": "^4.1.3", "globals": "^15.9.0", "gts": "^5.3.1", "html-validate": "^8.21.0", @@ -147,13 +151,13 @@ "prettier": "^3.3.3", "react-transition-group": "^4.4.5", "sort-imports": "^1.1.0", - "storybook": "^8.2.7", + "storybook": "^8.2.9", "ts-jest": "^29.2.4", "tsc-alias": "1.8.10", "typedoc": "^0.26.5", "typedoc-plugin-markdown": "^4.2.3", "typescript": "^5.5.4", - "vite": "^5.3.5", + "vite": "^5.4.0", "vite-tsconfig-paths": "^4.3.2", "yarn-deduplicate": "^6.0.2" }, diff --git a/src/components/pillV2/pill.tsx b/src/components/pillV2/pill.tsx index 64e1fee5..3e465e01 100644 --- a/src/components/pillV2/pill.tsx +++ b/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 + ref: React.LegacyRef | undefined ) => { const variantStyles = useStylesV2({ styleName: STYLES_NAME.PILL_V2, diff --git a/src/components/pillV2/pillStandAlone.tsx b/src/components/pillV2/pillStandAlone.tsx index 17e402c7..031144ac 100644 --- a/src/components/pillV2/pillStandAlone.tsx +++ b/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 | undefined | null + ref: React.ForwardedRef | undefined | null ): JSX.Element => { const id = useId('pill'); const pillContentId = `${id}-content`;