Migrating from HPE Theme 2.x to 3.x

Enhanced control over responsive layouts

grommet-theme-hpe ships with additional responsive breakpoints, allowing applications to easily execute content layouts which look great on device and across any window size. The new breakpoints help deliver the optimal user experience for HPE customers.

• Gain precise control over how page layouts respond and adapt.
• Ensure your content hierarchy is optimally presented across screen sizes.
• Implement grid layouts, such as a dashboard of cards, which gracefully adapt and flow; the content within the cards can flow just as smooth.

Responsive Breakpoints

• 5 total responsive breakpoints to enable more granular layout support.
• New breakpoints xsmall and xlarge.
• Adjusted ranges for small, medium, large.

Breakpoint	NEW Range (px)	Deprecated Range
xsmall	576 and below	N/A
small	577 - 768	768 and below
medium	769 - 1080	769 - 1536
large	1081 - 1439	1537 and above
xlarge	1440 and above	N/A

Breaking Changes & Mitigation Steps

The change in range definitions for HPE Theme’s responsive breakpoints may impact UI presentations. The following steps will:

• Inform you whether you will need to take mitigation actions.
• Provide recommended mitigations.

Check for use of ResponsiveContext

If your application is not using ResponsiveContext, the new breakpoints will NOT impact your implementation.

These changes can be achieved with a "Find all and replace" approach, but it is recommended that individual instances are visually verified to ensure no regressions are introduced.

If using ResponsiveContext, continue reading. If not, upgrade away and start thinking about how responsive behaviors will improve your customers’ experiences.

Check for consumption of responsive context === ‘small’

The new xsmall breakpoint will affect areas of your application that rely on ResponsiveContext’s small (note: this is a change from size --> small) as a way to conditionally render component and layout behaviors.

One example of this is in a Header. On larger screens, we show navigation buttons in a row, but on a smaller screen we collapse the buttons into a Menu. In these instances, we often use size !== 'small' in order to determine if the buttons should render in a row or as a Menu.

Ensure Backwards Compatibility

The new xsmall breakpoint will affect areas of your application that rely on ResponsiveContext's size as a way to conditionally render component and layout behaviors. By convention Grommet uses size to consume ResponsiveContext, substitute your variable names as appropriate.

1. Any uses of (size or variable name) !== 'small' should be replaced with !['xsmall', 'small'].includes(size).
2. Any uses of (size or variable name) === 'small' should be replaced with ['xsmall', 'small'].includes(size).

Example of Required Code Changes

-     {size !== 'small' ?
        <Nav direction="row">
          {items.map(item => (
            <Button label={item.label} key={item.label} />
          }
        </Nav>
      ) : (
        <Menu label="Menu" items={items} />
      )}

+     {!['xsmall', 'small'].includes(size) ? (`
        <Nav direction="row">
          {items.map(item => (
            <Button label={item.label} key={item.label} />
          ))}
        </Nav>
      ) : (
        <Menu label="Menu" items={items} />
      )}

This migration guide is intended to create a smoother migration from HPE theme ^2.0.0 to HPE theme ^3.0.0. Thank you for using the HPE Design System.