Migrating from Classic
Coming from our Classic system? Pando is completely different. This means Pando is not and will never be a 1:1 mirror to Classic.
Classic was never built for a multi-product company and did not scale well. Pando resolves both of those issues.
If you are looking for a walk-through approach of migrating to Pando from Classic, check out our Add Pando to a Website page.
Breaking Changes
Here is a list of some breaking changes in Pando from Classic:
Layout
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| App Frame | Headless-styles, React | Grid API |
| Aside | Headless-styles, React | Grid API |
| Equal Col. | Headless-styles, React | Grid API |
| Page Heading | Headless-styles, React | Built into the CSS setup. |
| Page Width | ❌ |
Text
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Code | Normalize | Built into the CSS setup. |
| Heading | Normalize | Built into the CSS setup. |
| List | Normalize | Built into the CSS setup. |
| P | Normalize | Built into the CSS setup. |
Navigation
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Action Menu | Headless-styles, React | Menu API, useMenuInteraction |
| Breadcrumb | Headless-styles | Tag API, TextLink API |
| Drawer | ❌ | |
| Global Nav | ❌ | |
| Menu | Headless-styles, React | Menu API, useMenuInteraction |
| Steps | ❌ | |
| Tabs (H) | Headless-styles, React | Tabs API, useTabs |
| Tabs (V) | Headless-styles, React | Tabs API, useTabs |
Inputs
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Button | Headless-styles, React | Button API |
| Checkbox | Headless-styles, React | Checkbox API |
| Date Picker | HS, React, React-utils | Input API, useAutoFormatDate |
| Dropdown | Headless-styles, React | Select API |
| Field | Headless-styles, React | Form Control, Label, Field Error & Message API |
| Form | Headless-styles, React | Semantic HTML |
| Multi Select | React | MultiSelect API |
| Radio | Headless-styles, React | |
| Search Input | Headless-styles, React | Input API |
| Switch | Headless-styles, React | Switch API |
| Tags Input | ❌ | |
| Textarea | Headless-styles, React | Textarea API |
| Text Input | Headless-styles, React | Input API |
| Typeahead | ❌ | |
| View Toggle | Headless-styles, React | Tabs API, useTabs |
Content Display
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Avatar | Headless-styles, React | Avatar API, usePreloadedImage |
| Card | ❌ | |
| Data Well | Noramlize | Semantic HTML |
| Icon | Icons, Headless-styles, React | Icon API |
| Note | ❌ | |
| Row | Headless-styles, React | Grid API |
| Table | Headless-styles, React | Table API |
| Tag | Headless-styles, React | Tag API |
Feedback
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Badge | Headless-styles, React | Badge API |
| Banner | Headless-styles, React | Admonition API |
| Dialog | Headless-styles, React | Confirm Dialog, Modal API |
| Empty State | ❌ | |
| Error Pages | ❌ | |
| Circular Progress | Headless-styles, React | Circular Progress API |
| Linear Progress | Headless-styles, React | Progress API |
| Star Rating | ❌ | In Tutorials |
| Tooltip | Headless-styles, React | Tooltip API |
Utilities
Pando does not support motion or spacing tokens. There are enough studies that prove token usage of these properties depreciates performance when loading web experiences.
| Classic API | Pando Equivalent | Notes |
|---|---|---|
| Core | Normalize | Built into the CSS setup. |
| Normalize | Normalize | Built into the CSS setup. |
| Position | ❌ | |
| Screen Reader Only | Normalize | Built into CSS setup |
| Scrollable | ❌ | |
| Theme | Normalize, React-utils, React | CSS setup, useTheme |
| Feature Flags | ❌ | |
| Focus Manager | ❌ | |
| Nav Cookie Banner | ❌ |