v.1.13.0 add: context menu
This commit is contained in:
gitfromwildan
130
contents/docs/components/release-note/index.mdx
Normal file
130
contents/docs/components/release-note/index.mdx
Normal file
@@ -0,0 +1,130 @@
|
||||
---
|
||||
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>`
|
||||
Reference in New Issue
Block a user