@capillarytech/blaze-ui 5.21.0 → 5.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CapLanguageProvider/actions.js +125 -0
- package/CapLanguageProvider/actions.js.map +1 -0
- package/CapLanguageProvider/constants.js +37 -0
- package/CapLanguageProvider/constants.js.map +1 -0
- package/package.json +1 -1
- package/CapActionBar/README.md +0 -11
- package/CapAdvancedIcon/README.md +0 -185
- package/CapAdvancedIcon/use-cases.md +0 -44
- package/CapAlert/README.md +0 -144
- package/CapAppNotEnabled/README.md +0 -84
- package/CapAskAira/README.md +0 -328
- package/CapBanner/README.md +0 -4
- package/CapBlock/README.md +0 -175
- package/CapBorderedBox/Status.md +0 -40
- package/CapCSVFileUploader/README.md +0 -124
- package/CapCSVFileUploader/Status.md +0 -47
- package/CapCard/README.md +0 -85
- package/CapCard/Status.md +0 -41
- package/CapCardBox/README.md +0 -169
- package/CapCardBox/Status.md +0 -52
- package/CapCarousel/README.md +0 -190
- package/CapCarousel/Status.md +0 -73
- package/CapCheckbox/README.md +0 -254
- package/CapCheckbox/Status.md +0 -41
- package/CapColorPicker/README.md +0 -112
- package/CapColorPicker/Status.md +0 -52
- package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
- package/CapColoredTag/README.md +0 -167
- package/CapColoredTag/Status.md +0 -49
- package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
- package/CapConditionPreview/README.md +0 -40
- package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
- package/CapCustomCard/README.md +0 -182
- package/CapCustomCard/Status.md +0 -40
- package/CapCustomCarousel/Status.md +0 -69
- package/CapCustomCheckboxList/README.md +0 -178
- package/CapCustomCheckboxList/Status.md +0 -52
- package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
- package/CapCustomList/README.md +0 -117
- package/CapCustomList/Status.md +0 -77
- package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
- package/CapCustomSelect/README.md +0 -38
- package/CapDatePicker/README.md +0 -139
- package/CapDateRangePicker/README.md +0 -159
- package/CapDateTimePicker/README.md +0 -136
- package/CapDateTimeRangePicker/README.md +0 -243
- package/CapDivider/README.md +0 -122
- package/CapDrawer/README.md +0 -207
- package/CapDrawer/Status.md +0 -52
- package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
- package/CapDropdown/README.md +0 -515
- package/CapDropdown/Status.md +0 -45
- package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
- package/CapError/README.md +0 -88
- package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
- package/CapErrorBoundary/README.md +0 -150
- package/CapErrorStateIllustration/README.md +0 -222
- package/CapErrorStateIllustration/USE_CASES.md +0 -33
- package/CapExpressionEditor/README.md +0 -32
- package/CapForm/README.md +0 -132
- package/CapForm/Status.md +0 -40
- package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
- package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
- package/CapFormItem/README.md +0 -320
- package/CapFormItem/Status.md +0 -73
- package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
- package/CapGraph/README.md +0 -69
- package/CapGraph/USE_CASES.md +0 -66
- package/CapHamburgerMenu/README.md +0 -234
- package/CapHamburgerMenu/USE_CASES.md +0 -48
- package/CapHeader/Status.md +0 -41
- package/CapHeading/README.md +0 -220
- package/CapHeading/Status.md +0 -41
- package/CapIcon/README.md +0 -207
- package/CapIllustration/Status.md +0 -41
- package/CapImage/README.md +0 -50
- package/CapImportMFEComponent/README.md +0 -121
- package/CapInfoNote/Status.md +0 -40
- package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
- package/CapInput/README.md +0 -196
- package/CapInput/Status.md +0 -123
- package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
- package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
- package/CapLanguageProvider/README.md +0 -206
- package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
- package/CapLevelGraphRenderer/README.md +0 -123
- package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
- package/CapLink/README.md +0 -203
- package/CapLink/Status.md +0 -32
- package/CapLink/tests/CapLink.missingUseCases.md +0 -95
- package/CapList/README.md +0 -129
- package/CapList/Status.md +0 -69
- package/CapListLayout/README.md +0 -7
- package/CapLogin/README.md +0 -7
- package/CapMenu/README.md +0 -86
- package/CapModal/README.md +0 -357
- package/CapModal/Status.md +0 -52
- package/CapModal/tests/USE_CASES_GAPS.md +0 -207
- package/CapMultiSelect/README.md +0 -170
- package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
- package/CapMultiSelectDatePicker/README.md +0 -11
- package/CapNavigation/README.md +0 -72
- package/CapNotification/README.md +0 -228
- package/CapNotificationDropdown/README.md +0 -5
- package/CapPopover/README.md +0 -234
- package/CapProgress/Status.md +0 -40
- package/CapRadio/Status.md +0 -54
- package/CapRadioButton/README.md +0 -152
- package/CapRadioButton/Status.md +0 -70
- package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapRadioCard/README.md +0 -161
- package/CapRadioCard/Status.md +0 -78
- package/CapRadioGroup/README.md +0 -141
- package/CapRadioGroup/Status.md +0 -59
- package/CapReorderComponent/README.md +0 -179
- package/CapReorderComponent/Status.md +0 -41
- package/CapRoadMap/README.md +0 -126
- package/CapRoadMap/Status.md +0 -53
- package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
- package/CapRow/README.md +0 -424
- package/CapSKUUploader/README.md +0 -189
- package/CapSKUUploader/Status.md +0 -66
- package/CapSecondaryTopBar/README.md +0 -7
- package/CapSelect/README.md +0 -243
- package/CapSelectFilter/README.md +0 -121
- package/CapShape/README.md +0 -96
- package/CapShape/Status.md +0 -36
- package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapSideBar/README.md +0 -298
- package/CapSideBar/Status.md +0 -5
- package/CapSlideBox/README.md +0 -68
- package/CapSlider/README.md +0 -423
- package/CapSlider/Status.md +0 -48
- package/CapSlider/tests/TEST_COVERAGE.md +0 -118
- package/CapSnackBar/README.md +0 -222
- package/CapSnackBar/Status.md +0 -41
- package/CapSomethingWentWrong/README.md +0 -97
- package/CapSplit/README.md +0 -19
- package/CapStatisticCard/README.md +0 -138
- package/CapStatus/README.md +0 -148
- package/CapStatus/Status.md +0 -40
- package/CapSteps/Status.md +0 -40
- package/CapStepsAccordian/README.md +0 -305
- package/CapStepsAccordian/Status.md +0 -48
- package/CapSupportVideosWrapper/README.md +0 -14
- package/CapSwitch/README.md +0 -351
- package/CapTab/README.md +0 -406
- package/CapTab/Status.md +0 -104
- package/CapTab/tests/USE_CASE_GAPS.md +0 -143
- package/CapTabV3/ANALYSIS.md +0 -60
- package/CapTabV3/README.md +0 -156
- package/CapTabV3/Status.md +0 -52
- package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
- package/CapTable/README.md +0 -160
- package/CapTable/Status.md +0 -41
- package/CapTag/README.md +0 -16
- package/CapTagDropdown/README.md +0 -171
- package/CapTagDropdown/Status.md +0 -55
- package/CapTimePicker/README.md +0 -170
- package/CapTooltip/README.md +0 -336
- package/CapTooltipWithInfo/Status.md +0 -75
- package/CapTopBar/README.md +0 -146
- package/CapTree/README.md +0 -124
- package/CapTree/Status.md +0 -48
- package/CapTree/tests/STATUS.md +0 -154
- package/CapTreeSelect/README.md +0 -217
- package/CapTreeSelect/Status.md +0 -52
- package/CapTruncateList/README.md +0 -13
- package/CapUnifiedSelect/README.md +0 -40
- package/CapUploader/README.md +0 -313
- package/CapUploader/Status.md +0 -76
- package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
- package/CapUserProfile/README.md +0 -105
- package/CapUserProfile/Status.md +0 -95
- package/CapVirtualList/README.md +0 -162
- package/CapVirtualList/Status.md +0 -71
- package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
# Migration Status: CapCustomCarousel
|
|
2
|
-
|
|
3
|
-
**Last Updated**: 2026-02-21 19:00:00
|
|
4
|
-
|
|
5
|
-
## Migration Steps
|
|
6
|
-
|
|
7
|
-
- [x] **Step 0**: Setup branch and remote tracking
|
|
8
|
-
- [x] **Step 1**: Migration Prompt 1 (Main migration)
|
|
9
|
-
- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
|
|
10
|
-
- [x] **Step 2**: Migration Prompt 2 (Storybook support)
|
|
11
|
-
- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
|
|
12
|
-
- [x] **Step 3**: Migration Prompt 3 (Unit tests)
|
|
13
|
-
- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
|
|
14
|
-
- [x] **Step 5**: Linting (ESLint)
|
|
15
|
-
- [x] **Step 6**: Pre-build Validation
|
|
16
|
-
- [x] **Step 7**: Build blaze-ui
|
|
17
|
-
- [x] **Step 8**: Visual Testing
|
|
18
|
-
- [x] **Step 8.1**: Pre-visual-test check (agent verification)
|
|
19
|
-
- [x] **Step 8.2**: Visual comparison
|
|
20
|
-
- [x] **Step 8.3**: Visual diff analysis (agent analysis)
|
|
21
|
-
- [x] **Step 9**: CSS Analysis (if mismatches found)
|
|
22
|
-
- [x] **Step 9.5**: CSS Analysis Completed
|
|
23
|
-
- [ ] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
|
|
24
|
-
- [ ] **Step 11**: Create Pull Request
|
|
25
|
-
|
|
26
|
-
## Deprecated Props Verification
|
|
27
|
-
|
|
28
|
-
_No deprecated props verification results yet._
|
|
29
|
-
|
|
30
|
-
**Note**: Step 2.5 is REQUIRED and enforced.
|
|
31
|
-
- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
|
|
32
|
-
- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
|
|
33
|
-
- Skip: If original component doesn't exist in cap-ui-library
|
|
34
|
-
- All deprecated Ant Design props and prop changes must be documented before proceeding.
|
|
35
|
-
|
|
36
|
-
## Visual Testing Results
|
|
37
|
-
|
|
38
|
-
All 8 variants passed (threshold: 1.5%):
|
|
39
|
-
|
|
40
|
-
| Variant | Diff % | Status |
|
|
41
|
-
|---------|--------|--------|
|
|
42
|
-
| default | 0.34% | ✓ Pass |
|
|
43
|
-
| custom-gap | 0.35% | ✓ Pass |
|
|
44
|
-
| no-heading | 0.27% | ✓ Pass |
|
|
45
|
-
| long-list | 0.34% | ✓ Pass |
|
|
46
|
-
| single-card | 0.42% | ✓ Pass |
|
|
47
|
-
| empty-data | 0.18% | ✓ Pass |
|
|
48
|
-
| second-slide-selected | 0.34% | ✓ Pass |
|
|
49
|
-
| third-slide-selected | 0.34% | ✓ Pass |
|
|
50
|
-
|
|
51
|
-
Screenshots confirmed:
|
|
52
|
-
- `second-slide-selected`: Slide 2 tab selected (bold + underline), Card 2 visible — click switching WORKING ✓
|
|
53
|
-
- `third-slide-selected`: Slide 2 tab selected (bold + underline), Card 2 and Card 3 visible — click switching WORKING ✓
|
|
54
|
-
|
|
55
|
-
Minor diffs (0.34–0.42%) are from antd v3→v6 styling differences (Row/Col flex layout). Not regressions.
|
|
56
|
-
|
|
57
|
-
## CSS Fixes Applied
|
|
58
|
-
|
|
59
|
-
1. **Card shrinking (antd v6 flex)**: Added `style={{ flexShrink: 0 }}` inline to the card item CapRow in `index.tsx`. antd v5 `Row` renders as `display: flex` with default `flex-shrink: 1`, causing cards to shrink. Inline style overrides any CSS-in-JS conflicts.
|
|
60
|
-
|
|
61
|
-
## Notes
|
|
62
|
-
|
|
63
|
-
- Fixed `carouselId` to use `useRef` so it remains stable across re-renders (was `Math.random()` outside any hook, causing a new ID on every state update)
|
|
64
|
-
- Fixed `handleSlidesOnAction` to directly call `setCarouselItemIndex(index)` so the selected tab indicator updates immediately on click (previously relied solely on scroll event which may not fire in all cases)
|
|
65
|
-
- Added `second-slide-selected` and `third-slide-selected` interaction test cases to both consumer testCases.js to verify click/switching behavior visually
|
|
66
|
-
- Used `type: 'evaluate'` interactions with `.cap-custom-carousel-header-item:nth-child(N)` selectors (avoid `]` chars in scripts due to test-case-loader.js regex limitation)
|
|
67
|
-
- Fixed `image-utils.js` to handle `evaluate` interaction type (runs arbitrary JS in page context)
|
|
68
|
-
- Fixed `test-case-loader.js` fallback parser to extract `script` property from `evaluate` interactions
|
|
69
|
-
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
# CapCustomCheckboxList Component
|
|
2
|
-
|
|
3
|
-
A component that renders a horizontal list of custom checkbox items, each with an icon, title, and optional inductive text.
|
|
4
|
-
|
|
5
|
-
## Migration from Ant Design v3 to v6
|
|
6
|
-
|
|
7
|
-
This component has been migrated from Ant Design v3 to v6 with the following changes:
|
|
8
|
-
|
|
9
|
-
### Breaking Changes
|
|
10
|
-
|
|
11
|
-
**No breaking changes** - The component maintains full backward compatibility.
|
|
12
|
-
|
|
13
|
-
The component uses `CapCheckbox.Group` which is already migrated to Ant Design v6. The Checkbox.Group API is stable across v3→v6 with no deprecated props.
|
|
14
|
-
|
|
15
|
-
### Deprecated Props
|
|
16
|
-
|
|
17
|
-
**No deprecated Ant Design props** - The component uses `Checkbox.Group` from Ant Design v6, which has no deprecated props in the v3→v6 migration.
|
|
18
|
-
|
|
19
|
-
**Ant Design Component Used:**
|
|
20
|
-
- **Checkbox.Group** (`antd-v5` package) - Used via `CapCheckbox.Group`
|
|
21
|
-
|
|
22
|
-
**Verification:**
|
|
23
|
-
According to the [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6) and the project's `ANTD_V6_MIGRATION.md`, `Checkbox.Group` is not listed among components with deprecated props. The Checkbox.Group API remains stable across Ant Design v3→v6 with no prop changes required.
|
|
24
|
-
|
|
25
|
-
**Note:** If you encounter any deprecated prop warnings related to Checkbox.Group in the future, please report them as they would indicate a change in Ant Design's API.
|
|
26
|
-
|
|
27
|
-
### Backward Compatibility
|
|
28
|
-
|
|
29
|
-
All props remain backward compatible. The component maintains the same API and behavior as before.
|
|
30
|
-
|
|
31
|
-
### Style Changes
|
|
32
|
-
|
|
33
|
-
**Approach**: The component uses custom SCSS classes with no Ant Design style overrides. All styling is handled through component-specific classes and SCSS variables.
|
|
34
|
-
|
|
35
|
-
### Code Improvements
|
|
36
|
-
|
|
37
|
-
1. **TypeScript Conversion**: Converted from JavaScript with PropTypes to TypeScript with proper type definitions
|
|
38
|
-
2. **Type Safety**: Added comprehensive TypeScript interfaces in `types.ts`
|
|
39
|
-
3. **Modern React Patterns**: Uses functional component with React.FC
|
|
40
|
-
4. **Improved Code Quality**: Uses `classnames` library (consistent with codebase), proper type exports
|
|
41
|
-
|
|
42
|
-
### What Stayed the Same
|
|
43
|
-
|
|
44
|
-
- Component API (`paneList`, `className`, and all Checkbox.Group props)
|
|
45
|
-
- Visual appearance and styling
|
|
46
|
-
- Behavior and functionality
|
|
47
|
-
- Class names for backward compatibility
|
|
48
|
-
|
|
49
|
-
### What Changed
|
|
50
|
-
|
|
51
|
-
- **Added**: TypeScript types and interfaces
|
|
52
|
-
- **Added**: Proper type exports
|
|
53
|
-
- **Improved**: Code structure and maintainability
|
|
54
|
-
- **Updated**: Dependencies (uses `classnames` instead of `classNames` require)
|
|
55
|
-
|
|
56
|
-
## Props
|
|
57
|
-
|
|
58
|
-
| Prop Name | Type | Default | Description |
|
|
59
|
-
|-----------|------|---------|-------------|
|
|
60
|
-
| `paneList` | `PaneListItem[]` | **Required** | Array of checkbox items to render |
|
|
61
|
-
| `className` | `string` | `undefined` | Additional CSS class name |
|
|
62
|
-
| `value` | `(string \| number)[]` | `undefined` | Controlled value (Checkbox.Group prop) |
|
|
63
|
-
| `defaultValue` | `(string \| number)[]` | `undefined` | Default value (Checkbox.Group prop) |
|
|
64
|
-
| `onChange` | `(checkedValue: (string \| number)[]) => void` | `undefined` | Callback when selection changes (Checkbox.Group prop) |
|
|
65
|
-
| `disabled` | `boolean` | `undefined` | Whether all checkboxes are disabled (Checkbox.Group prop) |
|
|
66
|
-
| `...rest` | `CheckboxGroupProps` | - | All other Ant Design Checkbox.Group props are supported |
|
|
67
|
-
|
|
68
|
-
### PaneListItem Interface
|
|
69
|
-
|
|
70
|
-
| Prop Name | Type | Default | Description |
|
|
71
|
-
|-----------|------|---------|-------------|
|
|
72
|
-
| `key` | `string \| number` | `undefined` | Unique key for React (falls back to index if not provided) |
|
|
73
|
-
| `title` | `string` | **Required** | Title text displayed as the checkbox label |
|
|
74
|
-
| `inductiveText` | `string` | `undefined` | Optional inductive text displayed below the title |
|
|
75
|
-
| `iconProps` | `CapIconProps` | `undefined` | Optional props for the icon component |
|
|
76
|
-
| `...rest` | `CapCheckboxProps` | - | All other CapCheckbox props are supported (e.g., `value`, `checked`, `disabled`) |
|
|
77
|
-
|
|
78
|
-
## Usage
|
|
79
|
-
|
|
80
|
-
### Basic Example
|
|
81
|
-
|
|
82
|
-
```tsx
|
|
83
|
-
import { CapCustomCheckboxList } from '@capillarytech/blaze-ui';
|
|
84
|
-
import type { PaneListItem } from '@capillarytech/blaze-ui';
|
|
85
|
-
|
|
86
|
-
const items: PaneListItem[] = [
|
|
87
|
-
{
|
|
88
|
-
key: '1',
|
|
89
|
-
title: 'Option 1',
|
|
90
|
-
value: 'option1',
|
|
91
|
-
iconProps: { type: 'check' },
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
key: '2',
|
|
95
|
-
title: 'Option 2',
|
|
96
|
-
value: 'option2',
|
|
97
|
-
iconProps: { type: 'star' },
|
|
98
|
-
inductiveText: 'Additional information',
|
|
99
|
-
},
|
|
100
|
-
];
|
|
101
|
-
|
|
102
|
-
function MyComponent() {
|
|
103
|
-
return <CapCustomCheckboxList paneList={items} />;
|
|
104
|
-
}
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Controlled Example
|
|
108
|
-
|
|
109
|
-
```tsx
|
|
110
|
-
import { useState } from 'react';
|
|
111
|
-
import { CapCustomCheckboxList } from '@capillarytech/blaze-ui';
|
|
112
|
-
|
|
113
|
-
function Form() {
|
|
114
|
-
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
|
115
|
-
|
|
116
|
-
const items = [
|
|
117
|
-
{ key: '1', title: 'Option 1', value: 'option1', iconProps: { type: 'check' } },
|
|
118
|
-
{ key: '2', title: 'Option 2', value: 'option2', iconProps: { type: 'star' } },
|
|
119
|
-
];
|
|
120
|
-
|
|
121
|
-
return (
|
|
122
|
-
<CapCustomCheckboxList
|
|
123
|
-
paneList={items}
|
|
124
|
-
value={selectedValues}
|
|
125
|
-
onChange={(values) => setSelectedValues(values as string[])}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### With All Checkbox.Group Props
|
|
132
|
-
|
|
133
|
-
```tsx
|
|
134
|
-
<CapCustomCheckboxList
|
|
135
|
-
paneList={items}
|
|
136
|
-
defaultValue={['option1']}
|
|
137
|
-
disabled={false}
|
|
138
|
-
onChange={(values) => console.log(values)}
|
|
139
|
-
/>
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
## Styling
|
|
143
|
-
|
|
144
|
-
The component uses SCSS with the following class structure:
|
|
145
|
-
|
|
146
|
-
- `.cap-customCheckboxList-v2` - Main container for each checkbox item
|
|
147
|
-
- `.div-icon` - Icon container
|
|
148
|
-
- `.customCheckbox-icon` - Icon styling
|
|
149
|
-
- `.customCheckbox-inductive-text` - Inductive text styling
|
|
150
|
-
- `.customCheckbox` - Checkbox wrapper styling
|
|
151
|
-
|
|
152
|
-
All styles use SCSS variables from `components/styles/_variables.scss` for consistency.
|
|
153
|
-
|
|
154
|
-
## TypeScript
|
|
155
|
-
|
|
156
|
-
```typescript
|
|
157
|
-
import type { CapCustomCheckboxListProps, PaneListItem } from '@capillarytech/blaze-ui';
|
|
158
|
-
|
|
159
|
-
const items: PaneListItem[] = [
|
|
160
|
-
{
|
|
161
|
-
key: '1',
|
|
162
|
-
title: 'Option 1',
|
|
163
|
-
value: 'option1',
|
|
164
|
-
iconProps: { type: 'check' },
|
|
165
|
-
},
|
|
166
|
-
];
|
|
167
|
-
|
|
168
|
-
const MyComponent: React.FC = () => {
|
|
169
|
-
return <CapCustomCheckboxList paneList={items} />;
|
|
170
|
-
};
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
## Notes
|
|
174
|
-
|
|
175
|
-
- Each item in `paneList` should have a unique `key` prop for optimal React performance. If not provided, the array index is used as fallback.
|
|
176
|
-
- The component renders items horizontally using flexbox (`display: flex`).
|
|
177
|
-
- All Ant Design Checkbox.Group props are supported through prop spreading.
|
|
178
|
-
- The component maintains backward compatibility with existing class names and structure.
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
# Migration Status: CapCustomCheckboxList
|
|
2
|
-
|
|
3
|
-
**Last Updated**: 2026-02-06 09:53:16
|
|
4
|
-
|
|
5
|
-
## Migration Steps
|
|
6
|
-
|
|
7
|
-
- [x] **Step 0**: Setup branch and remote tracking
|
|
8
|
-
- [x] **Step 1**: Migration Prompt 1 (Main migration)
|
|
9
|
-
- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
|
|
10
|
-
- [x] **Step 2**: Migration Prompt 2 (Storybook support)
|
|
11
|
-
- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
|
|
12
|
-
- [x] **Step 3**: Migration Prompt 3 (Unit tests)
|
|
13
|
-
- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
|
|
14
|
-
- [x] **Step 5**: Linting (ESLint)
|
|
15
|
-
- [x] **Step 6**: Pre-build Validation
|
|
16
|
-
- [x] **Step 7**: Build blaze-ui
|
|
17
|
-
- [x] **Step 8**: Visual Testing
|
|
18
|
-
- [x] **Step 9**: CSS Analysis (if mismatches found)
|
|
19
|
-
- [x] **Step 9.5**: CSS Analysis Completed
|
|
20
|
-
- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
|
|
21
|
-
- [x] **Step 11**: Create Pull Request
|
|
22
|
-
|
|
23
|
-
## Deprecated Props Verification
|
|
24
|
-
|
|
25
|
-
_No deprecated props verification results yet._
|
|
26
|
-
|
|
27
|
-
**Note**: Step 2.5 is REQUIRED and enforced.
|
|
28
|
-
- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
|
|
29
|
-
- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
|
|
30
|
-
- Skip: If original component doesn't exist in cap-ui-library
|
|
31
|
-
- All deprecated Ant Design props and prop changes must be documented before proceeding.
|
|
32
|
-
|
|
33
|
-
## Visual Testing Results
|
|
34
|
-
|
|
35
|
-
**Last Test**: 2026-02-06 09:53:16
|
|
36
|
-
**Maximum Mismatch**: 4.47%
|
|
37
|
-
|
|
38
|
-
### Mismatched Variants:
|
|
39
|
-
- long-content:4.47%
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
## CSS Fixes Applied
|
|
43
|
-
|
|
44
|
-
**Date**: 2026-02-01 01:37:16
|
|
45
|
-
**Summary**: CSS fixes applied based on visual testing analysis.
|
|
46
|
-
|
|
47
|
-
_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCustomCheckboxList/css-fix-analysis.md`_
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
## Notes
|
|
51
|
-
|
|
52
|
-
_No notes yet._
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
# CapCustomCheckboxList - Use Cases Analysis
|
|
2
|
-
|
|
3
|
-
## Phase 1: Use Cases NOT Fulfilled by Component
|
|
4
|
-
|
|
5
|
-
This document identifies potential use cases that the `CapCustomCheckboxList` component may not currently fulfill, based on common checkbox list patterns and the component's current implementation.
|
|
6
|
-
|
|
7
|
-
### 1. Loading States
|
|
8
|
-
**Status**: ❌ NOT SUPPORTED
|
|
9
|
-
- **Use Case**: Display loading skeleton/spinner while checkbox items are being fetched
|
|
10
|
-
- **Current Behavior**: Component renders immediately with provided `paneList`
|
|
11
|
-
- **Gap**: No `loading` prop or loading state handling
|
|
12
|
-
- **Workaround**: Parent component can conditionally render component or show loading UI separately
|
|
13
|
-
|
|
14
|
-
### 2. Empty State Handling
|
|
15
|
-
**Status**: ❌ NOT SUPPORTED
|
|
16
|
-
- **Use Case**: Display custom message when `paneList` is empty
|
|
17
|
-
- **Current Behavior**: Component renders nothing when `paneList` is empty (no visual feedback)
|
|
18
|
-
- **Gap**: No `emptyText` or `emptyRender` prop
|
|
19
|
-
- **Workaround**: Parent component can check `paneList.length` and render empty state separately
|
|
20
|
-
|
|
21
|
-
### 3. Maximum Selection Limit
|
|
22
|
-
**Status**: ❌ NOT SUPPORTED
|
|
23
|
-
- **Use Case**: Limit the number of items that can be selected (e.g., "Select up to 3 options")
|
|
24
|
-
- **Current Behavior**: All checkboxes can be selected without limit
|
|
25
|
-
- **Gap**: No `maxSelection` prop or validation
|
|
26
|
-
- **Workaround**: Parent component can implement validation in `onChange` handler
|
|
27
|
-
|
|
28
|
-
### 4. Minimum Selection Requirement
|
|
29
|
-
**Status**: ❌ NOT SUPPORTED
|
|
30
|
-
- **Use Case**: Require at least N items to be selected (e.g., "Select at least 2 options")
|
|
31
|
-
- **Current Behavior**: No minimum selection enforcement
|
|
32
|
-
- **Gap**: No `minSelection` prop or validation
|
|
33
|
-
- **Workaround**: Parent component can implement validation in `onChange` handler
|
|
34
|
-
|
|
35
|
-
### 5. Select All / Deselect All
|
|
36
|
-
**Status**: ❌ NOT SUPPORTED
|
|
37
|
-
- **Use Case**: Provide a "Select All" checkbox to select/deselect all items at once
|
|
38
|
-
- **Current Behavior**: Users must click each checkbox individually
|
|
39
|
-
- **Gap**: No built-in select all functionality
|
|
40
|
-
- **Workaround**: Parent component can add a separate checkbox and manage state
|
|
41
|
-
|
|
42
|
-
### 6. Group-Level Error Messages
|
|
43
|
-
**Status**: ❌ NOT SUPPORTED
|
|
44
|
-
- **Use Case**: Display error message at the group level (e.g., "Please select at least one option")
|
|
45
|
-
- **Current Behavior**: Only individual items can have error messages via `errorMessage` prop
|
|
46
|
-
- **Gap**: No `errorMessage` prop at component level
|
|
47
|
-
- **Workaround**: Parent component can render error message above/below component
|
|
48
|
-
|
|
49
|
-
### 7. Custom Validation
|
|
50
|
-
**Status**: ❌ NOT SUPPORTED
|
|
51
|
-
- **Use Case**: Custom validation logic (e.g., certain combinations are invalid)
|
|
52
|
-
- **Current Behavior**: No validation beyond individual item `errorMessage`
|
|
53
|
-
- **Gap**: No `validator` or `onValidate` callback prop
|
|
54
|
-
- **Workaround**: Parent component can implement validation logic
|
|
55
|
-
|
|
56
|
-
### 8. Virtualization for Large Lists
|
|
57
|
-
**Status**: ❌ NOT SUPPORTED
|
|
58
|
-
- **Use Case**: Efficiently render hundreds or thousands of checkbox items
|
|
59
|
-
- **Current Behavior**: Renders all items in `paneList` (performance may degrade with large lists)
|
|
60
|
-
- **Gap**: No virtualization or pagination support
|
|
61
|
-
- **Workaround**: Parent component can implement pagination or virtual scrolling wrapper
|
|
62
|
-
|
|
63
|
-
### 9. Filtering/Search Functionality
|
|
64
|
-
**Status**: ❌ NOT SUPPORTED
|
|
65
|
-
- **Use Case**: Filter checkbox items by search term
|
|
66
|
-
- **Current Behavior**: All items in `paneList` are always rendered
|
|
67
|
-
- **Gap**: No built-in filtering or search
|
|
68
|
-
- **Workaround**: Parent component can filter `paneList` before passing to component
|
|
69
|
-
|
|
70
|
-
### 10. Responsive Layout
|
|
71
|
-
**Status**: ⚠️ LIMITED SUPPORT
|
|
72
|
-
- **Use Case**: Adapt layout for mobile/tablet screens (e.g., stack vertically on small screens)
|
|
73
|
-
- **Current Behavior**: Fixed horizontal flex layout (`display: flex`)
|
|
74
|
-
- **Gap**: No responsive breakpoints or layout variations
|
|
75
|
-
- **Workaround**: CSS media queries can override styles, but component doesn't provide responsive props
|
|
76
|
-
|
|
77
|
-
### 11. Custom Item Rendering
|
|
78
|
-
**Status**: ❌ NOT SUPPORTED
|
|
79
|
-
- **Use Case**: Customize rendering of individual items (e.g., add buttons, badges, custom layouts)
|
|
80
|
-
- **Current Behavior**: Fixed structure: icon container + checkbox with title + optional inductive text
|
|
81
|
-
- **Gap**: No `renderItem` prop or slot-based customization
|
|
82
|
-
- **Workaround**: Parent component can transform `paneList` data, but structure is fixed
|
|
83
|
-
|
|
84
|
-
### 12. Item Actions (Delete, Edit, etc.)
|
|
85
|
-
**Status**: ❌ NOT SUPPORTED
|
|
86
|
-
- **Use Case**: Add action buttons to each checkbox item (e.g., delete, edit, info)
|
|
87
|
-
- **Current Behavior**: No support for additional UI elements per item
|
|
88
|
-
- **Gap**: No `actions` prop or action slot
|
|
89
|
-
- **Workaround**: Not possible with current structure
|
|
90
|
-
|
|
91
|
-
### 13. Tooltips on Items
|
|
92
|
-
**Status**: ❌ NOT SUPPORTED
|
|
93
|
-
- **Use Case**: Show tooltips when hovering over checkbox items
|
|
94
|
-
- **Current Behavior**: No built-in tooltip support
|
|
95
|
-
- **Gap**: No `tooltip` prop on `PaneListItem`
|
|
96
|
-
- **Workaround**: Parent component can wrap items, but tooltip won't be part of component structure
|
|
97
|
-
|
|
98
|
-
### 14. Accessibility Enhancements
|
|
99
|
-
**Status**: ⚠️ PARTIAL SUPPORT
|
|
100
|
-
- **Use Case**: Enhanced ARIA attributes (e.g., `aria-label` for group, `aria-describedby` for descriptions)
|
|
101
|
-
- **Current Behavior**: Basic checkbox roles and labels via title
|
|
102
|
-
- **Gap**: Missing `aria-label` on Checkbox.Group, no `aria-describedby` for inductive text
|
|
103
|
-
- **Workaround**: Can be added via `...others` props, but not built-in
|
|
104
|
-
|
|
105
|
-
### 15. Loading Skeleton for Items
|
|
106
|
-
**Status**: ❌ NOT SUPPORTED
|
|
107
|
-
- **Use Case**: Show skeleton loaders while individual items are loading
|
|
108
|
-
- **Current Behavior**: Items render immediately or not at all
|
|
109
|
-
- **Gap**: No skeleton/placeholder support
|
|
110
|
-
- **Workaround**: Parent component can render skeleton UI separately
|
|
111
|
-
|
|
112
|
-
### 16. Item Grouping/Categorization
|
|
113
|
-
**Status**: ❌ NOT SUPPORTED
|
|
114
|
-
- **Use Case**: Group items into categories with headers (e.g., "Premium Features", "Basic Features")
|
|
115
|
-
- **Current Behavior**: Flat list of items
|
|
116
|
-
- **Gap**: No grouping or categorization support
|
|
117
|
-
- **Workaround**: Not possible with current structure
|
|
118
|
-
|
|
119
|
-
### 17. Drag and Drop Reordering
|
|
120
|
-
**Status**: ❌ NOT SUPPORTED
|
|
121
|
-
- **Use Case**: Allow users to reorder checkbox items via drag and drop
|
|
122
|
-
- **Current Behavior**: Items render in order of `paneList` array
|
|
123
|
-
- **Gap**: No drag and drop functionality
|
|
124
|
-
- **Workaround**: Parent component can implement drag and drop and reorder `paneList`
|
|
125
|
-
|
|
126
|
-
### 18. Checkbox State Persistence
|
|
127
|
-
**Status**: ⚠️ REQUIRES PARENT
|
|
128
|
-
- **Use Case**: Persist selected state across page reloads
|
|
129
|
-
- **Current Behavior**: State managed by parent component (controlled) or Ant Design (uncontrolled)
|
|
130
|
-
- **Gap**: No built-in persistence (localStorage, sessionStorage)
|
|
131
|
-
- **Workaround**: Parent component can implement persistence logic
|
|
132
|
-
|
|
133
|
-
### 19. Keyboard Shortcuts
|
|
134
|
-
**Status**: ⚠️ PARTIAL SUPPORT
|
|
135
|
-
- **Use Case**: Keyboard shortcuts (e.g., Ctrl+A to select all, Arrow keys to navigate)
|
|
136
|
-
- **Current Behavior**: Basic keyboard navigation (Tab, Space) via native checkbox behavior
|
|
137
|
-
- **Gap**: No custom keyboard shortcuts
|
|
138
|
-
- **Workaround**: Not possible without component modification
|
|
139
|
-
|
|
140
|
-
### 20. Item Count Display
|
|
141
|
-
**Status**: ❌ NOT SUPPORTED
|
|
142
|
-
- **Use Case**: Display "X of Y selected" counter
|
|
143
|
-
- **Current Behavior**: No built-in counter
|
|
144
|
-
- **Gap**: No `showCount` prop or count display
|
|
145
|
-
- **Workaround**: Parent component can calculate and display count separately
|
|
146
|
-
|
|
147
|
-
## Summary
|
|
148
|
-
|
|
149
|
-
**Total Use Cases Analyzed**: 20
|
|
150
|
-
- **Not Supported**: 16
|
|
151
|
-
- **Partially Supported**: 3
|
|
152
|
-
- **Requires Parent Implementation**: 1
|
|
153
|
-
|
|
154
|
-
## Recommendations
|
|
155
|
-
|
|
156
|
-
The component is well-suited for:
|
|
157
|
-
- ✅ Simple checkbox lists with icons and descriptions
|
|
158
|
-
- ✅ Controlled/uncontrolled selection state
|
|
159
|
-
- ✅ Basic accessibility needs
|
|
160
|
-
- ✅ Horizontal layout requirements
|
|
161
|
-
|
|
162
|
-
The component may need enhancement or wrapper components for:
|
|
163
|
-
- ❌ Complex validation requirements
|
|
164
|
-
- ❌ Large datasets (virtualization)
|
|
165
|
-
- ❌ Advanced interactions (select all, filtering)
|
|
166
|
-
- ❌ Custom item rendering
|
|
167
|
-
- ❌ Responsive layouts
|
|
168
|
-
|
|
169
|
-
## Notes
|
|
170
|
-
|
|
171
|
-
- This analysis is based on the component's current implementation as of the test creation date
|
|
172
|
-
- Some "gaps" may be intentional design decisions to keep the component simple and focused
|
|
173
|
-
- Workarounds are possible for most use cases, but may require additional code in parent components
|
|
174
|
-
- Future enhancements could address these gaps if they become common requirements
|
package/CapCustomList/README.md
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
# CapCustomList
|
|
2
|
-
|
|
3
|
-
A customizable list component that displays hierarchical category data with support for subcategories and loading states.
|
|
4
|
-
|
|
5
|
-
## Migration from cap-ui-library
|
|
6
|
-
|
|
7
|
-
### Summary of Changes
|
|
8
|
-
|
|
9
|
-
The CapCustomList component has been migrated from cap-ui-library to blaze-ui with the following updates:
|
|
10
|
-
|
|
11
|
-
- **TypeScript Migration**: Converted from JavaScript to TypeScript with proper type definitions
|
|
12
|
-
- **SCSS Modules**: Converted from styled-components to SCSS modules
|
|
13
|
-
- **Functional Component**: Already a functional component, maintained with React hooks
|
|
14
|
-
- **Code Quality**: Improved code formatting and consistency
|
|
15
|
-
|
|
16
|
-
### Props
|
|
17
|
-
|
|
18
|
-
| Prop | Type | Default | Description |
|
|
19
|
-
|------|------|---------|-------------|
|
|
20
|
-
| `title` | `string` | - | Main title displayed at the top of the list |
|
|
21
|
-
| `list` | `ListItem[]` | - | Array of list items containing category data (required) |
|
|
22
|
-
| `className` | `string` | - | Custom CSS class name |
|
|
23
|
-
| `loader` | `boolean` | - | Loading state indicator |
|
|
24
|
-
| `contentId` | `string` | - | Content identifier used for fetching list data |
|
|
25
|
-
| `getList` | `(contentId: string, type: string) => void` | - | Callback function to fetch list data (required) |
|
|
26
|
-
| `type` | `string` | - | Type identifier used for fetching list data |
|
|
27
|
-
|
|
28
|
-
### Types
|
|
29
|
-
|
|
30
|
-
```typescript
|
|
31
|
-
interface ListItem {
|
|
32
|
-
levelName: string;
|
|
33
|
-
subCategory: string[];
|
|
34
|
-
levelValueCount: number | string;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
interface CapCustomListProps {
|
|
38
|
-
title?: string;
|
|
39
|
-
list: ListItem[];
|
|
40
|
-
className?: string;
|
|
41
|
-
loader?: boolean;
|
|
42
|
-
contentId?: string;
|
|
43
|
-
getList: (contentId: string, type: string) => void;
|
|
44
|
-
type?: string;
|
|
45
|
-
}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Breaking Changes
|
|
49
|
-
|
|
50
|
-
**None** - The component maintains backward compatibility with cap-ui-library v8.x API.
|
|
51
|
-
|
|
52
|
-
### Deprecated Props
|
|
53
|
-
|
|
54
|
-
**None** - CapCustomList does not directly use any Ant Design components, and therefore has no deprecated Ant Design props.
|
|
55
|
-
|
|
56
|
-
#### Ant Design Component Usage
|
|
57
|
-
|
|
58
|
-
CapCustomList uses the following Cap components internally, which wrap Ant Design components:
|
|
59
|
-
|
|
60
|
-
- **CapSpin** - Wraps Ant Design `Spin` component
|
|
61
|
-
- CapCustomList passes: `spinning` prop (not deprecated)
|
|
62
|
-
- No deprecated Ant Design props are used
|
|
63
|
-
|
|
64
|
-
- **CapButton** - Wraps Ant Design `Button` component
|
|
65
|
-
- CapCustomList passes: `type="flat"` and `onClick` (not deprecated)
|
|
66
|
-
- No deprecated Ant Design props are used
|
|
67
|
-
|
|
68
|
-
- **CapHeader** - No direct Ant Design dependency
|
|
69
|
-
- **CapHeading** - No direct Ant Design dependency
|
|
70
|
-
- **CapIcon** - Uses `@ant-design-v5/icons` but no deprecated props
|
|
71
|
-
|
|
72
|
-
#### Verification Results
|
|
73
|
-
|
|
74
|
-
✅ **No deprecated Ant Design props detected**
|
|
75
|
-
|
|
76
|
-
The component was verified against the Ant Design v6 migration guide (`ANTD_V6_MIGRATION.md`) and the following deprecated APIs were confirmed as **NOT used**:
|
|
77
|
-
|
|
78
|
-
- `visible` → `open` (not applicable)
|
|
79
|
-
- `overlay` → `menu` (not applicable)
|
|
80
|
-
- `overlayClassName` → `classNames.root` (not applicable)
|
|
81
|
-
- `destroyTooltipOnHide` → `destroyOnHidden` (not applicable)
|
|
82
|
-
- `message` → `title` (not applicable)
|
|
83
|
-
- `TabPane` children → `items` prop (not applicable)
|
|
84
|
-
- `tabPosition` → `tabPlacement` (not applicable)
|
|
85
|
-
|
|
86
|
-
**Note**: Since CapCustomList does not directly consume Ant Design components, there are no Ant Design prop changes to document. All Ant Design components are accessed through Cap component wrappers, which handle Ant Design v6 compatibility internally.
|
|
87
|
-
|
|
88
|
-
### Usage Example
|
|
89
|
-
|
|
90
|
-
```tsx
|
|
91
|
-
import CapCustomList from '@capillarytech/blaze-ui/components/CapCustomList';
|
|
92
|
-
|
|
93
|
-
function MyComponent() {
|
|
94
|
-
const handleGetList = (contentId: string, type: string) => {
|
|
95
|
-
// Fetch list data
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
return (
|
|
99
|
-
<CapCustomList
|
|
100
|
-
title="Categories"
|
|
101
|
-
list={categoryList}
|
|
102
|
-
loader={isLoading}
|
|
103
|
-
contentId="123"
|
|
104
|
-
getList={handleGetList}
|
|
105
|
-
type="category"
|
|
106
|
-
/>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### Related Components
|
|
112
|
-
|
|
113
|
-
- CapButton - Used for category selection buttons
|
|
114
|
-
- CapHeader - Used for displaying category headers
|
|
115
|
-
- CapHeading - Used for titles and labels
|
|
116
|
-
- CapIcon - Used for navigation icons
|
|
117
|
-
- CapSpin - Used for loading state
|
package/CapCustomList/Status.md
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
# Migration Status: CapCustomList
|
|
2
|
-
|
|
3
|
-
**Last Updated**: 2026-02-06 01:45:51
|
|
4
|
-
|
|
5
|
-
## Migration Steps
|
|
6
|
-
|
|
7
|
-
- [x] **Step 0**: Setup branch and remote tracking
|
|
8
|
-
- [x] **Step 1**: Migration Prompt 1 (Main migration)
|
|
9
|
-
- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
|
|
10
|
-
- [x] **Step 2**: Migration Prompt 2 (Storybook support)
|
|
11
|
-
- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
|
|
12
|
-
- [x] **Step 3**: Migration Prompt 3 (Unit tests)
|
|
13
|
-
- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
|
|
14
|
-
- [x] **Step 5**: Linting (ESLint)
|
|
15
|
-
- [x] **Step 6**: Pre-build Validation
|
|
16
|
-
- [x] **Step 7**: Build blaze-ui
|
|
17
|
-
- [x] **Step 8**: Visual Testing
|
|
18
|
-
- [x] **Step 9**: CSS Analysis (if mismatches found)
|
|
19
|
-
- [x] **Step 9.5**: CSS Analysis Completed
|
|
20
|
-
- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
|
|
21
|
-
- [x] **Step 11**: Create Pull Request
|
|
22
|
-
|
|
23
|
-
## Deprecated Props Verification
|
|
24
|
-
|
|
25
|
-
✅ **COMPLETE** - Verified on 2026-02-01
|
|
26
|
-
|
|
27
|
-
### Summary
|
|
28
|
-
**No deprecated Ant Design props detected.** CapCustomList does not directly use any Ant Design components.
|
|
29
|
-
|
|
30
|
-
### Ant Design Components Used Indirectly
|
|
31
|
-
CapCustomList uses Cap components that internally wrap Ant Design components:
|
|
32
|
-
- **CapSpin** - Wraps Ant Design `Spin` component
|
|
33
|
-
- Props passed: `spinning` (not deprecated)
|
|
34
|
-
- **CapButton** - Wraps Ant Design `Button` component
|
|
35
|
-
- Props passed: `type="flat"`, `onClick` (not deprecated)
|
|
36
|
-
- **CapIcon** - Uses `@ant-design-v5/icons`
|
|
37
|
-
- No deprecated props used
|
|
38
|
-
|
|
39
|
-
### Deprecated APIs Verified as NOT Used
|
|
40
|
-
✅ `visible` → `open`
|
|
41
|
-
✅ `overlay` → `menu`
|
|
42
|
-
✅ `overlayClassName` → `classNames.root`
|
|
43
|
-
✅ `destroyTooltipOnHide` → `destroyOnHidden`
|
|
44
|
-
✅ `message` → `title`
|
|
45
|
-
✅ `TabPane` children → `items` prop
|
|
46
|
-
✅ `tabPosition` → `tabPlacement`
|
|
47
|
-
|
|
48
|
-
### Documentation
|
|
49
|
-
- ✅ README.md created with "Deprecated Props" section
|
|
50
|
-
- ✅ All Ant Design component usage documented
|
|
51
|
-
- ✅ Verification results documented
|
|
52
|
-
|
|
53
|
-
**Note**: Step 2.5 is REQUIRED and enforced.
|
|
54
|
-
- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
|
|
55
|
-
- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
|
|
56
|
-
- All deprecated Ant Design props and prop changes must be documented before proceeding.
|
|
57
|
-
|
|
58
|
-
## Visual Testing Results
|
|
59
|
-
|
|
60
|
-
**Last Test**: 2026-02-06 01:45:51
|
|
61
|
-
**Maximum Mismatch**: 0%
|
|
62
|
-
|
|
63
|
-
### Mismatched Variants:
|
|
64
|
-
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
## CSS Fixes Applied
|
|
68
|
-
|
|
69
|
-
**Date**: 2026-02-01 02:24:59
|
|
70
|
-
**Summary**: CSS fixes applied based on visual testing analysis.
|
|
71
|
-
|
|
72
|
-
_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCustomList/css-fix-analysis.md`_
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
## Notes
|
|
76
|
-
|
|
77
|
-
_No notes yet._
|