Migration guides
On this page
On this page
Primer ViewComponents are routinely deprecated as they mature. The following guides detail performing component upgrades.
Migrating from Primer CSS
Many Primer CSS use cases are supported by Primer ViewComponents.
When migrating from Primer CSS classes to ViewComponents, use this mapping to help guide your implementation. This list includes components currently in stable status.
| Primer CSS Class | ViewComponent | Guide |
|---|---|---|
State | Primer::Beta::State | |
breadcrumb-item | Primer::Beta::Breadcrumbs | |
Counter | Primer::Beta::Counter | |
Subhead | Primer::Beta::Subhead | |
blankslate | Primer::Beta::Blankslate | |
.tooltipped | Primer::Alpha::Tooltip and other options | Migrating from .tooltipped |
Upgrading deprecated components
As Primer ViewComponents are updated, there are often breaking changes and deprecations that require changes which cannot be auto-corrected with Rubocop or other tools. These guides will walk you through the upgrade process for specific components.
| Deprecated Component | Replacement Component | Guide |
|---|---|---|
Primer::ButtonComponent | Primer::Beta::Button | Upgrade to Primer::Beta::Button |
Primer::LayoutComponent | Primer::Alpha::Layout | Upgrade to Primer::Alpha::Layout |
Primer::LocalTime | Primer::Beta::RelativeTime | Upgrade to Primer::Beta::RelativeTime |
Primer::TimeAgoComponent | Primer::Beta::RelativeTime | Upgrade to Primer::Beta::RelativeTime |
Primer::Truncate | Primer::Beta::Truncate | Upgrade to Primer::Beta::Truncate |
<details-dialog> | Primer::Alpha::Dialog | Upgrade to Primer::Alpha::Dialog |