Jetpack UI Modernization

[simison]

We're updating primitive componentry from old RNA Jetpack components to the latest design system components aka @wordpress/ui package.

Where a component doesn't exist yet, we'll use @wordpress/components for now.

(See phcsdm-PK-p2 for internal reference)

Scan source: grep-based import scan of import { … } from '@automattic/jetpack-components'
across projects/plugins/*, projects/packages/*, and projects/js-packages/*.
Plugins / packages with no imports are omitted. Re-run when in doubt.

---

Plugins (bundled together with their feature packages)

Jetpack plugin (plugins/jetpack)

• ActionButton
• Button
• Chip @nerrad Componentry: Migrate Chip to @wordpress/ui Badge #48162
• Col → Stack
• Container → Stack
• CopyToClipboard @enejb
• GlobalNotices
• Gridicon @simison
• LoadingPlaceholder
• Notice
• ProgressBar
• RadioControl @ilonagl
• ToggleControl
• ThemeProvider

WordPress.com MU (plugins/mu-wpcom-plugin, packages/jetpack-mu-wpcom)

• Gridicon @simison

Boost (plugins/boost, packages/boost-core, packages/boost-speed-score)

• Button
• CopyToClipboard @enejb
• Gridicon @simison
• IconTooltip
• Notice
• NumberSlider
• Popover
• Spinner @simison
• ToggleControl
• Custom <Pill> component (app/assets/src/js/features/ui/pill) — used for "Beta" labels; should migrate to @wordpress/ui Badge

Protect (plugins/protect, packages/protect-models, packages/protect-status, packages/waf, packages/account-protection, js-packages/scan)

• ActionPopover
• Badge Components: Migrate Badge to @wordpress/ui #48156
• Button
• Col → Stack
• Container → Stack
• ContextualUpgradeTrigger
• DetailsViewer
• DiffViewer
• H3
• IconTooltip
• MarkedLines
• Notice
• Spinner @simison
• StatCard
• Status
• Text
• ThemeProvider
• Title
• ToggleControl
• Custom .badge class (src/js/routes/firewall/styles.module.scss) — "NOW AVAILABLE" inline pill; should migrate to @wordpress/ui Badge
• Custom .status-badge class (src/js/components/paid-accordion/styles.module.scss) — status indicator; should migrate to @wordpress/ui Badge

Search (plugins/search, packages/search)

• Button
• Col → Stack
• Container → Stack
• DonutMeter
• Gridicon @simison
• IconTooltip
• IndeterminateProgressBar
• Text
• ThemeProvider
• ProductPrice.promoLabel styling (js-packages/components/components/product-price/style.module.scss) — yellow inline promo pill used via promoLabel prop; shared with VideoPress

Social + Publicize (plugins/social, packages/publicize)

• Alert
• Button @dhasilva Publicize: migrate all Button consumers to @wordpress/ui #48150
• Col → Stack
• Container → Stack
• CopyToClipboard @enejb
• Dialog
• GlobalNotices
• H3
• IconTooltip
• NavigatorModal
• SocialIcon
• SocialServiceIcon
• Text
• ThemeProvider

Backup (plugins/backup, packages/backup, packages/backup-helper-script-manager)

• ActionButton
• Col
• Container → Stack
• LoadingPlaceholder
• ProgressBar
• Text
• ThemeProvider

VaultPress (plugins/vaultpress)

• No @automattic/jetpack-components imports.

VideoPress (plugins/videopress, packages/videopress)

• ActionPopover
• Button
• Col → Stack
• Container → Stack
• LoadingPlaceholder
• ProgressBar
• SearchIcon
• Text
• ThemeProvider
• Title

CRM (plugins/crm)

• Button
• Col → Stack
• Container → Stack
• IconTooltip
• Text
• ThemeProvider
• ToggleControl

Starter Plugin (plugins/starter-plugin)

• Can be ignored for now?

Automattic for Agencies Client (plugins/automattic-for-agencies-client)

• Can be ignored for now?

• Button

• Col → Stack

• Container → Stack

• Spinner @simison

• ThemeProvider

Classic Theme Helper (plugins/classic-theme-helper-plugin, packages/classic-theme-helper)

• Can be ignored for now?

• Col → Stack

• Container → Stack

• PricingCard

• ThemeProvider

Dashboards / UI surfaces (even when not their own plugin)

Settings dashboard

The legacy Jetpack Settings screen lives inside projects/plugins/jetpack/_inc/client,
so its usage is covered by Jetpack plugin above. No separate package.

My Jetpack dashboard (packages/my-jetpack)

• ActionButton
• Alert
• Button
• CheckmarkIcon @simison
• Col → Stack
• Container → Stack
• DotPager
• GlobalNotices
• Gridicon @simison
• H3
• JetpackIcon
• JetpackLogo
• LoadingPlaceholder
• Notice
• Spinner @simison
• StarIcon
• Text
• ThemeProvider
• UpsellBanner

Newsletter / Subscribers dashboard (packages/newsletter, packages/subscribers-dashboard)

• Col → Stack
• Container → Stack
• GlobalNotices

Forms dashboard (packages/forms)

• LoadingPlaceholder
• ThemeProvider
• Dead-CSS cleanup: .jp-forms-filters-bar and its __chips / __status-chips modifiers in src/dashboard/inbox/style.scss and src/dashboard/forms/style.scss — JSX consumer removed in Forms: update DataViews header and filters #46732 when filters moved to native DataViews; the SCSS block was missed. @nerrad Forms: remove dead .jp-forms-filters-bar SCSS #48184
• Dead-CSS cleanup: orphaned @use "@wordpress/base-styles/breakpoints"; and @use "@wordpress/base-styles/colors"; in src/dashboard/inbox/style.scss — also leftover from Forms: update DataViews header and filters #46732 alongside the .jp-forms-filters-bar cleanup. (needs verified) - @nerrad

External Media / External Connections (packages/external-media, packages/external-connections)

• NumberControl

Shared JS packages (consumed by many of the above)

Connection UI (js-packages/connection)

• ActionButton
• Button
• DecorativeCard
• Spinner @simison
• Text

Identity Crisis (js-packages/idc)

• Spinner @simison

Licensing (js-packages/licensing)

• Button
• Col → Stack
• Container → Stack
• Spinner @simison

Partner Coupon (js-packages/partner-coupon)

• ActionButton