fix: filters shouldn't be removed after clicking on filter tag

.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

docs/stories/Tag.mdx

@@ -31,8 +31,16 @@ or removed from that place. They cannot exist on their own.
 
 <Canvas of={TagStories.Base} />
 
+### Disabled Tag
+
 <Canvas of={TagStories.Disabled} />
 
+### Filter Tag
+
+Tag can also be used as a filter with action to remove the filter
+
+<Canvas of={TagStories.Filter} />
+
 ## Props
 
 The Tag component wraps all its children in the

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<typeof Tag> = {
   title: 'Design System/Components/Tag',
@@ -24,3 +24,12 @@ export const Disabled = {
   ),
   name: 'disabled',
 } satisfies Story;
+
+export const Filter = {
+  render: () => (
+    <Tag label="remove filter" icon={<Cross aria-hidden />} onClick={() => console.log('filter removed')}>
+      date is null
+    </Tag>
+  ),
+  name: 'filter',
+} satisfies Story;

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(`
@@ -35,21 +35,20 @@ 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);
   });
 
   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();
   });

packages/design-system/src/components/Tag/Tag.tsx

@@ -2,56 +2,71 @@ import * as React from 'react';
 
 import { styled } from 'styled-components';
 
-import { Flex, FlexComponent, FlexProps } from '../Flex';
+import { Box, type BoxComponent } from '../Box';
+import { Flex, FlexProps } from '../Flex';
 import { Typography, TypographyComponent } from '../Typography';
 
-export interface TagProps extends FlexProps<'button'> {
+const ButtonBox = styled<BoxComponent<'button'>>(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 Omit<FlexProps, 'onClick'> {
   icon: React.ReactNode;
+  label?: string;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-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<HTMLButtonElement> = (e) => {
     if (disabled || !onClick) return;
     onClick(e);
   };
 
   return (
-    <TagWrapper
-      tag="button"
+    <Flex
+      inline
       background={disabled ? 'neutral200' : 'primary100'}
       color={disabled ? 'neutral700' : 'primary600'}
       paddingLeft={3}
-      paddingRight={3}
-      onClick={handleClick}
-      aria-disabled={disabled}
-      disabled={disabled}
-      borderWidth="1px"
-      borderStyle="solid"
+      paddingRight={1}
       borderColor={disabled ? 'neutral300' : 'primary200'}
       hasRadius
       height="3.2rem"
-      gap={2}
       {...props}
     >
       <TagText $disabled={disabled} variant="pi" fontWeight="bold">
         {children}
       </TagText>
-      {icon}
-    </TagWrapper>
+      <ButtonBox
+        tag="button"
+        disabled={disabled}
+        aria-disabled={disabled}
+        aria-label={label}
+        padding={2}
+        onClick={handleClick}
+        $iconAction={!!onClick}
+      >
+        {icon}
+      </ButtonBox>
+    </Flex>
   );
 };
 
-const TagWrapper = styled<FlexComponent<'button'>>(Flex)`
-  & > svg {
-    height: 0.8rem;
-    width: 0.8rem;
-  }
-
-  & > svg path {
-    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
-  }
-`;
-
 const TagText = styled<TypographyComponent>(Typography)<{ $disabled: boolean }>`
   color: inherit;
   border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)};