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.

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