From 3daac3749b5f6174d5d3c5779b8900984fa78475 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 11:29:09 +0100 Subject: [PATCH 1/8] pass color to tag text and remove button --- src/components/tag/Tag.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index 450e48e96..ec2d6d03d 100644 --- a/src/components/tag/Tag.tsx +++ b/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,7 @@ export interface TagProps extends Omit { onRemoveMouseUp?: React.MouseEventHandler; removeElement?: React.ElementType; size?: TagSize; + color?: (typeof COLORS)[number]; } const Tag: GenericComponent = forwardRef( @@ -31,6 +32,7 @@ const Tag: GenericComponent = forwardRef( onRemoveMouseUp, removeElement, size = 'medium', + color, ...others }, ref, @@ -42,7 +44,7 @@ const Tag: GenericComponent = forwardRef( return ( = forwardRef( onClick={onRemoveClick} onMouseDown={onRemoveMouseDown} onMouseUp={onRemoveMouseUp} + color={color || 'neutral'} /> )} From 47c04e5702119eb325c26c6f3f78cf6daf2c0590 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 11:29:55 +0100 Subject: [PATCH 2/8] add error background state for tag --- src/components/tag/Tag.tsx | 18 ++++++++++++++++-- src/components/tag/tag.stories.tsx | 12 ++++++++++++ src/components/tag/theme.css | 5 ++++- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index ec2d6d03d..5483b5805 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -20,6 +20,7 @@ export interface TagProps extends Omit { removeElement?: React.ElementType; size?: TagSize; color?: (typeof COLORS)[number]; + backgroundColor?: (typeof COLORS)[number]; } const Tag: GenericComponent = forwardRef( @@ -33,16 +34,29 @@ const Tag: GenericComponent = forwardRef( removeElement, size = 'medium', color, + backgroundColor, ...others }, ref, ) => { - const classNames = cx(theme[`is-${size}`], theme['wrapper'], className); + const classNames = cx( + theme[`is-${size}`], + { [theme['has-default-background-color']]: !backgroundColor }, + theme['wrapper'], + className, + ); const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody; return ( - + = (args) => ; +export const WithColor: ComponentStory = (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'), +}; diff --git a/src/components/tag/theme.css b/src/components/tag/theme.css index 5fe96d7dd..69fa54654 100644 --- a/src/components/tag/theme.css +++ b/src/components/tag/theme.css @@ -1,9 +1,12 @@ .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%); + } } .remove-button { From 5a97b9706c32c8b343abd4c78736599b37fc1167 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 11:30:45 +0100 Subject: [PATCH 3/8] lint | treat color as colors type not string --- src/components/select/Select.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx index 2c3e1777f..57df18a51 100644 --- a/src/components/select/Select.tsx +++ b/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 = { const { children, - removeProps: { onClick, onMouseDown, onMouseUp, ...rest }, + removeProps: { onClick, onMouseDown, onMouseUp, color, ...rest }, } = props; const size = ( props.selectProps as Props & { @@ -142,6 +142,7 @@ const MultiValue = {children} From fb6813a5996ce56095b2fe2cea9f4465c85d3319 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 11:37:16 +0100 Subject: [PATCH 4/8] update changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aaf7fdc85..dc389a1bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,12 @@ ### Fixed +## [25.0.2] + +### Added + +- `Tag`: Allow passing color to Tag text and remove button. ([@eniskrasniqi1](https://github.com/eniskraasniqi1)) in [#2833](https://github.com/teamleadercrm/ui/pull/2833) + ## [25.0.1] ### Fixed From e015c3722bf1e1a965c14cb6fe497a96fc419ecc Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 11:38:22 +0100 Subject: [PATCH 5/8] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3819d5de4..0ddbb25a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@teamleader/ui", "description": "Teamleader UI library", - "version": "25.0.1", + "version": "25.0.2", "author": "Teamleader ", "bugs": { "url": "https://github.com/teamleadercrm/ui/issues" From 91e1697adbb5745a57a8cb8eb7dfaa0ab0caefb8 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 14:07:13 +0100 Subject: [PATCH 6/8] if there's border adjust box sizing to not cut text --- src/components/tag/Tag.tsx | 4 ++++ src/components/tag/theme.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index 5483b5805..8f585596c 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -21,6 +21,7 @@ export interface TagProps extends Omit { size?: TagSize; color?: (typeof COLORS)[number]; backgroundColor?: (typeof COLORS)[number]; + borderWidth?: number; } const Tag: GenericComponent = forwardRef( @@ -35,6 +36,7 @@ const Tag: GenericComponent = forwardRef( size = 'medium', color, backgroundColor, + borderWidth, ...others }, ref, @@ -42,6 +44,7 @@ const Tag: GenericComponent = forwardRef( const classNames = cx( theme[`is-${size}`], { [theme['has-default-background-color']]: !backgroundColor }, + { [theme['has-border']]: !!borderWidth }, theme['wrapper'], className, ); @@ -53,6 +56,7 @@ const Tag: GenericComponent = forwardRef( {...others} backgroundColor={backgroundColor} className={classNames} + borderWidth={borderWidth} data-teamleader-ui="tag" display="inline-flex" ref={ref} diff --git a/src/components/tag/theme.css b/src/components/tag/theme.css index 69fa54654..b663049c5 100644 --- a/src/components/tag/theme.css +++ b/src/components/tag/theme.css @@ -7,6 +7,10 @@ &.has-default-background-color { background-color: hsl(var(--color-neutral-darkest-hsl) / 12%); } + + &.has-border { + box-sizing: content-box; + } } .remove-button { From 33ba63a3ab5615f671a3a1153e21f2e9842c78c6 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 14:12:42 +0100 Subject: [PATCH 7/8] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dc389a1bf..eb6a27c62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ ### Added -- `Tag`: Allow passing color to Tag text and remove button. ([@eniskrasniqi1](https://github.com/eniskraasniqi1)) in [#2833](https://github.com/teamleadercrm/ui/pull/2833) +- `Tag`: Allow passing `color`, `backgroundColor` to Tag. ([@eniskrasniqi1](https://github.com/eniskraasniqi1)) in [#2833](https://github.com/teamleadercrm/ui/pull/2833) ## [25.0.1] From 83aad950e678af2b2babe6b2f8090656a0a2c433 Mon Sep 17 00:00:00 2001 From: Enis Krasniqi Date: Wed, 20 Dec 2023 14:14:57 +0100 Subject: [PATCH 8/8] update snapshots --- .../__tests__/__snapshots__/EmailSelector.spec.tsx.snap | 2 +- src/components/tag/__tests__/__snapshots__/Tag.spec.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/emailSelector/__tests__/__snapshots__/EmailSelector.spec.tsx.snap b/src/components/emailSelector/__tests__/__snapshots__/EmailSelector.spec.tsx.snap index 6c556b1db..f0251c12c 100644 --- a/src/components/emailSelector/__tests__/__snapshots__/EmailSelector.spec.tsx.snap +++ b/src/components/emailSelector/__tests__/__snapshots__/EmailSelector.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`Component - EmailSelector renders 1`] = ` data-teamleader-ui="email-selector" >