# Alert Component Changelog

## July 1, 2025

### Added

- Added `onClose` callback prop to the `AlertProps` interface
  - Type: `() => void`
  - Purpose: Provides callback functionality when the close button is clicked
  - Documented with JSDoc comment: `/** Callback function when close button is clicked */`

### Changed

- Made the close button conditionally render based on the presence of the `onClose` prop

  - Before: Close button was always rendered but had no functionality
  - After: Close button only renders when an `onClose` callback is provided
  - Implementation: `{onClose && (<div className="alert__close">...</div>)}`

- Connected the `onClick` event of the close button to the `onClose` callback

  - Before: `<button><Icon name="close" size="medium" /></button>`
  - After: `<button onClick={onClose}><Icon name="close" size="medium" /></button>`

- Updated the `renderTitle` function parameters to include the new `onClose` prop
  - Ensures custom title renderers have access to the close functionality

### Benefits

- Improved user experience by only showing interactive elements when they have associated functionality
- Enhanced component API by providing a clear way to handle dismissal of alerts
- Follows the principle of "If it's not clickable, don't make it look clickable"
- Maintains backward compatibility with existing implementations

## July 11, 2025

### Changed

- Refactored color palette logic: Alert now uses CSS variables for all color styling, inheriting from global theme or local modifier.
- Moved color variant logic into `mixins.alert-variants` for better modularity and maintainability.
- Improved support for dark mode via global `.is-dark` parent class and `colorScheme` prop.
- Updated tests to cover palette switching behavior.

### Benefits

- More flexible theming: Alerts can be light or dark regardless of parent theme.
- Cleaner, more maintainable codebase with modular SCSS mixins.
- Improved test coverage for new palette features.

## July 16, 2025

### Changed

- Removed `isInverse` and `isLight` props from the `Alert` component.
- Removed `--inverse` and `--light` modifier classes.
- Added `colorScheme` prop to the `Alert` component to support palette overrides.
  - `colorScheme`: Accepts `'light'` or `'dark'` to force palette regardless of parent theme.
- Updated modifier classes: `is-light` and `is-dark` are now applied based on `colorScheme` prop.
- Updated tests to cover new `colorScheme` prop and palette switching behavior.
- Updated global styles to handle light and dark theme CSS variables at the root and via `.is-light`/`.is-dark` classes.

### Benefits

- More flexible theming: Alerts can be light or dark regardless of parent theme using a single prop.
- Cleaner, more maintainable codebase with modular SCSS and simplified API.
- Improved test coverage for new palette features.