What's New
Track Design System announcements, new template patterns, guidance, and released components.
Opportunities to engage
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.
April 2023
Grommet April release
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.
Brand refresh
- 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
"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.
Templates, patterns, and guidance
- A new pattern for displaying empty states is now available.
Figma component enhancements
- 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.
Learn
- Added Grid Fundamentals: Part One.
March 2023
Brand refresh
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
, andgrommet-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!
grommet v2.31.0
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.
Data
- Implemented Filtering examples using new Data components.
- Implemented DataTable Customization example using new Data components.
Templates, patterns, and guidance
- 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.
February 2023
Grommet v2.30.0
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.
Figma component enhancements
- 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.
Learn
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
January 2023
Grommet v2.29.0
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.
Templates, patterns, and guidance
- 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.
Figma component enhancements
- HPE Global Header component is now available.
- Refactored components:
Learn
- Added a How to add search and filter to DataTable with Data how-to guide.
December 2022
- 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.
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.
- We've made it easier to collect web analytics data (e.g navigation, layer and form interactions, and more) via
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
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 viaonActive
. - 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 combiningonClickRow
withonSelect
. - 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
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
totext-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 ofsecondary
.
- 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
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
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
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.
- 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
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 colortext
.
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.