Skip to Main Content

Pelican Design System icon Pelican Design System Migration Guide

Migration Guide

Differences between Pelican 1 and Pelican 2.

Edit on GitHub

On this page:

Migration Guide

Upgrading to Pelican 2 requires a few steps. Here’s what you’ll have to do:

  1. Swap Pelican 1 CSS with Pelican 2 CSS.
  2. Update your markup from Pelican 1 markup to Pelican 2 markup.
  3. Update the javascript because Bootstrap 5 removed jQuery as a dependency.

Consult Bootstrap’s Migration Guide. Breaking changes were introduced in version 5 and jQuery was removed from version 5.

Markup Changes

The move from Bootstrap 4 in Pelican 1 to Bootstrap 5 in Pelican 2 requires some markup and CSS changes in a few things. These changes could be different markup or different class values on old markup. Here’s lists of items which have new markup or CSS Changes. You’ll need to compare your markup from Pelican 1 to markup for Pelican 2 for the following items.

Components with markup or CSS changes

These lists give a little more information on what’s different between Pelican 1 (Bootstrap 4.6) and Pelican 2 (Bootstrap 5.3).

  • Alerts
    • Class name on dismissal buttons is different
    • Name spacing on attributes for JavaScript targets is different
  • App Screen
    • Class names on child elements
  • Badges
    • Inclusion of icons
    • CSS to create the Badges
  • Button Container
    • Class names on child elements
    • CSS to create the Button Container
  • Previous and Next Page Buttons
    • Class names on child elements
    • Inclusion of ARIA label to communicate purpose
  • Back to Top Button
    • Class name on child elements
  • Add Data Button
    • Class names on child elements
    • Removal of problematic markup for Voicecontrol Users
  • Page Actions Button
    • Class names on child elements
  • Cards and Data Tiles
    • Border is thinner
  • Chips
    • Class names on child elements
    • CSS to create the Chips
  • Footer, Utility Footer
    • Class names on child elements
  • Modals
    • Name spacing on attributes for JavaScript targets is different
  • Navbars
    • Name spacing on attributes for JavaScript targets is different
  • Official Banner
    • Inclusion of ARIA label
    • Class names on child elements
    • Inclusion of attributes to help accessibility
  • Page Title
    • Class names on child elements
    • Inclusion of badges as an option
    • CSS to create the Page Title
    • Smaller default padding
  • Pagination
    • Class names on child elements
    • Attributes related to accessibility
  • Popovers & Tooltips
    • Name spacing on attributes for JavaScript targets is different
  • Progress Indicator, Large
    • CSS to create the Progress Indicator, Large
  • Sidebar (part of App Screen)
    • Class names on child elements
  • Share Social
    • Class names on child elements
    • Attributes related to accessibility
  • Tabbed Content
    • Promotion of common tab style to top of documentation
    • Name spacing on attributes for JavaScript targets is different
    • Attributes related to accessibility
  • Toasts
    • Class names on child elements
  • Topbar (part of App Screen)
    • Class names on child elements

Form Controls with markup or CSS changes

  • Form Section Header
    • Class names on child elements
    • Inclusion of required fields statement
  • Inputs
    • Class names on child elements
  • Checkboxes
    • Class names on child elements
  • Radios
    • Class names on child elements
  • Selects
    • Class names on child elements
  • Switches
    • Class names on child elements
    • Attributes related to accessibility

Form Templates with markup or CSS changes

  • Address Form
    • Class names on child elements
  • Change Password
    • Class names on child elements
    • Replacement of javascript collapse with native HTML Details and Summary
  • Contact Information
    • Class names on child elements
  • Create User ID & Password
    • Class names on child elements
    • Replacement of javascript collapse with native HTML Details and Summary
  • Name
    • Class names on child elements
  • Sign In
    • Class names on child elements

Hero Blocks with markup or CSS changes

Page Templates with new markup

  • 404 Page, public and internal
    • class names on child elements
  • Error Page, public and internal
    • class names on child elements
  • Landing Page
    • class names on child elements
Page top