<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Lucida Sans Unicode";
panose-1:2 11 6 2 3 5 4 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle20
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">Thank you, Derick, for sharing this conversation with the larger community. <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">I like the idea of using a design library to improve code consolidation and design efficiency.
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">The Carbon Design Library looks like a great library in terms of fundamentals, but the design style is rather similar to the existing web UI. Since Intel has been working on a new, more modern-looking UI, choosing a design library that
is stylistically similar to the existing UI might not be the best compromise.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">In terms of a design library that matches the style of the web UI we’ve been working on, Bootstrap would be a great choice:
<a href="https://bootstrap-vue.js.org">https://bootstrap-vue.js.org</a> <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">However, I wonder if we could find a happy medium between the two styles? I’ve been looking for websites that have elements of both style preferences -- that include the more modern look (larger elements, rounded corners, light colors),
with the more stable look (dark colors, square elements) – and found these great examples:<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">- Invision App’s website <a href="https://www.invisionapp.com/">
https://www.invisionapp.com/</a><o:p></o:p></p>
<p class="MsoNormal">- Visual Studio Code website <a href="https://code.visualstudio.com/">
https://code.visualstudio.com/</a><o:p></o:p></p>
<p class="MsoNormal">- GitHub website <a href="https://github.com/">https://github.com/</a><o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Perhaps we could look into the design libraries the above websites use?<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Either way – we can work with whatever design library works best for the community. As long as it doesn’t preclude further customization, I’m sure we’ll be able to make things work on our end.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thanks,<o:p></o:p></p>
<p class="MsoNormal">Kathy <o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><a name="_____replyseparator"></a><b>From:</b> openbmc <openbmc-bounces+kathryn.elainex.pine=intel.com@lists.ozlabs.org>
<b>On Behalf Of </b>Derick Montague<br>
<b>Sent:</b> Wednesday, November 20, 2019 1:47 PM<br>
<b>To:</b> openbmc@lists.ozlabs.org<br>
<b>Subject:</b> GUI Component Library<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">We are working to compromise on a component library as we move towards a change to the GUI front-end framework. As discussed
in previous emails to the list, we are planning on updating the BMC UI to use Vue. It is currently written using AngularJS, which will reach the end of its lifecycle on June 30, 2021. <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">With this update, we are looking to select a component library that allows the GUI design/development team and any contributors
to focus more on feature work and less on base-level components. IBM has proposed using the Carbon Design System. Carbon is an open-source library backed by IBM. We are advocating for this library for the following reasons.<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">1. Has an open-source community of Designers and Developers supporting the library<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">2. It is built with a user-centered approach that utilizes Design Thinking processes that include user testing and heuristic
evaluation<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">3. It is compliant with the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines (WCAG).<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">4. The framework can be themed to meet the branding needs of other community members.<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">5. We agreed to and are using Carbon Design System icons<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">6. We are creating custom components using Carbon Design System patterns, e.g. LocaL User Management table. Using the Carbon
Design System would allow us to bring in elements without the need to re-design or develop a new custom component in Vue.<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">We are looking to discuss the use of other libraries and should choose one library. Using more than one library will add complexity
with keeping all the utilized libraries up to date, create additional work to customize the library components to have the same look and feel, and could create confusion determining with components are being used<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">from which library resulting in a lack of consistency within the application. None of the 3rd party libraries will likely meet
all of our needs so when we are evaluating component libraries some of the criteria that need to be met includes:<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">1. Ability to create and use different themes<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">2. Components have been tested and meet the W3C Web Content Accessibility Guidelines principles<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">of Perceivable, Operable, Understandable, and Robust<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" target="_blank"><span style="color:#4A6EE0">https://www.w3.org/WAI/fundamentals/accessibility-principles/</span></a><o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29">3. Open-source with an active community<o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="font-size:10.0pt;font-family:"Lucida Sans Unicode",sans-serif;color:#1C1E29"> <o:p></o:p></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>