@capillarytech/blaze-ui 5.20.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 (189) hide show
  1. package/CapAskAira/CapAiMediaGeneration/saga.js +1446 -0
  2. package/CapAskAira/CapAiMediaGeneration/saga.js.map +1 -0
  3. package/CapCollapsibleLeftNavigation/saga.js +1441 -0
  4. package/CapCollapsibleLeftNavigation/saga.js.map +1 -0
  5. package/CapLanguageProvider/actions.js +125 -0
  6. package/CapLanguageProvider/actions.js.map +1 -0
  7. package/CapLanguageProvider/constants.js +37 -0
  8. package/CapLanguageProvider/constants.js.map +1 -0
  9. package/CapLanguageProvider/reducer.js +130 -0
  10. package/CapLanguageProvider/reducer.js.map +1 -0
  11. package/CapLanguageProvider/saga.js +1457 -0
  12. package/CapLanguageProvider/saga.js.map +1 -0
  13. package/CapLanguageProvider/selector.js +186 -0
  14. package/CapLanguageProvider/selector.js.map +1 -0
  15. package/CapSupportVideosWrapper/utils.js +34 -0
  16. package/CapSupportVideosWrapper/utils.js.map +1 -0
  17. package/package.json +1 -1
  18. package/CapActionBar/README.md +0 -11
  19. package/CapAdvancedIcon/README.md +0 -185
  20. package/CapAdvancedIcon/use-cases.md +0 -44
  21. package/CapAlert/README.md +0 -144
  22. package/CapAppNotEnabled/README.md +0 -84
  23. package/CapAskAira/README.md +0 -328
  24. package/CapBanner/README.md +0 -4
  25. package/CapBlock/README.md +0 -175
  26. package/CapBorderedBox/Status.md +0 -40
  27. package/CapCSVFileUploader/README.md +0 -124
  28. package/CapCSVFileUploader/Status.md +0 -47
  29. package/CapCard/README.md +0 -85
  30. package/CapCard/Status.md +0 -41
  31. package/CapCardBox/README.md +0 -169
  32. package/CapCardBox/Status.md +0 -52
  33. package/CapCarousel/README.md +0 -190
  34. package/CapCarousel/Status.md +0 -73
  35. package/CapCheckbox/README.md +0 -254
  36. package/CapCheckbox/Status.md +0 -41
  37. package/CapColorPicker/README.md +0 -112
  38. package/CapColorPicker/Status.md +0 -52
  39. package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
  40. package/CapColoredTag/README.md +0 -167
  41. package/CapColoredTag/Status.md +0 -49
  42. package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
  43. package/CapConditionPreview/README.md +0 -40
  44. package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
  45. package/CapCustomCard/README.md +0 -182
  46. package/CapCustomCard/Status.md +0 -40
  47. package/CapCustomCarousel/Status.md +0 -69
  48. package/CapCustomCheckboxList/README.md +0 -178
  49. package/CapCustomCheckboxList/Status.md +0 -52
  50. package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
  51. package/CapCustomList/README.md +0 -117
  52. package/CapCustomList/Status.md +0 -77
  53. package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
  54. package/CapCustomSelect/README.md +0 -38
  55. package/CapDatePicker/README.md +0 -139
  56. package/CapDateRangePicker/README.md +0 -159
  57. package/CapDateTimePicker/README.md +0 -136
  58. package/CapDateTimeRangePicker/README.md +0 -243
  59. package/CapDivider/README.md +0 -122
  60. package/CapDrawer/README.md +0 -207
  61. package/CapDrawer/Status.md +0 -52
  62. package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
  63. package/CapDropdown/README.md +0 -515
  64. package/CapDropdown/Status.md +0 -45
  65. package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
  66. package/CapError/README.md +0 -88
  67. package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
  68. package/CapErrorBoundary/README.md +0 -150
  69. package/CapErrorStateIllustration/README.md +0 -222
  70. package/CapErrorStateIllustration/USE_CASES.md +0 -33
  71. package/CapExpressionEditor/README.md +0 -32
  72. package/CapForm/README.md +0 -132
  73. package/CapForm/Status.md +0 -40
  74. package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
  75. package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
  76. package/CapFormItem/README.md +0 -320
  77. package/CapFormItem/Status.md +0 -73
  78. package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
  79. package/CapGraph/README.md +0 -69
  80. package/CapGraph/USE_CASES.md +0 -66
  81. package/CapHamburgerMenu/README.md +0 -234
  82. package/CapHamburgerMenu/USE_CASES.md +0 -48
  83. package/CapHeader/Status.md +0 -41
  84. package/CapHeading/README.md +0 -220
  85. package/CapHeading/Status.md +0 -41
  86. package/CapIcon/README.md +0 -207
  87. package/CapIllustration/Status.md +0 -41
  88. package/CapImage/README.md +0 -50
  89. package/CapImportMFEComponent/README.md +0 -121
  90. package/CapInfoNote/Status.md +0 -40
  91. package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
  92. package/CapInput/README.md +0 -196
  93. package/CapInput/Status.md +0 -123
  94. package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
  95. package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
  96. package/CapLanguageProvider/README.md +0 -206
  97. package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
  98. package/CapLevelGraphRenderer/README.md +0 -123
  99. package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
  100. package/CapLink/README.md +0 -203
  101. package/CapLink/Status.md +0 -32
  102. package/CapLink/tests/CapLink.missingUseCases.md +0 -95
  103. package/CapList/README.md +0 -129
  104. package/CapList/Status.md +0 -69
  105. package/CapListLayout/README.md +0 -7
  106. package/CapLogin/README.md +0 -7
  107. package/CapMenu/README.md +0 -86
  108. package/CapModal/README.md +0 -357
  109. package/CapModal/Status.md +0 -52
  110. package/CapModal/tests/USE_CASES_GAPS.md +0 -207
  111. package/CapMultiSelect/README.md +0 -170
  112. package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
  113. package/CapMultiSelectDatePicker/README.md +0 -11
  114. package/CapNavigation/README.md +0 -72
  115. package/CapNotification/README.md +0 -228
  116. package/CapNotificationDropdown/README.md +0 -5
  117. package/CapPopover/README.md +0 -234
  118. package/CapProgress/Status.md +0 -40
  119. package/CapRadio/Status.md +0 -54
  120. package/CapRadioButton/README.md +0 -152
  121. package/CapRadioButton/Status.md +0 -70
  122. package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
  123. package/CapRadioCard/README.md +0 -161
  124. package/CapRadioCard/Status.md +0 -78
  125. package/CapRadioGroup/README.md +0 -141
  126. package/CapRadioGroup/Status.md +0 -59
  127. package/CapReorderComponent/README.md +0 -179
  128. package/CapReorderComponent/Status.md +0 -41
  129. package/CapRoadMap/README.md +0 -126
  130. package/CapRoadMap/Status.md +0 -53
  131. package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
  132. package/CapRow/README.md +0 -424
  133. package/CapSKUUploader/README.md +0 -189
  134. package/CapSKUUploader/Status.md +0 -66
  135. package/CapSecondaryTopBar/README.md +0 -7
  136. package/CapSelect/README.md +0 -243
  137. package/CapSelectFilter/README.md +0 -121
  138. package/CapShape/README.md +0 -96
  139. package/CapShape/Status.md +0 -36
  140. package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
  141. package/CapSideBar/README.md +0 -298
  142. package/CapSideBar/Status.md +0 -5
  143. package/CapSlideBox/README.md +0 -68
  144. package/CapSlider/README.md +0 -423
  145. package/CapSlider/Status.md +0 -48
  146. package/CapSlider/tests/TEST_COVERAGE.md +0 -118
  147. package/CapSnackBar/README.md +0 -222
  148. package/CapSnackBar/Status.md +0 -41
  149. package/CapSomethingWentWrong/README.md +0 -97
  150. package/CapSplit/README.md +0 -19
  151. package/CapStatisticCard/README.md +0 -138
  152. package/CapStatus/README.md +0 -148
  153. package/CapStatus/Status.md +0 -40
  154. package/CapSteps/Status.md +0 -40
  155. package/CapStepsAccordian/README.md +0 -305
  156. package/CapStepsAccordian/Status.md +0 -48
  157. package/CapSupportVideosWrapper/README.md +0 -14
  158. package/CapSwitch/README.md +0 -351
  159. package/CapTab/README.md +0 -406
  160. package/CapTab/Status.md +0 -104
  161. package/CapTab/tests/USE_CASE_GAPS.md +0 -143
  162. package/CapTabV3/ANALYSIS.md +0 -60
  163. package/CapTabV3/README.md +0 -156
  164. package/CapTabV3/Status.md +0 -52
  165. package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
  166. package/CapTable/README.md +0 -160
  167. package/CapTable/Status.md +0 -41
  168. package/CapTag/README.md +0 -16
  169. package/CapTagDropdown/README.md +0 -171
  170. package/CapTagDropdown/Status.md +0 -55
  171. package/CapTimePicker/README.md +0 -170
  172. package/CapTooltip/README.md +0 -336
  173. package/CapTooltipWithInfo/Status.md +0 -75
  174. package/CapTopBar/README.md +0 -146
  175. package/CapTree/README.md +0 -124
  176. package/CapTree/Status.md +0 -48
  177. package/CapTree/tests/STATUS.md +0 -154
  178. package/CapTreeSelect/README.md +0 -217
  179. package/CapTreeSelect/Status.md +0 -52
  180. package/CapTruncateList/README.md +0 -13
  181. package/CapUnifiedSelect/README.md +0 -40
  182. package/CapUploader/README.md +0 -313
  183. package/CapUploader/Status.md +0 -76
  184. package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
  185. package/CapUserProfile/README.md +0 -105
  186. package/CapUserProfile/Status.md +0 -95
  187. package/CapVirtualList/README.md +0 -162
  188. package/CapVirtualList/Status.md +0 -71
  189. package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
@@ -1,234 +0,0 @@
1
- # CapPopover
2
-
3
- Extended Ant Design Popover component with Capillary design system integration.
4
-
5
- ## Migration from Antd v3 → v6
6
-
7
- This component has been migrated to support Ant Design v6 while maintaining backward compatibility with v3/v4/v5 APIs.
8
-
9
- ## Props
10
-
11
- ### Standard Props
12
-
13
- All standard Ant Design Popover props are supported. Refer to [Ant Design Popover documentation](https://ant.design/components/popover) for complete API reference.
14
-
15
- | Prop | Type | Default | Description |
16
- |------|------|---------|-------------|
17
- | `content` | `ReactNode` | - | Content of the popover |
18
- | `title` | `ReactNode` | - | Title of the popover |
19
- | `placement` | `Placement` | `'top'` | Placement of popover |
20
- | `trigger` | `'hover' \| 'focus' \| 'click'` | `'hover'` | Trigger mode |
21
- | `open` | `boolean` | - | Controlled open state |
22
- | `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) |
23
- | `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
24
- | `destroyOnHidden` | `boolean` | `false` | Whether to destroy popover when hidden |
25
- | `classNames` | `{ root?: string; inner?: string }` | - | Custom class names for popover parts |
26
- | `styles` | `{ root?: CSSProperties; body?: CSSProperties }` | - | Custom styles for popover parts |
27
- | `className` | `string` | - | Additional CSS class for wrapper |
28
- | `getPopupContainer` | `(triggerNode: HTMLElement) => HTMLElement` | - | Container for popover rendering |
29
- | `align` | `AlignConfig` | - | Popover alignment configuration |
30
-
31
- ### Deprecated Props (Still Supported)
32
-
33
- These props are deprecated but still work for backward compatibility. They will show console warnings in development mode:
34
-
35
- | Deprecated Prop | Replacement | Notes |
36
- |----------------|-------------|-------|
37
- | `visible` | `open` | Use `open` for controlled state |
38
- | `onVisibleChange` | `onOpenChange` | Use `onOpenChange` for controlled state callbacks |
39
- | `destroyTooltipOnHide` | `destroyOnHidden` | Use `destroyOnHidden` for destroy behavior |
40
- | `overlayClassName` | `classNames.root` | Use `classNames.root` for overlay styling |
41
- | `overlayStyle` | `styles.root` | Use `styles.root` for overlay inline styles |
42
- | `overlayInnerStyle` | `styles.body` | Use `styles.body` for inner content inline styles |
43
-
44
- **Note**: Deprecated props will be removed in the next major version. Please migrate to the new prop names.
45
-
46
- ## API Changes
47
-
48
- ### Controlled vs Uncontrolled Mode
49
-
50
- The component now supports both controlled and uncontrolled modes:
51
-
52
- **Controlled Mode:**
53
- ```tsx
54
- const [open, setOpen] = useState(false);
55
-
56
- <CapPopover
57
- content="Controlled popover"
58
- title="Title"
59
- open={open}
60
- onOpenChange={setOpen}
61
- >
62
- <Button>Click me</Button>
63
- </CapPopover>
64
- ```
65
-
66
- **Uncontrolled Mode:**
67
- ```tsx
68
- <CapPopover
69
- content="Uncontrolled popover"
70
- title="Title"
71
- defaultOpen={false}
72
- >
73
- <Button>Click me</Button>
74
- </CapPopover>
75
- ```
76
-
77
- ### Styling API Changes
78
-
79
- **Old API (deprecated):**
80
- ```tsx
81
- <CapPopover
82
- overlayClassName="custom-class"
83
- overlayStyle={{ backgroundColor: 'red' }}
84
- overlayInnerStyle={{ padding: '20px' }}
85
- >
86
- <Button>Button</Button>
87
- </CapPopover>
88
- ```
89
-
90
- **New API (recommended):**
91
- ```tsx
92
- <CapPopover
93
- classNames={{ root: 'custom-class', inner: 'inner-class' }}
94
- styles={{ root: { backgroundColor: 'red' }, body: { padding: '20px' } }}
95
- >
96
- <Button>Button</Button>
97
- </CapPopover>
98
- ```
99
-
100
- ## Behavioral Changes
101
-
102
- ### No Breaking Changes
103
-
104
- The component maintains **100% backward compatibility** with `cap-ui-library` v8.x. All existing code will continue to work without modifications.
105
-
106
- ### Enhanced Features
107
-
108
- - **Controlled State**: Full support for controlled popover state management
109
- - **Modern Styling API**: Support for semantic style props (`classNames`, `styles`)
110
- - **Better TypeScript Support**: Proper type definitions with deprecation markers
111
-
112
- ## Style Overrides
113
-
114
- ### Max-Width Constraint
115
-
116
- The component applies a `max-width: 324px` constraint to the popover overlay. This override uses `:global` because Ant Design v6 does not provide a tokenizable `maxWidth` option for Popover components.
117
-
118
- **Implementation Note:**
119
- ```scss
120
- // OVERRIDE: Antd Popover max-width cannot be tokenized
121
- // Token limitation: components.Popover does not support maxWidth token in Antd v6
122
- // Using :global override as last resort for max-width constraint
123
- :global {
124
- .ant-popover.cap-popover-v2 {
125
- max-width: 324px;
126
- }
127
- }
128
- ```
129
-
130
- This override is necessary because:
131
- - Ant Design v6 Popover component tokens do not include `maxWidth`
132
- - The design system requires a consistent max-width constraint
133
- - CSS Modules with `:global` is the only viable approach
134
-
135
- ## Examples
136
-
137
- ### Basic Usage
138
-
139
- ```tsx
140
- import { CapPopover, CapButton } from '@capillarytech/blaze-ui';
141
-
142
- <CapPopover content="Popover content" title="Popover Title">
143
- <CapButton>Hover me</CapButton>
144
- </CapPopover>
145
- ```
146
-
147
- ### Controlled Popover
148
-
149
- ```tsx
150
- import { useState } from 'react';
151
- import { CapPopover, CapButton } from '@capillarytech/blaze-ui';
152
-
153
- const MyComponent = () => {
154
- const [open, setOpen] = useState(false);
155
-
156
- return (
157
- <CapPopover
158
- content="This is controlled"
159
- title="Controlled"
160
- open={open}
161
- onOpenChange={setOpen}
162
- >
163
- <CapButton onClick={() => setOpen(!open)}>
164
- Toggle Popover
165
- </CapButton>
166
- </CapPopover>
167
- );
168
- };
169
- ```
170
-
171
- ### Custom Styling
172
-
173
- ```tsx
174
- <CapPopover
175
- content="Custom styled popover"
176
- title="Custom"
177
- classNames={{ root: 'my-custom-popover', inner: 'my-inner' }}
178
- styles={{
179
- root: { backgroundColor: '#f0f0f0' },
180
- body: { padding: '24px' }
181
- }}
182
- >
183
- <CapButton>Styled Popover</CapButton>
184
- </CapPopover>
185
- ```
186
-
187
- ### Migration Example
188
-
189
- **Before (v3/v4/v5):**
190
- ```tsx
191
- <CapPopover
192
- visible={isOpen}
193
- onVisibleChange={setIsOpen}
194
- overlayClassName="custom-class"
195
- overlayStyle={{ width: '300px' }}
196
- >
197
- <Button>Old API</Button>
198
- </CapPopover>
199
- ```
200
-
201
- **After (v6):**
202
- ```tsx
203
- <CapPopover
204
- open={isOpen}
205
- onOpenChange={setIsOpen}
206
- classNames={{ root: 'custom-class' }}
207
- styles={{ root: { width: '300px' } }}
208
- >
209
- <Button>New API</Button>
210
- </CapPopover>
211
- ```
212
-
213
- ## TypeScript
214
-
215
- The component is fully typed with TypeScript. Import types as needed:
216
-
217
- ```tsx
218
- import type { CapPopoverProps } from '@capillarytech/blaze-ui';
219
-
220
- const MyPopover: React.FC<CapPopoverProps> = (props) => {
221
- // ...
222
- };
223
- ```
224
-
225
- ## Related Components
226
-
227
- - `CapTooltip` - Similar popup component for tooltips
228
- - `CapDropdown` - Dropdown menu component
229
- - `CapModal` - Modal dialog component
230
-
231
- ## References
232
-
233
- - [Ant Design Popover Documentation](https://ant.design/components/popover)
234
- - [Ant Design Migration Guide](https://ant.design/docs/react/migration-v6)
@@ -1,40 +0,0 @@
1
- # Migration Status: CapProgress
2
-
3
- **Last Updated**: 2026-01-31 18:13:29
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 2**: Migration Prompt 2 (Storybook support)
10
- - [x] **Step 3**: Migration Prompt 3 (Unit tests)
11
- - [x] **Step 4**: Migration Prompt 4 (Visual test cases)
12
- - [x] **Step 5**: Linting (ESLint)
13
- - [x] **Step 6**: Pre-build Validation
14
- - [] **Step 7**: Build blaze-ui
15
- - [] **Step 8**: Visual Testing
16
- - [] **Step 9**: CSS Analysis (if mismatches found)
17
- - [] **Step 9.5**: CSS Analysis Completed
18
- - [] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
19
- - [] **Step 11**: Create Pull Request
20
-
21
- ## Visual Testing Results
22
-
23
- **Last Test**: 2026-01-31 18:13:29
24
- **Maximum Mismatch**: 0%
25
-
26
- ### Mismatched Variants:
27
- -
28
-
29
-
30
- ## CSS Fixes Applied
31
-
32
- **Date**: 2026-01-28 09:16:37
33
- **Summary**: CSS fixes applied based on visual testing analysis.
34
-
35
- _See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapProgress/css-fix-analysis.md`_
36
-
37
-
38
- ## Notes
39
-
40
- _No notes yet._
@@ -1,54 +0,0 @@
1
- # Migration Status: CapRadio
2
-
3
- **Last Updated**: 2026-01-19 04:01:56
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 2**: Migration Prompt 2 (Storybook support)
10
- - [x] **Step 3**: Migration Prompt 3 (Unit tests)
11
- - [x] **Step 4**: Linting (ESLint)
12
- - [x] **Step 5**: Pre-build Validation
13
- - [] **Step 6**: Build blaze-ui
14
- - [] **Step 7**: Visual Testing
15
- - [] **Step 8**: CSS Analysis (if mismatches found)
16
- - [] **Step 8.5**: CSS Analysis Completed
17
- - [] **Step 9**: Git Commit & Push to branch (pre-commit hook will run tests)
18
- - [] **Step 10**: Create Pull Request
19
-
20
- ## Visual Testing Results
21
-
22
- **Last Test**: 2026-01-19 04:01:14
23
- **Maximum Mismatch**: 3.44%
24
-
25
- ### Mismatched Variants:
26
- - unchecked:1.92%
27
- - checked:1.77%
28
- - disabled:1.67%
29
- - disabled-checked:1.73%
30
- - default:2.92%
31
- - with-value:3.30%
32
- - disabled:2.70%
33
- - button-style:2.95%
34
- - size-small:2.78%
35
- - size-large:2.73%
36
- - default:3.44%
37
- - checked:3.24%
38
- - disabled:3.21%
39
- - default:2.33%
40
- - checked:2.36%
41
-
42
-
43
- ## CSS Fixes Applied
44
-
45
- **Date**: 2026-01-19 04:01:14
46
- **Summary**: CSS fixes applied based on visual testing analysis.
47
-
48
- _See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapRadio/css-fix-analysis.md`_
49
-
50
-
51
- ## Notes
52
-
53
- _No notes yet._
54
-
@@ -1,152 +0,0 @@
1
- # CapRadioButton
2
-
3
- A radio button component built on top of Ant Design's Radio.Button component with Capillary-specific styling.
4
-
5
- ## Migration from cap-ui-library to blaze-ui
6
-
7
- ### Summary of Changes
8
-
9
- This component has been migrated from `cap-ui-library` to `blaze-ui` with the following improvements:
10
-
11
- 1. **TypeScript Conversion**
12
- - Converted from JavaScript to TypeScript
13
- - Added TypeScript interfaces in `types.ts`
14
- - Full type safety with proper prop types
15
-
16
- 2. **Styling**
17
- - Converted from styled-components to SCSS modules
18
- - Maintains backward design compatibility with existing class names
19
-
20
- 3. **Ant Design v6 Migration**
21
- - Updated to use Ant Design v6 APIs (`antd-v5` package alias)
22
- - All Ant Design Radio.Button props are supported through prop spreading
23
-
24
- ### Ant Design Components Used
25
-
26
- This component uses the following Ant Design components:
27
- - **Radio.Button** (`antd-v5`) - Base radio button component
28
-
29
- **Verification Status:** ✅ No deprecated props found
30
- - The `Radio.Button` component is not listed in the Ant Design v6 migration guide's deprecated API fixes table
31
- - All `Radio.Button` component props remain valid and unchanged between v3 and v6
32
- - No prop mapping or backward compatibility code required for Ant Design props
33
-
34
- ### Breaking Changes
35
-
36
- **No breaking changes** - The component maintains full backward compatibility with the previous version.
37
-
38
- **Ant Design Radio.Button Component:** The Ant Design `Radio.Button` component API remains fully compatible between v3 and v6, so no API changes were required. All Ant Design `Radio.Button` props continue to work as before.
39
-
40
- ### Deprecated Props
41
-
42
- **No deprecated Ant Design props** - The Ant Design `Radio.Button` component API remains fully compatible between v3 and v6, with no deprecated props.
43
-
44
- **Verification:**
45
- - ✅ Checked against Ant Design v6 migration guide - `Radio.Button` component is not listed in deprecated API fixes
46
- - ✅ Checked MIGRATION_CHANGELOG_TEMPLATE.md - No Radio.Button deprecated props documented
47
- - ✅ All Ant Design `Radio.Button` props (`value`, `disabled`, `checked`, `onChange`, etc.) remain valid and unchanged
48
- - ✅ No backward compatibility mapping required for Ant Design props
49
-
50
- **Note:** This component uses the Ant Design `Radio.Button` component internally. All standard Ant Design `Radio.Button` props are passed through via `{...rest}` and remain fully supported.
51
-
52
- ### Props
53
-
54
- | Prop Name | Type | Default | Description |
55
- |-----------|------|---------|-------------|
56
- | `className` | `string` | `undefined` | Additional CSS class name for the radio button |
57
- | `children` | `React.ReactNode` | `undefined` | Label text/content for the radio button |
58
- | `value` | `any` | `undefined` | The value of the radio button (used in Radio.Group) |
59
- | `disabled` | `boolean` | `undefined` | Whether the radio button is disabled |
60
- | `checked` | `boolean` | `undefined` | Whether the radio button is checked (controlled) |
61
- | `defaultChecked` | `boolean` | `undefined` | Whether the radio button is checked by default (uncontrolled) |
62
- | `onChange` | `(e: RadioChangeEvent) => void` | `undefined` | Callback when radio button state changes |
63
- | `...rest` | `RadioButtonProps` | - | All other Ant Design Radio.Button props are supported |
64
-
65
- ### TypeScript Interfaces
66
-
67
- ```typescript
68
- import type { CapRadioButtonProps } from '@capillarytech/blaze-ui';
69
-
70
- interface CapRadioButtonProps extends React.ComponentProps<typeof Radio.Button> {
71
- className?: string;
72
- children?: React.ReactNode;
73
- }
74
- ```
75
-
76
- ### Usage Examples
77
-
78
- #### Basic Usage
79
-
80
- ```tsx
81
- import { CapRadioButton } from '@capillarytech/blaze-ui';
82
-
83
- <CapRadioButton value="option1">Option 1</CapRadioButton>
84
- ```
85
-
86
- #### In Radio Group
87
-
88
- ```tsx
89
- import { Radio } from 'antd-v5';
90
- import { CapRadioButton } from '@capillarytech/blaze-ui';
91
-
92
- <Radio.Group value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
93
- <CapRadioButton value="option1">Option 1</CapRadioButton>
94
- <CapRadioButton value="option2">Option 2</CapRadioButton>
95
- <CapRadioButton value="option3">Option 3</CapRadioButton>
96
- </Radio.Group>
97
- ```
98
-
99
- #### Disabled State
100
-
101
- ```tsx
102
- <CapRadioButton value="option1" disabled>
103
- Disabled Option
104
- </CapRadioButton>
105
- ```
106
-
107
- #### Controlled State
108
-
109
- ```tsx
110
- const [checked, setChecked] = useState(false);
111
-
112
- <CapRadioButton
113
- checked={checked}
114
- onChange={(e) => setChecked(e.target.checked)}
115
- >
116
- Controlled Radio Button
117
- </CapRadioButton>
118
- ```
119
-
120
- ### Migration Steps
121
-
122
- #### 1. Update Import
123
-
124
- ```tsx
125
- // Before (cap-ui-library)
126
- import CapRadioButton from '@capillarytech/cap-ui-library/CapRadioButton';
127
-
128
- // After (blaze-ui)
129
- import { CapRadioButton } from '@capillarytech/blaze-ui';
130
- // or
131
- import CapRadioButton from '@capillarytech/blaze-ui/CapRadioButton';
132
- ```
133
-
134
- #### 2. Usage (No Changes Required)
135
-
136
- ```tsx
137
- // Basic usage - works exactly the same
138
- <CapRadioButton value="option1">Option 1</CapRadioButton>
139
-
140
- // In Radio Group - works exactly the same
141
- <Radio.Group>
142
- <CapRadioButton value="option1">Option 1</CapRadioButton>
143
- <CapRadioButton value="option2">Option 2</CapRadioButton>
144
- </Radio.Group>
145
- ```
146
-
147
- ### Notes
148
-
149
- - The component wraps Ant Design's `Radio.Button` component and maintains the same API
150
- - All Ant Design `Radio.Button` props are supported through prop spreading
151
- - The component maintains backward compatibility with existing designs and class names
152
- - No deprecated props to migrate - all Ant Design props remain valid in v6
@@ -1,70 +0,0 @@
1
- # Migration Status: CapRadioButton
2
-
3
- **Last Updated**: 2026-02-01 20:04:14
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
- **Status:** ✅ **Complete**
26
-
27
- **Result:** No deprecated Ant Design props found for Radio.Button component.
28
-
29
- **Verification Details:**
30
- - ✅ Checked Ant Design v6 migration guide (ANTD_V6_MIGRATION.md) - Radio.Button is NOT listed in deprecated API fixes table
31
- - ✅ Checked MIGRATION_CHANGELOG_TEMPLATE.md - No Radio.Button deprecated props documented
32
- - ✅ Compared original component (cap-ui-library) vs migrated component (blaze-ui) - No prop changes detected
33
- - ✅ Verified Radio.Button API remains stable between Ant Design v3 and v6
34
- - ✅ All Ant Design Radio.Button props (`value`, `disabled`, `checked`, `onChange`, etc.) remain valid and unchanged
35
-
36
- **Documentation:**
37
- - ✅ README.md created with "Deprecated Props" section documenting no deprecated props
38
- - ✅ README.md includes verification status and migration examples
39
- - ✅ Documentation follows format from MIGRATION_CHANGELOG_TEMPLATE.md and similar components (CapCheckbox, CapColoredTag)
40
-
41
- **Conclusion:** The Ant Design `Radio.Button` component does not have any deprecated props in v6. No backward compatibility mapping or deprecation warnings are required.
42
-
43
- **Note**: Step 2.5 is REQUIRED and enforced.
44
- - Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
45
- - Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
46
- - Skip: If original component doesn't exist in cap-ui-library
47
- - All deprecated Ant Design props and prop changes must be documented before proceeding.
48
-
49
- ## Visual Testing Results
50
-
51
- **Last Test**: 2026-02-01 20:01:25
52
- **Maximum Mismatch**: 3.62%
53
-
54
- ### Mismatched Variants:
55
- - long-content:2.08%
56
- - auto-focus:3.62%
57
-
58
-
59
- ## CSS Fixes Applied
60
-
61
- **Date**: 2026-02-01 20:02:17
62
- **Summary**: CSS fixes applied based on visual testing analysis.
63
-
64
- _See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapRadioButton/css-fix-analysis.md`_
65
-
66
-
67
- ## Notes
68
-
69
- _No notes yet._
70
-
@@ -1,120 +0,0 @@
1
- # CapRadioButton Use Cases Analysis
2
-
3
- ## Component Overview
4
- CapRadioButton is a wrapper component around Ant Design's Radio.Button. It provides a consistent class prefix (`cap-radio-button-v2`) while passing through all Ant Design Radio.Button props. It's used within Radio.Group for button-style radio options.
5
-
6
- ## Phase 0: Use Cases from Google Sheets
7
-
8
- **Note**: Unable to access Google Sheets use cases (Spreadsheet ID: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`, Tab: `CapRadioButton`). Analysis based on component API, Storybook stories, and Ant Design Radio.Button documentation.
9
-
10
- ## Phase 1: Use Cases NOT Fulfilled by Component
11
-
12
- ### 1. **Standalone Usage Without Radio.Group**
13
- - **Status**: ⚠️ Limited Support
14
- - **Current Behavior**: Component works standalone but typically requires Radio.Group for proper state management
15
- - **Potential Use Cases**:
16
- - Single toggle button without group context
17
- - Independent button state
18
- - **Workaround**: Use `checked` prop for controlled standalone usage
19
-
20
- ### 2. **Custom Styling Variants**
21
- - **Status**: ❌ Not Supported
22
- - **Current Behavior**: Only supports className prop, no built-in variants (primary, secondary, etc.)
23
- - **Potential Use Cases**:
24
- - Predefined button styles
25
- - Theme-aware variants
26
- - Size variants (small, medium, large)
27
- - **Workaround**: Use className prop with custom CSS classes
28
-
29
- ### 3. **Icon Support**
30
- - **Status**: ❌ Not Supported
31
- - **Current Behavior**: No built-in icon prop
32
- - **Potential Use Cases**:
33
- - Radio buttons with icons
34
- - Icon-only radio buttons
35
- - **Workaround**: Include icons in children prop
36
-
37
- ### 4. **Loading State**
38
- - **Status**: ❌ Not Supported
39
- - **Current Behavior**: No loading prop or spinner
40
- - **Potential Use Cases**:
41
- - Async operations during selection
42
- - Disabled state during processing
43
- - **Workaround**: Use disabled prop and show loading indicator separately
44
-
45
- ### 5. **Tooltip Support**
46
- - **Status**: ❌ Not Supported
47
- - **Current Behavior**: No built-in tooltip prop
48
- - **Potential Use Cases**:
49
- - Help text on hover
50
- - Disabled state explanations
51
- - **Workaround**: Wrap component in CapTooltip
52
-
53
- ### 6. **Badge/Notification Count**
54
- - **Status**: ❌ Not Supported
55
- - **Current Behavior**: No badge or count indicator
56
- - **Potential Use Cases**:
57
- - Show count/notification on option
58
- - Badge indicators
59
- - **Workaround**: Include badge in children prop
60
-
61
- ### 7. **Custom Render Props**
62
- - **Status**: ❌ Not Supported
63
- - **Current Behavior**: Only accepts children as ReactNode
64
- - **Potential Use Cases**:
65
- - Dynamic content based on state
66
- - Conditional rendering based on props
67
- - **Workaround**: Use conditional rendering in children
68
-
69
- ### 8. **Size Variants**
70
- - **Status**: ⚠️ Limited Support
71
- - **Current Behavior**: Relies on Ant Design Radio.Button size, no Cap-specific sizes
72
- - **Potential Use Cases**:
73
- - Consistent sizing across Cap UI components
74
- - Custom size presets
75
- - **Workaround**: Use className with custom CSS or Ant Design size prop
76
-
77
- ### 9. **Accessibility Enhancements**
78
- - **Status**: ⚠️ Partial Support
79
- - **Current Behavior**: Inherits Ant Design accessibility, but no Cap-specific enhancements
80
- - **Potential Use Cases**:
81
- - Default aria-label based on children
82
- - Enhanced keyboard navigation
83
- - Screen reader optimizations
84
- - **Workaround**: Manually add ARIA attributes via props
85
-
86
- ### 10. **Validation States**
87
- - **Status**: ❌ Not Supported
88
- - **Current Behavior**: No validation state indicators (error, warning, success)
89
- - **Potential Use Cases**:
90
- - Form validation feedback
91
- - Error states
92
- - Success indicators
93
- - **Workaround**: Use className with validation classes or wrap in CapFormItem
94
-
95
- ## Recommendations
96
-
97
- ### High Priority (if required)
98
- 1. **Size Variants**: Add `size` prop with `small | medium | large` options matching Cap UI standards
99
- 2. **Icon Support**: Add `icon` prop for consistent icon handling
100
- 3. **Validation States**: Add `status` prop for error/warning/success states
101
-
102
- ### Medium Priority (if required)
103
- 4. **Custom Variants**: Add `variant` prop for predefined styles
104
- 5. **Tooltip Support**: Add `tooltip` prop for built-in help text
105
- 6. **Loading State**: Add `loading` prop with spinner
106
-
107
- ### Low Priority (nice to have)
108
- 7. **Badge Support**: Add `badge` prop for count indicators
109
- 8. **Render Props**: Support function as children for dynamic content
110
- 9. **Enhanced Accessibility**: Default ARIA attributes based on context
111
-
112
- ## Current Component Strengths
113
- ✅ Simple, focused API
114
- ✅ Full Ant Design Radio.Button prop support
115
- ✅ Consistent class prefix for styling
116
- ✅ Works seamlessly with Radio.Group
117
- ✅ Supports controlled and uncontrolled modes
118
- ✅ Keyboard navigation support (inherited from Ant Design)
119
- ✅ Ref forwarding support (inherited from Ant Design)
120
- ✅ Flexible styling via className prop