<div dir="ltr"><div class="gmail_quote"><div>Hello, </div><div><br></div><div>Notes from today's GUI workgroup below: </div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr"><div>- Discuss use of Carbon Design System for icons and components</div></div></div></blockquote><div>- 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<br>- 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.<br>- Examples of modernity provided by Intel: Salesforce, Salesfusion, Google Analytics<br>- Another design system Intel looked at is Salesforce lightning design system<br>- 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.<br></div><div><br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr">
<div>- Discuss framework update from AngularJS to Vue</div></div></div></blockquote><div>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.<br></div><div><br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr">
<div>- Discuss primary navigation changes and collaborative work between Intel and IBM</div></div></div></blockquote><div><br></div><div>- Intel pushed a commit yesterday with an updated navigation. This keeps the existing background color until we can create theming and resolve color downstream.<br>- 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.<br>- 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.<br>- Intel to make changes and send a screenshot to the email list:<br>1. Add vertical space above ‘Overview’.<br>2. Determine a color for the active state.<br></div><div><br></div><div><br></div><div><br>Next steps (after agreeing on a Design Library) <br>- 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.<br>- Decided on breaking down the commits into 3. First commit the navigation, then full height, then the header.<br></div><div><br></div><div><br></div><div><a href="https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group">https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group</a><br></div><div><br></div><div><br></div><div> </div></div></div>