# Tag Component Changelog

## 1.0.0 | 9 July 2025

### Overview

The `Tag` component is a renamed and refactored version of the previous `Badge` component. It maintains the same core functionality while updating the naming to better reflect its purpose and usage in the design system.

### Changes from Badge Component

#### Renamed

- Component renamed from `Badge` to `Tag` for better semantic clarity
- CSS class prefix changed from `badge` to `tag`

#### Removed

- Removed `isRound` prop that was previously used for rounded styling

#### New Features

- Added support for different sizes with the `size` prop ("small" or "large")
- Added a new `TagButton` component for action buttons
- Added support for dismissible tags with `actionButton` prop
- Added support for interactive tags that render as buttons when `onClick` is provided
- Added new color options: yellow, green, and blue
- Added support for disabled state with `isDisabled` prop
- Added contextual accessibility through:
  - Proper `aria-disabled` attribute handling
  - Conditionally rendering as semantic button or span based on interaction needs
  - Automatic prop forwarding to TagButton when used together

### Implementation Changes

- Complete rewrite of component rendering logic:
  - Automatically renders as a `<button>` when `onClick` is provided
  - Renders as a wrapper with both tag and action button when `actionButton` is provided
  - Otherwise renders as a simple `<span>` element
- Added forwarding of size and disabled state to action buttons
- Implemented intelligent ref forwarding to the appropriate rendered element

#### Maintained Features

- Color variants: black, orange, success, info, warning, danger
- Inverse styling with `isInverse` prop
- Custom className support
- Full HTML span element attribute support

#### Interface

- Completely restructured component interface using TypeScript discriminated unions:
  - Created a base `CommonProps` interface with shared props
  - Created specific `SpanProps` for regular tags (rendered as spans)
  - Created specific `ButtonProps` for interactive tags (rendered as buttons)
  - Combined as `TagProps = SpanProps | ButtonProps` for type safety
- New props and types:
  - `color?: TagColor` - Typesafe color options with const assertion
  - `size?: "small" | "large"` - Dedicated TagSize type
  - `isInverse?: boolean` - Toggle for inverse styling
  - `isDisabled?: boolean` - Support for disabled state
  - `className?: string` - Custom class support
  - `children?: React.ReactNode` - Content inside the tag
  - `actionButton?: React.ReactElement<TagButtonProps>` - Optional action button
  - `onClick?: React.MouseEventHandler<HTMLButtonElement>` - Click handler (renders as button)

### Usage Example

```jsx
// Basic usage
<Tag>Default</Tag>

// With color
<Tag color="success">Success</Tag>

// With size
<Tag size="large">Large Tag</Tag>

// With action button
<Tag actionButton={<TagButton iconName="close" ariaLabel="Close" />}>
  Dismissible Tag
</Tag>

// Interactive Tag
<Tag onClick={() => console.log('Tag clicked')}>
  Interactive Tag
</Tag>

// Inverse styling
<Tag isInverse color="warning">Warning</Tag>

// Disabled Tag
<Tag isDisabled>Disabled Tag</Tag>
```
