<div dir="ltr"><div class="gmail_quote"><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" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr" style="font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:10pt"><div dir="ltr"><p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">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. </span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">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.</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">1. Has an open-source community of Designers and Developers supporting the library</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">2. It is built with a user-centered approach that utilizes Design Thinking processes that include user testing and heuristic evaluation</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">3. It is compliant with the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines (WCAG).</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">4. The framework can be themed to meet the branding needs of other community members.</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">5. We agreed to and are using Carbon Design System icons</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">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.</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">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</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">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:</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">1. Ability to create and use different themes</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">2. Components have been tested and meet the W3C Web Content Accessibility Guidelines principles</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">of Perceivable, Operable, Understandable, and Robust</span></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" style="background:transparent;margin-top:0pt;margin-bottom:0pt;color:rgb(74,110,224)" target="_blank"><span style="background:transparent;margin-top:0pt;margin-bottom:0pt;color:rgb(74,110,224)">https://www.w3.org/WAI/fundamentals/accessibility-principles/</span></a></p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"> </p>
<p style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt"><span style="color:rgb(28,30,41);background:transparent;margin-top:0pt;margin-bottom:0pt">3. Open-source with an active community</span></p></div></div></div></div></div></div></div></div></div></blockquote><div><br></div><div><br></div><div>As an exercise, I mocked up the proposed Event Logs design using the Carbon Design System. This was a test on the theory of being able to theme and customize Carbon to fit the needs of multiple community members. The resulting design uses lighter colors and rounded edges to achieve a friendly aesthetic. This demonstrates the flexibility that still exists and can be embedded into Carbon using themes, while providing a sturdy foundation of interactions and components to build from. </div><div><br></div><div><a href="https://ibm.invisionapp.com/share/QANZHJKP74E#/319333663_Event_Logs">https://ibm.invisionapp.com/share/QANZHJKP74E#/319333663_Event_Logs </a></div></div></div>