<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/*  Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/*  Private Banner */}
        <VeltCommentDialogWireframe.PrivateBanner />
        {/*  Assignee Banner */}
        <VeltCommentDialogWireframe.AssigneeBanner>
            <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
            <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
            <VeltCommentDialogWireframe.AssigneeBanner.UserName />
        </VeltCommentDialogWireframe.AssigneeBanner>
        {/*  Header */}
        <VeltCommentDialogWireframe.Header>
            {/*  Following subcomponents can be used outside header as well */}
            {/*  # Pin Dialog Header */}
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.CopyLink />
            <VeltCommentDialogWireframe.ResolveButton />
            {/*  # Sidebar Dialog Header */}
            <VeltCommentDialogWireframe.CommentIndex />
            <VeltCommentDialogWireframe.CommentCategory />
            <VeltCommentDialogWireframe.CommentSuggestionStatus />
        </VeltCommentDialogWireframe.Header>
        {/* Private Badge */}
        <VeltCommentDialogWireframe.PrivateBadge/>
        {/* Body */}
        <VeltCommentDialogWireframe.Body>
            <VeltCommentDialogWireframe.Threads>
                <VeltCommentDialogWireframe.ThreadCard>
                    <VeltCommentDialogWireframe.ThreadCard.Avatar />
                    <VeltCommentDialogWireframe.ThreadCard.Name />
                    <VeltCommentDialogWireframe.ThreadCard.Time />
                    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
                    <VeltCommentDialogWireframe.ThreadCard.Options />
                    <VeltCommentDialogWireframe.ThreadCard.Message />
                    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
                    <VeltCommentDialogWireframe.ThreadCard.Reactions />
                    <VeltCommentDialogWireframe.ThreadCard.Files />
                    <VeltCommentDialogWireframe.ThreadCard.Recordings />
                </VeltCommentDialogWireframe.ThreadCard>
                <VeltCommentDialogWireframe.MoreReply />
            </VeltCommentDialogWireframe.Threads>
            <VeltCommentDialogWireframe.ToggleReply />
        </VeltCommentDialogWireframe.Body>
        {/* Composer */}
        <VeltCommentDialogWireframe.Composer>
            <VeltCommentDialogWireframe.Composer.Files />
            <VeltCommentDialogWireframe.Composer.Recordings />
            <VeltCommentDialogWireframe.Composer.Input />
            <VeltCommentDialogWireframe.Composer.ActionButton type="userMentions" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="file" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
            <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
            <VeltCommentDialogWireframe.Composer.AssignUser />
        </VeltCommentDialogWireframe.Composer>
        {/* All Comments */}
        <VeltCommentDialogWireframe.AllComment />
        {/* Approve */}
        <VeltCommentDialogWireframe.Approve />
        {/* Sign In */}
        <VeltCommentDialogWireframe.SignIn />
        {/* Upgrade */}
        <VeltCommentDialogWireframe.Upgrade />
        {/* Suggestion Action */}
        <VeltCommentDialogWireframe.SuggestionAction>
            <VeltCommentDialogWireframe.SuggestionAction.Accept />
            <VeltCommentDialogWireframe.SuggestionAction.Reject />
        </VeltCommentDialogWireframe.SuggestionAction>
    </VeltCommentDialogWireframe>
</VeltWireframe>

We recommend that you familiarize yourselves with Advanced UI Customization Concepts before attempting to modify any components.

Default Component

There are 11 Subcomponents within the Comment Dialog component.

6 of them are Hidden Elements, which means they don’t appear initially in the default state, but may appear upon interacting with the component.

Subcomponents

  1. Private Banner (Hidden Element)

<VeltCommentDialogWireframe.PrivateBanner />
  1. Ghost Banner (Hidden Element)

<VeltCommentDialogWireframe.GhostBanner />
  1. Assignee Banner

<VeltCommentDialogWireframe.AssigneeBanner>
    <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
    <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
    <VeltCommentDialogWireframe.AssigneeBanner.UserName />
</VeltCommentDialogWireframe.AssigneeBanner>
  1. Header

<VeltCommentDialogWireframe.Header>
    <VeltCommentDialogWireframe.Status />
    <VeltCommentDialogWireframe.Priority />
    <VeltCommentDialogWireframe.Options />
    <VeltCommentDialogWireframe.ResolveButton />
    <VeltCommentDialogWireframe.CopyLink />
    <VeltCommentDialogWireframe.CommentCategory />
    <VeltCommentDialogWireframe.CommentIndex />
    <VeltCommentDialogWireframe.CommentSuggestionStatus />
</VeltCommentDialogWireframe.Header>
  1. Private Badge

<VeltCommentDialogWireframe.PrivateBadge/>
  1. Body

<VeltCommentDialogWireframe.Body>
    <VeltCommentDialogWireframe.Threads>
        <VeltCommentDialogWireframe.ThreadCard>
            <VeltCommentDialogWireframe.ThreadCard.Avatar />
            <VeltCommentDialogWireframe.ThreadCard.Name />
            <VeltCommentDialogWireframe.ThreadCard.Time />
            <VeltCommentDialogWireframe.ThreadCard.DeviceType />
            <VeltCommentDialogWireframe.ThreadCard.Options />
            <VeltCommentDialogWireframe.ThreadCard.Message />
            <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
            <VeltCommentDialogWireframe.ThreadCard.Reactions />
            <VeltCommentDialogWireframe.ThreadCard.Files />
            <VeltCommentDialogWireframe.ThreadCard.Recordings />
        </VeltCommentDialogWireframe.ThreadCard>
        <VeltCommentDialogWireframe.MoreReply />
    </VeltCommentDialogWireframe.Threads>
    <VeltCommentDialogWireframe.ToggleReply />
</VeltCommentDialogWireframe.Body>
  1. Composer

<VeltCommentDialogWireframe.Composer>
    <VeltCommentDialogWireframe.Composer.Files />
    <VeltCommentDialogWireframe.Composer.Recordings />
    <VeltCommentDialogWireframe.Composer.Input />
    <VeltCommentDialogWireframe.Composer.ActionButton type="userMentions" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="file" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
    <VeltCommentDialogWireframe.Composer.AssignUser />
</VeltCommentDialogWireframe.Composer>
  1. All Comments

<VeltCommentDialogWireframe.AllComment />
  1. Approve (Hidden Element)

<VeltCommentDialogWireframe.Approve />
  1. Sign in (Hidden Element)

<velt-comment-dialog-sign-in-wireframe></velt-comment-dialog-sign-in-wireframe>
  1. Upgrade (Hidden Element)

<VeltCommentDialogWireframe.Upgrade />
  1. SuggestionAction (Hidden Element)

<VeltCommentDialogWireframe.SuggestionAction>
    <VeltCommentDialogWireframe.SuggestionAction.Accept />
    <VeltCommentDialogWireframe.SuggestionAction.Reject />
</VeltCommentDialogWireframe.SuggestionAction>

Subcomponents that don’t support any children

<VeltCommentDialogWireframe.AssigneeBanner.UserAvatar>
<VeltCommentDialogWireframe.AssigneeBanner.UserName>
<VeltCommentDialogWireframe.Status>
<VeltCommentDialogWireframe.Priority>
<VeltCommentDialogWireframe.Options>
<VeltCommentDialogWireframe.ThreadCard.Avatar>
<VeltCommentDialogWireframe.ThreadCard.DeviceType>
<VeltCommentDialogWireframe.ThreadCard.Name>
<VeltCommentDialogWireframe.ThreadCard.Time>
<VeltCommentDialogWireframe.ThreadCard.Options>
<VeltCommentDialogWireframe.ThreadCard.Message>
<VeltCommentDialogWireframe.ThreadCard.ReactionTool>
<VeltCommentDialogWireframe.ThreadCard.Reactions>
<VeltCommentDialogWireframe.ThreadCard.Files>
<VeltCommentDialogWireframe.ThreadCard.Recordings>
<VeltCommentDialogWireframe.Composer.Files>
<VeltCommentDialogWireframe.Composer.Recordings>
<VeltCommentDialogWireframe.Composer.Input>
<VeltCommentDialogWireframe.Composer.AssignUser>

Pre-defined Variants

The Comment Dialog has 2 pre-defined variants:

  • dialog - this will customize the Comment Dialog only within Pin, Area, and Text Comments
  • sidebar- this will customize the Comment Dialog only within Sidebar comments

To use them, set the variant name in the wireframe template equal to one of the pre-defined variants. You do not need to add it to the actual Velt component.

 <VeltWireframe>
    {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
    <VeltCommentDialogWireframe variant=”dialog”>
        ...
    </VeltCommentDialogWireframe>

    {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
    <VeltCommentDialogWireframe variant=”sidebar”>
        ...
    </VeltCommentDialogWireframe>

    {/* If you dont use any variants, then customization will be applied to the Comment Dialog globally */}
    <VeltCommentDialogWireframe variant=”sidebar”>
        ...
    </VeltCommentDialogWireframe>
</VeltWireframe>