Merge pull request #742 from glints-dev/feature/add-text-color-prop-to-tag

feat: add text color prop to Tag component

Author: ganiirsyadi

src/@next/RadioButton/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { HtmlHTMLAttributes } from 'react';
+import React from 'react';
 import {
   LabelWrapper,
   RadioButtonInput,

src/@next/Tag/Tag.stories.tsx

@@ -25,6 +25,10 @@ export default {
         type: null,
       },
     },
+    textColor: {
+      description: 'Text color of the tag',
+      control: 'color',
+    },
   },
 
   parameters: {
@@ -37,8 +41,8 @@ export default {
   },
 } as Meta;
 
-const DefaultTemplate: Story<TagProps> = () => {
-  return <Tag>Basic Tag</Tag>;
+const DefaultTemplate: Story<TagProps> = args => {
+  return <Tag {...args}>Basic Tag</Tag>;
 };
 
 const RemoveableTemplate: Story<TagProps> = () => {

src/@next/Tag/Tag.tsx

@@ -13,19 +13,24 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   value?: string;
   onRemove?: (() => void) | null;
+  textColor?: string;
 }
 
 export type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 
 export type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
 
 export const Tag = React.forwardRef<HTMLDivElement, TagProps>(function Tag(
-  { children, onRemove, value, ...props }: TagProps,
+  { children, onRemove, value, textColor, ...props }: TagProps,
   ref
 ) {
   const content =
-    typeof children === 'string' ? (
-      <Typography variant="caption" color={Neutral.B18} as={'span'}>
+    typeof children === 'string' || typeof children === 'number' ? (
+      <Typography
+        variant="caption"
+        color={textColor ?? Neutral.B18}
+        as={'span'}
+      >
         {children}
       </Typography>
     ) : (

test/e2e/tag/tag.spec.ts

@@ -20,6 +20,12 @@ test('Tag - small size', async ({ page }) => {
   await expect(tagPage.container).toHaveScreenshot('tag-small-size.png');
 });
 
+test('Tag - custom text color', async ({ page }) => {
+  const tagPage = getPage(page);
+  await tagPage.goto('args=textColor:!hex(3fde00)');
+  await expect(tagPage.container).toHaveScreenshot('tag-custom-text-color.png');
+});
+
 test('removeable tag - standard size', async ({ page }) => {
   const tagPage = getRemoveableTagPage(page);
   await tagPage.goto();