fix(pf3): remove inline styles in tabs

Author: rvsia

packages/pf3-component-mapper/src/files/tabs.js

@@ -4,13 +4,15 @@ import PropTypes from 'prop-types';
 import { TabContainer, Nav, NavItem, TabContent, TabPane, Icon } from 'patternfly-react';
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
+import './tabs.scss';
+
 const renderTabHeader = (items, formOptions) =>
   items.map(({ title, name, validateFields = [] }, index) => {
     const errors = formOptions.getState().errors;
     const hasError = validateFields.find((name) => !!get(errors, name));
     return (
       <NavItem key={name} eventKey={index}>
-        {hasError && <Icon style={{ marginRight: 8, color: '#CC0000' }} type="fa" name="exclamation-circle" />}
+        {hasError && <Icon classnName="ddorg__pf3-layout-components__tabs__error" type="fa" name="exclamation-circle" />}
         {title}
       </NavItem>
     );

packages/pf3-component-mapper/src/files/tabs.scss

@@ -0,0 +1,4 @@
+.ddorg__pf3-layout-components__tabs__error {
+    margin-right: 8px;
+    color: #CC0000;
+}

packages/pf3-component-mapper/src/tests/__snapshots__/tabs.test.js.snap

@@ -356,33 +356,18 @@ exports[`<FormTabs /> should render form tabs with error state 1`] = `
                           role="tab"
                         >
                           <Icon
+                            classnName="ddorg__pf3-layout-components__tabs__error"
                             name="exclamation-circle"
-                            style={
-                              Object {
-                                "color": "#CC0000",
-                                "marginRight": 8,
-                              }
-                            }
                             type="fa"
                           >
                             <FontAwesome
+                              classnName="ddorg__pf3-layout-components__tabs__error"
                               name="exclamation-circle"
-                              style={
-                                Object {
-                                  "color": "#CC0000",
-                                  "marginRight": 8,
-                                }
-                              }
                             >
                               <span
                                 aria-hidden={true}
                                 className="fa fa-exclamation-circle"
-                                style={
-                                  Object {
-                                    "color": "#CC0000",
-                                    "marginRight": 8,
-                                  }
-                                }
+                                classnName="ddorg__pf3-layout-components__tabs__error"
                               />
                             </FontAwesome>
                           </Icon>