From edb5ef6572ee62272169ee17796c3d6d4c2667e6 Mon Sep 17 00:00:00 2001 From: Madhuri Sandbhor Date: Fri, 21 Jun 2024 11:25:05 +0200 Subject: [PATCH 1/4] fix: add click action on tag icon instead of on tag itself --- .changeset/swift-cycles-type.md | 5 ++++ docs/stories/Tag.mdx | 8 +++++++ docs/stories/Tag.stories.tsx | 11 ++++++++- .../src/components/Tag/Tag.test.tsx | 4 ++-- .../design-system/src/components/Tag/Tag.tsx | 23 ++++++++++++++----- 5 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 .changeset/swift-cycles-type.md diff --git a/.changeset/swift-cycles-type.md b/.changeset/swift-cycles-type.md new file mode 100644 index 000000000..773373d2c --- /dev/null +++ b/.changeset/swift-cycles-type.md @@ -0,0 +1,5 @@ +--- +'@strapi/design-system': patch +--- + +fix: add click action on tag icon instead of on tag itself diff --git a/docs/stories/Tag.mdx b/docs/stories/Tag.mdx index 0f387fe07..9fc677a7f 100644 --- a/docs/stories/Tag.mdx +++ b/docs/stories/Tag.mdx @@ -31,8 +31,16 @@ or removed from that place. They cannot exist on their own. +### Disabled Tag + +### Filter Tag + +Tag can also be used as a filter with action to remove the filter + + + ## Props The Tag component wraps all its children in the diff --git a/docs/stories/Tag.stories.tsx b/docs/stories/Tag.stories.tsx index 33bc094b1..20e97832c 100644 --- a/docs/stories/Tag.stories.tsx +++ b/docs/stories/Tag.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Tag } from '@strapi/design-system'; -import { Information } from '@strapi/icons'; +import { Information, Cross } from '@strapi/icons'; const meta: Meta = { title: 'Design System/Components/Tag', @@ -24,3 +24,12 @@ export const Disabled = { ), name: 'disabled', } satisfies Story; + +export const Filter = { + render: () => ( + } onClick={() => console.log('filter removed')}> + date is null + + ), + name: 'filter', +} satisfies Story; diff --git a/packages/design-system/src/components/Tag/Tag.test.tsx b/packages/design-system/src/components/Tag/Tag.test.tsx index b77abc601..f0be10607 100644 --- a/packages/design-system/src/components/Tag/Tag.test.tsx +++ b/packages/design-system/src/components/Tag/Tag.test.tsx @@ -35,9 +35,9 @@ describe('Tag', () => { it('should fire the onClick callback', async () => { const onClick = jest.fn(); - const { getByRole, user } = render({ onClick }); + const { getByLabelText, user } = render({ onClick, label: 'Clear' }); - await user.click(getByRole('button', { name: 'hello' })); + await user.click(getByLabelText('Clear')); expect(onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/design-system/src/components/Tag/Tag.tsx b/packages/design-system/src/components/Tag/Tag.tsx index 07d597e6c..546080dbb 100644 --- a/packages/design-system/src/components/Tag/Tag.tsx +++ b/packages/design-system/src/components/Tag/Tag.tsx @@ -2,14 +2,25 @@ import * as React from 'react'; import { styled } from 'styled-components'; +import { Box, type BoxComponent } from '../Box'; import { Flex, FlexComponent, FlexProps } from '../Flex'; import { Typography, TypographyComponent } from '../Typography'; +const ButtonBox = styled>(Box)<{ $iconAction: boolean }>` + display: inline-flex; + border: none; + + &:hover { + cursor: ${({ $iconAction }) => ($iconAction ? 'pointer' : 'initial')}; + } +`; + export interface TagProps extends FlexProps<'button'> { icon: React.ReactNode; + label?: string; } -export const Tag = ({ children, icon, disabled = false, onClick, ...props }: TagProps) => { +export const Tag = ({ children, icon, label, disabled = false, onClick, ...props }: TagProps) => { const handleClick: React.MouseEventHandler = (e) => { if (disabled || !onClick) return; onClick(e); @@ -21,8 +32,7 @@ export const Tag = ({ children, icon, disabled = false, onClick, ...props }: Tag background={disabled ? 'neutral200' : 'primary100'} color={disabled ? 'neutral700' : 'primary600'} paddingLeft={3} - paddingRight={3} - onClick={handleClick} + paddingRight={1} aria-disabled={disabled} disabled={disabled} borderWidth="1px" @@ -30,19 +40,20 @@ export const Tag = ({ children, icon, disabled = false, onClick, ...props }: Tag borderColor={disabled ? 'neutral300' : 'primary200'} hasRadius height="3.2rem" - gap={2} {...props} > {children} - {icon} + + {icon} + ); }; const TagWrapper = styled>(Flex)` - & > svg { + & > div > svg { height: 0.8rem; width: 0.8rem; } From 47c8733134c1842bf3bbea8ee8345fbb6a90312a Mon Sep 17 00:00:00 2001 From: Madhuri Sandbhor Date: Mon, 24 Jun 2024 15:27:51 +0200 Subject: [PATCH 2/4] fix: button tag removed from tag wrapper --- .../design-system/src/components/Tag/Tag.tsx | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/design-system/src/components/Tag/Tag.tsx b/packages/design-system/src/components/Tag/Tag.tsx index 546080dbb..08600bf13 100644 --- a/packages/design-system/src/components/Tag/Tag.tsx +++ b/packages/design-system/src/components/Tag/Tag.tsx @@ -3,21 +3,32 @@ import * as React from 'react'; import { styled } from 'styled-components'; import { Box, type BoxComponent } from '../Box'; -import { Flex, FlexComponent, FlexProps } from '../Flex'; +import { Flex, FlexProps } from '../Flex'; import { Typography, TypographyComponent } from '../Typography'; const ButtonBox = styled>(Box)<{ $iconAction: boolean }>` display: inline-flex; border: none; + & > svg { + height: 0.8rem; + width: 0.8rem; + } + + & > svg path { + fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)}; + } + &:hover { cursor: ${({ $iconAction }) => ($iconAction ? 'pointer' : 'initial')}; } `; -export interface TagProps extends FlexProps<'button'> { +export interface TagProps extends Omit { icon: React.ReactNode; label?: string; + disabled?: boolean; + onClick: (e: React.MouseEvent) => void; } export const Tag = ({ children, icon, label, disabled = false, onClick, ...props }: TagProps) => { @@ -27,16 +38,12 @@ export const Tag = ({ children, icon, label, disabled = false, onClick, ...props }; return ( - {children} - + {icon} - + ); }; -const TagWrapper = styled>(Flex)` - & > div > svg { - height: 0.8rem; - width: 0.8rem; - } - - & > svg path { - fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)}; - } -`; - const TagText = styled(Typography)<{ $disabled: boolean }>` color: inherit; border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)}; From d2622587eca0b31a2e6449ccf7afde62672e5da0 Mon Sep 17 00:00:00 2001 From: Madhuri Sandbhor Date: Mon, 24 Jun 2024 16:04:29 +0200 Subject: [PATCH 3/4] fix: onclick optional --- packages/design-system/src/components/Tag/Tag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/Tag/Tag.tsx b/packages/design-system/src/components/Tag/Tag.tsx index 08600bf13..8ea2f8761 100644 --- a/packages/design-system/src/components/Tag/Tag.tsx +++ b/packages/design-system/src/components/Tag/Tag.tsx @@ -28,7 +28,7 @@ export interface TagProps extends Omit { icon: React.ReactNode; label?: string; disabled?: boolean; - onClick: (e: React.MouseEvent) => void; + onClick?: (e: React.MouseEvent) => void; } export const Tag = ({ children, icon, label, disabled = false, onClick, ...props }: TagProps) => { From 15d5c2c1d54d4bacae91f49a8d7eba57e3a45271 Mon Sep 17 00:00:00 2001 From: Madhuri Sandbhor Date: Mon, 24 Jun 2024 18:00:02 +0200 Subject: [PATCH 4/4] fix: tests fixed for disabled prop --- packages/design-system/src/components/Tag/Tag.test.tsx | 9 ++++----- packages/design-system/src/components/Tag/Tag.tsx | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/design-system/src/components/Tag/Tag.test.tsx b/packages/design-system/src/components/Tag/Tag.test.tsx index f0be10607..5808ddcdc 100644 --- a/packages/design-system/src/components/Tag/Tag.test.tsx +++ b/packages/design-system/src/components/Tag/Tag.test.tsx @@ -14,7 +14,7 @@ describe('Tag', () => { it('should render the children and icon as expected', () => { const { getByRole, container } = render(); - expect(getByRole('button', { name: 'hello' })).toBeInTheDocument(); + expect(getByRole('button')).toBeInTheDocument(); // eslint-disable-next-line testing-library/no-container expect(container.querySelector('svg')).toMatchInlineSnapshot(` @@ -44,12 +44,11 @@ describe('Tag', () => { it('should handle the disabled prop correctly', async () => { const onClick = jest.fn(); - const { getByRole, user } = render({ disabled: true, onClick }); + const { getByRole, getByLabelText, user } = render({ disabled: true, onClick, label: 'Clear' }); - expect(getByRole('button', { name: 'hello' })).toBeDisabled(); - expect(getByRole('button', { name: 'hello' })).toHaveAttribute('aria-disabled', 'true'); + expect(getByRole('button')).toBeDisabled(); - await user.click(getByRole('button', { name: 'hello' })); + await user.click(getByLabelText('Clear')); expect(onClick).not.toHaveBeenCalled(); }); diff --git a/packages/design-system/src/components/Tag/Tag.tsx b/packages/design-system/src/components/Tag/Tag.tsx index 8ea2f8761..a3a2c4621 100644 --- a/packages/design-system/src/components/Tag/Tag.tsx +++ b/packages/design-system/src/components/Tag/Tag.tsx @@ -55,6 +55,7 @@ export const Tag = ({ children, icon, label, disabled = false, onClick, ...props