131 lines
4.3 KiB
Plaintext
131 lines
4.3 KiB
Plaintext
---
|
|
title: Release Note
|
|
description: The Release Note component makes it easy for you to write updates for each version of your application.
|
|
date: 31-12-2024
|
|
---
|
|
|
|
The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: `Release` and `Changes` which can be used to display version, date, release title, and a list of changes categorized by type.
|
|
|
|
## Basic Usage
|
|
|
|
Here is a basic example of using the Release Note component:
|
|
|
|
```jsx
|
|
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
|
<Changes type="added">
|
|
- New feature to improve accessibility
|
|
- Keyboard navigation support for dialog components
|
|
</Changes>
|
|
<Changes type="fixed">
|
|
- Bug fix for mobile menu
|
|
- Fixed loading issues on documentation pages
|
|
</Changes>
|
|
</Release>
|
|
```
|
|
|
|
<Accordion title="Render As" defaultOpen={true}>
|
|
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
|
<Changes type="added">
|
|
- New feature to improve accessibility
|
|
- Keyboard navigation support for dialog components
|
|
</Changes>
|
|
<Changes type="fixed">
|
|
- Bug fix for mobile menu
|
|
- Fixed loading issues on documentation pages
|
|
</Changes>
|
|
</Release>
|
|
</Accordion>
|
|
|
|
## Release Component
|
|
|
|
The `Release` component is used to display key information about a release version, such as version number, release date, and title.
|
|
|
|
### Release Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
|------|------|----------|-------------|
|
|
| `version` | string | ✅ | Version number to display (without "v" prefix) |
|
|
| `title` | string | ✅ | Title or name of the release |
|
|
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
|
|
| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
|
|
|
|
```jsx
|
|
<Release
|
|
version="1.10.1"
|
|
date="2025-05-24"
|
|
title="Accessibility Improvements and Bug Fixes"
|
|
>
|
|
{/* Changes content here */}
|
|
</Release>
|
|
```
|
|
|
|
## Changes Component
|
|
|
|
The `Changes` component is used to group changes by category with appropriate icons and colors.
|
|
|
|
### Changes Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
|------|------|----------|-------------|
|
|
| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
|
|
| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
|
|
|
|
### Changes Note
|
|
|
|
| Category | Description |
|
|
|----------|-------------|
|
|
| `added` | New features or functionality added |
|
|
| `fixed` | Bugs or issues that have been fixed |
|
|
| `improved` | Enhancements or optimizations to existing features |
|
|
| `deprecated` | Features that are not recommended and may be removed in future |
|
|
| `removed` | Features that have been completely removed |
|
|
|
|
### Changes Example
|
|
|
|
```jsx
|
|
<Changes type="added">
|
|
- New feature to improve accessibility
|
|
- Keyboard navigation support for dialog components
|
|
</Changes>
|
|
|
|
<Changes type="fixed">
|
|
- Bug fix for mobile menu
|
|
- Fixed loading issues on documentation pages
|
|
</Changes>
|
|
```
|
|
|
|
## Complete Implementation
|
|
|
|
Here is a complete example of using the Release Note component in an MDX file:
|
|
|
|
````plaintext
|
|
<!-- hidden heading for TOC -->
|
|
|
|
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
|
<Changes type="added">
|
|
- Keyboard navigation for all interactive components
|
|
- Screen reader support for table components
|
|
- Dark mode feature with system preference detection
|
|
</Changes>
|
|
|
|
<Changes type="fixed">
|
|
- Fixed mobile menu bug that wouldn't close when navigating to another page
|
|
- Fixed loading issues on documentation pages
|
|
- Fixed display issues in Safari browser
|
|
</Changes>
|
|
|
|
<Changes type="improved">
|
|
- Improved page loading performance
|
|
- Optimized JavaScript bundle size
|
|
- Enhanced responsive design across all viewports
|
|
</Changes>
|
|
</Release>
|
|
````
|
|
|
|
## Usage Tips
|
|
|
|
1. **Date Format**: Use a consistent date format for all releases.
|
|
2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
|
|
3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
|
|
4. **TOC**: Use hidden headings to ensure each version is detected in the Table of Contents. Use `<div className="sr-only">### v 1.10.1</div>`
|