feat(Tag): add forwardRef to Tag component

kronostechnologies · Oct 31, 2022 · adf9fb5 · adf9fb5
1 parent e2cebb0
commit adf9fb5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/react/src/components/tag/tag.tsx b/packages/react/src/components/tag/tag.tsx
@@ -1,10 +1,11 @@
 import {
     ButtonHTMLAttributes,
     DetailedHTMLProps,
+    forwardRef,
     MouseEventHandler,
+    Ref,
     SVGProps,
     useCallback,
-    VoidFunctionComponent,
 } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
@@ -194,14 +195,14 @@ const Container = styled.span<ContainerProps>`
     ${focus};
 `;
 
-export const Tag: VoidFunctionComponent<TagProps> = ({
+export const Tag = forwardRef(({
     className,
     iconName,
     onClick,
     onDelete,
     size = 'medium',
     value,
-}) => {
+}: TagProps, ref: Ref<HTMLElement>) => {
     if (onClick && onDelete) {
         throw new Error('Only one of onClick or onDelete can be provided.');
     }
@@ -221,6 +222,7 @@ export const Tag: VoidFunctionComponent<TagProps> = ({
 
     return (
         <Container
+            ref={ref}
             as={onClick ? 'button' : 'span'}
             className={className}
             onClick={handleClick}
@@ -261,4 +263,6 @@ export const Tag: VoidFunctionComponent<TagProps> = ({
             )}
         </Container>
     );
-};
+});
+
+Tag.displayName = 'Tag';
diff --git a/packages/storybook/stories/tag.stories.tsx b/packages/storybook/stories/tag.stories.tsx
@@ -1,6 +1,7 @@
 import { Tag, TagProps, TagValue } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
-import { ReactElement, useState } from 'react';
+import { ReactElement, useRef, useState } from 'react';
+import { rawCodeParameters } from './utils/parameters';
 
 export default {
     title: 'Notification/Tag',
@@ -81,3 +82,13 @@ export const Clickable: Story = () => {
         </>
     );
 };
+
+export const WithRef: Story = () => {
+    const ref = useRef(null);
+
+    return (
+        <Tag ref={ref} key="small" iconName="copy" size="small" value={{ label: 'Tag 1' }} />
+    );
+};
+
+WithRef.parameters = rawCodeParameters;