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.
- Added guidance and usage examples for when to use pagination.
- Published Figma designs for Pagination
- Spinner Page was added onto the site. Read more about spinner guidance
- The OWASP Security Scan was run to identify any security vulnerabilities in the Design System site. This is required to ensure full compliance with HPE standards.
The new Spinner component has been released on grommet stable branch.
- Add validation-ok and validation-warning to theme.
- Default Tip styling available on grommet-theme-hpe stable branch
- Guidance and code examples available on the Tooltip page
- Check out the new FileInput Component on the grommet stable branch.
- Check out the new Pagination Component on the grommet stable branch.
- Aligned layer component to match the figma files.
- Adds Wizard Title to WizardContext. Allows for step header description to be custom element
- Find out how to incorporate accessibility into design and development. Check out the page
- 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
- Updated the HPE theme to provide required label.
- Audited Design System site examples and updated background color usage aligning with background colors guidance.
- Enhanced ability to support button sizes in the HPE theme.
- Next steps are to incorporate button sizes into the HPE theme.
- Modified default elevation applied to Cards.
- Added example of a DateInput without a label to Figma.
- Headings now use
text-strongby default in the HPE Theme. Completes work begun weak ending January 16.
- Resolved issue related to updating form input values when name prop not present. Contribution from the Grommet community!
- Fixed issue regarding onBlur form validation.
- Implement Layer border-radii in HPE Theme to match Figma designs. Completes Layer theming work begun in December.
- Resolved column alignment bug. Contribution from the Grommet community!
- Resolved lag in hover styling https://github.com/grommet/grommet/issues/4881.
- 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.
- Cleaned up Figma component thumbnails.
- Provided proof of concept for custom Select implementation meeting requirement use case.
- 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.
- Completed InfiniteScroll design direction.
- Advanced the work-in-progress by incorporating review feedback and t-shirt sizing. Play with Pagination behavior and/or follow the pull request progress.
- Completed ideation phase and finalized design direction for ToolTip. A special thanks to @Maggie Silva for her contributions to ToolTip.
- Completed ideation for a refreshed home page experience. The live version is coming soon.
- Published the What's New page.
- Headings in the Figma library have been updated to use
text-strong. - TODO: Apply
text-strongas default in HPE Theme.
- 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.
- Added an example for an Anchor with weight to the Anchor page.
- Added custom theming capabilities for the proposed Pagination Grommet component. Play with Pagination behavior and/or follow the pull request progress.
- Began implementation of the "What's New" page.
- Fixed error preventing Grommet Docs site to deploy properly.
- Decision has been made to make
text-strongthe default font color for Headings. Previously, Headings defaulted to colortext.
- 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.
- 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.
- 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.
Happy holidays to all. See you in 2021!
- Added background context and criteria for how the "green" colors in the HPE Theme were determined.
- 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.
- 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.
- Validation icon added to Select component within Figma. Check it out!
- 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.
- Aligned of Wizard examples in Figma and Design System site.