Migrating from HPE Theme 4.x to 5.x
The HPE brand is being refreshed. From updated buttons to refined typography, grommet-theme-hpe v5 supports HPE’s brand strategy by delivering the latest brand expression for HPE products.
The following guide summarizes notable enhancements, steps to upgrade, and comprehensive release notes.
Because the HPE brand is living and evolving, its expression changes over time. Consuming behaviors and styles directly from Grommet and the HPE theme allow for products to stay current, consistent, and accessible in a timely, pain-free manner. Thank you for using grommet-theme-hpe and accelerating HPE’s journey to one.
Reduced font-weights and modified grayscale colors deliver a more modern and approachable experience. Additionally, the use of a tighter, condensed type ramp is more economical, occupying less real-estate and making room for information-dense views.
Headings, data table header cells, name value pairs and other components that previously used “bold” now use font-weight 500 with color=”text-strong”.
Note: See Upgrading to v5.x for details on potential manual changes needed to align typographic instances with the latest brand direction.
In addition to softening the font-weights, the color for “text-strong” (used for headings, table header cells, button labels, etc.) has stepped down from a pure black (#000000) to a dark gray (#444444) and “text” (used for paragraphs and other text elements) has been adjusted from #444444 to #6F6F6F.
To support more efficient use of screen real-estate for information dense tasks, the type ramp has been tightened. The default paragraph/text size (18px with 24px line-height) remains unchanged, but the step in sizes up and down has been reduced.
Lastly, heading sizing has also been reduced so use of size=”small” on headings is no longer necessary. Best practice recommendation is to avoid use of the size property; instead inherit sizing directly from the theme.
Note: See Upgrading to v5.x for details on potential manual changes needed to align typographic instances with the latest brand direction.
To align with HPE Brand direction of rounding controls, all buttons now receive full rounding. The exception is toolbar buttons which will retain the existing 6px rounding to retain parity with the inputs they are presented alongside.
Primary buttons now receive a subtle gradient on hover.
In order to ensure a badge does not obscure identifying aspects of an icon, the placement of button badges has been updated to always align to the top-right corner of the button as opposed to overlapping with the icon itself. Certain icons have identifying information at the top-right corner of the icon, so this adjustment provides a better across-the-board experience for badging.
Some common use cases where you might notice changes to badge placement is in filtering and notification buttons. See screenshots below of how badges will now render.
To align the use of HPE brand green with key interactions, anchor labels have been updated to use HPE brand green. To meet color contrast requirements for text color, small and medium (default) anchors receive “text-strong” treatment instead. For anchors with an icon, use HPE brand green (color=”brand”) on icons.
The updated Tab treatment removes use of excessive borders and increases contrast of active tab from other tabs.
hpePop is a new theme adding a bit of visual “pop” for experiences which need to dial up bold, dynamic, and optimistic brand attributes. It is optimized and intended for use in external facing websites such as dotCom and other marketing contexts.
This release scales up the typography to better support marketing experiences in readability and brand perception. HPE products/applications, which are task oriented and more information dense, will continue to use the base hpe theme.
As an example, the HPE Design System site uses the “web type scale,” but the product examples it presents use the “product type scale.” Most experiences will solely use one or the other.
To upgrade to grommet-theme-hpe v5, simply update your package.json to the latest version. There are no breaking changes in terms of functionality with this release. However, updates to your Content security policy may be needed to render the font files. See details related to font files CDN changes.
In addition, your code may require some manual removal or adjustments to property overrides on typographic components to align with the latest from HPE Brand Central. See details below.
The CDN hosting the font files has been changed from that of previous versions. The motivation for this change was to use the font files distributed by brand and hosted on an HPE domain. This change ensures that there are no business unit specific font files.
Because the url of the CDN has changed, this may require updates to your Content-Security policy. Previously, the fonts were hosted under https://d3hq6blov2iije.cloudfront.net/fonts/HPEXS-Metric-Fonts. In v5, the fonts are hosted under https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web.
Previously, many designs called for “small” heading sizes to tighten up screen layouts. The revised type ramp in v5 reduces heading sizes and size=”small” is no longer needed or desired. Instead, to align with the revised heading sizes, ensure you do not have any size property overrides on Heading instances.
To quickly identify size property overrides that should be removed, use the following RegEx to search your code base.
// find
<Heading([^>]*?|\n)( )?size="([^"]+)"([^>]*?|\n)>
// replace
<Heading$1$4>
This will flag instances where a size property is overriding the theme values.
In order to align with the latest direction to limit use of “bold” font-weight, it’s necessary to update use of weight=”bold” on Text instances to weight={500}. To quickly identify weight property overrides that should be updated, use the following RegEx to search your code base.
// Step 1
// find
<Text([^>]*?|\n)weight="bold"([^>]*?|\n)>
// replace
<Text$1weight={500}$2>
// Step 2
// find
<Text(?!([^>]*?|\n)color="text-strong"([^>]*?|\n))([^>]*?|\n)weight=\{500\}(?!([^>]*?|\n)color="text-strong"([^>]*?|\n))([^>]*?|\n)>
// replace
<Text$3weight={500} color="text-strong"$6>
This will flag instances where a weight of bold is applied.
This release decreases icon sizing to align with the font-size at that t-shirt size. For example, large icons will now have a 24px height and width to align with the large text font-size of 24px.
This may cause changes to your layout, for example in instances where you may be using the “Stack” component with an icon. Our recommendation is to audit icon instances to ensure no layout adjustments are necessary.
For icons rendered in Buttons, Anchors, Notifications with no size overrides, there should not be any issues.
If you’re using snapshot tests, there will be changes to those snapshots due to the styling changes in the mentioned components. For details on the specific value changes, see the Release Notes.