Shimi Yacobi

New Grommet release offers new components and improves accessibility

October 8, 2020

With the help of our rock star community, the Grommet team has been able to continuously introduce new components and enhancements. As a matter of fact, at least 10 new components have been added over the last several months. The most recent release, Grommet 2.15.0, features two new components – Card and DateInput – along with enhancements to others, like DataChart and SkipLinks.

The new Card component works as a container of information that delivers a wide variety of content, contextual background colors, and powerful display options. The new Grommet Card component provides options to customize a header, body, and footer using CardHeader, CardBody, and CardFooter components. The new DateInput component offers developers a high level of control for date range input, from a single date to a range of dates, through numerous specified properties.

One of the more interesting enhancements came from work we’ve been doing with the HPE GreenLake Cloud Services organization to help visualize AI data charting through the DataChart component. By extending the DataChart API, we were able to better visually represent 4-dimensional data and complex chart combinations.

4 dimensions

complex charts

Accessibility received a lot of attention in this release. SkipLinks, in particular, has been reworked significantly to align with Web Content Accessibility Guidelines (WCAG). The behavior of the SkipLinks component has been improved to allow the layer to open with a keyboard tab, edit SkipLinks messages, and enable access to interactive elements when the SkipLinks layer is shown. Other accessibility enhancements include the addition of messages prop to Video and a11yTitle support to TextArea.

We had an impressive list of contributors to this release. We’re so grateful for your collaboration. We’d like to also extend our thanks to our stable branch (beta test) users. Without your help in testing all the different elements before they were fully baked, we could never have gotten so far so fast. Thank you for all the feedback you gave us to make Grommet 2.15.0 such an exciting release. The information you provided on the new DateInput component was particularly valuable. Your input will help us ensure that we meet the needs of real world use cases such as yours, while offering flexibility for future implementations.

You can find details of all the enhancements in this newest version in the release notes. For more examples on how to use these components, check out Storybook here or go directly to: - Card - DateInput - DataChart - SkipLinks


Dale Rensing

Why Open Source is more than Software: The Example of the Linux Foundation's AgStack project

Jun 1, 2022
Denis Choukroun

Deep Learning Model Training – A First-Time User’s Experience with Determined – Part 2

May 3, 2022
Didier Lalli

Calling all developers… Make your voices heard!

May 28, 2021
Joel Baxter & Kartik Mathur & Don Wake

Building Dynamic Machine Learning Pipelines with KubeDirector

Aug 14, 2020
Vinicius Monteiro

Coding styles: A personal preference or bad practice?

Oct 22, 2021
Didier Lalli

Infrastructure-as-code on HPE GreenLake using Terraform

Mar 8, 2022
Dale Rensing

Becoming a Linux Kernel Contributor: Following the Journey of Souptick Joarder

Apr 26, 2022
Nicolas Perez

Apache Spark as a Distributed SQL Engine

Jan 7, 2021

HPE Developer Newsletter

Stay in the loop.

Sign up for the HPE Developer Newsletter or visit the Newsletter Archive to see past content.

By clicking on “Subscribe Now”, I agree to HPE sending me personalized email communication about HPE and select HPE-Partner products, services, offers and events. I understand that my email address will be used in accordance with HPE Privacy Statement. You may unsubscribe from receiving HPE and HPE-Partner news and offers at any time by clicking on the Unsubscribe button at the bottom of the newsletter.

For more information on how HPE manages, uses, and protects your personal data please refer to HPE Privacy Statement.