# Changelog

## 3.0.7

### Patch Changes

- Updated dependencies [9e4acc2]
  - @fiscozen/button@3.2.0

## 3.0.6

### Patch Changes

- 92c1d3a: Paragraph line-heights no longer need `!important`. The card title and subtitle (`FzRadioCard`, `FzCheckboxCard`), the avatar title and subtitle, and the alert description all set their line-height with `!leading-[…]`. On the four that carry `text-sm`, that `!` was a workaround for `@fiscozen/style`'s `p.text-sm` default, which weighed (0,1,1) and beat any plain `leading-*` utility; now that the default is `p:where(.text-sm)` at (0,0,1), the utility wins on its own. The other four never needed it — they sit on paragraphs without `text-sm`, where only the element default competed and a plain utility already won — and were cargo-culted alongside.

  Rendered line-heights are unchanged: 20px on the titles and the alert description, 16px on the subtitles, measured on every one of the eight sites before and after. What changes is that a consumer can now override them — `!important` previously made these line-heights unreachable from the outside.

  These packages don't declare `@fiscozen/style` as a dependency; the consuming app supplies the stylesheet. Upgrading them without also upgrading `@fiscozen/style` to the release that carries the `p:where(.text-sm)` fix will render the `text-sm` subtitles at 18px instead of 16px.
  - @fiscozen/button@3.1.3
  - @fiscozen/container@0.5.2

## 3.0.5

### Patch Changes

- @fiscozen/button@3.1.2
- @fiscozen/container@0.5.1

## 3.0.4

### Patch Changes

- Updated dependencies [5be1040]
  - @fiscozen/container@0.5.0
  - @fiscozen/button@3.1.1

## 3.0.3

### Patch Changes

- 2893adb: Apply self-contained typography baselines
  - Add `text-core-black` to the alert container so descendant text inherits the design's neutral colour without relying on the host environment's text colour default.
  - Add `mb-0` to the internal `<p>` elements (title and description), neutralising the host `<p> { margin-bottom: 1rem }` reset that ships with Bootstrap-style reboots. The pre-existing `mb-16` on the description (when an action is rendered) still wins, so the spacing-before-action intent is preserved.

## 3.0.2

### Patch Changes

- Updated dependencies [d835f37]
  - @fiscozen/button@3.1.0

## 3.0.1

### Patch Changes

- Updated dependencies [a9c33b8]
  - @fiscozen/button@3.0.1
  - @fiscozen/link@1.0.1

## 3.0.0

### Patch Changes

- Updated dependencies
  - @fiscozen/icons@1.0.0
  - @fiscozen/button@3.0.0

## 2.0.0

### Patch Changes

- Updated dependencies [a26bc2c]
- Updated dependencies [2d4fc5e]
  - @fiscozen/icons@0.2.0
  - @fiscozen/button@2.0.0
  - @fiscozen/container@0.4.2

## 1.1.0

### Minor Changes

- a42b3b4: Add text variant

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.0.0] - 2024-12-10

### ⚠️ BREAKING CHANGES

#### Prop `type` renamed to `tone`

The `type` prop has been renamed to `tone` for better semantic clarity.

**Migration:**

```vue
<!-- Before (v0.1.4) -->
<FzAlert type="info" />

<!-- After (v1.0.0) -->
<FzAlert tone="info" />
```

#### Event names changed

Event names have been updated to follow a more consistent naming convention:

- `fzaction:click` → `fzAlert:click`
- New event: `fzAlert:dismiss`

**Migration:**

```vue
<!-- Before (v0.1.4) -->
<FzAlert @fzaction:click="handleClick" />

<!-- After (v1.0.0) -->
<FzAlert @fzAlert:click="handleClick" @fzAlert:dismiss="handleDismiss" />
```

#### Visual structure redesign

The internal structure has been completely redesigned:

- New layout using `FzContainer` for consistent spacing
- Improved responsive behavior with `justify-between` layout
- Icon and content now wrapped in a flex container with better alignment
- Padding logic centralized: backoffice uses `p-6`, frontoffice uses `p-12`

#### Removed `simple` alert style

The `simple` style variant has been removed in favor of the new `variant` prop system.

**Migration:**

```vue
<!-- Before (v0.1.4) -->
<FzAlert alertStyle="simple" size="sm" />

<!-- After (v1.0.0) -->
<FzAlert variant="background" environment="backoffice" />
```

### Added

#### New `variant` prop

Introduced a new `variant` prop to replace `alertStyle` with clearer semantics:

- `'background'`: Alert with visible background (replaces `default` and `simple`)
- `'accordion'`: Collapsable alert (replaces `collapsable`)

**Usage:**

```vue
<FzAlert variant="background" />
<FzAlert variant="accordion" />
```

#### New `environment` prop

Added `environment` prop to explicitly control the alert context:

- `'frontoffice'`: Larger padding (12px) and standard button sizing
- `'backoffice'`: Compact padding (6px) and smaller button sizing

**Usage:**

```vue
<FzAlert environment="backoffice" />
<FzAlert environment="frontoffice" />
```

#### Dismissible alerts

New `isDismissible` prop allows users to dismiss alerts with a close button.

**Usage:**

```vue
<FzAlert isDismissible @fzAlert:dismiss="handleDismiss" />
```

#### Right icon support

Added `FzIconButton` for collapse/dismiss functionality positioned on the right side of the alert.

### Changed

- **Improved title styling**: Title now uses `v-bold` directive and `leading-[20px]` for consistent typography
- **Description spacing**: Dynamic margin classes based on presence of title and actions
- **Icon sizing**: Standardized icon size to `md` across all variants
- **Container classes**: Simplified class logic with `justify-between` for better layout control
- **Environment mapping**: Automatic environment inference from `size` prop when `environment` is not specified
- **Border styling**: Consistent `border-l-4` removed in favor of full rounded borders

### Deprecated

- **`alertStyle` prop**: Use `variant` instead. Will be removed in a future version.
- **`size` prop**: Use `environment` instead. Will be removed in a future version.

### Dependencies

- Added: `@fiscozen/container` (workspace)
- Updated: Improved integration with `@fiscozen/button` (now uses `FzIconButton`)

### Migration Guide

#### Quick Migration Checklist

1. ✅ Replace all `type` props with `tone`
2. ✅ Update event listeners from `fzaction:click` to `fzAlert:click`
3. ✅ Replace `alertStyle="simple"` with `variant="background" environment="backoffice"`
4. ✅ Replace `alertStyle="default"` with `variant="background"`
5. ✅ Replace `alertStyle="collapsable"` with `variant="accordion"`
6. ✅ Consider using `environment` instead of `size` for future compatibility

#### Complete Migration Example

```vue
<!-- Before (v0.1.4) -->
<FzAlert
  type="info"
  alertStyle="simple"
  size="sm"
  title="Alert Title"
  @fzaction:click="handleAction"
>
  Alert message
</FzAlert>

<!-- After (v1.0.0) -->
<FzAlert
  tone="info"
  variant="background"
  environment="backoffice"
  title="Alert Title"
  @fzAlert:click="handleAction"
>
  Alert message
</FzAlert>
```

---

## [0.1.4] and earlier

See git history for changes prior to v1.0.0.