[FRAF-2895] - Allow passing color, backgroundColor to Tag

CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ### Fixed
 
+## [25.0.2]
+
+### Added
+
+- `Tag`: Allow passing `color`, `backgroundColor` to Tag. ([@eniskrasniqi1](https://github.com/eniskraasniqi1)) in [#2833](https://github.com/teamleadercrm/ui/pull/2833)
+
 ## [25.0.1]
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "25.0.1",
+  "version": "25.0.2",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/emailSelector/__tests__/__snapshots__/EmailSelector.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`Component - EmailSelector renders 1`] = `
     data-teamleader-ui="email-selector"
   >
     <div
-      class="box display-inline-flex margin-bottom-1 margin-left-1 margin-right-2 margin-top-1 is-medium wrapper"
+      class="box display-inline-flex margin-bottom-1 margin-left-1 margin-right-2 margin-top-1 is-medium has-default-background-color wrapper"
       data-teamleader-ui="tag"
     >
       <p

src/components/select/Select.tsx

@@ -19,7 +19,7 @@ import ReactSelect, {
 } from 'react-select';
 import ReactCreatableSelect from 'react-select/creatable';
 import SelectType from 'react-select/dist/declarations/src/Select';
-import { COLOR, SIZES } from '../../constants';
+import { COLOR, COLORS, SIZES } from '../../constants';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
 import { BoxProps } from '../box/Box';
 import Icon from '../icon';
@@ -127,7 +127,7 @@ const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Opt
 ) => {
   const {
     children,
-    removeProps: { onClick, onMouseDown, onMouseUp, ...rest },
+    removeProps: { onClick, onMouseDown, onMouseUp, color, ...rest },
   } = props;
   const size = (
     props.selectProps as Props<Option, IsMulti, Group> & {
@@ -142,6 +142,7 @@ const MultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Opt
       onRemoveMouseDown={onMouseDown}
       onRemoveMouseUp={onMouseUp}
       removeElement="div"
+      color={color as (typeof COLORS)[number]}
       {...rest}
     >
       {children}

src/components/tag/Tag.tsx

@@ -2,7 +2,7 @@ import { IconCloseSmallOutline } from '@teamleader/ui-icons';
 import cx from 'classnames';
 import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
-import { SIZES } from '../../constants';
+import { COLORS, SIZES } from '../../constants';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
 import IconButton from '../iconButton';
@@ -19,6 +19,9 @@ export interface TagProps extends Omit<BoxProps, 'className' | 'size'> {
   onRemoveMouseUp?: React.MouseEventHandler;
   removeElement?: React.ElementType;
   size?: TagSize;
+  color?: (typeof COLORS)[number];
+  backgroundColor?: (typeof COLORS)[number];
+  borderWidth?: number;
 }
 
 const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
@@ -31,18 +34,35 @@ const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
       onRemoveMouseUp,
       removeElement,
       size = 'medium',
+      color,
+      backgroundColor,
+      borderWidth,
       ...others
     },
     ref,
   ) => {
-    const classNames = cx(theme[`is-${size}`], theme['wrapper'], className);
+    const classNames = cx(
+      theme[`is-${size}`],
+      { [theme['has-default-background-color']]: !backgroundColor },
+      { [theme['has-border']]: !!borderWidth },
+      theme['wrapper'],
+      className,
+    );
 
     const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
 
     return (
-      <Box {...others} className={classNames} data-teamleader-ui="tag" display="inline-flex" ref={ref}>
+      <Box
+        {...others}
+        backgroundColor={backgroundColor}
+        className={classNames}
+        borderWidth={borderWidth}
+        data-teamleader-ui="tag"
+        display="inline-flex"
+        ref={ref}
+      >
         <TextElement
-          color="teal"
+          color={color || 'teal'}
           marginLeft={size === 'small' ? 2 : 3}
           marginRight={onRemoveClick ? 1 : size === 'small' ? 2 : 3}
           marginVertical={size === 'small' ? 0 : 1}
@@ -60,6 +80,7 @@ const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
             onClick={onRemoveClick}
             onMouseDown={onRemoveMouseDown}
             onMouseUp={onRemoveMouseUp}
+            color={color || 'neutral'}
           />
         )}
       </Box>

src/components/tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Component - Tag renders 1`] = `
 <DocumentFragment>
   <div
-    class="box display-inline-flex is-medium wrapper"
+    class="box display-inline-flex is-medium has-default-background-color wrapper"
     data-teamleader-ui="tag"
   >
     <p

src/components/tag/tag.stories.tsx

@@ -16,7 +16,19 @@ export default {
 
 export const Basic: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
 
+export const WithColor: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
+
 Basic.args = {
   children: 'I am a tag',
   onRemoveClick: () => console.log('Tag removed'),
 };
+
+WithColor.args = {
+  children: 'Error state tag',
+  backgroundColor: 'ruby',
+  borderWidth: 1,
+  borderColor: 'ruby',
+  backgroundTint: 'lightest',
+  color: 'ruby',
+  onRemoveClick: () => console.log('Tag removed'),
+};

src/components/tag/theme.css

@@ -1,9 +1,16 @@
 .wrapper {
-  background-color: hsl(var(--color-neutral-darkest-hsl) / 12%);
   box-shadow: inset 0 0 0 1px hsl(var(--color-neutral-darkest-hsl) / 12%);
   max-width: 100%;
   height: var(--size);
   border-radius: calc(var(--size) / 2);
+
+  &.has-default-background-color {
+    background-color: hsl(var(--color-neutral-darkest-hsl) / 12%);
+  }
+
+  &.has-border {
+    box-sizing: content-box;
+  }
 }
 
 .remove-button {