HPE
Design System
Foundation
Components
Templates
Extend

What's New

Track Design System announcements, new template patterns, guidance, and released components.

Our roadmap provides an idea for what is on the horizon. Our backlog provides greater detail about what is being worked on. Please share any feedback you may have regarding either via Slack.

Febuary 22-26, 2021

New Spinner Component on Grommet.

The new Spinner component has been released on grommet stable branch.

Add new validation colors

  • Add validation-ok and validation-warning to theme.

Added Tooltip to theme and site examples

  • Default Tip styling available on grommet-theme-hpe stable branch
  • Guidance and code examples available on the Tooltip page

Febuary 15-19, 2021

New FileInput Component

  • Check out the new FileInput Component on the grommet stable branch.

New Pagination Component

  • Check out the new Pagination Component on the grommet stable branch.

Layer

  • Aligned layer component to match the figma files.

Febuary 8-12, 2021

Homepage

  • Completed a fresh new look for our new HPE Design System home page.
  • Figma is updated as well

Updated Wizard template

  • Adds Wizard Title to WizardContext. Allows for step header description to be custom element

Febuary 1-5, 2021

Provided some content on our accessibility page.

  • Find out how to incorporate accessibility into design and development. Check out the page

Updated multiiselect example

  • Previously multiiselect was immediately closing after a user made a single selection this changed to add a close prop. Find details about this change here

Grommet 2.16.3 release

Update theme to handle formfield labels with required

  • Updated the HPE theme to provide required label.

January 24-30, 2021

Background colors

  • Audited Design System site examples and updated background color usage aligning with background colors guidance.

Button

  • Enhanced ability to support button sizes in the HPE theme.
  • Next steps are to incorporate button sizes into the HPE theme.

Cards

  • Modified default elevation applied to Cards.

DateInput

  • Added example of a DateInput without a label to Figma.

Headings

  • Headings now use text-strong by default in the HPE Theme. Completes work begun weak ending January 16.

Form

  • Resolved issue related to updating form input values when name prop not present. Contribution from the Grommet community!
  • Fixed issue regarding onBlur form validation.

Layer

  • Implement Layer border-radii in HPE Theme to match Figma designs. Completes Layer theming work begun in December.

Table

  • Resolved column alignment bug. Contribution from the Grommet community!
  • Resolved lag in hover styling https://github.com/grommet/grommet/issues/4881.

Wizard

  • Incorporated updated Wizard designs based on feedback. Notable changes include:
  • Wizard header now has a background of background-contrast.
  • Step titles are now using h1, size="small".
  • Tightened up spacing between step number, step title, and step description.

Miscellaneous

  • Cleaned up Figma component thumbnails.
  • Provided proof of concept for custom Select implementation meeting requirement use case.

January 17-23, 2021

Background colors

  • Incorporated feedback and addressed clarifying questions:
    • Provided additional guidance on what to consider when selecting a basic or layered approach.
    • Added an example and guidance for using the basic layout with cards.
    • Added examples clarifying how an application header should appear and behave when it is a fixed header and another for when the header scrolls with the content.

InfiniteScroll

  • Completed InfiniteScroll design direction.

Pagination

  • Advanced the work-in-progress by incorporating review feedback and t-shirt sizing. Play with Pagination behavior and/or follow the pull request progress.

ToolTip

  • Completed ideation phase and finalized design direction for ToolTip. A special thanks to @Maggie Silva for her contributions to ToolTip.

Miscellaneous

  • Completed ideation for a refreshed home page experience. The live version is coming soon.
  • Published the What's New page.

January 10-16, 2021

Headings - 1.16.2021

  • Headings in the Figma library have been updated to use text-strong.
  • TODO: Apply text-strong as default in HPE Theme.

Background colors

  • Published a new page providing guidance for how to apply background colors in your application layout. We've already received great feedback and identified areas which need to be addressed.

Anchor

  • Added an example for an Anchor with weight to the Anchor page.

Pagination

  • Added custom theming capabilities for the proposed Pagination Grommet component. Play with Pagination behavior and/or follow the pull request progress.

Miscellaneous

  • Began implementation of the "What's New" page.
  • Fixed error preventing Grommet Docs site to deploy properly.

January 3-9, 2021

Headings

  • Decision has been made to make text-strong
    the default font color for Headings. Previously, Headings defaulted to color text
    .

Pagination

  • Made pagination controls respect a uniform width for the proposed Pagination Grommet component.
  • Added abillity to control the sizing of pagination controls via "t-shirt sizing."
  • Explored approaches for allowing custom theming capabilities.
  • Play with Pagination behavior and/or follow the pull request progress.

Searching & Filtering

  • Additional guidance was requested for how the text should read in a situation after a user has filtered a set of table results and selected rows from the filtered table. That work is represented in this issue.

Miscellaneous

  • Fixed order of plot points in Chart.
  • Enhanced Layer to allow elevation to be controlled via theme, and set default elevation of 'large' in HPE Theme.
  • Made casing of form validation errors consistent across Form examples.

December 20, 2020 - January 2, 2021

Happy holidays to all. See you in 2021!


December 13-19, 2020

Colors

  • Added background context and criteria for how the "green" colors in the HPE Theme were determined.

Miscellaneous - 12.19.2020

  • Fixed issue formatting disabled Calendar dates.
  • Fixed issue with Select with search
  • Enhance Layer theming to allow styling border radii.
  • Completed Ideation phase for What's New page with recommended design for implementation.

December 6-12, 2020

Tables

  • Hover effect on tables has been fixed. Check it out!
  • Table now has guidance on using unique identifiers in your table.
  • Table also has guidance for how interactive table cells look and behave.

Select

  • Validation icon added to Select component within Figma. Check it out!

Icons

  • Work to provide guidance for how and when to use icons in your designs has begun. We are in the Exploration phase of this work where we gather research, assemble use cases, etc. Check back soon.

Miscellaneous

  • Aligned of Wizard examples in Figma and Design System site.

© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback