Component class renames (POSSIBLE BREAKING CHANGE)

Brad Paugh avatar
Brad Paugh

Internal Dialtone Vue component CSS classes renamed to follow standard conventions. Only affects projects that override Dialtone component CSS directly.

Hi there, just wanted to communicate that we've renamed some of our base component class names because they were not following the standard naming conventions of Dialtone. Because these class names are internal to Dialtone Vue components, this will only be a breaking change if you are overriding Dialtone component CSS, or using pure CSS instead of Vue components. If you are overriding Dialtone component CSS the fix is simple. Just find / replace the old class name to the new class name in your consuming application.

Note that this will also include all sub elements of these classes, so if it says to rename dt-list-item to d-list-item this will also be the case for dt-list-item--focusable

Most of these you are probably not touching at all. The most likely are the first two dt-item-layout and dt-list-item.

Renamed classes

  • dt-item-layout -> d-item-layout
  • dt-list-item -> d-list-item
  • enter-active -> d-collapsible__enter-active
  • leave-active -> d-collapsible__leave-active
  • dt-empty-list-item -> d-combobox__empty-list-item
  • dt-description-list -> d-description-list
  • dt-list-separator -> d-list-item-separator
  • mention-suggestion-name -> d-mention-suggestion__name
  • dt-suggestion-list__container -> d-suggestion-list__container
  • dt-rich-text-editor -> d-rich-text-editor
  • skeleton-placeholder -> d-skeleton-placeholder

Thanks! Dialtone Team 💜

documentation last updated Wednesday, September 16, 2026