[CORL-550] More stable css classes (#2515)

* feat: more stable css classes

* chore: renamee ValidationMessageHelper to FormValidationMessage

* chore: Rename FormValidationMessage to FieldValidationMessage

* feat: more css classes, icons use <i> tag

* feat: stable classnames for gdpr features

* feat: more css stable classnames

src/core/client/ui/components/Button/Button.tsx

@@ -110,6 +110,7 @@ export class Button extends React.Component<Props> {
         type={type}
         data-variant={variant}
         data-color={color}
+        data-active={active}
         {...rest}
       />
     );

src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap

@@ -26,6 +26,7 @@ exports[`renders active state 1`] = `
 <ForwardRef(forwardRef)
   className="active"
   classes={Object {}}
+  data-active={true}
   data-color="regular"
   data-variant="regular"
 >

src/core/client/ui/components/Icon/Icon.tsx

@@ -41,7 +41,7 @@ const Icon: FunctionComponent<Props> = props => {
     className
   );
   return (
-    <span
+    <i
       className={rootClassName}
       aria-hidden="true"
       {...rest}

src/core/client/ui/components/Icon/__snapshots__/Icon.spec.tsx.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<span
+<i
   aria-hidden="true"
   className="Icon-root Icon-sm"
 >
   face
-</span>
+</i>
 `;
 
 exports[`renders correctly with specified size 1`] = `
-<span
+<i
   aria-hidden="true"
   className="Icon-root Icon-lg"
 >
   bookmark
-</span>
+</i>
 `;

src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap

@@ -12,12 +12,12 @@ exports[`renders icon 1`] = `
 <div
   className="Message-root Message-colorGrey"
 >
-  <span
+  <i
     aria-hidden="true"
     className="Icon-root Icon-sm MessageIcon-root"
   >
     alert
-  </span>
+  </i>
   Alert Message
 </div>
 `;

src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap

@@ -24,12 +24,12 @@ exports[`renders correctly 1`] = `
       tabIndex={0}
       title="Hide password"
     >
-      <span
+      <i
         aria-hidden="true"
         className="Icon-root Icon-sm"
       >
         visibility
-      </span>
+      </i>
     </div>
   </div>
 </div>
@@ -59,12 +59,12 @@ exports[`renders correctly 2`] = `
       tabIndex={0}
       title="Show password"
     >
-      <span
+      <i
         aria-hidden="true"
         className="Icon-root Icon-sm"
       >
         visibility_off
-      </span>
+      </i>
     </div>
   </div>
 </div>

src/core/client/ui/components/SelectField/__snapshots__/SelectField.spec.tsx.snap

@@ -19,12 +19,12 @@ exports[`renders correctly 1`] = `
     aria-hidden={true}
     className="SelectField-afterWrapper SelectField-afterWrapperDisabled"
   >
-    <span
+    <i
       aria-hidden="true"
       className="Icon-root Icon-sm"
     >
       expand_more
-    </span>
+    </i>
   </span>
 </span>
 `;

src/core/client/ui/components/Tabs/TabContent.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 export interface TabContentProps {
@@ -22,7 +23,7 @@ const TabContent: FunctionComponent<TabContentProps> = props => {
         .map((child: React.ReactElement<any>, i) =>
           React.cloneElement(child, {
             tabID: child.props.tabID ? child.props.tabID : i,
-            className,
+            className: cn(className, child.props.className),
           })
         )}
     </>

src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <section
   aria-labelledby="tab-one"
+  className=""
   id="tabPane-one"
   role="tabpanel"
 >

src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap

@@ -4,12 +4,12 @@ exports[`renders correctly 1`] = `
 <div
   className="Message-root Message-colorError custom"
 >
-  <span
+  <i
     aria-hidden="true"
     className="Icon-root Icon-sm MessageIcon-root"
   >
     warning
-  </span>
+  </i>
   Hello World
 </div>
 `;