Migrating from HPE Theme 1.x to 2.x

Welcome to the Design-System theme Migration guide!

This migration guide is intended to create a smoother migration from HPE theme ^1.0.0 to HPE theme (^2.0.0).

Thank you for choosing HPE Design System theme.

Components & Utils with Breaking Changes

Colors

The new design-system theme has adapted the new HPE brand certified colors which resulted in deprecation of the previous color approach.

Once updating your theme to the new HPE design-system theme, references to the old color definitions such as accent-* or natural-* will result in undefined color results, it should be easy to fix as you simply need to change the color references on your application to the updated colors.

We've created a color migration guide that will instruct you on preserving your existing color names, so as not to break your application. However, the main goal is to migrate your color names to the new Design System. For the new list of the HPE branded colors check out the design-system Color page.

Please be mindful that fundamentally, the colors should be automatically derived from the usage of the right components and the design-system theme, so in most cases, you are not supposed to mention colors explicitly (such as 'blue', 'red'...) Use cases you would need to mention colors will be graph-0, graph-1, control, and brand. Explicit color names like blue and teal will be used more for marketing content and not for a consistent looking application. Replacing the references of accent-1 color, shouldn't be for an explicit color such as teal or purple, the replacement should be the context of the usage,graph-0, control, etc.

Button

The theme is now offering three types of Buttons: Default, Secondary, Primary. Learn more about the new Button concept of the Design-System. Note: There is no longer a need in using the plain Button, the default Button behavior should cover the plain use case.

Breaking changes

• Default buttons have no background color or border by default. Previous default buttons should now be changed to secondary buttons if green border is intended.
• Primary buttons use green as background fill instead of brand.
• Active button styling:
  • All button types receive the same active styling which is a background fill of background-contrast. Previously, active buttons retained their brand colored border.
• Disabled button styling:
  • Primary and secondary buttons types receive identical disabled styling— a border of border-weak, label color of text-weak, and opacity of 1.0.
  • Default buttons have no border, a label color of text-weak, and an opacity of 1.0.
  • Previously, buttons had a lowered opacity with no changes to the button's color.
• Hover styling:
  • Border of the button expands inward as opposed to outwards.
• Label color:
  • Default and secondary buttons use text as the label color.
  • To meet color contrast accessibility requirements, primary buttons use text-strong as the label color.

Usage notes

All button styling will be applied automatically upon adopting the new version of the theme, but users should confirm that their usage of each button type aligns with the below described guidance.

• Default buttons should be the most frequently used button type.
• Secondary buttons (new!): The secondary prop did not exist at the time of grommet-theme-hpe 1.0.0. Secondary buttons have a green border by default and no background fill (reminiscent of the previous default button). Secondary buttons should be used alongside a primary button. When the primary button is the main call-to-action but additional options are needed, use a secondary button as a supporting option.
• Primary buttons should appear only once per page and serve as the primary call-to-action.

Anchor

The Anchor style had changed to always show the underline decoration. Please be mindful that Anchors that may not have been used in the right context (inside tables or headers) may look different than expected.

• Text-decoration:
  • Underline by default and on hover (previously, no underline by default or on hover)
• Font-weight:
  • Default font-weight (previously bold)

Components with Style Changes

Accordion

• Border:
  • appears between all panels and on top of first panel (previously did not appear on top of first panel)
• Heading (refers to text on Accordion panel):
  • margin: { vertical: 'medium', horizontal: 'small' } (previously had large vertical margin and no horizontal margin)
• Hover state:
  • Heading text color: text (previously became a lighter color)

Usage notes

Anchor is intended to align closely with a conventional HTML anchor and be used within blocks of text. If no underline is desired, or the anchor is representing an action, use Button instead.

CheckBox, CheckBoxGroup

• Border:
  • color: border (previously a lighter grey)
  • width: 1px (previously 2px)
  • border-radius: 2px (previously 4px)
• Gap between check and label: small (previously medium)
• Padding around check and label:
  • horizontal: 12px (previously none)
  • vertical: 6px (previously none)
• Hover state:
  • background color (of entire container surrounding checkbox and label): background-contrast (previously no hover background)
• Checked state:
  • icon: new icon is thinner stroke than previous icon
  • background color: green (previously no background color)
  • border: none (previously black)
• Toggle:
  • Knob:
    • border color: border (previously none)
    • border size: 1px (previously 2px)
    • elevation: small (previously none)
    • background color when checked: background (previously background color from inverted theme mode)
  • Unchecked:
    • background color: background (previously a lighter grey)

FormField

Below are style changes on FormField. These will automatically be applied upon adopting the new theme. No action needed.

• Label:
  • color: text-strong (previously text)
  • weight: 500 (previously default font-weight)
  • margin: none
• Help, info, and error text:
  • color: text-strong (previously text-xweak)
  • margin: none
• Content (container surrounding FormField input):
  • margin: { vertical: 'xsmall' }
  • pad: { vertical: 'xsmall' }
  • previously formField.content did not exist
• Border:
  • default color: border
  • on error: border-strong
• Error state:
  • border color: border-strong (previously status-error)
  • background color: validation-critical (previously no background color)
  • icon: CircleAlert icon will appear next to the error message.
• Disabled state:
  • background color: undefined (previously grey background)
  • label color: text-weak
• Focus state:
  • border color: border-strong (previously teal)
  • teal focus outline around input (previously not present, only border color changed)

Menu

• Icon:
  • color: text-strong (previously control)
• Label:
  • weight: bold (previously default font-weight)
• Hover state of menu button:
  • background color: active-background (previously no background color)
• Menu button/item dimensions:
  • padding: { horizontal: '12px', vertical: '6px' } (previously 12px all sides)
  • border-radius: 4px (previously 8px)

RadioButton

• Border:
  • color: border (previously control)
  • width: xsmall(previously not set)
• Check:
  • color: selected-background (previously text-strong)
  • background: background-front (previously not set)
  • Check Size:
    • radioButton.icons.circle: <circle cx="12" cy="12" r="8" /> (is now a larger circle, previously used Grommet's default which is <circle cx="12" cy="12" r="6" />)
• Color:
  • color: selected-background (previously text-strong)
• Hover state:
  • background color (of entire container surrounding checkbox and label): background-contrast (previously black hover on border of radiobutton)
• Gap between checked and label:
  • gap: xsmall (previously medium 24px)
• Width:
  • width: auto (previously not set)
• Padding:
  • pad-vertical:theme.global.edgeSize.xxsmall 3px (previously not set)
  • pad-horizontal:theme.global.edgeSize.xsmall 6px (previously not set)

1. When using RadioButtonGroup, gap between radio button options has been removed.

Tabs

• Tab has pad small on all sides as opposed to just horizontal
• Label:
  • color: text-strong (previously text-weak)
  • weight: bold (previously default)
• Border:
  • bottom border expands to fill width of box not occupied by Tabs
• Active state:
  • background color: background-contrast (previously no background color)
  • label color: text
• Hover state:
  • background color: background-contrast (previously no background color)
  • border color: remains as border
  • label color: text (previously became darker)
• Disabled state:
  • label color: text-weak
  • border color: border-weak
  • Previously, opacity was affected instead of changing color

Select

• Icon Direction:
  • Select Closed: FormDown
  • Select Open: FormUp (previously FormDown)

TextArea, TextInput, and MaskedInput

• Value:
  • weight: 400 (previously 500)
• Padding: {horizontal: 'small', vertical: 'xsmall' } (previously small on all sides)
• Placeholder text:
  • color: text-weak (previously was not being applied)
• Disabled state:
  • text color: text-weak
  • border color: border-weak
  • Previously, opacity was affected instead of changing color
• Border:
  • border color is now a defined color that is a darker grey than the previous border color

New Features

Below are some new release of new components as well as their style changes.

CheckBoxGroup

CheckBoxGroup was recently added as a new component. This should be used when the user needs to select one or more options from a set of options.

DateInput

DateInput was recently added for users to have a better experience selecting a date or range of dates from a Calendar

• Calendar Icon:
  • Icon Size: small