Primer ViewComponents are routinely deprecated as they mature. The following guides detail performing component upgrades.
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 |
SelectMenu | Primer::Alpha::SelectPanel | Migrating from SelectMenu |
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 |