What's New

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

Slack — Have questions? Want feedback? Can't find something? The hpe-design-system channel allows you to get prompt responses from HPE Design System team members as well as designers and developers consuming the design system throughout HPE.

Office hours — Held weekly on Thursdays, 8:00 AM PDT / 8:30 PM IST. Office hours are a flexible, easy-going forum to bring questions, discuss, provide point of view, or simply observe. It's a great opportunity for us all to learn, grow, and contribute to the HPE Design System. Open to all. Contact HPE Design System team for a calendar invite.

Grommet v2.32.0 is here! This release includes new Button busy and success props to support an animation while Button is in a busy or success state. Also included are accessibility enhancements, improvements for using grommet in a shadow root, bug fixes for DataTable and SelectMultiple and lots more! Checkout the full release notes.

• All "brand refresh" stylings have been applied to all components and are now available within Figma.
• To view details on how to migrate to the new theme or troubleshoot common Figma problems, check out the Figma migration guide.
• For devlopers, here's the grommet-theme-hpe migration guide.

"Data" is a new category of Grommet components which make is easy to display, manage, and interact with data collections. These components are currently in beta. Check them out and let us know what you think!

• Added DataTableGroupBy.

• A new pattern for displaying empty states is now available.

• Figma Tag component now supports t-shirt sizes.
• Colors for placeholder and disabled text have been corrected for the following Figma components. Previously, the placeholder text was xweak. It has been updated to use the correct color, text-weak to meet proper color contrast ratios.
  • Checkbox
  • CheckboxGroup
  • RadioButton
  • RadioButtonGroup
  • TextInput
  • Layer

• Added Grid Fundamentals: Part One.

grommet-theme-hpe v5 was published.

New

• Brand-refresh styles for HPE product experiences - From updated buttons to refined typography, v5 supports HPE's brand strategy by delivering the latest brand expression for HPE products.
• Enhanced support for marketing experiences - In addition to updated styles for product experiences, v5 of the theme also introduces a special extension of the HPE theme tailored for HPE marketing sites. This release features scaled-up typography aiding discovery and story-telling showcasing how HPE helps customers in their edge-to-cloud journey. For example, the HPE Design System site now uses the “web type scale,” but uses the “product type scale” in all inline product examples.

What you can do right now

• What, why, and how - Read the HPE theme guide for Migrating from v4 to v5 to understand what styles were updated and how they align to the latest brand direction.
• Get the new theme - Upgrade to the latest versions of grommet-theme-hpe, grommet, and grommet-icons to start building with all the capabilities of the new theme.

Coming soon

• Updated Figma components - The HPE Design System Figma library is in the process of being updated to reflect all of the latest changes. These updates will be published in the coming weeks.
• Share-out invites - Be on the lookout for an invitation to learn more about the motivations driving the brand-refresh, how the updated HPE theme supports it, a tour of the changes you will see, and tips for how to get up to date with the latest styles.

Please share any comments and reach out with any questions!

This release includes the addition of pad property on Button, improved responsive typography behavior of PageHeader, as well as fixes to CheckBox, FormField, and SelectMultiple.

Features in beta Grommet community, Data and related components are features currently in beta and provide ways to conveniently present, manage, and manipulate a variety of data collections. Please check them out and share your thoughts and feedback.

For full details, check out the release notes.

• Implemented Filtering examples using new Data components.
• Implemented DataTable Customization example using new Data components.

• Added list & table templates to Figma.
• Added detail/object view templates to Figma.
• Updated tabs styling based on new brand refresh changes.
• Layers now have overflow property to ensure that the content does not exceed the container, making it easier for user to view all filter content.
• For accessibility, card titles now semantically correct heading levels instead of text.
• For accessibility, changed DateInput's month and year to use Text instead of Heading.

This release includes enhancements to Button, Layer, Skeleton, and TextInput as well as fixes to Data, DataTable, DataFilters, DataSearch, DataSort, Drop, DropButton, Layer and WorldMap.

For more details, see the release notes.

• Icon swapping - Now, when you do an icon instance swap, the icon's color will automatically apply the correct color when changing between states.
• DateInput component now supports days of the week.
• Page templates - Home page Figma template has been completed.

The HPE Design System now features learn which is a new home to tutorials and how-to guides. This section of the site will be populated with resources to help designers and developers learn implementation approaches, best practices, and level-up their skills.

• Published The Box Model: Part One

NEW StarRating & NEW ThumbsRating input components.

NEW BETA components (the API of components in beta are subject to change):

• Data - acts as a provider to manage search and filter capabilities on data collections.
• DataFilter, DataFilters, DataSearch, DataSort, DataSummary, Toolbar - components that allow you to further customize how search and filter render in your layout
• Cards - allows you to render a set of cards within Data to leverage Data’s turnkey search and filter capabilities Feel free to check them out and send us your feedback. Stories can be found under Data folder in storybook

This release includes enhancements to Box, Form, FormField, as well as fixes to Collapsible, DataTable and Select. For more details, see the full release notes.

• Collecting feedback from users pattern was added to support collection of customer analytics and insights from within product experiences.
• Skeleton component supporting data loading states is now available.

• HPE Global Header component is now available.
• Refactored components:
  • CheckBox
  • CheckBoxGroup
  • RadioButton
  • RadioButtonGroup
  • Tip
  • Feedback

• Added a How to add search and filter to DataTable with Data how-to guide.

• Layer
  • New refactored Layer components are available in Figma including center layers, side drawers and fullscreen layers.
• Feedback Component
  • Completed two variants of Feedback which can be found in Figma. For flexibility, we’ve also implemented a variant using slots.
• Managing Child Objects
  • Added an example and guidance on how to manage child objects within a form.
• Card
  • We’ve added new Card examples and guidance on our site.
• Menu
  • New refactored Menu component available in Figma.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

Happy Holidays 🎉

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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

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

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.

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

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

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

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

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

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

• 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

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

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

• Began research explorations for Navigation.

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

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

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

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

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

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

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

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

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

• 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

• 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

• Added guidance and examples for Tip

• 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

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

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

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

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

• Ordering of Items research was completed.

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

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

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

• 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-strong by default in the HPE Theme. Completes work begun week 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.

• Resolved spacing issue between icons within Tabs in Figma.

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

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

• 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-strong as 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-strong the default font color for Headings. Previously, Headings defaulted to color text.

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

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