<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options> {/* This parent wireframe scopes the changes to only the individual message options dropdown. */}
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content>
            <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
            <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
                <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
                <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
            </VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
        </VeltCommentDialogWireframe.ThreadCard.Options.Content>
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>

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

There are two set of options wireframes:

  • Velt Comment Dialog Options Wireframe: Scopes the changes to the header options dropdown.
  • Velt Comment Dialog Thread Card Options Wireframe: Scopes the changes to the individual message card options dropdown.

They share the same children components. However, the children components show conditionally based on their parent:

  • Thread level actions: Copy link, subscribe, delete thread. They only appear in the header.
  • Message level actions: Edit, delete. They only appear in the individual message cards.

The wireframes covered here are used to customize the individual message card options dropdown.

<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options> {/* This parent wireframe scopes the changes to only the individual message options dropdown. */}
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content>
            <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
            <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
                <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
                <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
            </VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
        </VeltCommentDialogWireframe.ThreadCard.Options.Content>
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>