Notes - Re: GUI Design Workgroup - Today - Wednesday 11/20

[Jandra A]

Hello,

Notes from today's GUI workgroup below:


> - Discuss use of Carbon Design System for icons and components
>
- Intel suggests React Bootstrap; likes Carbon system alerts better. IBM
would propose looking at Vue Bootstrap since we are trying to move the
framework to that. Prefers not to use Carbon because it does not match with
the same modern aesthetic that Intel is looking for. Carbon has very small
text and believes bigger is more modern. Also, Carbon uses square vs
rounded corners and believes, round is more friendly
- Discussed which elements of Carbon could be resolved through styling so
that all contributors can achieve their definition of modernity. Colors and
sizes can be themed.
- Examples of modernity provided by Intel: Salesforce, Salesfusion, Google
Analytics
- Another design system Intel looked at is Salesforce lightning design
system
- Agreed achieving consensus on a style library is the immediate next step
and the discussion will be continued on the mailing list with each party
providing alternatives they would be willing to accept.



> - Discuss framework update from AngularJS to Vue
>
The community has not responded to emails regarding the change. IBM has
started building out a prototype using Carbon components. We need to decide
on a style guide before going down this path too far.



> - Discuss primary navigation changes and collaborative work between Intel
> and IBM
>

- Intel pushed a commit yesterday with an updated navigation. This keeps
the existing background color until we can create theming and resolve color
downstream.
- Discussed active, hover, and focused states. Determined focus and hover
states should be the same. The active state needs a color update to meet
accessibility and so that it stands out more at a glance.
- Agreed the commit does not need to add carets to the navigation pattern
since it is an existing problem with the UI. However, it should be
addressed in the future to give users an affordance of hidden text.
- Intel to make changes and send a screenshot to the email list:
1. Add vertical space above ‘Overview’.
2. Determine a color for the active state.



Next steps (after agreeing on a Design Library)
- Want to discuss header next. Brief discussion occurred in the meeting
regarding the styling of 'Health' and 'Power'. For IBM, these elements
don't look clickable, which reflects a greater need for a consistent
button/link styling that would be applied in this instance. Intel believes
it is not vital that 'Health' and 'Power' are obviously clickable because
it is a shortcut and expects users to use the main navigation to access
these pages.
- Decided on breaking down the commits into 3. First commit the navigation,
then full height, then the header.


https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ozlabs.org/pipermail/openbmc/attachments/20191120/a386faa3/attachment.htm>