Skip to main content
Conventions
  • React names use PascalCase under the VeltCommentsSidebarV2Wireframe namespace.
  • Parent/child is determined only by the extension path (A.B → B is a child of A). Visual placement does not imply hierarchy.
  • HTML names mirror React 1:1 in kebab-case.
  • (Leaf) = component has no children in this wireframe.
  • The highest parents will start with ’##’ as their header tag, their children will use one more ’#’ at each level.

​
React

VeltCommentsSidebarV2Wireframe

​
VeltCommentsSidebarV2Wireframe.Skeleton (Leaf)

​
VeltCommentsSidebarV2Wireframe.Panel

​
VeltCommentsSidebarV2Wireframe.Header

VeltCommentsSidebarV2Wireframe.CloseButton (Leaf)
VeltCommentsSidebarV2Wireframe.Search
  • VeltCommentsSidebarV2Wireframe.Search.Icon (Leaf)
  • VeltCommentsSidebarV2Wireframe.Search.Input (Leaf)
VeltCommentsSidebarV2Wireframe.FilterButton
  • VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon (Leaf)
VeltCommentsSidebarV2Wireframe.FilterContainer
  • VeltCommentsSidebarV2Wireframe.FilterContainer.Title (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList
    • VeltCommentsSidebarV2Wireframe.FilterContainer.Section
      • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel (Leaf)
      • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField
        • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl
          • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron (Leaf)
          • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue (Leaf)
          • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList
            • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip (Leaf)
          • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch (Leaf)
        • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList
          • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption
            • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox (Leaf)
            • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName (Leaf)
            • VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton (Leaf)
VeltCommentsSidebarV2Wireframe.FullscreenButton (Leaf)
VeltCommentsSidebarV2Wireframe.FilterDropdown
  • VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger (Leaf)
  • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content
    • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List
      • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item
        • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator (Leaf)
        • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label (Leaf)
        • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count (Leaf)
      • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category
        • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label (Leaf)
        • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content (Leaf)

​
VeltCommentsSidebarV2Wireframe.List

VeltCommentsSidebarV2Wireframe.ListGroupHeader
  • VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label (Leaf)
  • VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count (Leaf)
  • VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron (Leaf)
  • VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator (Leaf)

​
VeltCommentsSidebarV2Wireframe.EmptyPlaceholder

  • VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton (Leaf)

​
VeltCommentsSidebarV2Wireframe.PageModeComposer (Leaf)

​
VeltCommentsSidebarV2Wireframe.FocusedThread

  • VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton (Leaf)
  • VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer (Leaf)

​
HTML (1:1 mirror)

velt-comments-sidebar-v2-wireframe

​
velt-comments-sidebar-skeleton-v2-wireframe (Leaf)

​
velt-comments-sidebar-panel-v2-wireframe

​
velt-comments-sidebar-header-v2-wireframe

  • velt-comments-sidebar-close-button-v2-wireframe (Leaf)
velt-comments-sidebar-search-v2-wireframe
  • velt-comments-sidebar-search-v2-icon-wireframe (Leaf)
  • velt-comments-sidebar-search-v2-input-wireframe (Leaf)
velt-comments-sidebar-filter-button-v2-wireframe
  • velt-comments-sidebar-filter-button-v2-applied-icon-wireframe (Leaf)
velt-comments-sidebar-filter-container-v2-wireframe
  • velt-comments-sidebar-filter-container-v2-title-wireframe (Leaf)
  • velt-comments-sidebar-filter-container-v2-group-by-wireframe (Leaf)
  • velt-comments-sidebar-filter-container-v2-section-list-wireframe
    • velt-comments-sidebar-filter-container-v2-section-wireframe
      • velt-comments-sidebar-filter-container-v2-section-label-wireframe (Leaf)
      • velt-comments-sidebar-filter-container-v2-section-field-wireframe
        • velt-comments-sidebar-filter-container-v2-section-control-wireframe
          • velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe (Leaf)
          • velt-comments-sidebar-filter-container-v2-section-control-value-wireframe (Leaf)
          • velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe
            • velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe (Leaf)
          • velt-comments-sidebar-filter-container-v2-section-control-search-wireframe (Leaf)
        • velt-comments-sidebar-filter-container-v2-section-option-list-wireframe
          • velt-comments-sidebar-filter-container-v2-section-option-wireframe
            • velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe (Leaf)
            • velt-comments-sidebar-filter-container-v2-section-option-name-wireframe (Leaf)
            • velt-comments-sidebar-filter-container-v2-section-option-count-wireframe (Leaf)
  • velt-comments-sidebar-filter-container-v2-reset-button-wireframe (Leaf)
  • velt-comments-sidebar-filter-container-v2-apply-button-wireframe (Leaf)
  • velt-comments-sidebar-filter-container-v2-close-button-wireframe (Leaf)
velt-comments-sidebar-fullscreen-button-v2-wireframe (Leaf)
velt-comments-sidebar-filter-dropdown-v2-wireframe
  • velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe (Leaf)
  • velt-comments-sidebar-filter-dropdown-content-v2-wireframe
    • velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe
      • velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe
        • velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe (Leaf)
        • velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe (Leaf)
        • velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe (Leaf)
      • velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe
        • velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe (Leaf)
        • velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe (Leaf)

​
velt-comments-sidebar-list-v2-wireframe

velt-comments-sidebar-list-group-header-v2-wireframe
  • velt-comments-sidebar-list-group-header-v2-label-wireframe (Leaf)
  • velt-comments-sidebar-list-group-header-v2-count-wireframe (Leaf)
  • velt-comments-sidebar-list-group-header-v2-chevron-wireframe (Leaf)
  • velt-comments-sidebar-list-group-header-v2-separator-wireframe (Leaf)

​
velt-comments-sidebar-empty-placeholder-v2-wireframe

  • velt-comments-sidebar-reset-filter-button-v2-wireframe (Leaf)

​
velt-comments-sidebar-page-mode-composer-v2-wireframe (Leaf)

​
velt-comments-sidebar-focused-thread-v2-wireframe

  • velt-comments-sidebar-focused-thread-back-button-v2-wireframe (Leaf)
  • velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe (Leaf)