diff --git a/agent_docs/click-ui-migration-notes.md b/agent_docs/click-ui-migration-notes.md new file mode 100644 index 0000000000..50b73e16b9 --- /dev/null +++ b/agent_docs/click-ui-migration-notes.md @@ -0,0 +1,257 @@ +# Click UI Migration Notes + +This document tracks issues and limitations encountered when replacing Mantine UI components with Click UI (`@clickhouse/click-ui`) components. + +## Import Path + +Import directly from `@clickhouse/click-ui`: + +```typescript +import { Button, IconButton, Popover, TextAreaField } from '@clickhouse/click-ui'; +// Note: Select is NOT migrated - use Mantine Select +``` + +--- + +## Known Issues & Limitations + +### IconButton + + +#### `icon` prop only accepts string IconName + +**Issue**: The `icon` prop expects a string icon name (e.g., `"play"`, `"cross"`), not a React node. + +**Workaround**: Use built-in icon names or cast React components with `as any`. + +```typescript +// ✅ Works + + +// ⚠️ Workaround (type unsafe) +) as any} /> + +// ❌ Ideal API (not supported) +} /> +``` + +**Affected files**: `DBSearchPage.tsx` (SearchSubmitButton) + +--- + + +#### No HTML `type="submit"` support + +**Issue**: The `type` prop is used for visual styling (`"primary" | "secondary" | "ghost" | "danger" | "info"`), which conflicts with HTML's `type` attribute for form submission. + +**Workaround**: The form must handle submission via its `onSubmit` handler instead of relying on a submit button. + +```typescript +// ❌ Not supported + + +// ⚠️ Spread workaround (overrides visual type) + + +// ✅ Handle in form's onSubmit instead +
+ {/* No type="submit" */} + +``` + +**Affected files**: `DBSearchPage.tsx` (SearchSubmitButton) + +--- + + +#### No dynamic color support + +**Issue**: IconButton doesn't support conditional/dynamic colors based on state. + +**Original Mantine behavior**: +```typescript + +``` + +**Click UI limitation**: No equivalent API. The `type` prop provides fixed visual variants only. + +**Affected files**: `DBSearchPage.tsx` (SearchSubmitButton - `isFormStateDirty` prop is now unused) + +--- + +### Button + + +#### No `size` prop + +**Issue**: Click UI Button doesn't have a `size` prop for compact/small buttons. + +**Workaround**: Use CSS/style overrides or wait for Click UI to add size support. + +```typescript +// ❌ Not supported + +``` + +**Affected files**: `DBSearchPage.tsx` (SaveSearchModalComponent) + +--- + + +#### `iconLeft`/`iconRight` expect IconName string + +**Issue**: Icon props expect string icon names, not React components. + +**Workaround**: Cast with `as any`. + +```typescript +// ✅ Works +