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.

November 2022

  • Avatar
    • We've added Avatar guidance and examples and Figma component.
  • Wizard
    • We've added Wizard anatomy guidance.
  • Global Header
    • Refactored Figma component.
  • SelectMultiple
    • Refactored Figma component.

October 2022

  • HPE Brand Refresh
    • We've published a new grommet-theme-hpe with the latest HPE brand styling.
    • We've added distinctive brand assets guidance and examples.
    • We've added new Button kinds for call-to-action buttons, 'cta-primary' and 'cta-alternate', plus guidance for when and how to use them.
    • Aligned with Brand guidance, we've updated the capitalization guidance towards using mostly sentence case.
  • Header
    • We've added guidance on various types of Headers.
  • CheckBox
    • We've enhanced guidance for using a CheckBox outside of a FormField.
    • Refactored Figma component.
  • Menu
    • We've updated the styling for grouped Menu items.
  • Feedback
    • We've added an enhanced Feedback mechanism on the HPE Design System site. Hint, there's a button in the bottom right corner on every page. Check it out! This is integrated with Qualtrics.
  • Button
    • Refactored Figma component.
  • DataTable
    • Enhanced customization in Figma.

September 2022

  • Card
    • We've enhanced Card guidance and examples.
    • We've added call to action card and navigational card examples and guidance.
  • SelectMultiple
    • We've added a SelectMultiple component which improves the display and interaction behaviors for selecting multiple options from a select list.

August 2022

  • Form
    • We've added guidance on where to present a form.
    • We've added examples and guidance for full-page forms.
  • DataTable
    • We've created a Figma component for DataTable customization.
  • Analytics
    • We've made it easier to collect web analytics data (e.g navigation, layer and form interactions, and more) via onAnalytics and the Grommet component.

July 2022

  • Form
    • We've added guidance on accepting Terms and Conditions.
  • TextInput
    • Refactored Figma component.
  • DateInput
    • Refactored Figma component.
  • FileInput
    • Refactored Figma component.
  • Search
    • Refactored Figma component.
  • List
    • Refactored Figma component.

June 4, 2022 - July 8, 2022

Stay Current with the Latest Changes

  • Tabs
    • We've enhanced responsive behavior and updated the guidance.
  • Menu
    • We've added item grouping and added guidance for when to use it.

Roadmap Updates

  • Figma Component Refactoring
    • We're just about ready to announce the first version new input components. Thanks for all of the help we received.
  • Multi-Select
    • We've built several UI prototypes to gather detailed feedback and flesh out accessibility aspects. Thanks for all of the feedback we've received so far.
  • User Feedback and Analytics
    • We're working on components for collecting feedback from users.
  • Adoption Scorecard
    • We've begun testing out the details and refining the process via evaluating the latest HPE GreenLake COM UI.

April 11, 2022 - June 3, 2022

Stay Current with the Latest Changes

  • Page Header
    • Figma and Grommet components are now available along with design guidance and code examples.

Roadmap Updates

  • Figma Component Refactoring
    • We are currently working on input components. Thanks for all of the help we've received from folks across HPE in this effort.
  • Multi-Select
    • Wrapping up basic anatomy and focusing on how to represent the current selection.
  • Adoption Scorecard
    • Working on initial draft version of a spreadsheet to evaluate how well products and services are aligned to the HPE Design System. Look for more to come in this area soon.

Latest Releases

  • grommet v2.24.0 + grommet-theme-hpe v3.1.0

    • Added a NEW PageHeader component.
    • List now supports disabled items and will indicate which item is currently active via onActive.
    • For more details, see the release notes
  • grommet v2.23.0 + grommet-theme-hpe v3.0.1

    • Support for ReactJS v18
    • sticky Header
    • Accessibility improvements including List and Menu a11yTitle, Video scrubbing via the keyboard.
    • DataTable now supports disabled rows and allows combining onClickRow with onSelect.
    • For more details, see the Grommet release notes and Theme release notes.

April 4, 2022 - April 8, 2022

Latest Releases

  • grommet-theme-hpe v3.0.0 - This release provides additional responsive breakpoints helping deliver the optimal user experience for HPE customers.
    • Gain precise control over how page layouts respond and adapt.
    • Implement grid layouts, such as a dashboard of cards, which gracefully adapt and flow.
    • Is your application currently consuming Grommet's ResponsiveContext? If so, the additional breakpoints are breaking changes from v2 and may require minor code changes to ensure backwards compatibility. A migration guide is available to make this a smooth process.

March 9, 2022 - April 1, 2022

Communications

  • To help scale and accelerate Design System feature delivery, we are actively working on a process for receiving design contributions from members outside of the Design System core team. Initially, designers will be able to leverage Figma's Branching feature to contribute small fixes and medium enhancements while the process is tested and refined. Stay tuned!

Roadmap Updates

  • Page Layouts
    • Updated the Page Layouts Figma file to reflect new Page component in Grommet. Page component guidance and examples coming soon to the Design System site.
  • Global Banner Notifications
    • Guidance and examples for Global Banner Notifications are now available.
    • Styling is supplied by the HPE Theme and available on grommet-theme-hpe v2.4.0.
  • Page Header
    • Began work to standardize Page Headers across HPE applications. The scope of this work is to define how page titles, page level actions, and contextual information should be displayed.
  • Tabs
    • Began working with stakeholders to understand uses cases and standardize scenarios with more than 5 Tabs across HPE applications. The scope of this work is to define how to visually display tabs across different resolutions.

Stay Current with the Latest Changes

  • Want to know how to create dynamic, responsive layouts? Gain a better understanding Grid's capabilities and how to master this component to create dynamic layouts.
  • Added an example of a Form with a single required FormField on the site.
  • FileInput - The remove file action is now represented by the Close icon instead of the Trash icon. This aligns the icon more closely with the action it is representing (the Trash icon was associated with destroy/delete/unrecoverable, which is not the case in removing a file from a FileInput). This change has been made in the Figma component and is available in the grommet-hpe-theme v2.4.0.
  • Figma changes
    • Improved auto layout behaviors in Select, TextInput, and TextArea which resolves resizing and wrapping issues in Figma.
    • Tabs - Previously in Figma you were not able to swap between variants, you can now swap to the selected instance without any issues.

Latest Releases

  • Grommet v2.22.0 - Release includes NEW Page and PageContent components which allow for consistent page layout implementation across HPE applications, as well as accessibility improvements to RangeInput, Menu, and Select components. Full details about this release are available in the Release Notes.
  • grommet-theme-hpe v2.4.0 - Some features of the release include:
    • NEW Banner Notifications styling.
    • NEW Page component styling.
    • Changed value of text-weak to pass color contrast requirements and can be used for text when a more subtle treatment is desired. text-xweak is recommended for disabled text.
    • For a more detailed look at these enhancements, check out the release notes.

February 14 - March 4, 2022

Communications

  • Office Hours - We have combined our two office hours into one which will be held every Wednesday, 10:00 PM IST / 8:00 AM PST. This office hours is open to all. Contact Kamlesh Thakur, if you would like a calendar invite.

Roadmap Updates

  • Page Layouts
    • Added Page component in Grommet which makes implementing page layout guidance and page widths super easy. The Page component is available on Grommet's Stable branch for beta use and community feedback. HPE Theme and Design System documentation for the Page component is coming soon.
    • Added layout templates to Figma for each breakpoint with ability to add columns and customize widths as needed. Super neat! Be sure to check them out.
    • Completed dashboard template for a 3 column dashboard layout.
  • Page Header - Completed research and gathered use cases for Page Header and began design ideation.
  • Banner Notification
    • Completed ideation on Global Banner Notifications.
    • Added support for Global Banners and actions to Grommet's Notification component.
    • Guidance, theme updates, and implementation examples for Global Banner Notifications are coming soon.

Stay current with the latest changes

  • Menu - Added an example of Menu in a toolbar. This pattern displays a search input, filter button, and action menu presented as a unified set of controls. The intent is to present each control with equal prominence.

Latest Releases

  • Grommet v2.20.1 - Release includes enhancements including (but not limited to): Notification toast position, DataChart type additions, Tag size prop, DateInput icon customization. Full details about this release are available in the Release Notes.

January 24 - February 11, 2022

HPE theme breaking change

Text-Weak - To meet accessibility requirements, the color value for text-weak is changing from #BBBBBB to #757575 for light mode and from #606B7D to #8C98AA for dark mode. A new namespace text-xweak is being added with the value #BBBBBB for light mode and #606B7D for dark mode.

The new text-weak value passed WCAG AA contrast values. #BBBBBB and #606B7D will remain the value for disabled fonts.

We would like to hear any feedback on this change ahead of the the next release of the HPE Theme. To test out this new change, apply the theme's stable branch to your project by following these directions. This is a breaking change that will be in the next HPE theme release which will be published in March.

Communications

  • Office Hours - India office hours will be held every other Thursday, 9:00 PM IST / 7:30 AM PST. This office hours is open to all. Contact Kamlesh Thakur, if you would like a calendar invite.

Roadmap Updates

  • Page Layouts
    • Published Content Layouts page with provides guidance for designing for responsiveness, responsive breakpoints and page margins.
    • Began publishing a collection of page layout templates and dashboard templates which provide customizable templates for design and development.
    • Collaborating with UCEP to align the Global Header/Footer Service with page layouts guidelines. Provided proof-of-concept project to deliver the HPE Global Header as a Web Component.
  • No Data - Added guidance and example displaying empty/missing values in a NameValueList.
  • Navigation - Published five types of navigation patterns, the strengths for each, and when to use.

Stay current with the latest changes

  • Toast Notifications - Enhanced ability to allow greater control over placement of Toast Notifications. Make sure you are aware of the trade-offs associated with placement design decisions.
  • Accessibility - Do you know the 4 core principles of accessibility? Read up on what it means to be perceivable, operable, understandable, and robust.
  • Buttons - Have "grouped buttons?" What types of buttons can be appear together? How should they be ordered? How should they be aligned? See button ordering for more detail.

Latest Releases

  • Grommet v2.20.1 was released which includes an enhancement allowing form validation to occur "onMount" for controlled input forms, and bug fixes for "double focus on Select with search," DateInput formatting, Button icon alignment, and styling for TextInput with suggestions.

January 4 - January 21, 2022

Roadmap Updates

  • Tag - Completed guidance for Tag.
  • Navigation - Completed research and ideations for Ascending Navigation.
  • Button - Updated font color on Default Button active state from text to text-strong.
  • Page Layouts
    • Completed Dashboard template for a 2 column layout.
    • Shared status update with the Design System Council on January 20, 2022.
    • Completed the definition, scope, and anatomy of Page Layouts.
    • Created guidelines for the Page Container, including defining 3 types of content widths: Wide, Narrow and Full.
    • Defined new breakpoints and page margins for each breakpoint.
    • Work in progress for Page Layout templates, starting with 2 column, 3 column and multi-column Dashboards.

Stay current with the latest changes

  • Persistent Sidebar to be deprecated by end of year - In preparation for the deprecation of the Persistent Sidebar in Design System, we have removed any examples and documentation surrounding its use.

Latest Releases

  • Grommet v2.20.0 - Release includes the NEW Tag component along with enhancements to Calendar, Carousel, DateInput, Form, Video; fixes applied to Anchor, Button, Calendar, Clock, Select, Text, and TextInput. Full details about this release are available in the Release Notes.

December 24 - January 3, 2022

Happy Holidays 🎉

December 20 - 23, 2021

Roadmap Updates

  • NameValueList - Created variant demonstrating how editable horizontal form fields may be displayed within Name-Value Lists.

Stay current with the latest changes

  • Toast Notifications - Updated the following guidance for toast notifications:
    • When a toast notification should be used.
    • Aria attributes which should be present for toast notification accessibility.

December 6 - December 17, 2021

Roadmap Updates

  • Button
    • Completed guidance on placement of the Cancel Button in a Form and Modal.
    • Updated Figma with the new hover states for Primary and Color Buttons and published within the HPE theme.
    • Updated Button Figma file on Cancel Buttons to use default styling in Forms and Modals instead of secondary.
  • Tag
    • Started explorations and ideations for Tags component.
  • Navigation
    • Began ideation for Matrix Navigation.
    • Started ideation for Reverse Navigation.
    • Provided guidance and examples on Sidebar for Side-to-Side Navigation.
    • Finalized ideating and creating documentation for Matrix Navigation.
    • Finalized ideation for Global Header within Side-to-Side Navigation.
  • Page Layouts
    • Started an overview of Page Layouts that provides definitions and an anatomy.
    • Commenced ideation and documentation such as responsive design, breakpoints, and padding on containers within Page Layouts.

November 22 - December 3, 2021

Roadmap Updates

  • Button
    • Added guidance on the ordering of buttons on a form, layer. Updates are available on Design System site.
    • Started exploration around if Cancel Buttons should be primary or secondary.
    • Completed guidance for button positioning on wizards and modals..
    • Guidance on left vs right aligned buttons published to Design System site.
    • Re-visited hover state for primary button and updated color.
  • Navigation
    • Began explorations for Reverse Navigation.
    • Started exploration of Matrix Navigation.

Stay current with the latest changes

  • Added trash icon to FileInput validation example on Design System site.
  • Changed the cog icon on ordering of items to column icon based on outcomes of a user study.

November 8 - November 19, 2021

Communications

  • Office Hours - A second office hours will be held on Thursdays, 9:00 PM IST / 7:30 AM PST. This office hours is open to all. Contact us if you would like an invite.
  • Figma Guide - A new guide to level-up your Figma skills. Whether you are onboarding or a Figma power user, there's content for you from fundamentals, to auto-layout, to interactive prototyping — plus fun tips and tricks too!

Roadmap Updates

  • NameValueList. The NEW NameValueList component and guidance have been published and is available in Figma and on the Design System site.
  • Navigation. Added guidance and examples for Drill Down Navigation using cards, lists, and tables.
  • Button Guidance. Left aligned? Right aligned? Read the latest guidance for how buttons should be aligned in various contexts.

Stay current with the latest changes

  • Tables - Presenting state and statuses in table data can occupy valuable real-estate. View these recommendations for displaying states and statuses within a table.
  • Checkbox - Checkboxes may now be vertically aligned when accompanied by a multi-line label such as your favorite "I accept the Terms of Use and Privacy Policy".
  • FileInput - Following up on an Office Hours request, examples for how file input validation should appear have been added to the Design System site and Figma.

Latest Releases

  • Grommet v2.19.0 - Release includes the NEW NameValueList component along with enhancements to DataTable, FileInput, FormField and RangeInput. For a comprehensive list of enhancements and fixes, see the Release Notes.
  • Grommet-theme-hpe v2.3.0 - Release includes alignments of input dimensions and RangeInput to Figma, fixes to DataTable pinned background to work in both light and dark modes, and more. For more details, see the Release Notes.
  • Grommet-Icons v4.7.0 - Release includes the NEW HomeRounded icon. See the Release Notes for details.

October 25 - November 5, 2021

Hacktoberfest

  • Grommet completed the month-long Hacktoberfest event which encourages support and contributions to open source projects. This year 79 pull requests were merged addressing TypeScript support and type testing, support for Storybook theming, and a smattering of bug fixes and other enhancements.

"Big Things" progress updates

Here are the latest developments regarding roadmap items:

  • NameValueList. Styling for NameValueList and NameValuePairs are now available in the HPE Theme.
  • Page Layouts. Shared milestones and timelines with the Design System Council on November 3, 2021.
  • Tags. Grommet pull request for a new Tag component has been submitted and is under review.
  • Refresh Navigation. Shared card-based navigation patterns, solicited and incorporated feedback. See Figma for reference.
  • Site Search. Enhanced the search experience on the Design System site providing expanded search result set, content previews, and more.
  • Button Guidance. Fixed Figma library button icon variants for small and large buttons.
  • Accessibility Resources.
    • Added collection of designer and software developer guides covering accessibility topics such as "complex images in software," "treatment of links and hyperlinks," "evaluation tools," and more.
    • Published a collection of short accessible product design videos covering topics such as "tab order and on-screen focus," "layout and page structure," and more.

October 18-22, 2021

NEW NameValueList

  • Looking to display key-value pairs cleanly, consistently, and semantically correct? NEW NameValueList component is now available on Grommet. HPE theming and guidance will follow soon.

Stay current with the latest guidance

  • How should card elevation be handled? What should I do if my card has multiple interactive elements? Can cards have multiple interactive elements? View the new Card interactions guidance and updated card example implementations.
  • Guidance for required and optional fields has been refined. Read the updated guidance and research.

"Big Things" progress updates

Here are the latest developments regarding roadmap items:

  • NameValueList. See above.
  • Page Layouts. Page layout executions and use cases have been collected across teams and synthesized to identify common templates. Creation of dashboard templates will be prioritized, followed by wizards, lists, and tables.
  • Tags. Or, are they labels? Custom attributes? Chips? Jury says... tags! A special thanks to Greg Furuiye for his contributions to tag research, explorations, ideations, and initial guidance — contributions help a ton! Next steps are to assemble guidance and examples for the Design System site. Plus, development on the supporting Grommet Tag component has begun.
  • Refresh Navigation. Completed research and exploration for card-based navigation.

Communications

  • Office Hours - A second, timezone-friendly option for office hours will soon be offered to ensure questions across all teams are addressed. Scheduling is in the works.

October 4-15, 2021

Stay current with the latest guidance

  • HPE theming and guidance have been added for displaying Code Blocks within applications.

"Big Things" progress updates

Here are the latest developments regarding roadmap items:

  • NameValueList.
    • Grommet component API and development is ready for review.
    • Completed designs for NameValueList and handed off for development.
  • Page Layouts. Defined maximum and minimum page widths and associated breakpoints.
  • Refresh Navigation. Shared tab-based navigation patterns, solicited and incorporated feedback. See Figma for reference.
  • Button Guidance. How should buttons be used within and to control layers? Answer, it depends on the layer's function. Guidance for layer types and their interactivity has been added, accompanied by updated example implementations.
  • Accessibility Page Improvements. Added Government Standards and Regulations resources, calling attention to the policies and how they may affect your work product.

Communications

  • Completed workshops related to consumers of the Design System, identifying areas for improve the process for communicating new components and component requests.
  • Began drafting a "Figma getting started guide" to help onboard designers and provide best practices when consuming component libraries.

September 20 - October 1, 2021

  • Kicked off the HPE Design System Council, a steering committee for defining key initiatives and priorities.
  • Began holding Design System "office hours" each Wednesday morning. Bring your questions and topics for discussion. Contact the #hpe-design-system channel on Slack to request a calendar invite.
  • New resources and a checklist has been added to the Accessibility page.
  • Fixed height on DataTable examples when in full screen.
  • Completed Button size designs.
  • Completed ideation and collected feedback for NameValueList designs.
  • Provides "request for comments" pull requests for Grommet NameValueList component. Approach 1. Approach 2.
  • Improved DateInput and Calendar keyboard accessibility behavior.
  • Provided additional accessibility resources from the Product Accessibility Office on the Accessibility page.
  • Implemented improved site search capabilities on the HPE Design System site.
  • Completed categorization and naming for Navigation patterns.
  • Released Grommet v2.18.0.

September 6 - September 17, 2021

  • Completed research on task focused navigation.
  • Completed usability testing on toggle buttons and sortable columns within a table with an expert screen reader user.
  • Ideation on Navigation coming to a finish.
  • Added guidance for toggle icon buttons.
  • Added t-shirt sizing for buttons. Figma publishing coming soon!
  • Enhanced List to support top-alignment and added guidance for multi-line lists.
  • Enhanced a11yText on our light/dark mode button within the HPE Design System header navigation.
  • Aligned Toolbar Button hover implementation with Figma.
  • Aligned RangeInput component to Grommet. Figma file coming soon!
  • Advanced Design System site search capabilities. Work in progress.

August 30 - September 3, 2021

  • Published Notifications page.
  • Published Toast Notifications.
  • Published Status Indicators template page.
  • Updated all examples referencing "status" to apply the new Status Indicators guidance.

August 23 - August 27, 2021

  • Published the Notification and Toast Notifications & Status Indicator content with examples.
  • Updated Toolbar Button to include an icon-only variant and changed stroke from 2px to 1px.
  • Updated Default Button in Figma to align with the Design System site by removing the background color.
  • Updated name for "Tooltip" component in Figma library to "Tip" to align with the Design System site.
  • Added numerical values labeling each end of RangeInput.
  • The actions menu is now styled to match the new Toolbar Button.

July 19-23, 2021

  • Iterated on Notifications taxonomy based on research results.
  • Continued ideating on written guidance for Navigation.
  • Audited all of Figma files to ensure correct use of MetricHPEXS font.

July 12-16, 2021

  • Began Notifications Taxonomy Survey.
  • Updated Header colors on DateInput component in Figma.
  • Removed Selected state from Menu on Figma file to align with Design System site.
  • Updated DataTable with Search value to match Filtering examples on Figma and Design System site.
  • Updated Select dropdown items on Figma file to use regular text weight rather than form value weight.
  • Updated TextInput dropdown items on Figma file to use regular text weight rather than form value weight.
  • Enhanced the way Menu is built on Figma by making it one component rather than a button with a list drop..
  • Updated Wizard Figma file to match the Design System site. Changes include: wizard header background color, spacing and text styling

July 5-9, 2021

  • Began ideation for Navigation guidance and examples.
  • Added guidance on how to determine the width of columns on a Table.

June 28 - July 2, 2021

  • Added [new Toolbar Button to Figma and its variants] ( https://www.figma.com/file/Oi5UEEQ33VCAyOKQcZ8Nr8/HPE-Button-Component?node-id=0%3A1).
  • Updated Form Figma file to include correct text styling. TextInput values were changed from text-strong to default text color.
  • Completed r{esearch for Navigation}(https://www.figma.com/file/b6hiokanRCwNnc93PpHdgQ/HPE-Design-System-Navigation?node-id=1%3A18).

June 21-25, 2021

  • Began research explorations for Navigation.

July 26-30, 2021

  • Updated Form examples on Design System site to use semantically correct headings and font color.

August 23-27, 2021

  • Added examples to Tip to display the different sizes and how it can be used within a Table.

June 14-18, 2021

  • Released grommet-icons v4.6.0! Check out the Release Notes.
  • Added download links for MetricHPEXS for offline usage.
  • Enhanced filtering examples to demonstrate Filtering with a table containing selectable rows.
  • Added guidance for setting the width of a DataTable.
  • Added a CheckBox variant of "checked" to Figma for Table headers.
  • Aligned the CheckBox component in Figma with the Design System site to include a border on hover.

June 7-11, 2021

  • Released Grommet v2.17.3! Read the Release Notes.
  • Updated Wizard "Next" button mobile layout to match desktop layout
  • Added examples for how the order of items may be customized in a Table and List.
  • Provided instructions and guidance for implementing the latest HPE Global Header.

May 31 - June 4, 2021

  • Added guidance and examples for FileInput
  • Added kind="toolbar" to button in grommet-theme-hpe for use in Filter contexts. See how this button is used in Filtering examples.
  • Updated filtering pattern to use default Button instead of Anchor for "Clear Filters" control. View the Filtering examples on Design System site and Figma.

May 24-28, 2021

  • Began a "Getting Started with HPE Design System" starter application providing a step-by-step introduction to Grommet, grommet-theme-hpe, and developing with the Design System. Check out the repository: https://github.com/grommet/hpe-design-system-starter.

May 17-21, 2021

  • Added guidance for Spinner
  • Improved accessibility for Select by allowing callers to specify an a11yTitle.
  • Improved the Design System site experience for keyboard navigators and screen reader users by adding SkipLinks.
  • Completed gathering research and screen shots of the different types of Page Layouts.
  • Completed Page Layout designs in Figma.

May 10-14, 2021

  • Released grommet-theme-hpe v2.1.0! Read the Release Notes.
  • Created slides on why Principles are important for a Design System.

May 3-7, 2021

  • Improved accessibility of grouped form inputs in Grommet: https://github.com/grommet/grommet/pull/5209

April 26-30, 2021

  • Released Grommet v2.17.2! Read the Release Notes.
  • Provided example of CheckBox validation when not contained in a FormField.
  • Enhanced grommet-theme-hpe z-index for Layer and Drop to work with HPE Global Header: https://github.com/grommet/grommet-theme-hpe/pull/185

April 19-23, 2021

  • Added examples of text sizes 3xl, 4xl, 5xl, 6xl
  • Added text sizes of 3xl, 4xl, 5xl, and 6xl to Figma.
  • Updated Form examples: when referring to ZIP codes, the acronym should always be written as ZIP instead of Zip
  • Added guidance for CheckBox as a toggle.
  • Updated Figma to provide an example for a RadioButtonGroup without a FormField description.
  • Completed design ideations for Ordering of Items

April 12-16, 2021

  • Added guidance and examples for Tip

April 5-9, 2021

  • Updated Wizard guidance and patterns to demonstrate recommended behavior for width of the inputs and footer
  • Demonstrated how to use plain: true in DataTable columns to create clickable cells

March 29 - April 2, 2021

  • Updated guidance for user-entered input in Forms.
  • Updated guidance for considerations to make dashboards easier to consume.
  • Added guidance and an example for navigation from within a Table.

March 22-26, 2021

  • Added theming for Pagination and Spinner to grommet-theme-hpe
  • Completed ideation on FileInput.

March 15-19, 2021

  • Added a RadioButton Group with no description variant to Figma.

Published Pagination page and Figma designs

  • Added guidance and usage examples for when to use pagination.
  • Published Figma designs for Pagination

Published Spinner page

  • Spinner Page was added onto the site. Read more about spinner guidance

March 8-9, 2021

Conducted a design-sprint to discuss Page-Layouts

March 1-5, 2021

Ran OWASP security scan on the design-system site

  • 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.

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

  • Ordering of Items research was completed.

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

  • Updated Search Figma file to include drop suggestion examples to align with Design System site.
  • Updated TextInput Figma file to include drop suggestion examples to align with Design System site.

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 week 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.

Tabs

  • Resolved spacing issue between icons within Tabs in Figma.

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.

DateInput

  • Added a DateInput with no label to Figma to align with Design System site.

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.
  • Completed research on Principles and Values to enhancements to our own.

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.