Overview
- Key improvements in this series:
- 115+ primitive components for building custom comment dialogs
- Each subcomponent can now be used independently without requiring the full dialog structure
- Two usage patterns: ID-Based (Standalone) and Context Wrapper
- Full control over comment dialog layout and styling
Breaking Changes
v5.0.0-beta.15
- [Comments API]
submitComment() method signature changed from accepting a plain string to a SubmitCommentRequest object.
- Before:
commentElement.submitComment('my-composer-id')
- After:
commentElement.submitComment({ targetComposerElementId: 'my-composer-id' })
- [Comments API]
target-element-id attribute on <velt-comment-dialog-composer> renamed to target-composer-element-id. React prop targetElementId renamed to targetComposerElementId.
- This only affects standalone composer components (
VeltCommentDialogComposer and VeltCommentComposer). Other components are not affected.
- [Comments API]
composerTextChange event payload expanded with new fields (annotation and targetComposerElementId). Existing handlers that destructure the event should still work, but type checks against the event shape should be updated.
v5.0.0-beta.1
- [CSS Element Names] If you applied CSS to comment dialog element selectors, you need to update them to target the new element names.
- Replace
snippyly-comment-dialog with velt-comment-dialog-internal
- Replace
app-comment-dialog-* pattern with velt-comment-dialog-*-internal
- For example:
app-comment-dialog-composer becomes velt-comment-dialog-composer-internal
- Important: Only element names need to be updated. Class names remain unchanged.
How to Upgrade
From v5.0.0-beta.14 to v5.0.0-beta.15
- Update all
submitComment() calls to use the new object signature:
| Before | After |
|---|
commentElement.submitComment('id') | commentElement.submitComment({ targetComposerElementId: 'id' }) |
- Rename
target-element-id to target-composer-element-id on all standalone composer instances:
| Framework | Before | After |
|---|
| React | <VeltCommentDialogComposer targetElementId="id" /> | <VeltCommentDialogComposer targetComposerElementId="id" /> |
| HTML | <velt-comment-dialog-composer target-element-id="id"> | <velt-comment-dialog-composer target-composer-element-id="id"> |
- Update any type checks against the
ComposerTextChangeEvent shape to include the new fields:
| Field | Type | Description |
|---|
text | string | Plain text content (existing) |
annotation | CommentAnnotation | Full draft annotation object (new) |
targetComposerElementId | string | The composer’s ID (new) |
metadata | VeltEventMetadata | Optional metadata (existing) |
- Deploy the latest version of the Velt SDK to your product.
From v4.x to v5.0.0-beta.1
- Search your CSS files for any element selectors using
snippyly-comment-dialog or app-comment-dialog-* patterns.
- Update the element selectors using the following replacements:
| Old Element Name | New Element Name |
|---|
snippyly-comment-dialog | velt-comment-dialog-internal |
app-comment-dialog-composer | velt-comment-dialog-composer-internal |
app-comment-dialog-header | velt-comment-dialog-header-internal |
app-comment-dialog-body | velt-comment-dialog-body-internal |
- Deploy the latest version of the Velt SDK to your product.
If you are only using class selectors (e.g., .comment-dialog-composer), no changes are required.
