Template library - Tracking issue

Template File Library

The scope of this work includes:

identifying assets to be included within the MVP of the new template file
- Existing + new assets
Creating an initial roadmap of prioritized assets to be included in the future
- Review assets from PAL + other libraries
Creating a new template file
- Define terminology (ex. what is a template, pattern, etc.?)
- Strategize discoverability
Migrating existing files + create new assets
- Devs should review new assets
- Refine existing assets as needed
Announce new template file

Identifying assets (Seamus + Kenny)

Within this first pass, let's aim to include simple and quick-to-make/refine assets

[x] Identify existing assets
- Form, DataTable, Wizard, Empty State, Card, Page Layouts, Pagination, Page layouts
[x] Identify new assets
- Service homepage, data collection toolbar, toggle button group, layer header, service header, breadcrumbs, reverse anchor
[x] Review among designers
[x] Review direction w/ Matt

Creating a roadmap of future assets (Seamus + Kenny)

[ ] Figure out where this roadmap should live
[x] Review PAL assets
[x] Identify and review other Figma libraries
[ ] Create roadmap
[x] Internal team share and review

Creating a template file

[x] Small FAQ section as to why changes are happening (Asif or Kurt)
- Better organization, discoverability, new assets, etc.
[ ] Define Figma terminology. Living document, doesn't need to be finalized. (Seamus + Kenny)
- What is a pattern, template, asset, component? If any, what are the different types of each?
- [x] Review w/ internal team
[ ] Create checklist of what each page should include (Seamus + Kenny)
- Quick summary of asset, relevant links, and tutorial on how to use asset
[ ] Create easy-to-use assets to quickly setup pages (Asif or Kurt)
- Preset frames
[ ] Review w/ internal team
[ ] Determine where WIP content should live
[ ] Publish library

Migrating + Creating assets (Asif + Kurt)

Once identified, old and new assets must be reviewed by 1 other designer and 1 other dev. For each item, make sure the items are:

Using the most up-to-date components
Correctly spaced and sized
Correctly following naming conventions
Appropriately grouped and that auto layout is applied when needed (review how the asset is being built)

Make note of any major issues, let's tackle those in separate individual tickets.

[x] Internal review + share out

EXISTING ASSETS

[ ] Forms
[ ] Wizard
[x] Empty State
[ ] Page Layouts - [ ] Move files to 'working files' folder and deprecate assets as needed

NEW ASSETS

[ ] Button group (componentize?)
[ ] Data Collection Toolbar
[ ] Pagination (I think this is more of a component that would not be part of the scope for this ticket)

Announcement

[ ] Identify key stakeholders to share out too
[ ] Share out to appropriate Slack channels
[ ] Share out in demo + OH
[ ] Setup feedback channel

OLD DELIVERABLES FOR REFERENCE

Tracking issue for template work.

Desired Templates

Controls

[ ] ActionMenu
[ ] ReverseAnchor
[x] ToggleButtonGroup

Layouts

[ ] ButtonGroup
[ ] ContentContainer
- [ ] https://github.com/grommet/hpe-design-system/issues/3501
[ ] EmptyState
[ ] LayerHeader
[ ] ModalDialog
- [ ] https://github.com/grommet/hpe-design-system/issues/3524
- [ ] ModalDialog template - Published coded template
- [ ] ModalDialog template - Guidance and examples added to HPE Design System site
[x] SideDrawer

Typography

[ ] TextEmphasis

This ticket aims to deliver a first draft of a design pattern library before the end of sprint.

We are to start designing form smaller organisms and on a following sprint we will assemble those into larger templates.

Phase 1

[x] Data collection toolbar
[x] Forms
[x] Layer Center
[x] Side Drawer
[x] Pagination Footer
[x] Toggle button toolbar

Phase 2

[ ] Review phase 1 & expand usecases
[ ] Card Variations
[ ] 'Containers'
[ ] Data collections
[ ] Table sticky header with overflow
[ ] Table sticky 1st column with overflow

For visibility of other patterns that have been suggested/built via PAL & Sandbox https://hpe-my.sharepoint.com/:x:/r/personal/seamus_leonard_hpe_com/Documents/Asset%20%26%20Template%20Review%20-%20PAL+SANDBOX.xlsx?d=w77af88ad44ea4da6a3787c5f27475ee1&csf=1&web=1&e=7zfk6V

@kurt-ph @KennyAtHPE

Review existing design templates & add comments that are in the “construction” file, start with Side drawer & Center layer.  @SeamusLeonardHPE will make edits based on feedback & copy over to the “public” file when agreed upon. 

Center Modal  

Side Drawer

Reviews will consist of

Fonts - all fonts use HPE styles (button medium is an exception)
Color styles are use HPE styles
Elevation uses HPE styles (where applicable, not all containers require eg form groups)
Padding, Gap, Border radius - All should adhere to HPE t-shirt sizing - inspect containers & auto-layout groups for adherence. 
Do the templates adhere to guidance (e.g. button alignment, order, centre modal is for concise confirmations or dialogs etc) 
Use components - Is the template build using current components everywhere possible (note I have broken name value pair out of name value list)
Deprecated - Comment on any “deprecated” components used, or nested inside published components.

Last check before adding to public library will include making sure auto-flow setting (fill/fixed/hug) are all correct & consistent .

Comments and discussion for furthering the project.

Gather and suggest other use cases for existing templates (Eg How else is side drawer used by other teams)
Comment anywhere that existing components break guidance (eg checkbox group offers 15 checkboxes, max recommended is 5)
Where we have had to detach a component, or build a custom design add a note to see if the design could be brought into the Design System.
What lessons learned, or external work can help us proceed.
What other common patterns can we build next week? Think containers for now cards.

 Complete the review & edits & announce the public library form Monday. 

Reviewed both the Side and Center layer pages

Fonts - all fonts use HPE styles (button medium is an exception)
- Some areas are using Normal/default rather than Paragraph/default. Everything else is fine.
  1. Color styles are use HPE styles
- All colors are using DS color styles
  1. Elevation uses HPE styles (where applicable, not all containers require eg form groups)
- Looked good to me. When the SelectMultiple component is opened then the dropdown elevation clashes with the layer but this is a Figma limitation. In code this would appear fine.
  1. Padding, Gap, Border radius - All should adhere to HPE t-shirt sizing - inspect containers & auto-layout groups for adherence. 
- Auto layout padding looks good.
  1. Do the templates adhere to guidance (e.g. button alignment, order, centre modal is for concise confirmations or dialogs etc) 
- Questionable for some layer-closing behaviors. Review comments in Figma for more info.
  1. Use components - Is the template build using current components everywhere possible (note I have broken name value pair out of name value list)
- Yes, but we should not be breaking NameValuePair out of the NameValueList. Same as in Grommet, the NameValuePair component cannot appear outside of a NameValueList component.
  1. Deprecated - Comment on any “deprecated” components used, or nested inside published components.
- Looks good but we are using the TextArea component in some areas which is fine but that component has not been (but needs to be) refactored.

General comments:

We shouldn't be actively seeking to find new use cases to build but instead invite designers to help contribute to our library.
A review of a layer's closing behavior is needed
A whole pattern flow on how and when a double confirmation would appear would be helpful
Something missing within the review process is to make sure we are adhering to Grommet naming conventions. Left a lot of comments on this.
Some of the use cases did not seem real or applicable, further refinement is needed.

grommet / hpe-design-system