Component class renames (POSSIBLE BREAKING CHANGE)

Copy post link

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 💜